From ca21f99a22f47b4ae295e1c5acea3d6d35917237 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E7=8E=89=E7=90=A6?=
 <7507756+jiang_yuqi@user.noreply.gitee.com>
Date: Mon, 17 Jun 2024 23:13:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/menu/index.ts                     |  54 ++-
 src/views/manage/calculate/edit.vue       | 199 +++++++++
 src/views/manage/calculate/index.vue      | 487 +++-------------------
 src/views/manage/calculateParam/edit.vue  | 168 ++++++++
 src/views/manage/calculateParam/index.vue | 231 ++++++++++
 5 files changed, 685 insertions(+), 454 deletions(-)
 create mode 100644 src/views/manage/calculate/edit.vue
 create mode 100644 src/views/manage/calculateParam/edit.vue
 create mode 100644 src/views/manage/calculateParam/index.vue

diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index be46b8a..45e9a88 100644
--- a/src/api/menu/index.ts
+++ b/src/api/menu/index.ts
@@ -149,7 +149,7 @@ class MenuAPI {
               component: "manage/calculate/index",
               name: "calculate",
               meta: {
-                title: "算子库管理",
+                title: "算子管理",
                 icon: "user",
                 hidden: false,
                 roles: ["ADMIN", "GUEST"],
@@ -157,19 +157,45 @@ class MenuAPI {
                 alwaysShow: false,
               },
             },
-            // {
-            //   path: "operatorLibrary2",
-            //   component: "/operatorLibrary/index2",
-            //   name: "operatorLibrary2",
-            //   meta: {
-            //     title: "算子库管理2",
-            //     icon: "role",
-            //     hidden: false,
-            //     roles: ["ADMIN6", "GUEST", "ADMIN"],
-            //     keepAlive: true,
-            //     alwaysShow: false,
-            //   },
-            // },
+            {
+              path: "calculateEdit",
+              component: "manage/calculate/edit",
+              name: "calculateEdit",
+              meta: {
+                title: "算子编辑",
+                icon: "user",
+                hidden: true,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
+            },
+            {
+              path: "calculateParam",
+              component: "manage/calculateParam/index",
+              name: "calculateParam",
+              meta: {
+                title: "算子参数管理",
+                icon: "user",
+                hidden: false,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
+            },
+            {
+              path: "calculateParamEdit",
+              component: "manage/calculateParam/edit",
+              name: "calculateParamEdit",
+              meta: {
+                title: "算子参数编辑",
+                icon: "user",
+                hidden: true,
+                roles: ["ADMIN", "GUEST"],
+                keepAlive: true,
+                alwaysShow: false,
+              },
+            },
           ],
         },
         {
diff --git a/src/views/manage/calculate/edit.vue b/src/views/manage/calculate/edit.vue
new file mode 100644
index 0000000..8e5193f
--- /dev/null
+++ b/src/views/manage/calculate/edit.vue
@@ -0,0 +1,199 @@
+<!-- 用户管理 -->
+<template>
+  <div class="app-container">
+    <!-- 用户新增/编辑表单 -->
+    <el-card shadow="never" class="table-container">
+      <template #header> 新增算子 </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="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-row style="width:100%">
+                <el-col :span="12">
+                  <el-select
+                    v-model="formData.roleIds"
+                    placeholder="请选择算子类型"
+                    style="width: 100%"
+                  >
+                    <el-option label="图像分类" value="1" />
+                    <el-option label="目标检测" value="2" />
+                  </el-select>
+                </el-col>
+                <el-col :span="12">
+                  <el-select
+                    v-model="formData.roleIds"
+                    placeholder="请选择算子类型"
+                    style="width: 100%"
+                  >
+                    <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-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">tar files with a size less than 10M.</div>
+                </template>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :lg="12" :xs="24">
+          <div style="padding-left: 35px">
+            <el-divider content-position="left"
+              ><strong style="color: #409eff">算子参数</strong></el-divider
+            >
+            <el-table :data="list" style="width: 100%" stripe>
+              <el-table-column prop="csmc" label="参数名称"> </el-table-column>
+              <el-table-column prop="csmc" label="参数描述"> </el-table-column>
+              <el-table-column label="操作" fixed="right" width="120">
+                <template #default="scope">
+                  <el-button type="warning" size="small"><i-ep-edit />查看参数</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-card class="button-scope">
+      <div class="buttonml-55">
+        <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
+        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
+      </div>
+    </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,
+});
+
+// 校验规则
+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 list = [
+  {
+    csmc: "图像分类算子名称",
+    csms: "进行19种类型的图像分类模型",
+  },
+  {
+    csmc: "目标检测算子名称",
+    csms: "人员检测的模型",
+  },
+];
+
+/** 表单提交 */
+const handleSubmit = useThrottleFn(() => {
+  loading.value = true;
+  setTimeout(() => {
+    ElMessage.success("修改用户成功");
+    loading.value = false;
+    closeBack();
+  }, 1000);
+}, 3000);
+
+/** 返回默认页面 */
+function closeBack() {
+  router.replace({ path: "/operatorLibrary/calculate" });
+}
+
+onMounted(() => {
+  //handleQuery();
+});
+</script>
+<style scope>
+.button-scope {
+  position: fixed;
+  width: calc(100% - 220px);
+  bottom: 0px;
+}
+.buttonml-55 {
+  margin-left: 55px;
+}
+</style>
diff --git a/src/views/manage/calculate/index.vue b/src/views/manage/calculate/index.vue
index 83eb992..256b760 100644
--- a/src/views/manage/calculate/index.vue
+++ b/src/views/manage/calculate/index.vue
@@ -12,7 +12,6 @@
             @keyup.enter="handleQuery"
           />
         </el-form-item>
