add

src/api/warehouseManagement/warehouseDefinition.js

@@ -0,0 +1,154 @@
+import request from '@/utils/request';
+
+//条件查询工厂
+// export async function getFactoryarea(params) {
+//   const res = await request.get(`/main/factoryarea/page`, {
+//     params
+//   });
+//   if (res.data.code == 0) {
+//     return res.data.data;
+//   }
+//   return Promise.reject(new Error(res.data.message));
+// }
+
+// // 仓储管理-仓库信息的保存
+// export async function warehouseSave(data) {
+//   return request.post('/warehouseGoodsshelves/newWarehouse/save', data);
+// }
+export default {
+  //条件查询工厂
+  getFactoryarea: async (params) => {
+    const res = await request.get('/main/factoryarea/page', { params });
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  },
+  // /wms/warehouse/page
+  //获取部门
+  tree: async () => {
+    // const res = await request.get('/wms/warehouse/getTrees');
+    const res = await request.get('/main/group/getGroupList');
+    // /wms/warehouse/getTrees
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  },
+  //根据部门获取员工
+  getUserPage: async (params) => {
+    const res = await request.get('/main/user/getUserPage', { params });
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+    return Promise.reject(new Error(res.data.message));
+  },
+  //仓库定义列表
+  list: async (params) => {
+    const res = await request.post(
+      '/wms/warehouse/select/warehouseList',
+      params
+    );
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  },
+  //新增和修改
+  save: function (data) {
+    return request.post('/wms/warehouse/saveNew', data);
+  },
+
+  //新增库区
+  warehouseareaSave: async (data) => {
+    const res = await request.post('/wms/warehouse/save', data);
+
+    return res;
+  },
+  //新增仓库
+  saveOrUpdateWarehouse: async (data) => {
+    const res = await request.post(
+      '/wms/warehouse/saveOrUpdateWarehouse',
+      data
+    );
+
+    return res;
+  },
+  //修改货位状态是不是满的
+  warehouseChangeStatus: async (data) => {
+    const res = await request.put(
+      '/wms/warehouseareagoodsshelvesallocation/update',
+      data
+    );
+    if (res.data.code == 0) {
+      return res.data.message;
+    }
+  },
+  //删除
+  delete: async (id) => {
+    const res = await request.get(`/wms/warehouse/delete/${id}`);
+    if (res.data.code == 0) {
+      return res.data.message;
+    }
+  },
+  //删除
+  isDelete: async (id) => {
+    const res = await request.get('/wms/warehouse/isDelete/' + id);
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  },
+  //根据ID获取
+  getById: async (params) => {
+    const res = await request.get(`/wms/warehouse/getById/${params.id}`, {});
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  },
+  //详情
+  info: function (params) {
+    return request.get('/main/org/info/info', { params });
+  },
+  //树
+  // tree: function (params) {
+  //     return http.asyncCall("/main/org/dept/tree", params,'get')
+  // },
+
+  //查询仓库详情
+
+  warehouseDetail: async (warehouseId) => {
+    const res = await request.post(
+      `/wms/warehouse/warehouseDetail/${warehouseId}`
+    );
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  },
+  //根据仓库查询库区
+  getListByWarehouseId: async (id) => {
+    const res = await request.get(
+      `/wms/warehousearea/getListByWarehouseId/${id}`,
+      {}
+    );
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  },
+  //根据库区查货架
+  getListByAreaId: async (id) => {
+    const res = await request.get(
+      `/wms/warehouseareagoodsshelves/getListByAreaId/${id}`
+    );
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  },
+  //根据货架查货位
+  getListByGoodId: async (goodId) => {
+    const res = await request.get(
+      `/wms/warehouseareagoodsshelvesallocation/getListByGoodId/${goodId}`
+    );
+    if (res.data.code == 0) {
+      return res.data.data;
+    }
+  }
+};

src/views/bpm/handleTask/components/outBound/common.js

