多组织机构审批流配置

2026-01-03 16:17:21 +08:00 · 2026-01-03 16:17:21 +08:00 · d70d5f6bb7
parent 26c789b1bd
commit d70d5f6bb7
5 changed files with 148 additions and 30 deletions
--- a/src/api/approvalProcess.js
+++ b/src/api/approvalProcess.js
@ -80,3 +80,15 @@ export const disableProcess = (id) => {
  })
 }

+/**
+ * 获取用户列表（用于审批人选择）
+ * @param {object} params - 查询参数
+ */
+export const getUserList = (params) => {
+  return request({
+    url: '/material-mall/userManage/userList',
+    method: 'GET',
+    params: params
+  })
+}
+
--- a/src/views/system/approval/components/NodeDialog.vue
+++ b/src/views/system/approval/components/NodeDialog.vue
@ -10,25 +10,33 @@
      <el-form-item label="节点顺序" prop="nodeOrder">
        <el-input-number v-model="form.nodeOrder" :min="1" />
      </el-form-item>
-      <el-form-item label="节点编码" prop="nodeCode">
-        <el-input v-model="form.nodeCode" placeholder="请输入节点编码" />
-      </el-form-item>
      <el-form-item label="节点名称" prop="nodeName">
        <el-input v-model="form.nodeName" placeholder="请输入节点名称" />
      </el-form-item>
      <el-form-item label="审批人类型" prop="approverType">
        <el-radio-group v-model="form.approverType">
          <el-radio label="1">用户</el-radio>
-          <el-radio label="2">角色</el-radio>
+          <el-radio label="2" disabled="disabled">角色</el-radio>
        </el-radio-group>
      </el-form-item>
-      <el-form-item label="审批人ID" prop="approverIds">
-        <el-input
-          v-model="form.approverIds"
-          placeholder="请输入审批人ID，多个用逗号分隔"
-          type="textarea"
-          rows="3"
-        />
+      <el-form-item label="审批人" prop="approverIds">
+        <el-button type="primary" size="small" @click="handleSelectApprover">
+          选择审批人
+        </el-button>
+        <div v-if="selectedApprovers.length > 0" style="margin-top: 10px">
+          <el-tag
+            v-for="approver in selectedApprovers"
+            :key="approver.userId"
+            closable
+            @close="handleRemoveApprover(approver.userId)"
+            style="margin-right: 5px; margin-bottom: 5px"
+          >
+            {{ approver.userName }}
+          </el-tag>
+        </div>
+        <div v-else style="color: #999; margin-top: 10px">
+          未选择审批人
+        </div>
      </el-form-item>
      <el-form-item label="审批模式" prop="approveMode">
        <el-radio-group v-model="form.approveMode">
@ -48,10 +56,45 @@
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
+
+    <!-- 用户列表选择对话框 -->
+    <el-dialog
+      title="选择审批人"
+      :visible.sync="userListDialogVisible"
+      width="70%"
+      append-to-body
+    >
+      <el-table
+        ref="userTable"
+        v-loading="userListLoading"
+        :data="userList"
+        style="width: 100%"
+        border
+        stripe
+        @selection-change="handleUserSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+        />
+        <el-table-column prop="userId" label="用户ID" width="80" />
+        <el-table-column prop="userName" label="用户名" min-width="120" />
+        <el-table-column prop="nickName" label="昵称" min-width="120" />
+        <el-table-column prop="deptName" label="所属机构" min-width="120" />
+      </el-table>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="userListDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleUserListConfirm">确定</el-button>
+      </span>
+    </el-dialog>
  </el-dialog>
 </template>

 <script>
