src/views/model/mpk/file/MpkForm.vue

@@ -13,8 +13,23 @@
      >
        <el-divider content-position="left">模型信息</el-divider>
        <el-row :gutter="8">
          <el-col :span="20">
            <el-form-item label="模型名称" prop="pyName">
          <el-col :span="12">
            <el-form-item label="模型类型" prop="pyType">
              <el-radio-group v-model="formData.pyType" @change="pyTypeChange">
                <el-radio-button :disabled="actionType == 'edit'"
                  v-for="dict in getDictOptions(DICT_TYPE.MODEL_TYPE)"
                  :key="dict.label"
                  :label="dict.value"
                >
                  {{ dict.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="模型文件" prop="pyName">
              <el-input disabled v-model="formData.pyName" placeholder=""/>
            </el-form-item>
          </el-col>
@@ -26,75 +41,90 @@
              :action="importUrl"
              :auto-upload="true"
              :disabled="uploadLoading"
              v-loading="uploadLoading"
              :before-upload="beforeUpload"
              :headers="uploadHeaders"
              :on-error="submitFormError"
              :on-success="submitFormSuccess"
              accept=".pyd"
              accept=".py"
            >
              <el-button type="primary">
                <Icon icon="ep:upload"/>
                模型上传
              </el-button>
              <el-tooltip content="上传.py算法文件" placement="top" effect="light">
                <el-button type="primary">
                  <Icon icon="ep:upload"/>
                  模型上传
                </el-button>
              </el-tooltip>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="模型中文名称" prop="pyChineseName">
            <el-form-item label="模型名称" prop="pyChineseName">
              <el-input v-model="formData.pyChineseName" placeholder=""/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="模型类型" prop="pyType">
              <el-select
                v-model="formData.pyType"
                placeholder="请选择"
                @change="pyTypeChange"
              >
            <el-form-item label="包名" prop="pkgName">
              <el-select v-model="formData.pkgName" clearable filterable placeholder="请选择包名">
                <el-option
                  v-for="dict in getDictOptions(DICT_TYPE.MODEL_TYPE)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
                  v-for="item in pkgNameList"
                  :key="item.packName"
                  :label="item.packName"
                  :value="item.packName"
                >
                  <span style="float: left">{{ item.packName}}</span>
                  <span
                    style="
                      float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;">
                    {{ item.packDesc}}
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="包名" prop="pkgName">
              <el-input v-model="formData.pkgName" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模型路径" prop="pyModule">
              <el-input v-model="formData.pyModule" placeholder=""/>
            <el-form-item label="所属目录" prop="menuAndGroup">
              <el-cascader
                style="width: 100%;"
                v-model="formData.menuAndGroup"
                :options="treeData"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="所属菜单" prop="menuName">
              <el-input v-model="formData.menuName" placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属组" prop="groupName">
              <el-input v-model="formData.groupName" placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item label="icon" prop="icon">
              <el-input v-model="formData.icon" placeholder=""/>
            <el-form-item label="图标" prop="icon">
              <el-select v-model="formData.icon" clearable filterable placeholder="请选择图标">
                <el-option
                  v-for="item in iconList"
                  :key="item.iconName"
                  :label="item.iconName"
                  :value="item.iconName"
                >
                  <span style="float: left">{{ item.iconName}}</span>
                  <span
                      style="
                      float: right;
                      color: var(--el-text-color-secondary);
                      font-size: 13px;">
                    <img :src="staticDir + 'SimtreeUnitImage/' + item.iconName" style="height: 24px;" :alt=" item.iconDesc" />
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" placeholder="" type="textarea"/>
            </el-form-item>
@@ -174,27 +204,13 @@
                  <el-table-column align="center" label="参数类型" prop="valueType"/>
                  <el-table-column align="center" label="最大值" prop="max"/>
                  <el-table-column align="center" label="最小值" prop="min"/>
                  <!--                <el-table-column align="center" label="选项" width="50">-->
                  <!--                  <template #default="props">-->
                  <!--                    <div v-if="props.row.type === 'select'">-->
                  <!--                      <el-popover placement="left" :width="400">-->
                  <!--                        <template #reference>-->
                  <!--                          <Icon icon="ep:more" />-->
                  <!--                        </template>-->
                  <!--                        <el-table width="50%" :data="props.row.settingSelects" border size="small">-->
                  <!--                          <el-table-column align="center" label="key" prop="selectKey"/>-->
                  <!--                          <el-table-column align="center" label="name" prop="name"/>-->
                  <!--                        </el-table>-->
                  <!--                      </el-popover>-->
                  <!--                    </div>-->
                  <!--                  </template>-->
                  <!--                </el-table-column>-->
                  <el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
                    <template #default="scope">
                      <el-button
                        @click="updateSetting(scope.row)"
                        key="danger"
                        type="danger"
                        type="primary"
                        :disabled="scope.row.settingKey === 'pyFile'"
                        link
                      >修改
                      </el-button>
@@ -202,6 +218,7 @@
                        @click="deleteSetting(props.row.methodSettings,scope.$index)"
                        key="danger"
                        type="danger"
                        :disabled="scope.row.settingKey === 'pyFile'"
                        link
                      >删除
                      </el-button>
@@ -234,8 +251,11 @@
  <SettingForm ref="settingFormRef"/>
</template>
<script lang="ts" setup>
  import {DICT_TYPE, getDictOptions} from '@/utils/dict'
  import {DICT_TYPE, getDictOptions, getIntDictOptions} from '@/utils/dict'
  import * as MpkApi from '@/api/model/mpk/mpk'
  import * as MpkIconApi from '@/api/model/mpk/icon'
  import * as MpkPackApi from '@/api/model/mpk/pack'
  import * as MpkMenuApi from '@/api/model/mpk/menu'
  import {FormRules} from 'element-plus'
  import {getAccessToken, getTenantId} from "@/utils/auth";
  import SettingForm from './SettingForm.vue'
@@ -244,12 +264,19 @@
  const {t} = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const title = ref('') // 弹窗的标题
  const actionType = ref('') // 操作类型
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const route = useRoute() // 路由
  const router = useRouter();

  /** settingForm弹窗 */
  const staticDir = ref(import.meta.env.VITE_STATIC_DIR)

  const treeData = ref([])
  const iconList = ref([] as MpkIconApi.MpkIconVO)
  const pkgNameList = ref([] as MpkPackApi.MpkPackVO)

/** settingForm弹窗 */
  const settingFormRef = ref()
  // 添加setting
  const addSetting = (methodSettings) => {
@@ -259,6 +286,10 @@
  // 修改setting
  const updateSetting = (info) => {
    settingFormRef.value.open(info)
  }
  // 删除setting
  const deleteSetting = (methodSettings,index) => {
    methodSettings.splice(index, 1);
  }

  const methodExpandedRowKeys = ref([])
@@ -271,7 +302,7 @@
    pyChineseName: undefined,
    pyName: undefined,
    pkgName: undefined,
    pyType: undefined,
    pyType: 'predict',
    className: undefined,
    pyModule: undefined,
    icon: undefined,
@@ -280,6 +311,7 @@
    remark: undefined,
    modelMethods: [],
    filePath: undefined,
    menuAndGroup: [],
  })

  const formRules = reactive<FormRules>({
@@ -298,10 +330,7 @@
    className: [
      {required: true, message: '类名不能为空', trigger: 'blur'}
    ],
    pyModule: [
      {required: true, message: '模型路径不能为空', trigger: 'blur'}
    ],
    menuName: [
    menuAndGroup: [
      {required: true, message: '所属目录不能为空', trigger: 'blur'}
    ],
  })
@@ -349,7 +378,7 @@
      pyName: undefined,
      pyChineseName: undefined,
      pkgName: undefined,
      pyType: undefined,
      pyType: 'predict',
      className: undefined,
      pyModule: undefined,
      icon: undefined,
@@ -360,6 +389,10 @@
      filePath: undefined
    }
    formRef.value?.resetFields()
  }

  const handleChange = function () {

  }

  const addRow = function () {
@@ -401,7 +434,7 @@
    }
    const data = response.data;
    formData.value.filePath = data.filePath
    formData.value.pyName = data.fileName.replace('.pyd', '')
    formData.value.pyName = data.fileName
    message.success('上传成功')
    uploadLoading.value = false
  }
@@ -409,18 +442,30 @@
  onMounted(async () => {
    const id = formData.value.id;
    const type = id ? 'edit' : 'create'
    actionType.value = type
    title.value = t('action.' + type)
    formType.value = type
    resetForm()
    pyTypeChange()
    // 修改时，设置数据
    if (id) {
      formLoading.value = true
      try {
        debugger
        formData.value = await MpkApi.getMpk(id)
        debugger
      } finally {
        formLoading.value = false
      }
    }

    // 加载图标列表
    iconList.value = await MpkIconApi.getList()

    pkgNameList.value = await MpkPackApi.getList()

    // 加载菜单，分组
    treeData.value = await MpkMenuApi.getTree()
  })

  const pyTypeChange = () => {
@@ -431,7 +476,7 @@
          methodName: 'train',
          dataLength: 1,
          model: 0,
          resultKey: undefined,
          resultKey: 'result',
          methodSettings: []
        },
        {
@@ -444,7 +489,6 @@
          methodSettings: []
        }
      ]
      debugger
    }else {
      formData.value.modelMethods = [
        {