@@ -0,0 +1,87 @@
+export const tableHeader = (selectEquiType) => {
+  switch (+selectEquiType) {
+    case 3:
+      return [{ label: '牌号', prop: 'brandNum' }];
+    case 8:
+      return [
+        { label: '型号', prop: 'modelType' },
+        { label: '规格', prop: 'specification' }
+      ];
+    case 4:
+      return [
+        { label: '牌号', prop: 'brandNum' },
+        { label: '型号', prop: 'modelType' }
+      ];
+    case 9:
+      return [
+        { label: '牌号', prop: 'brandNum' },
+        { label: '型号', prop: 'modelType' }
+      ];
+    case 5: //'周转车'
+      return [
+        { label: '规格', prop: 'specification' },
+        {
+          label: '材质',
+          prop: 'texture',
+          formatter(row) {
+            if (!row?.extendField) return '';
+            const extendField = JSON.parse(row.extendField);
+            return extendField.texture;
+          }
+        },
+        {
+          label: '长宽高',
+          prop: '',
+          formatter(row) {
+            if (!row?.extendField) return '';
+            const extendField = JSON.parse(row.extendField);
+            return `${extendField.length || '-'}*${extendField.width || '-'}*${
+              extendField.high || '-'
+            }`;
+          }
+        }
+      ];
+    case 2: //'舟皿'
+      return [
+        { label: '规格', prop: 'specification' },
+        { label: '型号', prop: 'modelType' },
+        {
+          label: '长宽高',
+          prop: '',
+          formatter(row) {
+            if (!row?.extendField) return '';
+            const extendField = JSON.parse(row.extendField);
+            return `${extendField.length || '-'}*${extendField.width || '-'}*${
+              extendField.high || '-'
+            }`;
+          }
+        }
+      ];
+    case 1: //'设备'
+      return [
+        { label: '型号', prop: 'modelType' },
+        { label: '规格', prop: 'specification' }
+      ];
+    case 6: //'模具'
+      return [
+        { label: '牌号', prop: 'brandNum' },
+        { label: '型号', prop: 'modelType' },
+        {
+          label: '收缩系数',
+          prop: '',
+          formatter(row) {
+            if (!row?.extendField) return '';
+            const extendField = JSON.parse(row.extendField);
+            return extendField.shrinkageCoefficient;
+          }
+        }
+      ];
+    case 7: //'备品备件'
+      return [
+        { label: '规格', prop: 'specification' },
+        { label: '型号', prop: 'modelType' }
+      ];
+  }
+
+  return [];
+};

src/views/bpm/handleTask/components/outBound/detailDialog.vue

