AIManage/src/views/manage/datas/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-form
        ref="userFormRef"
        :model="formData"
        :rules="rules"
        v-loading="loading"
        label-width="100px"
      >
        <el-row style="width: 100%">
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集名称" prop="username">
              <el-input
                v-model="formData.username"
                :readonly="!!formData.id"
                placeholder="请输入数据集名称"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集版本" prop="roleIds">
              <el-input
                v-model="formData.roleIds"
                :readonly="!!formData.id"
                placeholder="请输入数据集版本"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :lg="12" :xs="24">
            <el-form-item label="适合任务" prop="username1">
              <el-input
                v-model="formData.usernam3e"
                :readonly="!!formData.id"
                placeholder="请输入适合任务"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据标签" prop="roleId2s">
              <el-input
                v-model="formData.roleIds3"
                :readonly="!!formData.id"
                placeholder="请输入数据标签"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集格式" prop="username1">
              <el-select
                v-model="formData.roleIds2"
                placeholder="请选择数据集格式"
                style="width: 100%"
              >
              <el-option label="PNG" value="0" />
                <el-option label="jPG" value="1" />
                <el-option label="BMP" value="2" />
                <el-option label="GRAY8" value="3" />
                <el-option label="GRAY16" value="4" />
                <el-option label="RGB24" value="5" />
                <el-option label="H264" value="6" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24">
            <el-form-item label="是否已标注" prop="rolfeId2s">
              <el-select
                v-model="formData.rolfeId2s"
                placeholder="请选择是否已标注"
                style="width: 100%"
              >
                <el-option label="是" value="1" />
                <el-option label="否" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :lg="12" :xs="24">
            <el-form-item label="数据集名称" prop="usernamedd">
              <el-input
                v-model="formData.usernamedd"
                :readonly="!!formData.id"
                placeholder="请输入数据集名称"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xs="24"> </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 12px;">
      <template #header
        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />图片信息<strong
          style="color: #409eff"
          >（15）</strong
        >
      </template>
      <el-form>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :file-list="imgList"
          :limit="10"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="i-ep-plus"></i>
        </el-upload>
      </el-form>
    </el-card>
    <el-card class="card-footer">
        <el-button type="primary" @click="handleUpload"><i-ep-upload-filled />上传图片</el-button>
        <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
    >
      <!-- 用户新增/编辑表单 -->
      <el-form
        v-if="dialog.type === 'user-form'"
        ref="userFormRef"
        :model="formData"
        label-width="80px"
      >
      <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
          >
        </el-upload>

        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :file-list="imgList2"
          :limit="10"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="i-ep-plus"></i>
        </el-upload>
      </el-form>

      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialog.visible=false">开始上传</el-button>
          <el-button @click="dialog.visible=false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </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,
});

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 800,
  title: "",
});

// 校验规则
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 imgList = [
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
];

const imgList2 = [
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "demo.jepg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  }
];

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

/**
 * 打开弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 * @param id 用户ID
 */
 async function handleUpload() {
  dialog.visible = true;
  dialog.title = "上传标注图片";
  dialog.width = 880;
}

/** 返回默认页面 */
function closeBack() {
  router.push({ path: "/dataMgr/datas" });
}

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>
<style scope>
.el-upload--picture-card{
  display: none !important;
}
.dialog-footer{
  text-align: center;
}
</style>