-
         <el-form-item label="算子类型" prop="status">
           <el-select
             v-model="queryParams.status"
@@ -20,11 +19,11 @@
             clearable
             style="width: 200px"
           >
-            <el-option label="启用" value="1" />
-            <el-option label="禁用" value="0" />
+            <el-option label="图像分类" value="1" />
+            <el-option label="目标检测" value="2" />
+            <el-option label="人脸识别" value="3" />
           </el-select>
         </el-form-item>
-
         <el-form-item>
           <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
           <el-button @click="resetQuery">
@@ -39,9 +38,7 @@
       <template #header>
         <div class="flex justify-between">
           <div>
-            <el-button
-              type="success"
-              @click="openDialog('user-form')"
+            <el-button type="success" @click="openDialog('user-form')"
               ><i-ep-plus />添加算子</el-button
             >
             <el-button
@@ -51,7 +48,7 @@
               ><i-ep-delete />算子例程下载</el-button
             >
           </div>
-          <div>
+          <!-- <div>
             <el-dropdown split-button>
               导入
               <template #dropdown>
@@ -68,7 +65,7 @@
             <el-button class="ml-3" @click="handleExport"
               ><template #icon><i-ep-download /></template>导出</el-button
             >
-          </div>
+          </div> -->
         </div>
       </template>
 
@@ -91,10 +88,7 @@
               @click="openDialog('user-form', scope.row.id)"
               ><i-ep-edit />查看</el-button
             >
-            <el-button
-              type="danger"
-              size="small"
-              @click="resetPassword2(scope.row)"
+            <el-button type="danger" size="small" @click="handleDelete(scope.row)"
               ><i-ep-delete />删除</el-button
             >
           </template>
@@ -109,176 +103,19 @@
         @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",
+  name: "calculateIndex",
   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";
+import { UserQuery } from "@/api/user/model";
 
 const queryFormRef = ref(ElForm); // 查询表单
-const userFormRef = ref(ElForm); // 用户表单
-const uploadRef = ref<UploadInstance>(); // 上传组件
+const router = useRouter();
 
 const loading = ref(false); //  加载状态
 const removeIds = ref([]); // 删除用户ID集合 用于批量删除
