新增应收应付流程

src/api/bpm/components/financialManage/payableManage/index.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request';
+
+
+
+
+//保存收款记录
+export async function finPayableSaveAPI(data) {
+  const res = await request.post(`/eom/finpayable/saveDetail`, data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 信息
+export async function getFinPayableInfoAPI(id) {
+  const res = await request.get(`/eom/finpayable/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 删除收款记录
+export async function finPayableRemoveAPI(data) {
+  const res = await request.delete('/eom/finpayable/deleteDetail', {data});
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function finPayableUpdateAPI(data) {
+  const res = await request.put('/eom/finpayable/update', data);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+

src/api/bpm/components/financialManage/receivableManage/index.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request';
+
+
+
+
+//保存收款记录
+export async function finReceivableSaveAPI(data) {
+  const res = await request.post(`/eom/finreceivable/saveDetail`, data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 信息
+export async function getFinReceivableInfoAPI(id) {
+  const res = await request.get(`/eom/finreceivable/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 删除收款记录
+export async function finReceivableRemoveAPI(data) {
+  const res = await request.delete('/eom/finreceivable/deleteDetail', {data});
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+export async function finReceivableUpdateAPI(data) {
+  const res = await request.put('/eom/finreceivable/update', data);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+

src/views/bpm/handleTask/components/financialManage/invoiceManage/components/detailDialog.vue

@@ -58,33 +58,33 @@
             </el-date-picker>
           </el-form-item>
         </el-col>
-<!--        <el-col :span="12">-->
-<!--          <el-form-item-->
-<!--            label="会计科目"-->
-<!--            prop="accountingSubjectId"-->
-<!--            style="margin-bottom: 22px">-->
-<!--            <el-input v-model="form.accountingSubjectName" disabled></el-input>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
+        <el-col :span="12" v-if="taskDefinitionKey=='financeApprove'">
+          <el-form-item
+            label="会计科目"
+            prop="accountingSubjectId"
+            style="margin-bottom: 22px">
+            <el-input v-model="form.accountingSubjectName" disabled></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12" v-if="taskDefinitionKey=='financeApprove'">
+          <el-form-item prop="files" label="发票附件">
+            <div v-if="form.files && form.files?.length">
+              <el-link
+                v-for="link in form.files"
+                :key="link.id"
+                type="primary"
+                :underline="false"
+                @click="downloadFile(link)"
+              >
+                {{ link.name }}
+              </el-link
+              >
+            </div>
+          </el-form-item>
+        </el-col>
       </el-row>
-<!--      <el-row :gutter="12">-->
-<!--        <el-col :span="12">-->
-<!--          <el-form-item prop="files" label="发票附件">-->
-<!--            <div v-if="form.files && form.files?.length">-->
-<!--              <el-link-->
-<!--                v-for="link in form.files"-->
-<!--                :key="link.id"-->
-<!--                type="primary"-->
-<!--                :underline="false"-->
-<!--                @click="downloadFile(link)"-->
-<!--              >-->
-<!--                {{ link.name }}-->
-<!--              </el-link-->
-<!--              >-->
-<!--            </div>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
       <headerTitle title="开票信息"></headerTitle>
       <el-row :gutter="12">
         <el-col :span="12">
@@ -211,7 +211,10 @@ export default {
   props:{
     businessId: {
       default: ''
-    }
+    },
+    taskDefinitionKey: {
+      default: ''
+    },
   },
   async created() {
     await this.getInfo(this.businessId)

src/views/bpm/handleTask/components/financialManage/invoiceManage/submit.vue

@@ -26,21 +26,21 @@
         @click="handleAudit(1)"
       >通过
       </el-button>
-      <el-button
-        icon="el-icon-circle-close"
-        type="danger"
-        size="mini"
-        @click="handleAudit(0)"
-        v-if="!['starter'].includes(taskDefinitionKey)"
-      >驳回
-      </el-button>
+<!--      <el-button-->
+<!--        icon="el-icon-circle-close"-->
+<!--        type="danger"-->
+<!--        size="mini"-->
+<!--        @click="handleAudit(0)"-->
+<!--        v-if="!['starter'].includes(taskDefinitionKey)"-->
+<!--      >驳回-->
+<!--      </el-button>-->
 
-      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">
-        <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="cancel">作废</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+<!--      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">-->
+<!--        <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
+<!--        <el-dropdown-menu slot="dropdown">-->
+<!--          <el-dropdown-item command="cancel">作废</el-dropdown-item>-->
+<!--        </el-dropdown-menu>-->
+<!--      </el-dropdown>-->
 
       <!-- <el-button
         icon="el-icon-circle-close"

src/views/bpm/handleTask/components/financialManage/payableManage/components/detailDialog.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+      <headerTitle title="基本信息"></headerTitle>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="应付日期"
+            prop="payableDate"
+            style="margin-bottom: 22px">
+            <el-date-picker
+              style="width: 100%"
+              v-model="form.payableDate"
+              type="date"
+              value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="应付金额"
+            prop="payableTotalPrice"
+            style="margin-bottom: 22px">
+            <el-input-number disabled v-model="form.payableTotalPrice" :precision="2" :controls="false"
+                             style="width: 100%"
+                             :min="0"></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="会计科目"
+            prop="accountingSubjectId"
+            style="margin-bottom: 22px">
+            <ele-tree-select
+              clearable
+              filterable
+              ref="treeSelect"
+              :data="accountingSubjectList"
+              v-model="form.accountingSubjectId"
+              valueKey="id"
+              labelKey="name"
+              placeholder="请选择"
+              @change="changeSubjectInfo"
+              default-expand-all
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="发票编码"
+            prop="invoiceCode"
+            style="margin-bottom: 22px">
+            <el-input disabled v-model="form.invoiceCode"></el-input>
+          </el-form-item>
+        </el-col>
+
+
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="来源类型"
+            prop="sourceType"
+            style="margin-bottom: 22px">
+            <el-input value="销售订单" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="来源编码"
+            prop="sourceCode"
+            style="margin-bottom: 22px">
+            <el-input v-model="form.sourceCode" disabled></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="公司名称"
+            prop="contactName"
+            style="margin-bottom: 22px">
+            <el-input disabled v-model="form.contactName"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="附件">
+            <fileUpload
+              v-model="form.files"
+              module="main"
+              :showLib="false"
+              :limit="10"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {getFile} from '@/api/system/file';
+import dictMixins from '@/mixins/dictMixins';
+import fileUpload from "@/components/upload/fileUpload.vue";
+
+import personSelect from "@/components/CommomSelect/person-select.vue";
+
+import {invoiceApplyInfoAPI} from "@/api/bpm/components/financialManage/invoiceManage";
+import tableInfo from "@/views/bpm/handleTask/components/financialManage/invoiceManage/components/tableInfo.vue";
+import {finPayableUpdateAPI, getFinPayableInfoAPI} from "@/api/bpm/components/financialManage/payableManage";
+import {getTreeByPid} from "@/api/classifyManage";
+
+
+export default {
+  mixins: [dictMixins],
+  components: {
+    tableInfo,
+    personSelect,
+    fileUpload
+  },
+  data() {
+    return {
+      dialogType: '',
+      form: {
+        accountingSubjectCode: "",
+        accountingSubjectId: '',
+        accountingSubjectName: "",
+        contactId: '',
+        contactName: "",
+        files: [],
+        id: '',
+        invoiceCode: "",
+        payableDate: "",
+        payableTotalPrice: '',
+        receivedTotalPrice: '',
+        remark: "",
+        sourceCode: "",
+        sourceId: "",
+        sourceType: '',
+        unreceiveTotalPrice: 0
+      },
+      accountingSubjectList: [],
+      rules: {
+        accountingSubjectId: {required: true, message: '请选择', trigger: 'change'},
+        payableDate: {required: true, message: '请选择', trigger: 'change'},
+      }
+    };
+  },
+  props: {
+    businessId: {
+      default: ''
+    },
+    taskDefinitionKey: {
+      default: ''
+    },
+  },
+  async created() {
+    await this.getInfo(this.businessId)
+  },
+  methods: {
+    //获取详情
+    async getInfo(id) {
+      await this.getClassifyList(24, 'accountingSubjectList')
+      let data = await getFinPayableInfoAPI(id)
+      this.form = data
+      let invoiceData = await invoiceApplyInfoAPI(data.invoiceId)
+      this.form.accountingSubjectCode = invoiceData.accountingSubjectCode
+      this.form.accountingSubjectId = invoiceData.accountingSubjectId
+      this.form.accountingSubjectName = invoiceData.accountingSubjectName
+    },
+    downloadFile(file) {
+      getFile({objectName: file.storePath}, file.name);
+    },
+
+    //获取分类管理中的数据
+    async getClassifyList(id, listName) {
+      let res = await getTreeByPid(id)
+      this[listName] = res.data
+    },
+    //获取会计科目选中数据
+    changeSubjectInfo(val) {
+      if (!val) return this.form.accountingSubjectName = ''
+      let data = this.$refs.treeSelect?.$refs?.tree?.getCurrentNode() || {}
+      this.form.accountingSubjectName = data.name
+    },
+    getTableValue() {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate(async valid => {
+          if (!valid) return this.$message.warning('有必填项未填，请检查')
+          const API = finPayableUpdateAPI
+          const res = await API(this.form)
+          res.code == '0' ? resolve('1') : reject(new Error(data.message))
+        })
+      })
+
+    },
+    cancel() {
+      this.$emit('update:detailDialogFlag', false)
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.ele-dialog-form {
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+}
+
+.headbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .amount {
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 20px;
+  }
+}
+</style>

src/views/bpm/handleTask/components/financialManage/payableManage/submit.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-col :span="16" :offset="6">
+    <el-form label-width="100px" ref="formRef" :model="form">
+      <el-form-item
+        label="审批建议"
+        prop="reason"
+        style="margin-bottom: 20px"
+        :rules="{
+          required: true,
+          message: '请选择',
+          trigger: 'change'
+        }"
+      >
+        <el-input
+          type="textarea"
+          v-model="form.reason"
+          placeholder="请输入审批建议"
+        />
+      </el-form-item>
+    </el-form>
+    <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+      <el-button
+        icon="el-icon-edit-outline"
+        type="success"
+        size="mini"
+        @click="handleAudit(1)"
+      >通过
+      </el-button>
+      <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleAudit(0)"
+        v-if="!['starter'].includes(taskDefinitionKey)"
+      >驳回
+      </el-button>
+
+      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">
+        <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="cancel">作废</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <!-- <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleBackList"
+        >退回
+      </el-button> -->
+      <!-- <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleAudit(0)"
+        v-if="taskDefinitionKey != 'productionSupervisorApprove1'"
+        >不通过
+      </el-button>
+      <el-button
+        icon="el-icon-edit-outline"
+        type="primary"
+        size="mini"
+        v-if="taskDefinitionKey != 'productionSupervisorApprove1'"
+        @click="handleUpdateAssignee"
+        >转办
+      </el-button> -->
+    </div>
+  </el-col>
+</template>
+
+<script>
+import {cancel} from "@/api/bpm/components/financialManage/invoiceManage";
+import {approveTaskWithVariables} from '@/api/bpm/task';
+
+// 流程实例的详情页，可用于审批
+export default {
+  name: '',
+  components: {
+    //   Parser
+  },
+  props: {
+    businessId: {
+      default: ''
+    },
+    taskId: {
+      default: ''
+    },
+    id: {
+      default: ''
+    },
+    taskDefinitionKey: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      form: {
+        technicianId: '',
+        reason: '',
+
+      },
+      tabOptions: [
+        {key: 'financeApprove', permissionType: 'update', name: '财务审批'},
+      ],
+    };
+  },
+  created() {
+  },
+  methods: {
+    /** 处理转办审批人 */
+    handleUpdateAssignee() {
+      this.$emit('handleUpdateAssignee');
+    },
+    /** 退回 */
+    handleBackList() {
+      this.$emit('handleBackList');
+    },
+
+    async handleAudit(status) {
+      let permissionType = this.tabOptions.find(item => item.key == this.taskDefinitionKey)?.permissionType
+      if (permissionType === 'update') {
+        const id = await this.getTableValue();
+        if (typeof id !== 'string') return
+      }
+      await this._approveTaskWithVariables(status);
+    },
+    async _approveTaskWithVariables(status) {
+      let variables = {
+        pass: !!status
+      };
+      approveTaskWithVariables({
+        id: this.taskId,
+        reason: this.form.reason,
+        variables
+      }).then((res) => {
+        if (res.data.code != '-1') {
+          this.$emit('handleAudit', {
+            status,
+            title: status === 0 ? '驳回' : ''
+          });
+        }
+      });
+    },
+
+    getTableValue() {
+      return new Promise((resolve, reject) => {
+        this.$emit('getTableValue', async (data) => {
+          resolve(await data);
+        });
+      });
+    },
+
+    //更多
+    handleCommand(command) {
+      if (command === 'cancel') {
+        this.$confirm("是否确认作废？", {
+          type: 'warning',
+          cancelButtonText: '取消',
+          confirmButtonText: '确定'
+        }).then(() => {
+          cancel({
+            id: this.taskId,
+            reason: this.form.reason,
+            businessId: this.businessId,
+          }).then(() => {
+            this.$emit('handleClose');
+          }).catch(() => {
+            this.$message.error("流程作废失败");
+          });
+        }).catch(() => {});
+      }
+    },
+
+  }
+};
+</script>
+
+<style lang="scss"></style>

src/views/bpm/handleTask/components/financialManage/receivableManage/components/detailDialog.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+      <headerTitle title="基本信息"></headerTitle>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="应收日期"
+            prop="receivableDate"
+            style="margin-bottom: 22px">
+            <el-date-picker
+              style="width: 100%"
+              v-model="form.receivableDate"
+              type="date"
+              value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="应收金额"
+            prop="receivableTotalPrice"
+            style="margin-bottom: 22px">
+            <el-input-number disabled v-model="form.receivableTotalPrice" :precision="2" :controls="false"
+                             style="width: 100%"
+                             :min="0"></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="会计科目"
+            prop="accountingSubjectId"
+            style="margin-bottom: 22px">
+            <ele-tree-select
+              clearable
+              filterable
+              ref="treeSelect"
+              :data="accountingSubjectList"
+              v-model="form.accountingSubjectId"
+              valueKey="id"
+              labelKey="name"
+              placeholder="请选择"
+              @change="changeSubjectInfo"
+              default-expand-all
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="发票编码"
+            prop="invoiceCode"
+            style="margin-bottom: 22px">
+            <el-input disabled v-model="form.invoiceCode"></el-input>
+          </el-form-item>
+        </el-col>
+
+
+      </el-row>
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="来源类型"
+            prop="sourceType"
+            style="margin-bottom: 22px">
+            <el-input value="销售订单" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="来源编码"
+            prop="sourceCode"
+            style="margin-bottom: 22px">
+            <el-input v-model="form.sourceCode" disabled></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+
+      <el-row :gutter="12">
+        <el-col :span="12">
+          <el-form-item
+            label="公司名称"
+            prop="contactName"
+            style="margin-bottom: 22px">
+            <el-input disabled v-model="form.contactName"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="附件">
+            <fileUpload
+              v-model="form.files"
+              module="main"
+              :showLib="false"
+              :limit="10"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {getFile} from '@/api/system/file';
+import dictMixins from '@/mixins/dictMixins';
+import fileUpload from "@/components/upload/fileUpload.vue";
+
+import personSelect from "@/components/CommomSelect/person-select.vue";
+
+import {invoiceApplyInfoAPI} from "@/api/bpm/components/financialManage/invoiceManage";
+import tableInfo from "@/views/bpm/handleTask/components/financialManage/invoiceManage/components/tableInfo.vue";
+import {finReceivableUpdateAPI, getFinReceivableInfoAPI} from "@/api/bpm/components/financialManage/receivableManage";
+import {getTreeByPid} from "@/api/classifyManage";
+
+
+export default {
+  mixins: [dictMixins],
+  components: {
+    tableInfo,
+    personSelect,
+    fileUpload
+  },
+  data() {
+    return {
+      dialogType: '',
+      form: {
+        accountingSubjectCode: "",
+        accountingSubjectId: '',
+        accountingSubjectName: "",
+        contactId: '',
+        contactName: "",
+        files: [],
+        id: '',
+        invoiceCode: "",
+        receivableDate: "",
+        receivableTotalPrice: '',
+        receivedTotalPrice: '',
+        remark: "",
+        sourceCode: "",
+        sourceId: "",
+        sourceType: '',
+        unreceiveTotalPrice: 0
+      },
+      accountingSubjectList: [],
+      rules: {
+        accountingSubjectId: {required: true, message: '请选择', trigger: 'change'},
+        receivableDate: {required: true, message: '请选择', trigger: 'change'},
+      }
+    };
+  },
+  props: {
+    businessId: {
+      default: ''
+    },
+    taskDefinitionKey: {
+      default: ''
+    },
+  },
+  async created() {
+    await this.getInfo(this.businessId)
+  },
+  methods: {
+    //获取详情
+    async getInfo(id) {
+      await this.getClassifyList(24, 'accountingSubjectList')
+      let data = await getFinReceivableInfoAPI(id)
+      this.form = data
+      let invoiceData = await invoiceApplyInfoAPI(data.invoiceId)
+      this.form.accountingSubjectCode = invoiceData.accountingSubjectCode
+      this.form.accountingSubjectId = invoiceData.accountingSubjectId
+      this.form.accountingSubjectName = invoiceData.accountingSubjectName
+    },
+    downloadFile(file) {
+      getFile({objectName: file.storePath}, file.name);
+    },
+
+    //获取分类管理中的数据
+    async getClassifyList(id, listName) {
+      let res = await getTreeByPid(id)
+      this[listName] = res.data
+    },
+    //获取会计科目选中数据
+    changeSubjectInfo(val) {
+      if (!val) return this.form.accountingSubjectName = ''
+      let data = this.$refs.treeSelect?.$refs?.tree?.getCurrentNode() || {}
+      this.form.accountingSubjectName = data.name
+    },
+    getTableValue() {
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate(async valid => {
+          if (!valid) return this.$message.warning('有必填项未填，请检查')
+          const API = finReceivableUpdateAPI
+          const res = await API(this.form)
+          res.code == '0' ? resolve('1') : reject(new Error(data.message))
+        })
+      })
+
+    },
+    cancel() {
+      this.$emit('update:detailDialogFlag', false)
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.ele-dialog-form {
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+}
+
+.headbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .amount {
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 20px;
+  }
+}
+</style>

src/views/bpm/handleTask/components/financialManage/receivableManage/submit.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-col :span="16" :offset="6">
+    <el-form label-width="100px" ref="formRef" :model="form">
+      <el-form-item
+        label="审批建议"
+        prop="reason"
+        style="margin-bottom: 20px"
+        :rules="{
+          required: true,
+          message: '请选择',
+          trigger: 'change'
+        }"
+      >
+        <el-input
+          type="textarea"
+          v-model="form.reason"
+          placeholder="请输入审批建议"
+        />
+      </el-form-item>
+    </el-form>
+    <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+      <el-button
+        icon="el-icon-edit-outline"
+        type="success"
+        size="mini"
+        @click="handleAudit(1)"
+      >通过
+      </el-button>
+      <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleAudit(0)"
+        v-if="!['starter'].includes(taskDefinitionKey)"
+      >驳回
+      </el-button>
+
+      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">
+        <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="cancel">作废</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+
+      <!-- <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleBackList"
+        >退回
+      </el-button> -->
+      <!-- <el-button
+        icon="el-icon-circle-close"
+        type="danger"
+        size="mini"
+        @click="handleAudit(0)"
+        v-if="taskDefinitionKey != 'productionSupervisorApprove1'"
+        >不通过
+      </el-button>
+      <el-button
+        icon="el-icon-edit-outline"
+        type="primary"
+        size="mini"
+        v-if="taskDefinitionKey != 'productionSupervisorApprove1'"
+        @click="handleUpdateAssignee"
+        >转办
+      </el-button> -->
+    </div>
+  </el-col>
+</template>
+
+<script>
+import {cancel} from "@/api/bpm/components/financialManage/invoiceManage";
+import {approveTaskWithVariables} from '@/api/bpm/task';
+
+// 流程实例的详情页，可用于审批
+export default {
+  name: '',
+  components: {
+    //   Parser
+  },
+  props: {
+    businessId: {
+      default: ''
+    },
+    taskId: {
+      default: ''
+    },
+    id: {
+      default: ''
+    },
+    taskDefinitionKey: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      form: {
+        technicianId: '',
+        reason: '',
+
+      },
+      tabOptions: [
+        {key: 'financeApprove', permissionType: 'update', name: '财务审批'},
+      ],
+    };
+  },
+  created() {
+  },
+  methods: {
+    /** 处理转办审批人 */
+    handleUpdateAssignee() {
+      this.$emit('handleUpdateAssignee');
+    },
+    /** 退回 */
+    handleBackList() {
+      this.$emit('handleBackList');
+    },
+
+    async handleAudit(status) {
+      let permissionType = this.tabOptions.find(item => item.key == this.taskDefinitionKey)?.permissionType
+      if (permissionType === 'update') {
+        const id = await this.getTableValue();
+        if (typeof id !== 'string') return
+      }
+      await this._approveTaskWithVariables(status);
+    },
+    async _approveTaskWithVariables(status) {
+      let variables = {
+        pass: !!status
+      };
+      approveTaskWithVariables({
+        id: this.taskId,
+        reason: this.form.reason,
+        variables
+      }).then((res) => {
+        if (res.data.code != '-1') {
+          this.$emit('handleAudit', {
+            status,
+            title: status === 0 ? '驳回' : ''
+          });
+        }
+      });
+    },
+
+    getTableValue() {
+      return new Promise((resolve, reject) => {
+        this.$emit('getTableValue', async (data) => {
+          resolve(await data);
+        });
+      });
+    },
+
+    //更多
+    handleCommand(command) {
+      if (command === 'cancel') {
+        this.$confirm("是否确认作废？", {
+          type: 'warning',
+          cancelButtonText: '取消',
+          confirmButtonText: '确定'
+        }).then(() => {
+          cancel({
+            id: this.taskId,
+            reason: this.form.reason,
+            businessId: this.businessId,
+          }).then(() => {
+            this.$emit('handleClose');
+          }).catch(() => {
+            this.$message.error("流程作废失败");
+          });
+        }).catch(() => {});
+      }
+    },
+
+  }
+};
+</script>
+
+<style lang="scss"></style>