Merge branch 'dev-wyf-approval' into 'dev'

平台管理审批

See merge request product-group-fe/sfy-safety-group/sfy-safety!129

mock/approval/approval-node.ts

@@ -0,0 +1,110 @@
+import { resultSuccess } from '../_util';
+
+const list = {
+  records: [
+    {
+      id: 1,
+      approvalTemplateId: 1001,
+      approvalOrder: 1,
+      nodeDescription: '部门经理初审',
+      approverType: 0,
+      approverInfoList: [{ approverId: 101, approverName: '张三' }],
+      approvalType: 0,
+    },
+    {
+      id: 2,
+      approvalTemplateId: 1001,
+      approvalOrder: 2,
+      nodeDescription: '总监审核',
+      approverType: 0,
+      approverInfoList: [{ approverId: 102, approverName: '李四' }],
+      approvalType: 0,
+    },
+    {
+      id: 3,
+      approvalTemplateId: 1001,
+      approvalOrder: 3,
+      nodeDescription: '财务审核',
+      approverType: 0,
+      approverInfoList: [
+        { approverId: 103, approverName: '王五' },
+        { approverId: 104, approverName: '赵六' },
+      ],
+      approvalType: 1,
+    },
+    {
+      id: 4,
+      approvalTemplateId: 1001,
+      approvalOrder: 4,
+      nodeDescription: '人力资源确认',
+      approverType: 0,
+      approverInfoList: [{ approverId: 105, approverName: '孙七' }],
+      approvalType: 0,
+    },
+    {
+      id: 5,
+      approvalTemplateId: 1001,
+      approvalOrder: 5,
+      nodeDescription: '分管副总审批',
+      approverType: 0,
+      approverInfoList: [{ approverId: 106, approverName: '周八' }],
+      approvalType: 0,
+    },
+    {
+      id: 6,
+      approvalTemplateId: 1001,
+      approvalOrder: 6,
+      nodeDescription: '总经理终审',
+      approverType: 0,
+      approverInfoList: [{ approverId: 107, approverName: '吴九' }],
+      approvalType: 0,
+    },
+    {
+      id: 7,
+      approvalTemplateId: 1002,
+      approvalOrder: 1,
+      nodeDescription: '项目经理初审',
+      approverType: 0,
+      approverInfoList: [{ approverId: 201, approverName: '郑十' }],
+      approvalType: 0,
+    },
+    {
+      id: 8,
+      approvalTemplateId: 1002,
+      approvalOrder: 2,
+      nodeDescription: '技术总监审核',
+      approverType: 0,
+      approverInfoList: [{ approverId: 202, approverName: '钱十一' }],
+      approvalType: 0,
+    },
+    {
+      id: 9,
+      approvalTemplateId: 1002,
+      approvalOrder: 3,
+      nodeDescription: '客户确认',
+      approverType: 1,
+      approverInfoList: [],
+    },
+    {
+      id: 10,
+      approvalTemplateId: 1002,
+      approvalOrder: 4,
+      nodeDescription: '归档',
+      approverType: 0,
+      approverInfoList: [{ approverId: 203, approverName: '孙十二' }],
+      approvalType: 0,
+    },
+  ],
+  totalRow: 10,
+};
+
+export default [
+  {
+    url: '/safety_mock_api/approvalManagement/queryApprovalTemplateDetail',
+    timeout: 1000,
+    method: 'post',
+    response: () => {
+      return resultSuccess(list);
+    },
+  },
+];

mock/approval/approval.ts

@@ -0,0 +1,75 @@
+import { resultSuccess } from '../_util';
+
+const list = {
+  records: [
+    {
+      id: 1,
+      templateName: '审批1',
+      description: '审批1描述1242323rw2c3r2c3535c4',
+    },
+    {
+      id: 2,
+      templateName: '审批2',
+    },
+    {
+      id: 3,
+      templateName: '审批3',
+      description: '审批3描述fwq  xc  3er xr  3xr2 rq2x',
+    },
+    {
+      id: 4,
+      templateName: '审批21c q2cr24',
+      description: '审批4描述     1d3x    13  1xx3crdx     r  3',
+    },
+    {
+      id: 5,
+      templateName: '审批5插入2呈现出13传参   23r',
+      description: '审批5描述 23 让传入请人才从1传入吃仍持续  ',
+    },
+    {
+      id: 6,
+      templateName: '审批6',
+      description: '审批描述   23   23   23',
+    },
+    {
+      id: 7,
+      templateName: '审批7',
+      description:
+        '审批7描述   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23',
+    },
+    {
+      id: 8,
+      templateName: '审批8',
+      description:
+        '审批8描述   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23',
+    },
+    {
+      id: 9,
+      templateName: '审批9',
+      description:
+        '审批9描述   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23',
+    },
+    {
+      id: 10,
+      templateName: '审批10',
+    },
+    {
+      id: 11,
+      templateName: '审批11',
+      description:
+        '审批11描述   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23   23',
+    },
+  ],
+  totalRow: 11,
+};
+
+export default [
+  {
+    url: '/safety_mock_api/approvalManagement/queryApprovalTemplatePage',
+    timeout: 1000,
+    method: 'post',
+    response: () => {
+      return resultSuccess(list);
+    },
+  },
+];

src/api/approval/approval.ts