@@ -288,9 +125,6 @@ const queryParams = reactive<UserQuery>({
 });
 const dateTimeRange = ref("");
 const total = ref(0); // 数据总数
-const pageData = ref<UserPageVO[]>(); // 用户分页数据
-const deptList = ref<OptionType[]>(); // 部门下拉数据源
-const roleList = ref<OptionType[]>(); // 角色下拉数据源
 
 watch(dateTimeRange, (newVal) => {
   if (newVal) {
@@ -301,89 +135,49 @@ watch(dateTimeRange, (newVal) => {
 
 const tableData = [
   {
-    szmc: '图像分类算子名称',
-    szlx: '图像分类',
-    bb: '1.2',
-    spyj: '进行19种类型的图像分类模型',
-    hlcjsj: '2024-05-03',
+    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.5",
+    spyj: "人员检测的模型",
+    hlcjsj: "2024-06-07",
   },
   {
-    szmc: '人脸识别算子名称',
-    szlx: '人脸识别',
-    bb: '1.0.0',
-    spyj: '人脸识别',
-    hlcjsj: '2024-06-08',
+    szmc: "人脸识别算子名称",
+    szlx: "人脸识别",
+    bb: "1.0.0",
+    spyj: "人脸识别",
+    hlcjsj: "2024-06-08",
   },
   {
-    szmc: '数据分析算子名称',
-    szlx: '数据分析',
-    bb: '1.6.1',
-    spyj: '进行数据分离ETL工具',
-    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;
-    });
+  ElMessage.success("查询成功");
+  loading.value = false;
+  // UserAPI.getPage(queryParams)
+  //   .then((data) => {
+  //     console.log("handleQuery", data);
+  //     pageData.value = data.list;
+  //     total.value = data.total;
+  //   })
+  //   .finally(() => {
+  //     loading.value = false;
+  // });
 }
 
 /** 重置查询 */
@@ -402,26 +196,8 @@ 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 }) {
-  
+/** 删除数据 */
+function handleDelete(row: { [key: string]: any }) {
   ElMessageBox.confirm("确认删除算子?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
@@ -431,20 +207,6 @@ function resetPassword2(row: { [key: string]: any }) {
   });
 }
 
-/** 加载角色下拉数据源 */
-async function loadRoleOptions() {
-  RoleAPI.getOptions().then((data) => {
-    roleList.value = data;
-  });
-}
-
-/** 加载部门下拉数据源 */
-async function loadDeptOptions() {
-  DeptAPI.getOptions().then((data) => {
-    deptList.value = data;
-  });
-}
-
 /**
  * 打开弹窗
  *
@@ -452,172 +214,17 @@ async function loadDeptOptions() {
  * @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();
-    });
-  });
+  router.replace({ path: "/operatorLibrary/calculateEdit" });
 }
 
 /** 下载导入模板 */
 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;
+  ElMessage.success("下载模板成功");
 }
 
 /** 导出用户 */
 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);
-  });
+  ElMessage.success("导出成功");
 }
 
 onMounted(() => {
diff --git a/src/views/manage/calculateParam/edit.vue b/src/views/manage/calculateParam/edit.vue
new file mode 100644
index 0000000..297a236
--- /dev/null
+++ b/src/views/manage/calculateParam/edit.vue
@@ -0,0 +1,168 @@
+<!-- 用户管理 -->
+<template>
+  <div class="app-container">
+    <!-- 用户新增/编辑表单 -->
+    <el-card shadow="never" class="table-container">
+      <template #header> 新增算子参数 </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="username">
+              <el-input
+                v-model="formData.username"
+                :readonly="!!formData.id"
+                placeholder="请输入算子参数名称"
+              />
+            </el-form-item>
+            <el-form-item label="参数类型" prop="roleIds">
+              <el-row style="width:100%">
+                <el-col :span="12">
+                  <el-select
+                    v-model="formData.roleIds"
+                    multiple
+                    placeholder="请选择参数主类型"
+                  >
+                    <el-option
+                      v-for="item in calTypeList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="12">
+                  <el-select
+                    v-model="formData.roleIds"
+                    multiple
+                    placeholder="请选择参数子类型"
+                  >
+                    <el-option
+                      v-for="item in calTypeList"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-col>
+              </el-row>
+            </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="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-col>
+        <el-col :lg="12" :xs="24"></el-col>
+      </el-row>
+    </el-card>
+    <el-card class="button-scope">
+      <div class="buttonml-55">
+        <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
+        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
+      </div>
+    </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,
+});
+
+// 校验规则
+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 scope>
+.button-scope {
+  position: fixed;
+  width: calc(100% - 220px);
+  bottom: 0px;
+}
+.buttonml-55 {
+  margin-left: 55px;
+}
+</style>
diff --git a/src/views/manage/calculateParam/index.vue b/src/views/manage/calculateParam/index.vue
new file mode 100644
index 0000000..1f72cd7
--- /dev/null
+++ b/src/views/manage/calculateParam/index.vue
@@ -0,0 +1,231 @@
+<!-- 用户管理 -->
+<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="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="子类型" prop="statusv">
+          <el-select
+            v-model="queryParams.statusv"
+            placeholder="全部类型"
+            clearable
+            style="width: 200px"
+          >
+            <el-option label="图像分类" value="1" />
+            <el-option label="格式转换" value="2" />
+            <el-option label="人脸识别" value="3" />
+            <el-option label="图像缩放" value="4" />
+          </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
+            >
+          </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="算子子类型" align="center" prop="szzlx" />
+        <el-table-column label="参数描述" width="180" align="center" prop="bb" />
+        <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="handleDelete(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>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "calculateIndex",
+  inheritAttrs: false,
+});
+
+import { UserQuery } from "@/api/user/model";
+
+const queryFormRef = ref(ElForm); // 查询表单
+const router = useRouter();
+
+const loading = ref(false); //  加载状态
+const removeIds = ref([]); // 删除用户ID集合 用于批量删除
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const dateTimeRange = ref("");
+const total = ref(0); // 数据总数
+
+watch(dateTimeRange, (newVal) => {
+  if (newVal) {
+    queryParams.startTime = newVal[0];
+    queryParams.endTime = newVal[1];
+  }
+});
+
+const tableData = [
+  {
+    szmc: "RGB24格式转换算子参数",
+    szlx: "前处理",
+    szzlx: "格式转换",
+    bb: "",
+    hlcjsj: "2024-05-03",
+  },
+  {
+    szmc: "图像缩放算子参数",
+    szlx: "前处理",
+    szzlx: "图像缩放",
+    bb: "专业的图像缩放",
+    hlcjsj: "2024-06-07",
+  },
+  {
+    szmc: "人脸识别算子",
+    szlx: "后处理",
+    szzlx: "人脸识别",
+    bb: "好高大上的人脸识别算子模型",
+    hlcjsj: "2024-06-08",
+  }
+];
+
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  ElMessage.success("查询成功");
+  loading.value = false;
+  // 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 handleDelete(row: { [key: string]: any }) {
+  ElMessageBox.confirm("确认删除算子参数?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    ElMessage.success("删除成功");
+  });
+}
+
+/**
+ * 打开弹窗
+ *
+ * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
+ * @param id 用户ID
+ */
+async function openDialog(type: string, id?: number) {
+  router.replace({ path: "/operatorLibrary/calculateParamEdit" });
+}
+
+/** 下载导入模板 */
+function downloadTemplate() {
+  ElMessage.success("下载模板成功");
+}
+
+/** 导出用户 */
+function handleExport() {
+  ElMessage.success("导出成功");
+}
+
+onMounted(() => {
+  //handleQuery();
+});
+</script>