AIManage/src/views/manage/calculateParam/edit.vue

<!-- 用户管理 -->
<template>
  <div class="app-container model-detail">
    <!-- 用户新增/编辑表单 -->
    <el-card>
      <template #header
        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />
        算子参数基本信息
      </template>
      <el-row>
        <el-col :lg="12" :xs="24">
          <el-form
            ref="userFormRef"
            :model="formData"
            :rules="rules"
            v-loading="loading"
            label-width="80px"
          >
            <el-form-item label="算子类型" prop="roleIds">
              <el-row style="width: 100%">
                <el-col :span="12">
                  <el-select
                    v-model="formData.roleIds"
                    placeholder="请选择算子类型"
                    style="width: 100%"
                  >
                    <el-option label="前置处理" value="1" />
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select
                    v-model="formData.roleIds2"
                    placeholder="请选择算子类型"
                    style="width: 100%"
                  >
                    <el-option label="缩放算子" value="0" />
                    <el-option label="图像分类" value="1" />
                    <el-option label="目标检测" value="2" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="适配硬件" prop="mobile">
              <el-select
                v-model="formData.roleIds"
                placeholder="请选择适配硬件"
                style="width: 100%"
              >
                <el-option label="RGB24格式转换算子参数" value="1" />
                <el-option label="图像缩放算子参数" value="2" />
                <el-option label="人脸识别算子" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="算子名称" prop="roleIdsd">
              <el-select
                v-model="formData.roleIdsd"
                placeholder="请选择算子名称"
                style="width: 100%"
              >
                <el-option label="我是刚添加的算子" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="程序版本" prop="mobile">
              <el-input
                v-model="formData.mobile"
                placeholder="请输入参数说明"
                maxlength="11"
              />
            </el-form-item>
            <el-form-item label="参数文件" prop="email">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <el-button type="primary"
                  ><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
                  >选择文件</el-button
                >
                <template #tip>
                  <div class="el-upload__tip">请上传大小不超过 <strong style="color: red">10M</strong>，格式为
                      <strong style="color: red">tar</strong> 的文件</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24">
          <div style="padding-left: 35px" v-if="formData.roleIdsd!=null">
            <el-form
              ref="userFormRef"
              :model="formData"
              v-loading="loading"
              label-width="100px"
              size="small"
            >
              <el-divider content-position="left"
                ><strong style="color: #409eff">算子参数信息</strong></el-divider
              >
                <el-input
                v-model="formData.usernamedd2"
                :disabled="true"
                placeholder="请输入数据集名称"
                :rows="12"
                type="textarea"
              />
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card-footer">
      <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
      <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "User",
  inheritAttrs: false,
});

import UserAPI from "@/api/user";
import { UserForm } from "@/api/user/model";

const router = useRouter();
const loading = ref(false); //  加载状态

const calTypeList = ref<OptionType[]>(); // 角色下拉数据源

// 用户表单数据
const formData = reactive<UserForm>({
  status: 1,
  roleIdsd:null,
  usernamedd2: `{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}
{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}
{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}`,
});

// 校验规则
const rules = reactive({
  username: [{ required: true, message: "不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
  deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
  roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  loading.value = true;
  setTimeout(() => {
    ElMessage.success("保存成功");
    loading.value = false;
    closeBack();
  }, 1000);
}, 3000);

/** 返回默认页面 */
function closeBack() {
  router.replace({ path: "/operatorLibrary/calculateParam" });
}

onMounted(() => {
  //handleQuery();
});
</script>
<style scoped lang="scss">
.model-detail {
  :deep(.el-card__header) {
    padding: 8px 4px;
    display: flex;
    align-items: center;
  }
}
.sp-file {
  color: #29d;
}
.tb-base-info {
  line-height: 30px;
}
:deep(.svg-icon) {
  margin-right: 8px;
}
.card-footer {
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;
  :deep(.el-card__body) {
    padding: 10px;
    .el-pagination {
      justify-content: end;
    }
  }
}
</style>