feat: 业务管理接口联调

src/api/business.ts

@@ -0,0 +1,66 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data: Array<any>;
+};
+
+/**
+ *
+ * @returns 分页查询流程列表
+ */
+export const getFlowList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/flow/list", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 分页查询流程列表
+ */
+export const getFlowDetail = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/flow/getFlowDetail", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 查询可选择的子库信息列表
+ */
+export const getOptionalBaseList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/flow/optionalBaseList", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 查看角色列表
+ */
+export const getRoleManageList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/roleManage/list", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 查看用户信息列表
+ */
+export const getUserList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/user/list", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 新建流程
+ */
+export const createProcess = (data?: object) => {
+  return http.request<Result>("post", "/know-sub/flow/save", {
+    data
+  });
+};

src/api/system.ts

@@ -0,0 +1,36 @@
+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data: Array<any>;
+};
+
+/**
+ *
+ * @returns 分页查询应用子库
+ */
+export const getSubLibraryList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/applicationSubLibrary/list", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 分页查询部门信息列表
+ */
+export const getDeptManageList = (data?: object) => {
+  return http.request<Result>("get", "/know-sub/deptManage/list", {
+    params: data
+  });
+};
+
+/**
+ *
+ * @returns 新建子库
+ */
+export const createSubLibrary = (data?: object) => {
+  return http.request<Result>("post", "/know-sub/applicationSubLibrary/save", {
+    data
+  });
+};

src/views/businessManagement/processConfiguration/components/createForm.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import { FormInstance, FormRules, type CheckboxValueType } from "element-plus";
+import {
+  getOptionalBaseList,
+  getRoleManageList,
+  getUserList,
+  createProcess
+} from "@/api/business";
+import { message } from "@/utils/message";
 defineOptions({
   name: "CreateForm"
 });
@@ -25,86 +32,64 @@ watch(
 );
 const ruleFormRef = ref<FormInstance>();
 const processForm = reactive({
-  title: "",
-  sublibraryName: [],
-  dataType: "",
+  id: "",
+  flowName: "",
+  baseIdList: [],
+  flowType: "",
   link: [
     {
-      linkName: "",
-      directorRole: "",
-      directorName: ""
+      nodeName: "",
+      roleId: null,
+      userIdList: []
     }
   ],
-  desc: ""
+  remark: ""
 });
 const checkAll = ref(false);
 const indeterminate = ref(false);
 const value = ref<CheckboxValueType[]>([]);
