更换审批人组件

src/api/approval/processConfig.js

@@ -57,3 +57,12 @@ export function getUserList(params) {
     params:{params}
   })
 }
+
+// 更改审批人
+export function changeApprove(url, data) {
+  return request({
+    url: url,
+    method: 'get',
+    params: data
+  })
+}

src/components/change-approve/main.vue

@@ -0,0 +1,109 @@
+<template>
+<!--  用于更换审批人（不知道其他人到时候用不用 现做成组件）-->
+  <el-dialog
+    v-dialogdrag
+    title="更换审批人"
+    :visible.sync="visible"
+    append-to-body
+    width="45%"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :close-on-press-escape="false"
+    :before-close="closeDialog"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="审批人" prop="auditUserId">
+        <el-select
+          v-model="form.auditUserId"
+          clearable
+          filterable
+          size="small"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="(item, index) in userOption"
+            :key="index"
+            :label="item.realName"
+            :value="item.id"
+            @change="getUserName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+<!--      <el-form-item label="发送内容" prop="messageBody">-->
+<!--        <el-input type="textarea" v-model="form.messageBody" size="small" placeholder="请输入发送内容"></el-input>-->
+<!--      </el-form-item>-->
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="sendHandle">发送</el-button>
+      <el-button @click="closeDialog">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getList } from "@/api/system/user";
+import { changeApprove } from "@/api/approval/processConfig"
+
+export default {
+  name: "main",
+  props: {
+    auditId: {
+      type: Number
+    },
+    url: {
+      type: String
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        auditUserId: '',
+        // messageBody: null,
+      },
+      userOption: [],
+      rules: {
+        auditUserId: [{required: true, message: " ", trigger: "change"}],
+        // messageBody: [{required: true, message: " ", trigger: "blur"}],
+      },
+    }
+  },
+  created() {
+    getList().then(res => {
+      this.userOption = res.data.data.records;
+    })
+  },
+  methods: {
+    // 打开
+    init() {
+      this.visible = true;
+    },
+    closeDialog() {
+      this.visible = false;
+      this.form = {}
+      this.$refs.form.clearValidate();
+      this.$emit("closeDialog")
+    },
+    // 确认修改
+    sendHandle() {
+      this.$refs["form"].validate(valid => {
+        console.log(this.url)
+        if (valid) {
+          changeApprove(this.url, {...this.form, auditId: this.auditId}).then(res => {
+            this.closeDialog()
+            this.$router.$avueRouter.closeTag();
+            this.$router.push({path: `/approveData/index`});
+          })
+        }
+      })
+    },
+    getUserName() {
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -46,6 +46,8 @@ import userCom from '@/components/selectComponent/userCom';
 import cropSelect from "@/components/crop-select/main";
 // 发送消息㢟
 import messagePost from "@/components/messageSend/main"
+// 更改审批人
+import changeApprove from "@/components/change-approve/main"
 //枚举列设置名称管理
 import {
   getColumnName
@@ -77,6 +79,7 @@ Vue.component('userCom', userCom);
 Vue.component('userSelect', userSelect);
 Vue.component('cropSelect', cropSelect);
 Vue.component('messagePost', messagePost);
+Vue.component('changeApprove', changeApprove)
 import portInfo from "@/components/port-info/index";
 Vue.component('portInfo', portInfo);
 // 注册全局crud驱动