@@ -0,0 +1,64 @@
+import { http } from '@/utils/http/axios';
+import type { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
+import {
+  ApprovalInstanceType,
+  ApprovalInstanceRuleForm,
+  ApprovalNodeInstanceRuleForm,
+} from '@/views/system/approval/types';
+
+export function getApprovalInstanceList(query: QueryPageRequest<any>) {
+  return http.request<QueryPageResponse<any>>({
+    url: '/approvalManagement/queryApprovalTemplatePage',
+    method: 'post',
+    data: query,
+  });
+}
+
+export function getApprovalNodeInstanceList(id: number) {
+  return http.request<ApprovalInstanceType>({
+    url: `/approvalManagement/queryApprovalTemplateDetail?approvalTemplateId=${id}`,
+    method: 'get',
+  });
+}
+
+export function addApprovalInstance(params: ApprovalInstanceRuleForm) {
+  return http.request({
+    url: '/approvalManagement/saveOrUpdateApprovalTemplate',
+    method: 'post',
+    data: params,
+  });
+}
+
+export function updateApprovalInstance(params: ApprovalInstanceRuleForm) {
+  return addApprovalInstance(params);
+}
+
+export function delApprovalInstance(id: number) {
+  return http.request({
+    url: `/approvalManagement/deleteApprovalTemplate?id=${id}`,
+    method: 'delete',
+  });
+}
+
+export function addApprovalNodeInstance(params: ApprovalNodeInstanceRuleForm) {
+  return http.request({
+    url: '/approvalManagement/saveOrUpdateApprovalNode',
+    method: 'post',
+    data: params,
+  });
+}
+
+export function updateApprovalNodeInstance(params: ApprovalNodeInstanceRuleForm) {
+  return addApprovalNodeInstance(params);
+}
+
+export function updateApprvoerInfo(params: ApprovalNodeInstanceRuleForm) {
+  return addApprovalNodeInstance(params);
+}
+
+export function delApprovalNodeInstance(id: number) {
+  return http.request({
+    url: `/approvalManagement/deleteApprovalNode?approvalTemplateDetailId=${id}`,
+    method: 'delete',
+  });
+}

src/views/system/person-group/components/PersonGroupFilter.vue

@@ -72,7 +72,7 @@
 <script lang="ts" setup>
   import { ref, onMounted, onBeforeUnmount } from 'vue';
   import { Loading } from '@element-plus/icons-vue';
-  import { usePersonGroupFilter } from '../hooks/usePersonGroupFilter';
+  import { usePersonGroupFilter } from './hooks/usePersonGroupFilter';
   import { PersonGroupItem } from '@/types/person-group/type';
   import { debounce } from 'lodash-es';
 

src/components/UploadLoading.vue

@@ -2,15 +2,16 @@
   <div
     class="upload-loading"
     v-loading="formLoading"
-    element-loading-text="表单上传中。。。"
+    :element-loading-text="loadingText || '表单上传中。。。'"
     element-loading-background="rgba(0,0,0, 0.2)"
   />
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  formLoading: boolean;
-}>();
+  defineProps<{
+    formLoading: boolean;
+    loadingText?: string;
+  }>();
 </script>
 
 <style lang="scss" scoped>
@@ -21,5 +22,6 @@ defineProps<{
     top: 0;
     width: 100vw;
     height: 100vh;
+    z-index: 9999;
   }
 </style>

src/router/routers/platform.ts

@@ -40,8 +40,8 @@ const platformRoutes = {
         {
           // 账号管理
           path: 'account',
-          name: 'UserAccount',
           component: '/system/user/user',
+          name: 'UserAccount',
           meta: {
             icon: '',
             title: '账号管理',
@@ -88,6 +88,24 @@ const platformRoutes = {
         title: '字典管理',
       },
     },
+    {
+      path: 'approval',
+      name: 'SystemApproval',
+      component: '/system/approval/PageApproval',
+      meta: {
+        icon: 'UserOutlined',
+        title: '审批管理',
+      },
+    },
+    {
+      path: 'approval-node',
+      name: 'SystemApprovalNode',
+      component: '/system/approval/PageApprovalNode',
+      meta: {
+        icon: 'UserOutlined',
+        title: '编辑审批流程',
+      },
+    },
   ],
 };
 