@@ -0,0 +1,634 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="page-title">
+        <!-- <PageHeader title="出库单详情"> </PageHeader> -->
+      </div>
+
+      <!-- <StatusStep :activeCode="infoData.verifyStatus" /> -->
+      <div class="stepsStatus">
+        <el-steps :active="active" align-center>
+          <el-step title="创建"></el-step>
+          <el-step title="待审核"></el-step>
+          <el-step :title="stepsTitle" :status="stepsStatus"></el-step>
+        </el-steps>
+      </div>
+      <div>
+        <div class="content-detail">
+          <header-title title="基本信息" size="16px"></header-title>
+
+          <div class="mt20">
+            <el-form label-width="110px">
+              <el-col :span="8">
+                <el-form-item label="出库单号">
+                  <span>{{ infoData.bizNo }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="出库物品类型">
+                  <span>{{
+                    infoData.bizType == 3
+                      ? '物品'
+                      : getDictValue('类型用途', infoData.assetType)
+                  }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="出库场景">
+                  <span>{{ getSceneState(infoData.bizType) }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8" v-if="infoData.bizType == 3">
+                <el-form-item label="客户名称">
+                  <span>{{ infoData.clientName }}</span>
+                </el-form-item> </el-col
+              ><el-col :span="8" v-if="infoData.bizType == 3">
+                <el-form-item label="客户联系人">
+                  <span>{{ infoData.clientUser }}</span>
+                </el-form-item> </el-col
+              ><el-col :span="8" v-if="infoData.bizType == 3">
+                <el-form-item label="客户电话">
+                  <span>{{ infoData.clientPhone }}</span>
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="8">
+                <el-form-item
+                  :label="infoData.bizType == 4 ? '领料单' : '来源单据'"
+                >
+                  <span>{{ infoData.sourceBizNo }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="领料人">
+                  <span>{{ infoData.fromUser }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="领料人联系方式">
+                  <span>{{ infoData.fromUserPhone }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="出库登记人">
+                  <span>{{ infoData.extInfo?.createUserName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="权属部门">
+                  <span>{{ infoData.extInfo?.deptName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="创建时间">
+                  <span>{{ infoData.createTime }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="出库时间">
+                  <span>{{ infoData.createTime }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="审核人部门">
+                  <span>{{ infoData.verifyDeptName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="审核人">
+                  <span>{{ infoData.verifyName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item label="备注">
+                  <span>{{ infoData.remark }}</span>
+                </el-form-item>
+              </el-col>
+            </el-form>
+          </div>
+        </div>
+        <div class="content-detail mt20">
+          <header-title title="出库明细" size="16px"></header-title>
+
+          <div class="mt20">
+            <div class="mt10">
+              <el-table
+                ref="multipleTable"
+                :data="warehousingMaterialList"
+                tooltip-effect="dark"
+                style="width: 100%"
+                stripe
+                :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
+              >
+                <el-table-column label="序号" type="index" width="50">
+                </el-table-column>
+                <el-table-column
+                  label="物品编码"
+                  prop="categoryCode"
+                ></el-table-column>
+                <el-table-column label="物品名称" prop="name"></el-table-column>
+
+                <el-table-column
+                  v-for="(item, index) in tableHeader"
+                  :key="index"
+                  align="center"
+                  :label="item.label"
+                  :prop="item.prop"
+                >
+                  <template slot-scope="{ row }">
+                    <template v-if="item.formatter">{{
+                      item.formatter(row)
+                    }}</template>
+                    <template v-else>{{ row[item.prop] }}</template>
+                  </template>
+                </el-table-column>
+                <el-table-column label="出库数量" align="center" width="320">
+                  <template slot-scope="{ row }">
+                    <el-row :gutter="4">
+                      <el-col :span="9" v-if="!row.isUnpack" :offset="7">
+                        <el-input type="text" disabled :value="row.count">
+                          <template slot="append">
+                            {{ row.measuringUnit }}
+                          </template>
+                        </el-input>
+                      </el-col>
+                      <!-- <el-col :span="9">
+                        <el-input
+                          type="text"
+                          :value="row.minPackingCount"
+                          disabled
+                        >
+                          <template slot="append">
+                            {{ row.measuringUnit }}
+                          </template>
+                        </el-input></el-col
+                      >
+                      <el-col :span="9" v-if="!row.isUnpack">
+                        <el-input
+                          type="text"
+                          disabled
+                          :value="row.packingCount"
+                        >
+                          <template slot="append">
+                            {{ row.packingUnit }}
+                          </template>
+                        </el-input>
+                      </el-col> -->
+                    </el-row>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt20">
+          <header-title
+            :title="`${
+              infoData.bizType == 3
+                ? '物品'
+                : getDictValue('类型用途', infoData.assetType)
+            }明细`"
+            size="16px"
+          ></header-title>
+          <el-table
+            ref="multipleTable"
+            :data="materialCodeReqList"
+            tooltip-effect="dark"
+            style="width: 100%"
+            stripe
+            :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
+          >
+            <el-table-column label="序号" type="index" width="50">
+            </el-table-column>
+            <el-table-column
+              :label="`${
+                infoData.bizType == 3
+                  ? '物品'
+                  : getDictValue('类型用途', infoData.assetType)
+              }编码`"
+              prop="code"
+            ></el-table-column>
+            <el-table-column label="批次号" prop="batchNo"></el-table-column>
+            <el-table-column label="生产日期" width="200">
+              <template slot-scope="{ row }">
+                <span v-if="row.dateType == 2">
+                  {{ row.produceTime }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="采购日期" width="200">
+              <template slot-scope="{ row }">
+                <span v-if="row.dateType == 1">
+                  {{ row.procureTime }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="最小包装单元">
+              <template slot-scope="{ row, $index }">
+                <template v-if="!row.isUnpack">
+                  <!-- {{ row.measurementUnit }}{{ row.measuringUnit }}/{{
+                    row.packingUnit
+                  }} -->
+                  <span>{{ row.minPackingCount }}/{{ row.packingUnit }}</span>
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="包装编码"
+              prop="packageNo"
+            ></el-table-column>
+            <el-table-column label="领料部门" prop=""></el-table-column>
+            <el-table-column label="货位" prop="">
+              <template slot-scope="{ row }">
+                <!-- {{ row.warehouseName }}-{{ row.areaName }}-{{
+                  row.shelfCode
+                }}-{{ row.cargoSpaceCode }} -->
+                {{ row.position }}
+              </template>
+            </el-table-column>
+            <el-table-column label="转消耗" prop="">
+              <template slot-scope="{ row }">
+                <el-checkbox
+                  disabled
+                  v-model="row.isTransferAsset"
+                ></el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import StatusStep from '@/components/StatusStep/common.vue';
+  // import { getInfo } from '@/api/stockManagement/outgoingManagement' '@/components/PageHeader'
+  // import PageHeader from '@/components/PageHeader';
+  import { tableHeader } from './common';
+  import { mapGetters, mapActions } from 'vuex';
+  import outin from '@/api/warehouseManagement/outin';
+  import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
+
+  import {
+    materialType,
+    warehousingType,
+    useDict,
+    useDictLabel,
+    inputStatus,
+    outputSceneState,
+    auditStatus
+  } from '@/utils/dict/index';
+  import { getUser } from '@/api/system/user';
+  export default {
+    components: { StatusStep },
+    data() {
+      return {
+        infoData: {},
+        warehousingMaterialList: [],
+        materialCodeReqList: [],
+        tableData2: [],
+        fromUserList: [],
+        activeName: 'a',
+        num: 1,
+        stepsList: [
+          { status: 'Done', nodeName: '创建' },
+          { status: 'Done', nodeName: '暂存', time: '2023-01-06' },
+          { status: 'Done', nodeName: '收货中' },
+          { status: 'Processing', nodeName: '已收货' }
+        ],
+        list: [
+          {
+            name: '紧急',
+            color: 'red'
+          },
+          {
+            name: '重要',
+            color: 'blue'
+          },
+          {
+            name: '已催办',
+            color: 'red'
+          }
+        ],
+        stepsTitle: '已完成',
+        stepsStatus: 'success',
+        active: 0
+      };
+    },
+    watch: {
+      'infoData.verifyStatus': {
+        immediate: true,
+        handler(val) {
+          if (val == 0) {
+            this.active = 1;
+            this.stepsTitle = '已完成';
+            this.stepsStatus = '';
+          } else if (val == 1) {
+            this.active = 3;
+            this.stepsTitle = '已完成';
+            this.stepsStatus = 'success';
+          } else if (val == 2) {
+            this.active = 3;
+            this.stepsTitle = '已驳回';
+            this.stepsStatus = 'error';
+          }
+        }
+      }
+    },
+    computed: {
+      ...mapGetters(['getDictValue']),
+      tableHeader() {
+        return tableHeader(this.infoData?.extInfo?.assetType);
+      }
+    },
+
+    created() {
+      this.getUser();
+      this._getInfo();
+      this.requestDict('类型用途');
+    },
+    methods: {
+      getUserName(id) {
+        let obj = this.fromUserList.find((x) => x.id == id);
+        return obj && obj.name;
+      },
+      async getUser() {
+        let res22 = await warehouseDefinition.getUserPage({
+          groupId: 1,
+          size: 9999,
+          page: 1
+        });
+        this.fromUserList = res22.list;
+      },
+      // close() {
+      //   finishPageTab(); // 关闭当前页签
+      // },
+      ...mapActions('dict', ['requestDict']),
+      getMaterialType: useDictLabel(materialType),
+      getInputStatus: useDictLabel(inputStatus),
+      getWarehousingType: useDictLabel(warehousingType),
+      getSceneState: useDictLabel(outputSceneState),
+      getAuditStatus: useDictLabel(auditStatus),
+      async _getInfo() {
+        const res = await outin.getById(this.$route.query.id);
+        console.log(res);
+        this.infoData = {
+          ...res,
+          assetType: res.extInfo.assetType,
+          fromUserPhone: res.fromUserPhone,
+          verifyDeptName: res.extInfo.verifyDeptName
+        };
+        if (res) {
+          // this.warehousingMaterialList = res.warehouseLedgerInfos.map(
+          //   (item) => {
+          //     item.selfSum = (item.warehouseLedgerDetails || []).reduce(
+          //       (sum, pre) => {
+          //         if (item.isUnpack) {
+          //           return ++sum;
+          //         }
+          //         return sum + pre.measurementUnit;
+          //       },
+          //       0
+          //     );
+
+          //     return item;
+          //   }
+          // );
+          this.warehousingMaterialList = res.outInDetailVOList;
+          // this.materialCodeReqList =
+          //   res.warehouseLedgerInfos.warehouseLedgerDetails;
+          let arr = [];
+          for (const key in res.outInDetailVOList) {
+            for (const k in res.outInDetailVOList[key]
+              .outInDetailRecordVOList) {
+              arr.push({
+                ...res.outInDetailVOList[key].outInDetailRecordVOList[k]
+              });
+            }
+          }
+          this.materialCodeReqList = arr;
+          // console.log('qwqwqw', arr);
+          // res.warehouseLedgerInfos.ledgers;
+          // .map((i) =>
+          //   (i.outInDetailRecordVOList || []).map((item) => ({
+          //     ...item,
+          //     isUnpack: i.isUnpack
+          //   }))
+          // )
+          // .flat();
+        }
+      },
+      // 时间差计算
+      difference(beginTime, endTime) {
+        var dateBegin = new Date(beginTime);
+        var dateEnd = new Date(endTime);
+        var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
+        var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
+        var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
+        var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
+        //计算相差分钟数
+        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
+        var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
+        //计算相差秒数
+        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
+        var seconds = Math.round(leave3 / 1000);
+
+        if (dayDiff == -1) {
+          dayDiff = 0;
+          hours = 0;
+          minutes = 0;
+        }
+
+        return dayDiff + '天' + hours + '小时' + minutes + '分钟';
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .stepsStatus {
+    width: 40%;
+    margin: 0 auto;
+  }
+  .p20 {
+    padding: 20px;
+  }
+  .flex {
+    display: flex;
+  }
+  .title {
+    justify-content: space-between;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 5px;
+    span {
+      font-size: 16px;
+    }
+    .col {
+      padding-left: 40px;
+      font-size: 14px;
+      color: #aaaaaa;
+    }
+  }
+  .degree {
+    margin-right: 10px;
+    padding: 0px 15px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 23px;
+    border-radius: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span {
+      width: 5px;
+      height: 5px;
+      border-radius: 100%;
+      margin-right: 6px;
+      background-color: #fff;
+    }
+  }
+  .red {
+    background-color: rgb(163, 0, 20);
+  }
+  .blue {
+    background-color: #1989fa;
+  }
+  .createdInfo {
+    justify-content: space-around;
+    margin-top: 10px;
+    font-size: 14px;
+    .col {
+      color: #6e6e6e;
+      padding-right: 10px;
+    }
+  }
+  .mt40 {
+    margin-top: 40px;
+  }
+
+  .custSteps {
+    margin-top: 20px;
+    margin-left: 70px;
+    .box {
+      width: 158px;
+      border: 1px solid #ccc;
+      padding: 10px;
+      flex-direction: row;
+      flex-wrap: wrap;
+      // justify-content: space-between;
+      font-size: 12px;
+      color: #9e9e9e;
+      .x {
+        width: 20px;
+        height: 15px;
+        margin-right: 5px;
+      }
+      .q {
+        background-color: #d0e4d5;
+      }
+      .b {
+        background-color: #1989fa;
+      }
+      .g {
+        background-color: #157a2c;
+      }
+      .r {
+        background-color: #a30014;
+      }
+      .a {
+        align-items: center;
+        margin-bottom: 10px;
+      }
+      .mr10 {
+        margin-right: 10px;
+      }
+      .mb0 {
+        margin-bottom: 0;
+      }
+    }
+    .stepsInfo {
+      // flex: 1;
+      width: 483px;
+    }
+  }
+  .mt20 {
+    margin-top: 20px;
+  }
+  .content-detail {
+    overflow: hidden;
+  }
+  .executor {
+    font-size: 14px;
+    .col {
+      color: #6e6e6e;
+      padding-right: 10px;
+    }
+  }
+  .result {
+    justify-content: space-around;
+  }
+  .mr20 {
+    margin-right: 20px;
+  }
+  .details {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  .customSteps {
+    margin-top: 40px;
+    font-size: 14px;
+    margin-left: 80px;
+    .time {
+      font-size: 12px;
+      color: #6e6e6e;
+      margin-right: 20px;
+      position: relative;
+      &::after {
+        content: '';
+        width: 1px;
+        height: 100%;
+        background-color: #157a2c;
+        position: absolute;
+        right: -26px;
+      }
+    }
+    .flex:last-child {
+      .time {
+        &::after {
+          display: none;
+        }
+      }
+    }
+    .round {
+      margin-right: 20px;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      background-color: #157a2c;
+      position: relative;
+      span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 4px;
+        height: 4px;
+        background-color: #fff;
+        border-radius: 100%;
+        transform: translate(-2px, -2px);
+      }
+    }
+    .text {
+      .info {
+        margin-top: 10px;
+        width: 955px;
+        background-color: #f0f3f3;
+        overflow: hidden;
+        padding: 10px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+</style>

src/views/bpm/handleTask/components/outBound/submit.vue

@@ -0,0 +1,108 @@
+<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)"
+        >驳回
+      </el-button>
+    </div>
+  </el-col>
+</template>
+<script>
+  import {
+    approveTaskWithVariables,
+    outinApproveNotPass
+  } from '@/api/bpm/task';
+  export default {
+    data() {
+      return {
+        form: {}
+      };
+    },
+    props: {
+      businessId: {
+        default: ''
+      },
+      taskId: {
+        default: ''
+      },
+      id: {
+        default: ''
+      },
+
+      taskDefinitionKey: {
+        default: ''
+      }
+    },
+    methods: {
+      handleAudit(status) {
+        if (!this.form.reason && status == 1) {
+          this.$message.warning(`请填写审批意见！`);
+          return;
+        }
+
+        this._approveTaskWithVariables(status);
+      },
+      async _approveTaskWithVariables(status) {
+        console.log(status);
+        if (status == 1) {
+          const params = {
+            id: this.taskId,
+            reason: this.form.reason,
+            variables: { pass: true }
+          };
+          const data = await approveTaskWithVariables(params);
+          if (data.data.code != '-1') {
+            this.$emit('handleAudit', {
+              status,
+              title: '通过'
+            });
+          }
+        } else {
+          const params = {
+            id: this.taskId,
+            reason: this.form.reason,
+            outInId: this.businessId
+          };
+          const data = await outinApproveNotPass(params);
+          if (data.data.code != '-1') {
+            this.$emit('handleAudit', {
+              status,
+              title: '驳回'
+            });
+          }
+        }
+      }
+    }
+  };
+</script>