+import { getUserList } from '@/api/approvalProcess'
+
 export default {
  name: 'NodeDialog',
  props: {
@ -73,7 +116,6 @@ export default {
      dialogVisible: false,
      form: {
        nodeOrder: 1,
-        nodeCode: '',
        nodeName: '',
        approverType: '1',
        approverIds: '',
@ -82,10 +124,14 @@ export default {
      },
      rules: {
        nodeOrder: [{ required: true, message: '请输入节点顺序', trigger: 'blur' }],
-        nodeCode: [{ required: true, message: '请输入节点编码', trigger: 'blur' }],
        nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
-        approverIds: [{ required: true, message: '请输入审批人ID', trigger: 'blur' }]
-      }
+        approverIds: [{ required: true, message: '请选择审批人', trigger: 'change' }]
+      },
+      selectedApprovers: [],
+      userListDialogVisible: false,
+      userList: [],
+      selectedUserIds: [],
+      userListLoading: false
    }
  },
  watch: {
@ -93,10 +139,80 @@ export default {
      this.dialogVisible = val
      if (val) {
        this.form = JSON.parse(JSON.stringify(this.nodeData))
+        this.initSelectedApprovers()
      }
    }
  },
  methods: {
+    // 初始化已选择的审批人
+    initSelectedApprovers() {
+      if (this.form.approverIds) {
+        const ids = this.form.approverIds.split(',').map(id => id.trim())
+        this.selectedUserIds = ids
+        this.loadUserList()
+      } else {
+        this.selectedApprovers = []
+        this.selectedUserIds = []
+      }
+    },
+    // 加载用户列表
+    loadUserList() {
+      this.userListLoading = true
+      return getUserList({ pageNum: 1, pageSize: 1000 })
+        .then(res => {
+          this.userList = res.rows || []
+          // 根据已选择的ID过滤出已选择的用户
+          this.selectedApprovers = this.userList.filter(user =>
+            this.selectedUserIds.includes(String(user.userId))
+          )
+        })
+        .catch(error => {
+          console.error('加载用户列表失败:', error)
+          this.$message.error('加载用户列表失败')
+        })
+        .finally(() => {
+          this.userListLoading = false
+        })
+    },
+    // 打开用户选择对话框
+    handleSelectApprover() {
+      this.userListDialogVisible = true
+      this.loadUserList().then(() => {
+        // 预先选中已选择的用户
+        this.$nextTick(() => {
+          if (this.$refs.userTable && this.selectedApprovers.length > 0) {
+            this.selectedApprovers.forEach(approver => {
+              const user = this.userList.find(u => u.userId === approver.userId)
+              if (user) {
+                this.$refs.userTable.toggleRowSelection(user)
+              }
+            })
+          }
+        })
+      })
+    },
+    // 移除已选择的审批人
+    handleRemoveApprover(userId) {
+      this.selectedApprovers = this.selectedApprovers.filter(u => u.userId !== userId)
+      this.selectedUserIds = this.selectedApprovers.map(u => String(u.userId))
+      this.updateApproverIds()
+    },
+    // 更新审批人ID
+    updateApproverIds() {
+      this.form.approverIds = this.selectedUserIds.join(',')
+    },
+    // 用户表格选择变化
+    handleUserSelectionChange() {
+      // 这个方法用于跟踪表格选择变化
+    },
+    // 用户列表对话框确定
+    handleUserListConfirm() {
+      const selectedUsers = this.$refs.userTable.selection || []
+      this.selectedApprovers = selectedUsers
+      this.selectedUserIds = selectedUsers.map(u => String(u.userId))
+      this.updateApproverIds()
+      this.userListDialogVisible = false
+    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
--- a/src/views/system/approval/components/ProcessDialog.vue
+++ b/src/views/system/approval/components/ProcessDialog.vue
@ -7,9 +7,6 @@
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-      <el-form-item label="流程编码" prop="processCode">
-        <el-input v-model="form.processCode" placeholder="请输入流程编码" :disabled="isEdit" />
-      </el-form-item>
      <el-form-item label="流程名称" prop="processName">
        <el-input v-model="form.processName" placeholder="请输入流程名称" />
      </el-form-item>
@ -42,7 +39,8 @@
              {{ scope.row.approverType === '1' ? '用户' : '角色' }}
            </template>
          </el-table-column>
-          <el-table-column prop="approverIds" label="审批人ID" min-width="80" show-overflow-tooltip />
+<!--          <el-table-column prop="approverIds" label="审批人ID" min-width="80" show-overflow-tooltip />-->
+          <el-table-column prop="name" label="审批人" min-width="80" show-overflow-tooltip />
          <el-table-column prop="approveMode" label="审批模式" width="100">
            <template slot-scope="scope">
              {{ scope.row.approveMode === '1' ? '或签' : '会签' }}
@ -109,7 +107,6 @@ export default {
      currentNodeIndex: -1,
      form: {
        id: '',
-        processCode: '',
        processName: '',
        businessType: '',
        description: '',
@ -117,7 +114,6 @@ export default {
        nodeList: []
      },
      rules: {
-        processCode: [{ required: true, message: '请输入流程编码', trigger: 'blur' }],
        processName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
        businessType: [{ required: true, message: '请选择业务类型', trigger: 'change' }]
      }
@ -131,7 +127,6 @@ export default {
      } else if (val) {
        this.form = {
          id: '',
-          processCode: '',
          processName: '',
          businessType: '',
          description: '',
@ -153,7 +148,6 @@ export default {
      this.currentNode = {
        nodeOrder: this.form.nodeList.length + 1,
        nodeName: '',
-        nodeCode: '',
        approverType: '1',
        approverIds: '',
        approveMode: '1',
--- a/src/views/system/approval/detail.vue
+++ b/src/views/system/approval/detail.vue
@ -4,9 +4,6 @@
      <!-- 基本信息 -->
      <div class="section-title">基本信息</div>
      <el-form :model="process" label-width="120px" :inline="true">
-        <el-form-item label="流程编码">
-          <el-input v-model="process.processCode" disabled />
-        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="process.processName" disabled />
        </el-form-item>
@ -29,7 +26,7 @@
      <div class="section-title" style="margin-top: 30px">审批节点配置</div>
      <el-table :data="process.nodeList" border stripe height="546" style="margin-top: 10px">
        <el-table-column prop="nodeOrder" label="节点顺序" width="80" />
-        <el-table-column prop="nodeCode" label="节点编码" width="120" />
+<!--        <el-table-column prop="nodeCode" label="节点编码" width="120" />-->
        <el-table-column prop="nodeName" label="节点名称" min-width="150" />
        <el-table-column prop="approverType" label="审批人类型" width="100">
          <template slot-scope="scope">
@ -82,7 +79,6 @@ export default {
      dialogVisible: false,
      process: {
        id: '',
-        processCode: '',
        processName: '',
        businessType: '',
        description: '',
--- a/src/views/system/approval/index.vue
+++ b/src/views/system/approval/index.vue
@ -47,13 +47,13 @@
      >
        <el-table-column align="center" label="序号" type="index" width="60"/>
 <!--        <el-table-column prop="id" label="ID" width="60" />-->
-        <el-table-column prop="processCode" align="center" label="流程编码" width="220" />
        <el-table-column prop="processName" align="center" label="流程名称" min-width="100" />
        <el-table-column prop="businessType" align="center" label="业务类型" width="150">
          <template slot-scope="scope">
            {{ getBusinessTypeLabel(scope.row.businessType) }}
          </template>
        </el-table-column>
+        <el-table-column prop="orgName" align="center" label="归属机构" min-width="100" />
        <el-table-column prop="description" align="center" label="流程描述" min-width="180" show-overflow-tooltip />
        <el-table-column prop="status" align="center" label="状态" width="80">
          <template slot-scope="scope">
@ -66,7 +66,7 @@
        <el-table-column align="center" label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button type="info" size="mini" @click="handleView(scope.row)">查看</el-button>
+<!--            <el-button type="info" size="mini" @click="handleView(scope.row)">查看</el-button>-->
            <!-- <el-button type="danger" size="mini" @click="handleDeleteOne(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>