src/views/system/approval/PageApproval.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 审批管理 </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-table-container">
+        <header>
+          <el-button type="primary" @click="handleCreateApproval" :icon="Plus">添加审批流程</el-button>
+        </header>
+        <BasicTable
+          :tableConfig="tableConfig"
+          :tableData="tableData"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+          <template #action="scope">
+            <ActionButton text="设置审批流程" @click="handleEditApproval(scope.row.id)" />
+            <ActionButton
+              text="删除"
+              :popconfirm="{
+                title: '确定要删除?',
+              }"
+              @confirm="handleDeleteApproval(scope.row)"
+            />
+          </template>
+        </BasicTable>
+      </div>
+    </main>
+  </div>
+  <ApprovalCreateDialog ref="approvalCreateDialogRef" @success="getTabelData" />
+</template>
+
+<script setup lang="ts">
+  import { Plus } from '@element-plus/icons-vue';
+  import { ElMessage } from 'element-plus';
+  import BasicTable from '@/components/BasicTable.vue';
+  import ActionButton from '@/components/ActionButton.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { TABLE_OPTIONS, APPROVAL_TABLE_COLUMNS } from './config/table';
+  import { onMounted, ref } from 'vue';
+  import { getApprovalInstanceList, delApprovalInstance } from '@/api/approval/approval';
+  import { useRouter } from 'vue-router';
+  import { ApprovalInstanceType } from './types';
+  import ApprovalCreateDialog from './components/ApprovalCreateDialog.vue';
+
+  const router = useRouter();
+
+  const { tableConfig, pagination } = useTableConfig(APPROVAL_TABLE_COLUMNS, TABLE_OPTIONS);
+
+  const tabelQuery = ref({
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
+    queryParam: undefined,
+  });
+
+  const tableData = ref<ApprovalInstanceType[]>([]);
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tabelQuery.value.pageSize = value;
+    getTabelData();
+  };
+
+  async function getTabelData() {
+    tableConfig.loading = true;
+
+    const res = await getApprovalInstanceList(tabelQuery.value);
+    tableData.value = res.records;
+    pagination.total = res.totalRow;
+    tableConfig.loading = false;
+  }
+
+  onMounted(() => {
+    getTabelData();
+  });
+
+  const approvalCreateDialogRef = ref<InstanceType<typeof ApprovalCreateDialog>>();
+  const handleCreateApproval = () => {
+    approvalCreateDialogRef.value?.openDialog();
+  };
+
+  const handleEditApproval = (id: number) => {
+    router.push({
+      name: 'SystemApprovalNode',
+      query: {
+        id,
+      },
+    });
+  };
+  const handleDeleteApproval = async (row: ApprovalInstanceType) => {
+    if (row.isRelated || row.isApplied) {
+      ElMessage.error('已关联或已应用，无法删除');
+      return;
+    }
+    try {
+      tableConfig.loading = true;
+      await delApprovalInstance(row.id);
+      getTabelData();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+</style>

src/views/system/approval/PageApprovalNode.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <BreadcrumbBack />
+      <span class="breadcrumb-title">{{ '编辑审批流程' }}</span>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="approval-node-container">
+        <div class="approval-node-container__title">流程模板信息</div>
+        <BasicForm
+          style="height: auto"
+          ref="basicFormRef"
+          :formData="ruleFormData"
+          :formRules="formRules"
+          :formConfig="ruleFormConfig"
+        >
+        </BasicForm>
+        <div class="approval-node-container__button">
+          <el-button type="primary" @click="handleEditApproval">保存</el-button>
+        </div>
+        <div class="approval-node-container__title">审批流程设置</div>
+        <div class="approval-node-container__button" style="">
+          <el-button type="primary" @click="handleCreateApprovalNode" :icon="Plus">添加审批节点</el-button>
+        </div>
+        <div style="flex-grow: 1">
+          <BasicTable :tableConfig="tableConfig" :tableData="tableData">
+            <template #approverType="scope">
+              <span> {{ APPROVER_TYPE_MAP[scope.row.approverType] }}</span>
+            </template>
+            <template #approvalType="scope">
+              <span> {{ APPROVAL_TYPE_MAP[scope.row.approvalType] }}</span>
+            </template>
+            <template #action="scope">
+              <ActionButton text="编辑节点" @click="handleEditApprovalNode(scope.row)" />
+              <ActionButton
+                v-if="scope.row.approverType === 0"
+                text="选择审批人"
+                @click="handleOpenAppoverSelect(scope.row)"
+              />
+              <ActionButton
+                v-if="tableData.length > 1"
+                text="删除节点"
+                :popconfirm="{
+                  title: '确定要删除?',
+                }"
+                @confirm="handleDeleteNode(scope.row.id)"
+              />
+            </template>
+          </BasicTable>
+        </div>
+      </div>
+    </main>
+    <ApproverSelectDialog ref="approverSelectDialogRef" @submit="handleApproverSelect" />
+    <ApprovalNodeCreateDialog
+      ref="approvalNodeCreateDialogRef"
+      :is-create="isCreatForm"
+      :init-data="initFormData"
+      :order-list="approvalOrderList"
+      @success="getTabelData"
+    />
+    <UploadLoading loading-text="加载中" :form-loading="formLoading" v-if="formLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { Plus } from '@element-plus/icons-vue';
+  import { computed, onMounted, ref } from 'vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import UploadLoading from '@/components/UploadLoading.vue';
+  import BasicForm from '@/components/BasicForm.vue';
+  import ActionButton from '@/components/ActionButton.vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import { ApprovalNodeInstanceRuleForm, ApprovalInstanceRuleForm, ApprovalNodeInstanceType } from './types';
+  import { APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES } from './config/form';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { APPROVAL_NODE_TABLE_COLUMNS, NODE_TABLE_OPTIONS } from './config/table';
+  import { APPROVER_TYPE_MAP, APPROVAL_TYPE_MAP } from './constants';
+  import ApproverSelectDialog from './components/ApproverSelectDialog.vue';
+  import ApprovalNodeCreateDialog from './components/ApprovalNodeCreateDialog.vue';
+  import {
+    getApprovalNodeInstanceList,
+    updateApprovalInstance,
+    updateApprvoerInfo,
+    delApprovalNodeInstance,
+  } from '@/api/approval/approval';
+  import { queryUserInfoByIds } from '@/api/system/person-group';
+  import { PersonGroupItem } from '@/types/person-group/type';
+
+  const route = useRoute();
+
+  const id = route.query.id;
+  const curNodeId = ref();
+  const approvalInstance = ref<ApprovalInstanceRuleForm>();
+
+  const formLoading = ref(false);
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<ApprovalInstanceRuleForm>(APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES);
+
+  const approvalOrderList = computed(() => {
+    return tableData.value.map((item) => item.approvalOrder);
+  });
+
+  const approvalOrderMax = computed(() => {
+    return Math.max(...approvalOrderList.value);
+  });
+
+  function initForm(initData: ApprovalInstanceRuleForm) {
+    ruleFormData.id = initData.id;
+    ruleFormData.templateName = initData.templateName;
+    ruleFormData.description = initData.description;
+  }
+
+  const { tableConfig } = useTableConfig(APPROVAL_NODE_TABLE_COLUMNS, NODE_TABLE_OPTIONS, false);
+  const tableData = ref<ApprovalNodeInstanceType[]>([]);
+
+  async function getTabelData() {
+    tableConfig.loading = true;
+    approvalInstance.value = await getApprovalNodeInstanceList(Number(id));
+    tableData.value = approvalInstance.value.approvalNodeInfoList!;
+    tableData.value.forEach((item) => {
+      item.approverNameList = item.approverInfoList.map((item) => item.approverName).join(',');
+    });
+    tableConfig.loading = false;
+  }
+
+  onMounted(async () => {
+    formLoading.value = true;
+    await getTabelData();
+    initForm(approvalInstance.value!);
+    cloneRuleFormData();
+    beforeRouteLeave();
+    formLoading.value = false;
+  });
+
+  const handleEditApproval = async () => {
+    const validate = await basicFormRef.value?.validateForm();
+    if (!validate) return;
+    // 提交表单接口
+    try {
+      formLoading.value = true;
+      await updateApprovalInstance(ruleFormData);
+      formLoading.value = false;
+      ElMessage.success('提交成功');
+      cloneRuleFormData();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const approvalNodeCreateDialogRef = ref();
+  const isCreatForm = ref(true);
+  const initFormData = ref<ApprovalNodeInstanceRuleForm>();
+  const handleCreateApprovalNode = () => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法添加节点');
+      return;
+    }
+    isCreatForm.value = true;
+    initFormData.value = {
+      approvalTemplateId: Number(id),
+      nodeDescription: '',
+      approvalType: 0,
+      approverType: 1,
+      approvalOrder: approvalOrderMax.value + 1,
+    };
+    approvalNodeCreateDialogRef.value.openDialog();
+  };
+  const handleEditApprovalNode = (row: ApprovalNodeInstanceType) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
+    isCreatForm.value = false;
+    initFormData.value = { ...row, approvalTemplateId: Number(id) };
+    approvalNodeCreateDialogRef.value.openDialog();
+  };
+
+  const approverSelectDialogRef = ref();
+  const handleOpenAppoverSelect = async (node: ApprovalNodeInstanceType) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
+    if (approverSelectDialogRef.value) {
+      if (node.approverInfoList.length > 0) {
+        const res = await queryUserInfoByIds(node.approverInfoList.map((x) => x.approverId));
+        approverSelectDialogRef.value.setSelectedUser(res);
+      }
+      curNodeId.value = node.id;
+      approverSelectDialogRef.value.openDialog();
+    }
+  };
+
+  const handleApproverSelect = async (list: PersonGroupItem[]) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
+    try {
+      await updateApprvoerInfo({
+        id: curNodeId.value,
+        approvalTemplateId: Number(id),
+        approverList: '[' + list.map((item) => item.id).join(',') + ']',
+      });
+      approverSelectDialogRef.value.closeDialog();
+      getTabelData();
+      curNodeId.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleDeleteNode = async (id: number) => {
+    if (approvalInstance.value?.isApplied) {
+      ElMessage.error('已应用，无法编辑节点');
+      return;
+    }
+    try {
+      tableConfig.loading = true;
+      await delApprovalNodeInstance(id);
+      getTabelData();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @use '@/styles/page-details-layout.scss' as *;
+  .safety-platform-container__header {
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+    gap: 8px !important;
+  }
+  .approval-node-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .approval-node-container__title {
+    margin: 5px 0 10px;
+  }
+  .approval-node-container__button {
+    text-align: start;
+    margin: 10px 0 20px;
+  }
+</style>

src/views/system/approval/components/ApprovalCreateDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <BasicDialog ref="basicDialogRef" title="添加审批流程" @refresh="refreshFromData">
+    <template #form>
+      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig" />
+    </template>
+    <template #footer>
+      <el-button type="primary" @click="handleSumbit">提交</el-button>
+      <el-button @click="basicDialogRef?.closeDialog">取消</el-button>
+    </template>
+  </BasicDialog>
+  <UploadLoading :form-loading="formLoading" v-if="formLoading" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import BasicDialog from '@/components/BasicDialog.vue';
+  import BasicForm from '@/components/BasicForm.vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import { ApprovalInstanceRuleForm } from '../types';
+  import { APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES } from '../config/form';
+  import { addApprovalInstance } from '@/api/approval/approval';
+  import UploadLoading from '@/components/UploadLoading.vue';
+
+  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<ApprovalInstanceRuleForm>(APPROVAL_FORM_CONFIG, APPROVAL_FORM_DATA, APPROVAL_FORM_RULES);
+  const formLoading = ref(false);
+
+  const emits = defineEmits<{
+    (e: 'success'): void;
+  }>();
+  const openDialog = () => {
+    basicDialogRef.value?.openDialog();
+  };
+  const handleSumbit = async () => {
+    const validate = await basicFormRef.value?.validateForm();
+    if (!validate) return;
+    // 提交表单接口
+    try {
+      formLoading.value = true;
+      await addApprovalInstance(ruleFormData);
+      emits('success');
+      formLoading.value = false;
+      basicDialogRef.value?.closeDialog();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const refreshFromData = () => {
+    basicFormRef.value?.clearValidate();
+  };
+  defineExpose({
+    openDialog,
+  });
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/approval/components/ApprovalNodeCreateDialog.vue

@@ -0,0 +1,68 @@
+<template>
+  <BasicDialog ref="basicDialogRef" :title="dialogTitle + '审批节点'" @refresh="refreshFromData">
+    <template #form>
+      <ApprovalNodeCreateForm
+        v-if="formOpened"
+        ref="approvalNodeFormRef"
+        :init-data="props.initData"
+        :order-list="props.orderList"
+        @success="handleSuccess"
+      />
+    </template>
+    <template #footer>
+      <el-button type="primary" @click="handleSumbit">提交</el-button>
+      <el-button @click="handleClose">取消</el-button>
+    </template>
+  </BasicDialog>
+  <UploadLoading :form-loading="formLoading" v-if="formLoading" />
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import BasicDialog from '@/components/BasicDialog.vue';
+  import UploadLoading from '@/components/UploadLoading.vue';
+  import ApprovalNodeCreateForm from './ApprovalNodeCreateForm.vue';
+  import { ApprovalNodeInstanceRuleForm } from '../types';
+
+  const props = defineProps<{
+    isCreate: boolean;
+    initData?: ApprovalNodeInstanceRuleForm;
+    orderList?: number[];
+  }>();
+
+  const emits = defineEmits<{
+    (e: 'success'): void;
+  }>();
+
+  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
+  const approvalNodeFormRef = ref<InstanceType<typeof ApprovalNodeCreateForm>>();
+
+  const dialogTitle = computed(() => (props.isCreate ? '添加' : '编辑'));
+  const formLoading = ref(false);
+  const formOpened = ref(false);
+
+  const openDialog = () => {
+    basicDialogRef.value?.openDialog();
+    formOpened.value = true;
+  };
+  const handleSumbit = () => {
+    approvalNodeFormRef.value?.onSumbit();
+  };
+
+  const handleSuccess = () => {
+    emits('success');
+    handleClose();
+  };
+
+  const handleClose = () => {
+    basicDialogRef.value?.closeDialog();
+    formOpened.value = false;
+  };
+  const refreshFromData = () => {};
+
+  defineExpose({
+    openDialog,
+  });
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/approval/components/ApprovalNodeCreateForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { addApprovalNodeInstance } from '@/api/approval/approval';
+  import BasicForm from '@/components/BasicForm.vue';
+  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
+  import { ApprovalNodeInstanceRuleForm } from '../types';
+  import { APPROVAL_NODE_FORM_CONFIG, APPROVAL_NODE_FORM_DATA, APPROVAL_NODE_FORM_RULES } from '../config/form';
+
+  const props = defineProps<{
+    initData?: ApprovalNodeInstanceRuleForm;
+    orderList?: number[];
+  }>();
+
+  //   console.log(props.initData);
+
+  const emits = defineEmits<{
+    (e: 'success'): void;
+  }>();
+
+  const orderCache = ref(props.initData?.approvalOrder);
+
+  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+
+  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+    useFormConfigHook<ApprovalNodeInstanceRuleForm>(
+      APPROVAL_NODE_FORM_CONFIG,
+      props.initData || APPROVAL_NODE_FORM_DATA,
+      APPROVAL_NODE_FORM_RULES,
+    );
+
+  const onSumbit = async () => {
+    const validate = await basicFormRef.value?.validateForm();
+    if (!validate) return;
+    // console.log(props.orderList);
+    if (
+      orderCache.value !== ruleFormData.approvalOrder! &&
+      props.orderList &&
+      props.orderList.includes(ruleFormData.approvalOrder!)
+    ) {
+      ElMessage.error('该顺序已存在，请重新输入');
+      return;
+    }
+    // 提交表单接口
+    try {
+      await addApprovalNodeInstance(ruleFormData);
+      emits('success');
+      orderCache.value = undefined;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const onRefresh = () => {
+    basicFormRef.value?.clearValidate();
+  };
+
+  defineExpose({
+    onSumbit,
+    onRefresh,
+  });
+</script>
+
+<style scoped></style>

src/views/system/approval/components/ApproverSelectDialog.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-dialog
+    v-model="dialogOpened"
+    title="选择审批人"
+    align-center
+    :close-on-click-modal="false"
+    style="height: 583px"
+    :width="731"
+    :destroy-on-close="true"
+    class="workShopDialog"
+  >
+    <PersonGroupFilter
+      ref="dialogInstance"
+      :init-selected="selectedUser"
+      @cancel="closeDialog"
+      @submit="handlePersonDialogSubmit"
+    />
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+  import PersonGroupFilter from '@/components/PersonSelector/PersonGroupFilter.vue';
+  import { ref } from 'vue';
+  import { PersonGroupItem } from '@/types/person-group/type';
+
+  const emits = defineEmits<{
+    (e: 'submit', selectedPerson: PersonGroupItem[]): void;
+  }>();
+
+  const dialogOpened = ref(false);
+
+  const selectedUser = ref<PersonGroupItem[]>([]);
+
+  const handlePersonDialogSubmit = (selectedData: PersonGroupItem[]) => {
+    selectedUser.value = selectedData;
+    emits('submit', selectedUser.value);
+  };
+
+  function openDialog() {
+    dialogOpened.value = true;
+  }
+
+  function closeDialog() {
+    selectedUser.value = [];
+    dialogOpened.value = false;
+  }
+
+  function setSelectedUser(selectedData: PersonGroupItem[]) {
+    selectedUser.value = selectedData;
+  }
+
+  defineExpose({
+    openDialog,
+    closeDialog,
+    setSelectedUser,
+  });
+</script>
+
+<style scoped></style>

src/views/system/approval/config/form.ts

@@ -0,0 +1,127 @@
+/**
+ * 审批流程表单配置
+ */
+
+import { FormConfig } from '@/types/basic-form';
+
+export const APPROVAL_FORM_CONFIG: FormConfig[] = [
+  {
+    label: '审批流程名称：',
+    prop: 'templateName',
+    component: 'ElInput',
+    componentProps: { placeholder: '请输入审批流程名称' },
+  },
+  {
+    label: '审批流程描述：',
+    prop: 'description',
+    component: 'ElInput',
+    componentProps: { placeholder: '请输入审批流程描述' },
+  },
+];
+
+export const APPROVAL_FORM_DATA = {
+  templateName: '',
+  description: '',
+};
+
+export const APPROVAL_FORM_RULES = {
+  templateName: [{ required: true, message: '请输入审批流程名称', trigger: 'blur' }],
+};
+
+export const APPROVAL_NODE_FORM_CONFIG: FormConfig[] = [
+  {
+    label: '节点描述：',
+    prop: 'nodeDescription',
+    component: 'ElInput',
+    componentProps: { placeholder: '请输入节点描述' },
+  },
+  {
+    label: '审批人选择方式：',
+    prop: 'approverType',
+    component: 'ElSelect',
+    selectOptions: [
+      {
+        label: '固定',
+        value: 0,
+      },
+      {
+        label: '自选',
+        value: 1,
+      },
+    ],
+  },
+  {
+    label: '审批方式：',
+    prop: 'approvalType',
+    component: 'ElSelect',
+    selectOptions: [
+      {
+        label: '会签',
+        value: 0,
+      },
+      {
+        label: '或签',
+        value: 1,
+      },
+    ],
+  },
+  {
+    label: '审批节点顺序：',
+    prop: 'approvalOrder',
+    component: 'ElInputNumber',
+    componentProps: {
+      min: 1,
+    },
+  },
+];
+
+export const APPROVAL_NODE_FORM_DATA = {
+  approvalTemplateId: undefined,
+  nodeDescription: '',
+  approvalType: 0,
+  approverType: 1,
+  approvalOrder: undefined,
+};
+
+export const APPROVAL_NODE_FORM_RULES = {
+  nodeDescription: [
+    {
+      required: true,
+      message: '请输入节点描述',
+      trigger: 'blur',
+    },
+  ],
+  approverType: [
+    {
+      required: true,
+      message: '请选择审批人选择方式',
+      trigger: 'change',
+    },
+  ],
+  approvalType: [
+    {
+      required: true,
+      message: '请选择审批方式',
+      trigger: 'change',
+    },
+  ],
+  approvalOrder: [
+    {
+      required: true,
+      // validator: (rule: any, value: any, callback: any, existingNumbers: number[]) => {
+      //   // 检查输入值是否与已有数组中的任何元素重复
+      //   if (value === null || value === undefined || value === '') {
+      //     callback(); // 空值校验由required规则处理
+      //     return;
+      //   }
+      //   if (existingNumbers.includes(Number(value))) {
+      //     callback(new Error('该顺序已存在，请重新输入'));
+      //   } else {
+      //     callback();
+      //   }
+      // },
+      message: '请输入审批节点顺序',
+      trigger: 'blur',
+    },
+  ],
+};

src/views/system/approval/config/table.ts

@@ -0,0 +1,88 @@
+/**
+ * 审批管理表格配置
+ */
+import type { TableColumnProps } from '@/types/basic-table';
+
+// 基础表格样式配置
+export const TABLE_OPTIONS = {
+  emptyText: '暂无数据',
+  loading: true,
+  height: 'calc(70vh - 50px)',
+};
+
+export const NODE_TABLE_OPTIONS = {
+  emptyText: '暂无数据',
+  loading: true,
+  height: 'calc(70vh - 220px)',
+};
+
+export const APPROVAL_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    prop: 'id',
+    label: '序号',
+    align: 'center',
+    width: '150px',
+  },
+  {
+    prop: 'templateName',
+    label: '审批流程名称',
+    minWidth: '200px',
+    align: 'center',
+  },
+  {
+    prop: 'description',
+    label: '审批流程描述',
+    align: 'center',
+    minWidth: '800px',
+  },
+  {
+    prop: 'action',
+    label: '操作',
+    slot: 'action',
+    fixed: 'right',
+    width: '200px',
+    align: 'center',
+  },
+];
+
+export const APPROVAL_NODE_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    prop: 'approvalOrder',
+    label: '审批顺序',
+    width: '100px',
+    align: 'center',
+  },
+  {
+    prop: 'nodeDescription',
+    label: '节点描述',
+    minWidth: '200px',
+    align: 'center',
+  },
+  {
+    prop: 'approverType',
+    label: '审批人选择方式',
+    width: '100px',
+    align: 'center',
+    slot: 'approverType',
+  },
+  {
+    prop: 'approverNameList',
+    label: '审批人',
+    align: 'center',
+  },
+  {
+    prop: 'approvalType',
+    label: '审批方式',
+    width: '100px',
+    align: 'center',
+    slot: 'approvalType',
+  },
+  {
+    prop: 'action',
+    label: '操作',
+    slot: 'action',
+    fixed: 'right',
+    width: '200px',
+    align: 'center',
+  },
+];

src/views/system/approval/constants.ts

@@ -0,0 +1,9 @@
+export const APPROVER_TYPE_MAP = {
+  0: '固定',
+  1: '自选',
+};
+
+export const APPROVAL_TYPE_MAP = {
+  0: '会签',
+  1: '或签',
+};

src/views/system/approval/types.ts

@@ -0,0 +1,35 @@
+type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export interface ApprovalInstanceType {
+  id: number;
+  templateName: string;
+  description?: string;
+  isRelated?: number;
+  isApplied?: number;
+  approvalNodeInfoList?: ApprovalNodeInstanceType[];
+}
+
+export interface ApprovalInstanceRuleForm extends MakeOptional<ApprovalInstanceType, 'id'> {}
+
+export interface ApprovalNodeInstanceType {
+  id: number;
+  approvalTemplateId: number;
+  nodeDescription: string;
+  approvalOrder: number;
+  approverType: number; // 审批人选择方式: 0-固定，1-自选
+  approvalType: number; // 审批方式: 0-会签，1-或签
+
+  approverInfoList: {
+    approverId: number;
+    approverName: string;
+  }[];
+
+  approverList?: string;
+  approverNameList?: string;
+}
+
+export interface ApprovalNodeInstanceRuleForm
+  extends MakeOptional<
+    Omit<ApprovalNodeInstanceType, 'approverInfoList' | 'approverNameList'>,
+    'id' | 'approvalTemplateId' | 'approvalOrder' | 'nodeDescription' | 'approverType' | 'approvalType'
+  > {}

src/views/system/approval/utils.ts

@@ -0,0 +1,3 @@
+export function refineNameList(list: any[], key: string) {
+  return list.map((x) => x[key]).join(',');
+}

src/views/system/person-group/components/PersonGroupEditDrawer.vue

@@ -81,7 +81,7 @@
   import { addUserGroup, modifyUserGroup, queryUserGroupDetail } from '@/api/system/person-group';
   import { FormRules, FormInstance, ElMessage } from 'element-plus';
   import { useUserStore } from '@/store/modules/user';
-  import PersonGroupFilter from './PersonGroupFilter.vue';
+  import PersonGroupFilter from '@/components/PersonSelector/PersonGroupFilter.vue';
   import { storeToRefs } from 'pinia';
 
   defineProps<{

tsconfig.json

@@ -10,6 +10,9 @@
       "@/*": [
         "src/*"
       ],
+      "/#/*": [
+        "types/*"
+      ],
       "assets/*": [
         "src/assets/*"
       ],
@@ -40,6 +43,7 @@
     "components.d.ts",
     "types/**/*.d.ts",
     "types/**/*.ts",
+    "utils/**/*.ts"
   ],
   "references": [
     {

tsconfig.node.json

@@ -19,9 +19,12 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
   },
   "include": [
     "vite.config.ts",
     "build/**/*.ts",
+    "utils/**/*.ts",
+    "src/utils/dateUtil.ts",
   ]
 }

types/config.d.ts

@@ -50,74 +50,88 @@ export interface ImultiTabsSetting {
 export type NoticeChannelAppConfig = 'lanxin' | 'platform' | 'wecom';
 
 export interface GlobConfig {
+  // 标题
   title: string;
-  apiUrl: string;
-  shortName: string;
+  // api 接口前缀
   urlPrefix: string;
-  uploadUrl?: string;
-  prodMock: boolean;
-  imgUrl?: string;
-  appDownloadUrl?: string;
-  loginApp?: string;
-  appPCUrl?: string;
-  questionListVersion: string;
-  disableDepartmentEdit?: boolean;
-  hideReportMessageTabs?: boolean;
-  noticeChannel: NoticeChannelAppConfig[];
 }
 
 export interface GlobEnvConfig {
   // 标题
   VITE_GLOB_APP_TITLE: string;
-  // 接口地址
-  VITE_GLOB_API_URL: string;
   // 接口前缀
-  VITE_GLOB_API_URL_PREFIX?: string;
-  // 项目简称
-  VITE_GLOB_APP_SHORT_NAME: string;
-  // 图片上传地址
-  VITE_GLOB_UPLOAD_URL?: string;
-  //图片前缀地址
-  VITE_GLOB_IMG_URL?: string;
-  //生产环境开启mock
-  VITE_GLOB_PROD_MOCK: boolean;
-  /** 下载app的url */
-  VITE_GLOB_APP_DOWNLOAD_QRCODE: string;
-  /** 登录地址 */
-  VITE_GLOB_LOGIN_APP: string;
-  /** 地球模块登录地址 */
-  VITE_GLOB_SKYEYE_WORLD: string;
-  /** PC模块登录地址 */
-  VITE_GLOB_APP_PC: string;
-
-  VITE_GLOB_TENANT_CODE: string;
-
-  VITE_GLOB_QUESTION_LIST_VERSION: string;
-  VITE_GLOB_DISABLE_DEPARTMENT_EDIT: boolean;
-
-  // 是否隐藏掉平台违规报警 平台访问统计和人员访问数据的tab, 默认不隐藏
-  VITE_GLOB_HIDE_REPORT_MESSAGE_TABS: boolean;
-
-  // 消息管理可选择的推送渠道
-  VITE_GLOB_NOTICE_CHANNEL: NoticeChannelAppConfig[];
+  VITE_GLOB_API_URL_PREFIX: string;
 }
-export interface GlobConfig {
-  // 标题
-  title: string;
-  // 接口地址
-  apiUrl: string;
-  // 图片上传地址
-  uploadUrl?: string;
-  // api 接口前缀
-  urlPrefix: string;
-  // 项目简称
-  shortName: string;
-  // 生产环境开启 mock
-  prodMock: boolean;
-  // 图片访问地址
-  imgUrl: string | undefined;
 
-  tenantCode: string;
+// export interface GlobConfig {
+//   title: string;
+//   apiUrl: string;
+//   shortName: string;
+//   urlPrefix: string;
+//   uploadUrl?: string;
+//   prodMock: boolean;
+//   imgUrl?: string;
+//   appDownloadUrl?: string;
+//   loginApp?: string;
+//   appPCUrl?: string;
+//   questionListVersion: string;
+//   disableDepartmentEdit?: boolean;
+//   hideReportMessageTabs?: boolean;
+//   noticeChannel: NoticeChannelAppConfig[];
+// }
 
-  minifyImgUrl?: string;
-}
+// export interface GlobEnvConfig {
+//   // 标题
+//   VITE_GLOB_APP_TITLE: string;
+//   // 接口地址
+//   VITE_GLOB_API_URL: string;
+//   // 接口前缀
+//   VITE_GLOB_API_URL_PREFIX?: string;
+//   // 项目简称
+//   VITE_GLOB_APP_SHORT_NAME: string;
+//   // 图片上传地址
+//   VITE_GLOB_UPLOAD_URL?: string;
+//   //图片前缀地址
+//   VITE_GLOB_IMG_URL?: string;
+//   //生产环境开启mock
+//   VITE_GLOB_PROD_MOCK: boolean;
+//   /** 下载app的url */
+//   VITE_GLOB_APP_DOWNLOAD_QRCODE: string;
+//   /** 登录地址 */
+//   VITE_GLOB_LOGIN_APP: string;
+//   /** 地球模块登录地址 */
+//   VITE_GLOB_SKYEYE_WORLD: string;
+//   /** PC模块登录地址 */
+//   VITE_GLOB_APP_PC: string;
+
+//   VITE_GLOB_TENANT_CODE: string;
+
+//   VITE_GLOB_QUESTION_LIST_VERSION: string;
+//   VITE_GLOB_DISABLE_DEPARTMENT_EDIT: boolean;
+
+//   // 是否隐藏掉平台违规报警 平台访问统计和人员访问数据的tab, 默认不隐藏
+//   VITE_GLOB_HIDE_REPORT_MESSAGE_TABS: boolean;
+
+//   // 消息管理可选择的推送渠道
+//   VITE_GLOB_NOTICE_CHANNEL: NoticeChannelAppConfig[];
+// }
+// export interface GlobConfig {
+//   // 标题
+//   title: string;
+//   // 接口地址
+//   apiUrl: string;
+//   // 图片上传地址
+//   uploadUrl?: string;
+//   // api 接口前缀
+//   urlPrefix: string;
+//   // 项目简称
+//   shortName: string;
+//   // 生产环境开启 mock
+//   prodMock: boolean;
+//   // 图片访问地址
+//   imgUrl: string | undefined;
+
+//   tenantCode: string;
+
+//   minifyImgUrl?: string;
+// }

utils/devProxy/staff/proxy.ts

@@ -3,7 +3,8 @@ import path from 'path';
 
 // staff环境
 const proxyStaff: PROXY_TYPE = {
-  serverHost: 'http://192.168.13.68:8802/',
+  // serverHost: 'http://192.168.13.68:8802/',
+  serverHost: 'http://192.168.22.146:8802/',
   // serverHost: 'http://192.168.22.146:8802/',
   loginHost: 'http://192.168.13.68:7200/login/#/',
   fileUploadHost: 'http://192.168.13.102:9000/',