From 81294d4104801b9d224c09cd4946845d654c06a2 Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Thu, 14 Mar 2024 10:39:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=A1=E6=A0=B8=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth/authAdmin.js                     |   8 +
 src/api/basic/sysApprovalFlow.js              |  19 ++
 src/api/basic/sysApprovalFlowConfig.js        |  35 +++
 src/components/ApprovalFlow/index.vue         | 183 +++++++++++++
 .../basic/approval/SysApprovalFlowConfig.vue  | 162 +++++++++++
 .../approval/sysApprovalFlowConfigEdit.vue    | 259 ++++++++++++++++++
 6 files changed, 666 insertions(+)
 create mode 100644 src/api/basic/sysApprovalFlow.js
 create mode 100644 src/api/basic/sysApprovalFlowConfig.js
 create mode 100644 src/components/ApprovalFlow/index.vue
 create mode 100644 src/views/basic/approval/SysApprovalFlowConfig.vue
 create mode 100644 src/views/basic/approval/sysApprovalFlowConfigEdit.vue

diff --git a/src/api/auth/authAdmin.js b/src/api/auth/authAdmin.js
index 30340561..dbd6cc7f 100644
--- a/src/api/auth/authAdmin.js
+++ b/src/api/auth/authAdmin.js
@@ -81,3 +81,11 @@ export function filterByUser(query) {
     params: query
   });
 }