-const cities = ref([
-  {
-    value: "Beijing",
-    label: "Beijing"
-  },
-  {
-    value: "Shanghai",
-    label: "Shanghai"
-  },
-  {
-    value: "Nanjing",
-    label: "Nanjing"
-  },
-  {
-    value: "Chengdu",
-    label: "Chengdu"
-  },
-  {
-    value: "Shenzhen",
-    label: "Shenzhen"
-  },
-  {
-    value: "Guangzhou",
-    label: "Guangzhou"
-  }
-]);
+const subLibraryIdList = ref([]);
+const roleNameList = ref([]);
+const userNameList = ref([]);
 const rules = reactive<FormRules>({
-  title: [{ required: true, message: "请输入", trigger: "blur" }],
-  sublibraryName: [
+  flowName: [{ required: true, message: "请输入", trigger: "blur" }],
+  baseIdList: [
     {
       required: true,
       message: "请选择",
       trigger: "change"
     }
   ],
-  dataType: [
+  flowType: [
     {
       required: true,
       message: "请选择",
       trigger: "change"
     }
   ],
-  linkName: [{ required: true, message: "请输入", trigger: "blur" }],
-  directorRole: [
+  nodeName: [{ required: true, message: "请输入", trigger: "blur" }],
+  roleId: [
     {
       required: true,
       message: "请选择",
       trigger: "change"
     }
   ],
-  directorName: [
+  userIdList: [
     {
       required: true,
       message: "请选择",
       trigger: "change"
     }
   ],
-  desc: [{ required: true, message: "请输入", trigger: "blur" }]
+  remark: [{ required: true, message: "请输入", trigger: "blur" }]
 });
 
 watch(value, val => {
   if (val.length === 0) {
     checkAll.value = false;
     indeterminate.value = false;
-  } else if (val.length === cities.value.length) {
+  } else if (val.length === subLibraryIdList.value.length) {
     checkAll.value = true;
     indeterminate.value = false;
   } else {
@@ -115,9 +100,9 @@ watch(value, val => {
 const handleCheckAll = (val: CheckboxValueType) => {
   indeterminate.value = false;
   if (val) {
-    processForm.sublibraryName = cities.value.map(_ => _.value);
+    processForm.baseIdList = subLibraryIdList.value.map(_ => _.value);
   } else {
-    processForm.sublibraryName = [];
+    processForm.baseIdList = [];
   }
 };
 // const submitForm = () => {
@@ -127,7 +112,31 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      console.log("submit!");
+      console.log(processForm);
+      // console.log("submit!");
+      const createForm = {
+        id: "",
+        flowName: processForm.flowName,
+        remark: processForm.remark,
+        flowType: processForm.flowType,
+        baseIdList: processForm.baseIdList,
+        nodeInfoList: processForm.link.map(item => {
+          return {
+            id: "",
+            userIdList: item.userIdList,
+            order: "",
+            roleId: item.roleId,
+            nodeName: item.nodeName
+          };
+        })
+      };
+      console.log(createForm);
+      createProcess(createForm).then(res => {
+        if (res.code === 200) {
+          message("新建成功", { type: "success" });
+          props.closeDrawer();
+        }
+      });
     } else {
       console.log("error submit!", fields);
     }
@@ -142,11 +151,64 @@ const handleDrawerClosed = () => {
 };
 const addLink = () => {
   processForm.link.push({
-    linkName: "",
-    directorRole: "",
-    directorName: ""
+    nodeName: "",
+    roleId: null,
+    userIdList: []
   });
 };
+const getOptionalBaseLists = async () => {
+  const res: any = await getOptionalBaseList({
+    flowType: ""
+  });
+  console.log(res);
+  if (res.code == 200) {
+    subLibraryIdList.value = res.data;
+  }
+};
+const getRoleManageLists = async () => {
+  const res: any = await getRoleManageList({
+    roleName: "",
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    roleNameList.value = res.data.records;
+  }
+};
+const getUserLists = async () => {
+  const res: any = await getUserList({
+    userName: "",
+    deptId: "",
+    roleId: "",
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    userNameList.value = res.data.records;
+  }
+};
+const handleSelect = async (value: any) => {
+  console.log(value);
+  // const selectItem = JSON.parse(value);
+  const res: any = await getUserList({
+    userName: "",
+    deptId: "",
+    roleId: value,
+    pageNum: "1",
+    pageSize: "10"
+  });
+  console.log(res);
+  if (res.code == 200) {
+    userNameList.value = res.data.records;
+  }
+};
+onMounted(() => {
+  getOptionalBaseLists();
+  getRoleManageLists();
+  getUserLists();
+});
 </script>
 
 <template>
@@ -168,16 +230,16 @@ const addLink = () => {
           ref="ruleFormRef"
         >
           <div class="text-[20px] text-[#333] font-bold mb-6">基本信息</div>
-          <el-form-item label="流程名称" prop="title">
+          <el-form-item label="流程名称" prop="flowName">
             <el-input
-              v-model="processForm.title"
+              v-model="processForm.flowName"
               autocomplete="off"
               placeholder="请输入"
             />
           </el-form-item>
-          <el-form-item label="子库名称" prop="sublibraryName">
+          <el-form-item label="子库名称" prop="baseIdList">
             <el-select
-              v-model="processForm.sublibraryName"
+              v-model="processForm.baseIdList"
               multiple
               clearable
               collapse-tags
@@ -187,10 +249,10 @@ const addLink = () => {
               class="w-[80%]"
             >
               <el-option
-                v-for="item in cities"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="item in subLibraryIdList"
+                :key="item.baseId"
+                :label="item.baseName"
+                :value="item.baseId"
               />
             </el-select>
             <el-checkbox
@@ -202,8 +264,8 @@ const addLink = () => {
               全部
             </el-checkbox>
           </el-form-item>
-          <el-form-item label="数据类型" prop="dataType">
-            <el-radio-group v-model="processForm.dataType">
+          <el-form-item label="数据类型" prop="flowType">
+            <el-radio-group v-model="processForm.flowType">
               <el-radio label="1">知识报送</el-radio>
               <el-radio label="2">知识删除</el-radio>
               <el-radio label="3">知识撤回</el-radio>
@@ -213,7 +275,7 @@ const addLink = () => {
           <div v-for="(item, index) in processForm.link" :key="index">
             <el-form-item
               label="环节名称"
-              :prop="'link.' + index + '.linkName'"
+              :prop="'link.' + index + '.nodeName'"
               :rules="{
                 required: true,
                 message: '请输入',
@@ -221,7 +283,7 @@ const addLink = () => {
               }"
             >
               <el-input
-                v-model="item.linkName"
+                v-model="item.nodeName"
                 autocomplete="off"
                 placeholder="请输入"
               />
@@ -229,7 +291,7 @@ const addLink = () => {
             <el-form-item label="负责人" required>
               <el-col :span="8">
                 <el-form-item
-                  :prop="'link.' + index + '.directorRole'"
+                  :prop="'link.' + index + '.roleId'"
                   :rules="{
                     required: true,
                     message: '请选择',
@@ -237,17 +299,18 @@ const addLink = () => {
                   }"
                 >
                   <el-select
-                    v-model="item.directorRole"
+                    v-model="item.roleId"
                     clearable
                     popper-class="custom-header"
                     placeholder="请选择"
                     class="w-[100%]"
+                    @change="handleSelect"
                   >
                     <el-option
-                      v-for="item in cities"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
+                      v-for="item in roleNameList"
+                      :key="item.id"
+                      :label="item.roleName"
+                      :value="item.id"
                     />
                   </el-select>
                 </el-form-item>
@@ -255,7 +318,7 @@ const addLink = () => {
               <el-col :span="2" class="text-center" />
               <el-col :span="14">
                 <el-form-item
-                  :prop="'link.' + index + '.directorName'"
+                  :prop="'link.' + index + '.userIdList'"
                   :rules="{
                     required: true,
                     message: '请选择',
@@ -263,17 +326,20 @@ const addLink = () => {
                   }"
                 >
                   <el-select
-                    v-model="item.directorName"
+                    v-model="item.userIdList"
+                    multiple
                     clearable
+                    collapse-tags
                     popper-class="custom-header"
                     placeholder="请选择"
+                    :max-collapse-tags="2"
                     class="w-[100%]"
                   >
                     <el-option
-                      v-for="item in cities"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
+                      v-for="item in userNameList"
+                      :key="item.id"
+                      :label="item.username"
+                      :value="item.id"
                     />
                   </el-select>
                 </el-form-item>
@@ -287,8 +353,8 @@ const addLink = () => {
           <el-form-item label=" ">
             <el-button @click="addLink">+添加审批环节</el-button>
           </el-form-item>
-          <el-form-item label="备注" prop="desc">
-            <el-input v-model="processForm.desc" type="textarea" />
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="processForm.remark" type="textarea" />
           </el-form-item>
         </el-form>
         <div class="drawer_footer">

src/views/businessManagement/processConfiguration/components/updateForm.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import { FormInstance, FormRules, type CheckboxValueType } from "element-plus";
+import {
+  getOptionalBaseList,
+  getRoleManageList,
+  getUserList,
+  createProcess,
+  getFlowDetail
+} from "@/api/business";
+import { message } from "@/utils/message";
+defineOptions({
+  name: "UpdateForm"
+});
+
+const props = defineProps({
+  updateFlag: {
+    type: Boolean,
+    default: false
+  },
+  updateId: {
+    type: String,
+    default: ""
+  },
+  closeDrawer: {
+    type: Function
+  }
+});
+const modalVisible = ref(false);
+
+// 监听 props.message 的变化，并更新 modalVisible
+watch(
+  () => props.updateFlag,
+  newValue => {
+    modalVisible.value = newValue; // 更新 modalVisible
+    if (newValue) {
+      getFlowDetails(props.updateId);
+    }
+  }
+);
+const ruleFormRef = ref<FormInstance>();
+const processForm = reactive({
+  id: "",
+  flowName: "",
+  baseIdList: [],
+  flowType: "",
+  link: [
+    {
+      nodeName: "",
+      roleId: null,
+      userIdList: []
+    }
+  ],
+  remark: ""
+});
+const checkAll = ref(false);
+const indeterminate = ref(false);
+const value = ref<CheckboxValueType[]>([]);
+const subLibraryIdList = ref([]);
+const roleNameList = ref([]);
+const userNameList = ref([]);
+const rules = reactive<FormRules>({
+  flowName: [{ required: true, message: "请输入", trigger: "blur" }],
+  baseIdList: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  flowType: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  nodeName: [{ required: true, message: "请输入", trigger: "blur" }],
+  roleId: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  userIdList: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ],
+  remark: [{ required: true, message: "请输入", trigger: "blur" }]
+});
+
+watch(value, val => {
+  if (val.length === 0) {
+    checkAll.value = false;
+    indeterminate.value = false;
+  } else if (val.length === subLibraryIdList.value.length) {
+    checkAll.value = true;
+    indeterminate.value = false;
+  } else {
+    indeterminate.value = true;
+  }
+});
+
+const handleCheckAll = (val: CheckboxValueType) => {
+  indeterminate.value = false;
+  if (val) {
+    processForm.baseIdList = subLibraryIdList.value.map(_ => _.value);
+  } else {
+    processForm.baseIdList = [];
+  }
+};
+// const submitForm = () => {
+//   props.closeDrawer();
+// };
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // console.log(processForm);
+      // console.log("submit!");
+      const createForm = {
+        id: processForm.id,
+        flowName: processForm.flowName,
+        remark: processForm.remark,
+        flowType: "1",
+        baseIdList: processForm.baseIdList,
+        nodeInfoList: processForm.link.map(item => {
+          return {
+            id: "",
+            userIdList: item.userIdList,
+            order: "",
+            nodeName: item.nodeName
+          };
+        })
+      };
+      // console.log(createForm);
+      createProcess(createForm).then(res => {
+        if (res.code === 200) {
+          message("新建成功", { type: "success" });
+          props.closeDrawer();
+        }
+      });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+const handleDrawerClosed = () => {
+  props.closeDrawer();
+};
+const addLink = () => {
+  processForm.link.push({
+    nodeName: "",
+    roleId: null,
+    userIdList: []
+  });
+};
+const getOptionalBaseLists = async () => {
+  const res: any = await getOptionalBaseList({
+    flowType: ""
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    subLibraryIdList.value = res.data;
+  }
+};
+const getRoleManageLists = async () => {
+  const res: any = await getRoleManageList({
+    roleName: "",
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    roleNameList.value = res.data.records;
+  }
+};
+const getUserLists = async () => {
+  const res: any = await getUserList({
+    userName: "",
+    deptId: "",
+    roleId: "",
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    userNameList.value = res.data.records;
+  }
+};
+const handleSelect = async (value: any) => {
+  // console.log(value);
+  // const selectItem = JSON.parse(value);
+  const res: any = await getUserList({
+    userName: "",
+    deptId: "",
+    roleId: value,
+    pageNum: "1",
+    pageSize: "10"
+  });
+  // console.log(res);
+  if (res.code == 200) {
+    userNameList.value = res.data.records;
+  }
+};
+const getFlowDetails = async (id: any) => {
+  const res: any = await getFlowDetail({
+    flowId: id
+  });
+  // console.log(res);
+  processForm.id = res.data.id;
+  processForm.flowName = res.data.flowName;
+  processForm.remark = res.data.remark;
+  processForm.flowType = res.data.flowType.toString();
+  processForm.baseIdList = res.data.subLibraryIdList;
+  processForm.link = res.data.nodeInfoList;
+  // console.log(processForm);
+  // if (res.code === 200) {
+  //   // updateForm.value = res.data;
+  //   updateFlag.value = true;
+  // }
+  // dataList.value = res.data;
+};
+onMounted(() => {
+  getOptionalBaseLists();
+  getRoleManageLists();
+  getUserLists();
+});
+</script>
+
+<template>
+  <div>
+    <el-drawer
+      v-model="modalVisible"
+      modal-class="drawer_content"
+      :with-header="false"
+      @closed="handleDrawerClosed"
+    >
+      <div class="drawer_header">
+        <span>编辑流程</span>
+      </div>
+      <div class="drawer_box">
+        <el-form
+          :model="processForm"
+          label-width="auto"
+          :rules="rules"
+          ref="ruleFormRef"
+        >
+          <div class="text-[20px] text-[#333] font-bold mb-6">基本信息</div>
+          <el-form-item label="流程名称" prop="flowName">
+            <el-input
+              v-model="processForm.flowName"
+              autocomplete="off"
+              placeholder="请输入"
+            />
+          </el-form-item>
+          <el-form-item label="子库名称" prop="baseIdList">
+            <el-select
+              v-model="processForm.baseIdList"
+              multiple
+              clearable
+              collapse-tags
+              popper-class="custom-header"
+              :max-collapse-tags="3"
+              placeholder="请选择"
+              class="w-[80%]"
+            >
+              <el-option
+                v-for="item in subLibraryIdList"
+                :key="item.baseId"
+                :label="item.baseName"
+                :value="item.baseId"
+              />
+            </el-select>
+            <el-checkbox
+              class="ml-6"
+              v-model="checkAll"
+              :indeterminate="indeterminate"
+              @change="handleCheckAll"
+            >
+              全部
+            </el-checkbox>
+          </el-form-item>
+          <el-form-item label="数据类型" prop="flowType">
+            <el-radio-group v-model="processForm.flowType">
+              <el-radio label="1">知识报送</el-radio>
+              <el-radio label="2">知识删除</el-radio>
+              <el-radio label="3">知识撤回</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div class="text-[20px] text-[#333] font-bold mb-6">流程设计</div>
+          <div v-for="(item, index) in processForm.link" :key="index">
+            <el-form-item
+              label="环节名称"
+              :prop="'link.' + index + '.nodeName'"
+              :rules="{
+                required: true,
+                message: '请输入',
+                trigger: 'blur'
+              }"
+            >
+              <el-input
+                v-model="item.nodeName"
+                autocomplete="off"
+                placeholder="请输入"
+              />
+            </el-form-item>
+            <el-form-item label="负责人" required>
+              <el-col :span="8">
+                <el-form-item
+                  :prop="'link.' + index + '.roleId'"
+                  :rules="{
+                    required: true,
+                    message: '请选择',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select
+                    v-model="item.roleId"
+                    clearable
+                    popper-class="custom-header"
+                    placeholder="请选择"
+                    class="w-[100%]"
+                    @change="handleSelect"
+                  >
+                    <el-option
+                      v-for="item in roleNameList"
+                      :key="item.id"
+                      :label="item.roleName"
+                      :value="item.id"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="2" class="text-center" />
+              <el-col :span="14">
+                <el-form-item
+                  :prop="'link.' + index + '.userIdList'"
+                  :rules="{
+                    required: true,
+                    message: '请选择',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select
+                    v-model="item.userIdList"
+                    multiple
+                    clearable
+                    collapse-tags
+                    popper-class="custom-header"
+                    placeholder="请选择"
+                    :max-collapse-tags="2"
+                    class="w-[100%]"
+                  >
+                    <el-option
+                      v-for="item in userNameList"
+                      :key="item.id"
+                      :label="item.username"
+                      :value="item.id"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-form-item>
+            <el-divider
+              border-style="double"
+              v-if="index < processForm.link.length - 1"
+            />
+          </div>
+          <el-form-item label=" ">
+            <el-button @click="addLink">+添加审批环节</el-button>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="processForm.remark" type="textarea" />
+          </el-form-item>
+        </el-form>
+        <div class="drawer_footer">
+          <el-button plain @click="resetForm(ruleFormRef)">重置</el-button>
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__body) {
+  padding: 0 !important;
+}
+
+.drawer_content {
+  .drawer_header {
+    box-sizing: border-box;
+    height: 96px;
+    padding: 24px;
+    line-height: 65px;
+    border-bottom: 1px solid #e9e9e9;
+
+    span {
+      padding-left: 8px;
+      font-size: 20px;
+      border-left: 6px solid #0052d9;
+    }
+  }
+
+  .drawer_box {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 96px);
+    padding: 24px;
+
+    .drawer_footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

src/views/businessManagement/processConfiguration/index.vue

@@ -1,71 +1,108 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import CreateForm from "./components/createForm.vue";
+import UpdateForm from "./components/UpdateForm.vue";
+import { getFlowList } from "@/api/business";
 defineOptions({
   name: "ProcessConfiguration"
 });
 const seachForm = reactive({
-  title: "",
-  publishDeptName: "",
-  status: ""
+  flowName: ""
 });
 const pagination = reactive({
   total: 0,
   pageSize: 10,
   currentPage: 1,
+  align: "center",
+  layout: "total, prev, pager, next, jumper",
   background: true
 });
+const updateId = ref("");
 const columns: TableColumnList = [
   {
     label: "序号",
-    prop: "diseaseName"
+    prop: "id"
   },
   {
     label: "流程名称",
-    prop: "diseaseName"
+    prop: "flowName"
   },
   {
     label: "创建人",
-    prop: "diseaseName"
+    prop: "createUserName"
   },
   {
     label: "备注",
-    prop: "diseaseName"
+    prop: "remark"
   },
   {
     label: "最新时间",
-    prop: "diseaseName"
+    prop: "createTime"
   },
   {
     label: "操作",
     fixed: "right",
-    width: 350,
+    // width: 350,
     slot: "operation"
   }
 ];
 const dataList = ref([]);
+const getTableData = async () => {
+  const res: any = await getFlowList({
+    flowName: seachForm.flowName,
+    pageNum: pagination.currentPage,
+    pageSize: pagination.pageSize
+  });
+  if (res.code === 200) {
+    dataList.value = res.data.records;
+    pagination.total = res.data.total;
+  }
+  console.log(res);
+  // dataList.value = res.data;
+};
 const search = () => {
   pagination.currentPage = 1;
   pagination.pageSize = 10;
+  getTableData();
 };
 
 const reset = () => {
-  seachForm.title = "";
-  seachForm.publishDeptName = "";
-  // search();
+  seachForm.flowName = "";
+  search();
 };
 const createFlag = ref(false);
+const updateFlag = ref(false);
 
 const create = () => {
   createFlag.value = true;
   // search();
 };
 const closeDrawer = () => {
-  createFlag.value = false;
+  if (createFlag.value) {
+    createFlag.value = false;
+    search();
+  }
+  if (updateFlag.value) {
+    updateFlag.value = false;
+    search();
+  }
+};
+const handleEdit = (value: any) => {
+  console.log(value);
+  updateId.value = value.id;
+  updateFlag.value = true;
+  // getFlowDetails(value.id);
+  // if (res.code === 200) {
+  //   // console.log(res);
+  //   updateForm.value = res.data;
+  // }
 };
 // const changeStatus = item => {
 //   seachForm.status = item.id;
 // };
+onMounted(() => {
+  search();
+});
 </script>
 
 <template>
@@ -75,12 +112,10 @@ const closeDrawer = () => {
       <el-form :model="seachForm">
         <el-row>
           <el-form-item label="流程名称">
-            <el-input v-model="seachForm.title" />
+            <el-input v-model="seachForm.flowName" />
           </el-form-item>
-          <el-button class="ml-8" @click="search" type="primary"
-            >搜索</el-button
-          >
-          <el-button @click="reset">重置</el-button>
+          <el-button class="ml-8" @click="reset">重置</el-button>
+          <el-button @click="search" type="primary">搜索</el-button>
         </el-row>
       </el-form>
     </div>
@@ -99,15 +134,21 @@ const closeDrawer = () => {
           background: 'var(--el-table-row-hover-bg-color)',
           color: 'var(--el-text-color-primary)'
         }"
+        :pagination="pagination"
       >
-        <!-- <template #operation="{ row }">
-          <el-button link type="danger" @click="handleDelete(row)">
-            删除
+        <template #operation="{ row }">
+          <el-button link type="primary" @click="handleEdit(row)">
+            编辑
           </el-button>
-        </template> -->
+        </template>
       </pure-table>
     </div>
     <CreateForm :createFlag="createFlag" :closeDrawer="closeDrawer" />
+    <UpdateForm
+      :updateFlag="updateFlag"
+      :updateId="updateId"
+      :closeDrawer="closeDrawer"
+    />
   </div>
 </template>
 <style lang="scss" scoped>

src/views/systemManagement/sublibraryManagement/index.vue

@@ -1,45 +1,51 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
-import type { CheckboxValueType } from "element-plus";
+import { onMounted, reactive, ref, watch } from "vue";
+import type { CheckboxValueType, FormInstance, FormRules } from "element-plus";
+import {
+  getSubLibraryList,
+  getDeptManageList,
+  createSubLibrary
+} from "@/api/system";
+import { message } from "@/utils/message";
 defineOptions({
   name: "SublibraryManagement"
 });
 const seachForm = reactive({
-  title: "",
-  publishDeptName: "",
-  status: ""
+  baseName: ""
 });
 const sublibraryForm = reactive({
-  title: "",
-  publishDeptName: "",
-  status: ""
+  baseName: "",
+  baseCode: "",
+  deptIds: []
 });
 const pagination = reactive({
   total: 0,
   pageSize: 10,
   currentPage: 1,
+  align: "center",
+  layout: "total, prev, pager, next, jumper",
   background: true
 });
 const columns: TableColumnList = [
   {
     label: "序号",
-    prop: "diseaseName"
+    slot: "index"
   },
   {
     label: "子库名称",
-    prop: "diseaseName"
+    prop: "baseName"
   },
   {
     label: "关联部门",
-    prop: "diseaseName"
+    slot: "deptInfoList"
   },
   {
     label: "子库编码",
-    prop: "diseaseName"
+    prop: "baseCode"
   },
   {
     label: "最新时间",
-    prop: "diseaseName"
+    prop: "createTime"
   },
   {
     label: "操作",
@@ -49,14 +55,26 @@ const columns: TableColumnList = [
   }
 ];
 const dataList = ref([]);
+const ruleFormRef = ref<FormInstance>();
+const rules = reactive<FormRules>({
+  baseName: [{ required: true, message: "请输入", trigger: "blur" }],
+  baseCode: [{ required: true, message: "请输入", trigger: "blur" }],
+  deptIds: [
+    {
+      required: true,
+      message: "请选择",
+      trigger: "change"
+    }
+  ]
+});
 const search = () => {
   pagination.currentPage = 1;
   pagination.pageSize = 10;
+  getTableData();
 };
 
 const reset = () => {
-  seachForm.title = "";
-  seachForm.publishDeptName = "";
+  seachForm.baseName = "";
   // search();
 };
 const createFlag = ref(false);
@@ -71,38 +89,13 @@ const create = () => {
 const checkAll = ref(false);
 const indeterminate = ref(false);
 const value = ref<CheckboxValueType[]>([]);
-const cities = ref([
-  {
-    value: "Beijing",
-    label: "Beijing"
-  },
-  {
-    value: "Shanghai",
-    label: "Shanghai"
-  },
-  {
-    value: "Nanjing",
-    label: "Nanjing"
-  },
-  {
-    value: "Chengdu",
-    label: "Chengdu"
-  },
-  {
-    value: "Shenzhen",
-    label: "Shenzhen"
-  },
-  {
-    value: "Guangzhou",
-    label: "Guangzhou"
-  }
-]);
+const deptList = ref([]);
 
 watch(value, val => {
   if (val.length === 0) {
     checkAll.value = false;
     indeterminate.value = false;
-  } else if (val.length === cities.value.length) {
+  } else if (val.length === deptList.value.length) {
     checkAll.value = true;
     indeterminate.value = false;
   } else {
@@ -113,11 +106,72 @@ watch(value, val => {
 const handleCheckAll = (val: CheckboxValueType) => {
   indeterminate.value = false;
   if (val) {
-    value.value = cities.value.map(_ => _.value);
+    sublibraryForm.deptIds = deptList.value.map(_ => _.value);
   } else {
-    value.value = [];
+    sublibraryForm.deptIds = [];
+  }
+};
+/**
+ * 子库列表查询
+ */
+const getTableData = async () => {
+  const res: any = await getSubLibraryList({
+    baseName: seachForm.baseName,
+    pageNum: pagination.currentPage,
+    pageSize: pagination.pageSize
+  });
+  if (res.code === 200) {
+    dataList.value = res.data.records;
+    pagination.total = res.data.total;
   }
+  console.log(res);
+  // dataList.value = res.data;
+};
+/**
+ * 子库列表查询
+ */
+const getDeptData = async () => {
+  const res: any = await getDeptManageList({
+    baseName: "",
+    deptCode: "",
+    pageNum: 1,
+    pageSize: 20
+  });
+  if (res.code === 200) {
+    deptList.value = res.data.records;
+  }
+};
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(valid);
+      const createForm = {
+        id: "",
+        baseName: sublibraryForm.baseName,
+        baseCode: sublibraryForm.baseCode,
+        deptIds: sublibraryForm.deptIds
+      };
+      createSubLibrary(createForm).then(res => {
+        if (res.code === 200) {
+          message("新建成功", { type: "success" });
+          createFlag.value = false;
+          search();
+        }
+      });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
 };
+onMounted(() => {
+  search();
+  getDeptData();
+});
 </script>
 
 <template>
@@ -127,7 +181,7 @@ const handleCheckAll = (val: CheckboxValueType) => {
       <el-form :model="seachForm">
         <el-row>
           <el-form-item label="子库名称">
-            <el-input v-model="seachForm.title" />
+            <el-input v-model="seachForm.baseName" />
           </el-form-item>
           <el-button class="ml-8" @click="search" type="primary"
             >搜索</el-button
@@ -151,12 +205,22 @@ const handleCheckAll = (val: CheckboxValueType) => {
           background: 'var(--el-table-row-hover-bg-color)',
           color: 'var(--el-text-color-primary)'
         }"
+        :pagination="pagination"
       >
-        <!-- <template #operation="{ row }">
-          <el-button link type="danger" @click="handleDelete(row)">
-            删除
+        <template #index="{ index }">
+          <span>{{ index + 1 }}</span>
+        </template>
+        <template #deptInfoList="{ row }">
+          <span v-for="(item, index) in row.deptInfoList" :key="index"
+            >{{ item.deptName
+            }}<i v-if="index < row.deptInfoList.length - 1">, </i></span
+          >
+        </template>
+        <template #operation="{ row }">
+          <el-button link type="primary" @click="handleEdit(row)">
+            编辑
           </el-button>
-        </template> -->
+        </template>
       </pure-table>
     </div>
     <el-drawer
@@ -168,16 +232,29 @@ const handleCheckAll = (val: CheckboxValueType) => {
         <span>新建子库</span>
       </div>
       <div class="drawer_box">
-        <el-form :model="sublibraryForm">
-          <el-form-item label="子库名称">
-            <el-input v-model="sublibraryForm.title" autocomplete="off" />
+        <el-form
+          :model="sublibraryForm"
+          label-width="auto"
+          :rules="rules"
+          ref="ruleFormRef"
+        >
+          <el-form-item label="子库名称" prop="baseName">
+            <el-input
+              v-model="sublibraryForm.baseName"
+              placeholder="请输入"
+              autocomplete="off"
+            />
           </el-form-item>
-          <el-form-item label="子库编码">
-            <el-input v-model="sublibraryForm.title" autocomplete="off" />
+          <el-form-item label="子库编码" prop="baseCode">
+            <el-input
+              v-model="sublibraryForm.baseCode"
+              placeholder="请输入"
+              autocomplete="off"
+            />
           </el-form-item>
-          <el-form-item label="关联部门">
+          <el-form-item label="关联部门" prop="deptIds">
             <el-select
-              v-model="value"
+              v-model="sublibraryForm.deptIds"
               class="w-[80%!important]"
               multiple
               clearable
@@ -188,10 +265,10 @@ const handleCheckAll = (val: CheckboxValueType) => {
               style="width: 240px"
             >
               <el-option
-                v-for="item in cities"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="item in deptList"
+                :key="item.deptCode"
+                :label="item.deptName"
+                :value="item.deptCode"
               />
             </el-select>
             <el-checkbox
@@ -205,8 +282,10 @@ const handleCheckAll = (val: CheckboxValueType) => {
           </el-form-item>
         </el-form>
         <div class="drawer_footer">
-          <el-button plain>重置</el-button>
-          <el-button type="primary">确定</el-button>
+          <el-button plain @click="resetForm(ruleFormRef)">重置</el-button>
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+            >确定</el-button
+          >
         </div>
       </div>
     </el-drawer>

vite.config.ts

@@ -51,6 +51,13 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
           secure: false
           // eslint-disable-next-line no-shadow
           // rewrite: path => path.replace("/ask", "")
+        },
+        "/know-sub/": {
+          target: "http://192.168.10.25:9201/",
+          changeOrigin: true,
+          secure: false
+          // eslint-disable-next-line no-shadow
+          // rewrite: path => path.replace("/ask", "")
         }
       }
     },