提交代码

src/api/menu/index.ts

@@ -145,11 +145,11 @@ class MenuAPI {
           },
           children: [
             {
-              path: "operatorLibrary",
+              path: "calculate",
-              component: "/operatorLibrary/index",
+              component: "manage/calculate/index",
-              name: "operatorLibrary",
+              name: "calculate",
               meta: {
-                title: "算子库管理1",
+                title: "算子库管理",
                 icon: "user",
                 hidden: false,
                 roles: ["ADMIN", "GUEST"],
@@ -157,19 +157,19 @@ class MenuAPI {
                 alwaysShow: false,
               },
             },
-            {
+            // {
-              path: "operatorLibrary2",
+            //   path: "operatorLibrary2",
-              component: "/operatorLibrary/index2",
+            //   component: "/operatorLibrary/index2",
-              name: "operatorLibrary2",
+            //   name: "operatorLibrary2",
-              meta: {
+            //   meta: {
-                title: "算子库管理2",
+            //     title: "算子库管理2",
-                icon: "role",
+            //     icon: "role",
-                hidden: false,
+            //     hidden: false,
-                roles: ["ADMIN6", "GUEST", "ADMIN"],
+            //     roles: ["ADMIN6", "GUEST", "ADMIN"],
-                keepAlive: true,
+            //     keepAlive: true,
-                alwaysShow: false,
+            //     alwaysShow: false,
-              },
+            //   },
-            },
+            // },
           ],
         },
         {

src/views/manage/calculate/index.vue

@@ -0,0 +1,626 @@
+<!-- 用户管理 -->
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="算子名称" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="请输入算子名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="算子类型" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="全部类型"
+            clearable
+            style="width: 200px"
+          >
+            <el-option label="启用" value="1" />
+            <el-option label="禁用" value="0" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
+          <el-button @click="resetQuery">
+            <i-ep-refresh />
+            重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" class="table-container">
+      <template #header>
+        <div class="flex justify-between">
+          <div>
+            <el-button
+              type="success"
+              @click="openDialog('user-form')"
+              ><i-ep-plus />添加算子</el-button
+            >
+            <el-button
+              type="primary"
+              :disabled="removeIds.length === 0"
+              @click="handleDelete()"
+              ><i-ep-delete />算子例程下载</el-button
+            >
+          </div>
+          <div>
+            <el-dropdown split-button>
+              导入
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="downloadTemplate">
+                    <i-ep-download />下载模板</el-dropdown-item
+                  >
+                  <el-dropdown-item @click="openDialog('user-import')">
+                    <i-ep-top />导入数据</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-button class="ml-3" @click="handleExport"
+              ><template #icon><i-ep-download /></template>导出</el-button
+            >
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        stripe
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column label="算子名称" align="center" prop="szmc" width="250" />
+        <el-table-column label="算子类型" align="center" prop="szlx" />
+        <el-table-column label="版本" width="180" align="center" prop="bb" />
+        <el-table-column label="适配硬件" width="280" align="center" prop="spyj" />
+        <el-table-column label="互联创建时间" width="180" align="center" prop="hlcjsj" />
+        <el-table-column label="操作" fixed="right" width="220">
+          <template #default="scope">
+            <el-button
+              type="warning"
+              size="small"
+              @click="openDialog('user-form', scope.row.id)"
+              ><i-ep-edit />查看</el-button
+            >
+            <el-button
+              type="danger"
+              size="small"
+              @click="resetPassword2(scope.row)"
+              ><i-ep-delete />删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </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"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-form-item label="算子名称" prop="username">
+          <el-input
+            v-model="formData.username"
+            :readonly="!!formData.id"
+            placeholder="请输入算子名称"
+          />
+        </el-form-item>
+        <el-form-item label="算子版本" prop="nickname">
+          <el-input v-model="formData.nickname" placeholder="请输入算子版本" />
+        </el-form-item>
+        
+        <el-form-item label="算子说明" prop="mobile">
+          <el-input
+            v-model="formData.mobile"
+            :rows="2"
+            type="textarea"
+            placeholder="请输入算子说明"
+            maxlength="11"
+          />
+        </el-form-item>
+        <el-form-item label="算子类型" prop="roleIds">
+          <el-select v-model="formData.roleIds" multiple placeholder="请选择算子类型">
+            <el-option
+              v-for="item in roleList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="适配硬件" prop="mobile">
+          <el-input
+            v-model="formData.mobile"
+            :rows="3"
+            type="textarea"
+            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">
+        json files with a size less than 10M.
+      </div>
+    </template>
+  </el-upload>
+        </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">
+        json files with a size less than 10M.
+      </div>
+    </template>
+  </el-upload>
+        </el-form-item>
+      </el-form>
+
+      <!-- 用户导入表单 -->
+      <el-form
+        v-else-if="dialog.type === 'user-import'"
+        :model="importData"
+        label-width="100px"
+      >
+        <el-form-item label="部门">
+          <el-tree-select
+            v-model="importData.deptId"
+            placeholder="请选择部门"
+            :data="deptList"
+            filterable
+            check-strictly
+          />
+        </el-form-item>
+
+        <el-form-item label="Excel文件">
+          <el-upload
+            ref="uploadRef"
+            action=""
+            drag
+            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+            :limit="1"
+            :auto-upload="false"
+            :file-list="importData.fileList"
+            :on-change="handleFileChange"
+            :on-exceed="handleFileExceed"
+          >
+            <el-icon class="el-icon--upload">
+              <i-ep-upload-filled />
+            </el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "User",
+  inheritAttrs: false,
+});
+
+import UserAPI from "@/api/user";
+import DeptAPI from "@/api/dept";
+import RoleAPI from "@/api/role";
+
+import { UserForm, UserQuery, UserPageVO } from "@/api/user/model";
+import type { UploadInstance } from "element-plus";
+import { genFileId } from "element-plus";
+import MultiUpload from "@/components/Upload/MultiUpload.vue";
+
+const queryFormRef = ref(ElForm); // 查询表单
+const userFormRef = ref(ElForm); // 用户表单
+const uploadRef = ref<UploadInstance>(); // 上传组件
+
+const loading = ref(false); //  加载状态
+const removeIds = ref([]); // 删除用户ID集合 用于批量删除
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const dateTimeRange = ref("");
+const total = ref(0); // 数据总数
+const pageData = ref<UserPageVO[]>(); // 用户分页数据
+const deptList = ref<OptionType[]>(); // 部门下拉数据源
+const roleList = ref<OptionType[]>(); // 角色下拉数据源
+
+watch(dateTimeRange, (newVal) => {
+  if (newVal) {
+    queryParams.startTime = newVal[0];
+    queryParams.endTime = newVal[1];
+  }
+});
+
+const tableData = [
+  {
+    szmc: '图像分类算子名称',
+    szlx: '图像分类',
+    bb: '1.2',
+    spyj: '进行19种类型的图像分类模型',
+    hlcjsj: '2024-05-03',
+  },
+  {
+    szmc: '目标检测算子名称',
+    szlx: '目标检测',
+    bb: '1.5',
+    spyj: '人员检测的模型',
+    hlcjsj: '2024-06-07',
+  },
+  {
+    szmc: '人脸识别算子名称',
+    szlx: '人脸识别',
+    bb: '1.0.0',
+    spyj: '人脸识别',
+    hlcjsj: '2024-06-08',
+  },
+  {
+    szmc: '数据分析算子名称',
+    szlx: '数据分析',
+    bb: '1.6.1',
+    spyj: '进行数据分离ETL工具',
+    hlcjsj: '2024-06-08',
+  },
+]
+
+// 弹窗对象
+const dialog = reactive({
+  visible: false,
+  type: "user-form",
+  width: 800,
+  title: "",
+});
+
+// 用户表单数据
+const formData = reactive<UserForm>({
+  status: 1,
+});
+
+// 用户导入数据
+const importData = reactive({
+  deptId: undefined,
+  file: undefined,
+  fileList: [],
+});
+
+// 校验规则
+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",
+    },
+  ],
+});
+
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  UserAPI.getPage(queryParams)
+    .then((data) => {
+      console.log("handleQuery", data);
+      pageData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/** 重置查询 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  dateTimeRange.value = "";
+  queryParams.pageNum = 1;
+  queryParams.deptId = undefined;
+  queryParams.startTime = undefined;
+  queryParams.endTime = undefined;
+  handleQuery();
+}
+
+/** 行选中 */
+function handleSelectionChange(selection: any) {
+  removeIds.value = selection.map((item: any) => item.id);
+}
+
+/** 重置密码 */
+function resetPassword(row: { [key: string]: any }) {
+  ElMessageBox.prompt("请输入用户「" + row.username + "」的新密码", "重置密码", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+  }).then(({ value }) => {
+    if (!value || value.length < 6) {
+      // 检查密码是否为空或少于6位
+      ElMessage.warning("密码至少需要6位字符，请重新输入");
+      return false;
+    }
+    UserAPI.updatePassword(row.id, value).then(() => {
+      ElMessage.success("密码重置成功，新密码是：" + value);
+    });
+  });
+}
+
+/** 重置密码 */
+function resetPassword2(row: { [key: string]: any }) {
+  
+  ElMessageBox.confirm("确认删除算子?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    ElMessage.success("删除成功");
+  });
+}
+
+/** 加载角色下拉数据源 */
+async function loadRoleOptions() {
+  RoleAPI.getOptions().then((data) => {
+    roleList.value = data;
+  });
+}
+
+/** 加载部门下拉数据源 */
+async function loadDeptOptions() {
+  DeptAPI.getOptions().then((data) => {
+    deptList.value = data;
+  });
+}
+
+/**
+ * 打开弹窗
+ *
+ * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
+ * @param id 用户ID
+ */
+async function openDialog(type: string, id?: number) {
+  dialog.visible = true;
+  dialog.type = type;
+  if (dialog.type === "user-form") {
+    // 用户表单弹窗
+    //await loadDeptOptions();
+    //await loadRoleOptions();
+    if (id) {
+      dialog.title = "修改算子";
+      // UserAPI.getFormData(id).then((data) => {
+      //   Object.assign(formData, { ...data });
+      // });
+    } else {
+      dialog.title = "新增算子";
+    }
+  } else if (dialog.type === "user-import") {
+    // 用户导入弹窗
+    dialog.title = "导入算子";
+    dialog.width = 600;
+    //loadDeptOptions();
+  }
+}
+
+/**
+ * 关闭弹窗
+ *
+ * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
+ */
+function closeDialog() {
+  dialog.visible = false;
+  if (dialog.type === "user-form") {
+    userFormRef.value.resetFields();
+    userFormRef.value.clearValidate();
+
+    formData.id = undefined;
+    formData.status = 1;
+  } else if (dialog.type === "user-import") {
+    importData.file = undefined;
+    importData.fileList = [];
+  }
+}
+
+/** 表单提交 */
+const handleSubmit = useThrottleFn(() => {
+  if (dialog.type === "user-form") {
+    userFormRef.value.validate((valid: any) => {
+      if (valid) {
+        const userId = formData.id;
+        loading.value = true;
+        if (userId) {
+          UserAPI.update(userId, formData)
+            .then(() => {
+              ElMessage.success("修改用户成功");
+              closeDialog();
+              resetQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          UserAPI.add(formData)
+            .then(() => {
+              ElMessage.success("新增用户成功");
+              closeDialog();
+              resetQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
+    });
+  } else if (dialog.type === "user-import") {
+    if (!importData?.deptId) {
+      ElMessage.warning("请选择部门");
+      return false;
+    }
+    if (!importData?.file) {
+      ElMessage.warning("上传Excel文件不能为空");
+      return false;
+    }
+    UserAPI.import(importData?.deptId, importData?.file).then((data) => {
+      ElMessage.success("导入用户成功");
+      closeDialog();
+      resetQuery();
+    });
+  }
+}, 3000);
+
+/** 删除用户 */
+function handleDelete(id?: number) {
+  const userIds = [id || removeIds.value].join(",");
+  if (!userIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除用户?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    UserAPI.deleteByIds(userIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
+}
+
+/** 下载导入模板 */
+function downloadTemplate() {
+  UserAPI.downloadTemplate().then((response: any) => {
+    const fileData = response.data;
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
+  });
+}
+
+/** Excel文件 Change */
+function handleFileChange(file: any) {
+  importData.file = file.raw;
+}
+
+/** Excel文件 Exceed  */
+function handleFileExceed(files: any) {
+  uploadRef.value!.clearFiles();
+  const file = files[0];
+  file.uid = genFileId();
+  uploadRef.value!.handleStart(file);
+  importData.file = file;
+}
+
+/** 导出用户 */
+function handleExport() {
+  UserAPI.export(queryParams).then((response: any) => {
+    const fileData = response.data;
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
+  });
+}
+
+onMounted(() => {
+  //handleQuery();
+});
+</script>