+
+export function companyUserList(query) {
+  return axios({
+    url: "/admin/auth/companyUser/list",
+    method: "get",
+    params: query
+  });
+}
diff --git a/src/api/basic/sysApprovalFlow.js b/src/api/basic/sysApprovalFlow.js
new file mode 100644
index 00000000..1f938a8b
--- /dev/null
+++ b/src/api/basic/sysApprovalFlow.js
@@ -0,0 +1,19 @@
+import axios from "@/utils/request";
+
+let BUSINESS_PRE = "/udiwms";
+
+export function getDetailList(approvalFlowId) {
+  return axios({
+    url: BUSINESS_PRE+`/sysApprovalFlow/approvalFlowDetailList/${approvalFlowId}`,
+    method: "GET"
+  });
+}
+
+
+export function submitApprovalFlow(query) {
+  return axios({
+    url: BUSINESS_PRE+"/sysApprovalFlow/submitApprovalFlow",
+    method: "post",
+    data: query
+  });
+}
diff --git a/src/api/basic/sysApprovalFlowConfig.js b/src/api/basic/sysApprovalFlowConfig.js
new file mode 100644
index 00000000..22c84b1a
--- /dev/null
+++ b/src/api/basic/sysApprovalFlowConfig.js
@@ -0,0 +1,35 @@
+import axios from "@/utils/request";
+let BUSINESS_PRE = "/udiwms";
+
+export function getList(query) {
+  return axios({
+    url: BUSINESS_PRE + '/sysApprovalFlowConfig/filter',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getConfigDetailList(query) {
+  return axios({
+    url: BUSINESS_PRE + '/sysApprovalFlowConfig/detail',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addConfigDetail(query) {
+  return axios({
+    url: BUSINESS_PRE+"/sysApprovalFlowConfig/addConfigDetail",
+    method: "post",
+    data: query
+  });
+}
+
+
+// 删除
+export function removeDetail(id) {
+  return axios({
+    url: BUSINESS_PRE+`/sysApprovalFlowConfig/removeDetail/${id}`,
+    method: "DELETE"
+  });
+}
diff --git a/src/components/ApprovalFlow/index.vue b/src/components/ApprovalFlow/index.vue
new file mode 100644
index 00000000..c203d327
--- /dev/null
+++ b/src/components/ApprovalFlow/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <!-- 时间线 -->
+  <div class="block" style="padding-top: 40px; padding-left: 200px">
+    <el-timeline>
+      <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="colors(activity.approvalStatus)">
+        <!-- 方案一 -->
+        <el-card v-if="activity.nodeType == 2 " style="width: 85%" shadow="hover">
+          <div class="content">
+            <span>
+              <b v-if="activity.approvalStatus != 2">办理人：</b>
+              <b v-else>待办人：</b>
+              {{ activity.approvalUserName }}</span>
+            <span v-if="activity.approvalStatus != 2"><b>办理时间：</b>{{ activity.approvalTime }}</span>
+          </div>
+          <hr color="#eee"/>
+          <div style="margin-top: 8px">
+            状态：
+            <el-button type="text" size="small" :style="fontstyle(activity.approvalStatus)" class="status"
+                       @click.native="approvalFlowUpdate(activity)">
+              {{
+                activity.approvalStatus == 2 ?
+                  '待审核' : activity.approvalStatus == 3 ? '通过' : activity.approvalStatus == 4 ? '拒绝' : '审核中'
+              }}
+            </el-button>
+            <div style="margin-bottom: 8px" v-if="activity.approvalStatus != 2">
+              审批意见：<span>{{ activity.approvalOpinion }}</span>
+            </div>
+
+
+            <el-dialog title="编辑审批" :visible.sync="approvalFlowUpdateShow">
+              <el-form :model="approvalFlow">
+                <el-form-item label="审批意见" label-width="120px">
+                  <el-input v-model="approvalFlow.approvalOpinion" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="审批结果" label-width="120px">
+                  <el-select v-model="approvalFlow.approvalStatus" placeholder="请选择审批结果">
+                    <el-option label="通过" value="3"></el-option>
+                    <el-option label="驳回" value="4"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button @click="approvalFlowUpdateShow = false">取 消</el-button>
+                <el-button type="primary" @click=submitApprovalFlow>确 定</el-button>
+              </div>
+            </el-dialog>
+
+          </div>
+        </el-card>
+        <!-- 方案二 -->
+        <el-card v-else style="width: 85%" shadow="hover">
+          <div class="content">
+            <span><b>申请人：</b>{{ activity.userName }}</span>
+            <span><b>申请标题：</b>{{ activity.title }}</span>
+            <span><b>提交时间：</b>{{ activity.createTime }}</span>
+          </div>
+          <hr color="#eee"/>
+          <div style="margin-top: 8px">
+            状态：
+            <el-button type="text" size="small" :style="fontstyle(activity.approvalStatus)" class="status">
+              {{
+                activity.approvalStatus == 2 ? '待审核' : activity.approvalStatus == 3 ? '通过' : activity.approvalStatus == 4 ? '拒绝' : '审核中'
+              }}
+            </el-button>
+          </div>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+
+  </div>
+</template>
+
+<script>
+import {getDetailList, submitApprovalFlow} from "@/api/basic/sysApprovalFlow";
+
+export default {
+  name: "ApprovalFlow",
+  props: {
+    closeDialog: {
+      type: Function,
+      required: true,
+    },
+    idQuery: {
+      type: Object,
+      required: true,
+    },
+    isChang: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      approvalFlowUpdateShow: false,
+      query: {
+        approvalFlowId: ''
+      },
+      idQuery: {},
+      approvalFlow: {
+        id: "",
+        approvalOpinion: "",
+        approvalStatus: ""
+      },
+      activities: []
+    }
+  },
+  methods: {
+    submitApprovalFlow() {
+      this.approvalFlow.approvalOpinion = this.approvalFlow.approvalOpinion.trim()
+      submitApprovalFlow(this.approvalFlow)
+        .then((response) => {
+          if (response.code == 20000) {
+            this.$message.success("审批完成");
+            this.approvalFlowUpdateShow = false
+            this.approvalFlow = {}
+            this.getList();
+          } else {
+            this.$message.error(response.message);
+
+          }
+        })
+        .catch(() => {
+        });
+    },
+    approvalFlowUpdate(row) {
+      if (row.approvalStatus == 2){
+        this.approvalFlow.id = row.id
+        this.approvalFlowUpdateShow = !this.approvalFlowUpdateShow
+      }
+    },
+    // 流转记录圆点颜色
+    colors(index) {
+      if (index == 3) {
+        return '#2a9c4a';
+      } else if (index == 4) {
+        return 'red';
+      }
+    },
+    getList() {
+      this.loading = true;
+      this.idQuery.approvalFlowId
+      getDetailList(this.idQuery.approvalFlowId)
+        .then((response) => {
+          this.activities = response.data || [];
+        })
+        .catch(() => {
+        });
+
+    }
+  },
+
+  computed: {
+    // 监听agree颜色变化
+    fontstyle() {
+      return (icontent) => {
+        if (icontent == '3') {
+          return {color: 'green'};
+        } else if (icontent == '4') {
+          return {color: 'red'};
+        } else {
+          return {color: 'blue'};
+        }
+      };
+    },
+  },
+  created() {
+    this.getList();
+  }
+}
+</script>
+
+<style scoped lang="scss" rel="stylesheet/scss">
+.content {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0px;
+
+  span {
+    flex: 1;
+  }
+}
+</style>
+
diff --git a/src/views/basic/approval/SysApprovalFlowConfig.vue b/src/views/basic/approval/SysApprovalFlowConfig.vue
new file mode 100644
index 00000000..05e57d98
--- /dev/null
+++ b/src/views/basic/approval/SysApprovalFlowConfig.vue
@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <el-card class="el-card">
+      <el-form :model="filterQuery" class="query-form" label-width="100px" v-if="showSearch">
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="单据标识">
+              <el-input v-model="filterQuery.type" style="width: 90%" placeholder="请输入单据标识" clearable></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="单据名称">
+              <el-input v-model="filterQuery.typeName" style="width: 90%" placeholder="请输入单据名称" clearable></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div class="top-right-btn">
+        <el-button-group style="display:flex;">
+          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
+          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
+<!--          <el-button type="primary" icon="el-icon-plus" @click="onAdd">新增</el-button>-->
+        </el-button-group>
+      </div>
+      <el-divider style="margin: 15px"></el-divider>
+
+      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row>
+        <el-table-column label="序号" type="index" width="60"></el-table-column>
+        <el-table-column label="单据标识" prop="type"></el-table-column>
+        <el-table-column label="单据名称" prop="typeName"></el-table-column>
+        <el-table-column label="排序" prop="approvalSort"></el-table-column>
+        <el-table-column label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.native.stop="openEdit(scope.row)">审批过程
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      title="审批过程"
+      :visible.sync="openEditVisible"
+      width="80%"
+      v-if="openEditVisible"
+      @close='closeDialog'
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="handleClose"
+    >
+      <sysApprovalFlowConfigEdit
+        :closeDialog="closeDialog"
+        v-on:cancelDialog="getId"
+        :idQuery="idQuery"
+      ></sysApprovalFlowConfigEdit>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {getList} from "@/api/basic/sysApprovalFlowConfig";
+import sysApprovalFlowConfigEdit from "@/views/basic/approval/sysApprovalFlowConfigEdit";
+
+export default {
+  name: "SysApprovalFlowConfig",
+  data() {
+    return {
+      openEditVisible: false,
+      showSearch: true,
+      activities: [],
+      filterQuery: {
+        type: '',
+        typeName: '',
+        page: 1,
+        limit: 10
+      },
+      detailList: [],
+      list: [],
+      total: 0,
+      idQuery: {},
+    }
+  }
+  ,
+  methods: {
+    getId(id) {
+      return
+    },
+    handleClose() {
+      this.openEditVisible = false
+      this.getList();
+    },
+    closeDialog() {
+      this.openEditVisible = false;
+      this.getList();
+    },
+    openEdit(row) {
+      this.idQuery.type = row.type;
+      this.idQuery.formData = row;
+      this.openEditVisible = true;
+    },
+    hideSearch() {
+      this.showSearch = !this.showSearch;
+    },
+    onSubmitFind() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    onReset() {
+      this.filterQuery = {
+        type: '',
+        typeName: '',
+        page: 1,
+        limit: 10
+      };
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      getList(this.filterQuery).then((response) => {
+        if (response.code == 20000) {
+          this.list = response.data.list || [];
+          this.total = response.data.total || 0;
+          this.detailList = []
+        } else {
+          this.$message.error(response.message);
+        }
+        this.loading = false;
+      })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+
+    }
+  }
+  ,
+  computed: {
+  },
+  components: {
+    sysApprovalFlowConfigEdit
+  },
+  created() {
+    this.getList();
+  }
+}
+</script>
+
+<style scoped lang="scss" rel="stylesheet/scss">
+.content {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0px;
+
+  span {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/basic/approval/sysApprovalFlowConfigEdit.vue b/src/views/basic/approval/sysApprovalFlowConfigEdit.vue
new file mode 100644
index 00000000..1113c917
--- /dev/null
+++ b/src/views/basic/approval/sysApprovalFlowConfigEdit.vue
@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <el-form :model="formData" :rules="formRules" ref="dataForm" label-width="120px">
+      <el-card style="margin-top: -5px;">
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="单据标识:" prop="type">
+              <el-input v-model="formData.type" auto-complete="off" :disabled="true"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="单据名称:" prop="typeName">
+              <el-input v-model="formData.typeName" auto-complete="off" :disabled="true"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-form>
+
+    <el-card>
+      <el-row type="flex" justify="end">
+        <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px">
+          <el-button v-if="!addVisible " type="primary" @click.native="add()" round>新增节点</el-button>
+          <el-button v-if="addVisible " type="primary" @click.native="add()" round>取消新增节点</el-button>
+        </el-button-group>
+      </el-row>
+
+      <el-form :model="addformData" class="order-el-form" ref="dataForm" label-width="120px">
+        <el-row v-show="addVisible" type="flex">
+          <el-col :span="7">
+            <el-form-item prop="userName" label="审批人员:">
+              <el-select
+                v-model="addformData.approvalUserId"
+                filterable
+                remote
+                clearable
+                reserve-keyword
+                placeholder="请输入审批人员信息"
+                :remote-method="findMethod"
+              >
+                <el-option
+                  v-for="item in userList"
+                  :key="item.id"
+                  :label="item.employeeName"
+                  :value="item.id"
+                >
+                  <span style="float: left">{{ item.employeeName }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="7">
+            <el-form-item prop="approvalSort" label="审批顺序:">
+              <el-input-number
+                v-model="addformData.approvalSort"
+                auto-complete="off"
+                clearable
+                placeholder="请输入审批顺序" oninput="value=value.replace(/[^0-9.]/g,'')"
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2">
+          </el-col>
+          <el-col :span="6">
+            <el-button type="success" round @click.native="addConfigMx()">提交</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 时间线 -->
+      <div class="block" style="padding-top: 40px; padding-left: 200px">
+        <el-timeline>
+          <el-timeline-item v-for="(activity,index) in activities"
+                            :key="index">
+            <el-card style="width: 85%" shadow="hover">
+              <div class="content">
+                <span><b>审批人：</b>{{ activity.approvalUserName }}</span>
+                <span><b>审批顺序：</b>{{ activity.approvalSort }}</span>
+                <span>
+<!--                    <el-button type='primary' icon='el-icon-edit' circle @click.native="edit()"></el-button>-->
+                    <el-button type='danger' icon='el-icon-delete' circle @click.native="removeDetail(activity.id)"></el-button>
+                  </span>
+              </div>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+import {getConfigDetailList,addConfigDetail,removeDetail} from "@/api/basic/sysApprovalFlowConfig";
+import {companyUserList} from "@/api/auth/authAdmin";
+
+export default {
+  name: "sysApprovalFlowConfigEdit",
+  props: {
+    closeDialog: {
+      type: Function,
+      required: true,
+    },
+    idQuery: {
+      type: Object,
+      required: true,
+    },
+    isChang: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      input: '',
+      userList: [],
+      addVisible: false,
+      addformData: {
+        type: '',
+        approvalUserName: '',
+        approvalSort: '',
+        approvalUserId: '',
+      },
+      query: {
+        type: ''
+      },
+      innerQuery: {
+        userName: ''
+      },
+      formData: {
+        type: '',
+        typeName: ''
+      },
+      showSearch: true,
+      activities: [],
+      filterQuery: {
+        keyWords: '',
+        type: '',
+        typeName: '',
+        page: 1,
+        limit: 10
+      },
+      list: [],
+      total: 0,
+      idQuery: {},
+    }
+  },
+  methods: {
+    removeDetail(id){
+      removeDetail(id).then((response) => {
+        if (response.code !== 20000) {
+          this.$message.error(response.message);
+          return false
+        }
+        this.getList();
+      })
+        .catch(() => {
+        })
+
+    },
+    addConfigMx() {
+      const selectedItem = this.userList.find((item) => { // 这里的chargingWorkNameList就是上面遍历的数据源
+        return item.id === this.addformData.approvalUserId
+      })
+      this.addformData.approvalUserName = selectedItem.employeeName
+      this.addformData.type = this.formData.type
+      addConfigDetail(this.addformData)
+        .then((response) => {
+        this.loading = false;
+        if (response.code !== 20000) {
+          this.$message.error(response.message);
+          return false
+        }
+          this.getList();
+      })
+        .catch(() => {
+          this.unitLoading = false;
+          this.userList = [];
+        })
+      this.add();
+
+    },
+    findMethod(query) {
+      this.fromOptions = [];
+      let cQuery = {
+        userName: query.trim()
+      };
+      companyUserList(cQuery)
+        .then((response) => {
+          this.loading = false;
+          if (response.code !== 20000) {
+            this.$message.error(response.message);
+            return false
+          }
+          this.userList = response.data || [];
+          this.unitLoading = false;
+        })
+        .catch(() => {
+          this.unitLoading = false;
+          this.userList = [];
+        })
+    },
+    selectMediaId(id) {
+      console.log(id, '选中的ID值')
+      const selectedItem = this.materialList.find((item) => { // 这里的chargingWorkNameList就是上面遍历的数据源
+        return item.id === id
+        // 筛选出匹配数据，是对应数据的整个对象
+      })
+      console.log(selectedItem, '当前选项的对象')
+    },
+    add() {
+      this.addVisible = !this.addVisible
+    },
+    getList() {
+      this.loading = true;
+      this.query.type = this.idQuery.type
+      getConfigDetailList(this.query) //查找该单号下的所有条码
+        .then((response) => {
+          this.activities = response.data || [];
+          this.total = response.data.total || 0;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+
+    }
+
+  },
+  watch: {
+    'searchcursom': {
+      handler: function () {
+        this.focusCustomer()
+      }
+    }
+  },
+  computed: {},
+  components: {
+    getConfigDetailList
+  },
+  created() {
+    this.formData = this.idQuery.formData;
+    this.getList();
+  }
+}
+</script>
+
+<style scoped lang="scss" rel="stylesheet/scss">
+.content {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px 0px;
+
+  span {
+    flex: 1;
+  }
+}
+</style>