需求114 后台-集运-包裹列表-操作-特需

src/views/ecw/cons/components/FeeApplicationCons.vue

+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    width="80%"
+    :before-close="
+      () => {
+        $emit('update:dialogVisible', false);
+      }
+    "
+  >
+    <div class="fee-application">
+      <h1>{{ $t("费用申请") }}-{{ orderDetails.orderNo }}</h1>
+      <el-divider></el-divider>
+      <el-form label-width="100px" inline>
+        <el-form-item :label="$t('订单号') + ':'"
+        >
+          <div class="content">
+            {{ orderDetails.orderNo }}
+          </div>
+        </el-form-item
+        >
+        <el-form-item :label="$t('发货人') + '：'"
+        >
+          <div class="content">
+            {{ orderDetails.consignorVO ? orderDetails.consignorVO.name : "" }}
+          </div>
+        </el-form-item
+        >
+        <el-form-item :label="$t('唛头')"
+        >
+          <div class="content">{{ orderDetails.marks }}</div>
+        </el-form-item
+        >
+        <el-form-item>
+          <el-button
+            :disabled="!!processInstanceId "
+            @click="addCost"
+          >{{ $t("添加申请") }}
+          </el-button
+          >
+        </el-form-item
+        >
+      </el-form>
+      <el-table :data="list">
+        <el-table-column :label="$t('序号')" type="index"></el-table-column>
+        <el-table-column :label="$t('费用类型')">
+          <template v-slot:default="scope">
+            <dict-selector
+              :disabled="!scope.row.editMode && !!scope.row.status"
+              :type="DICT_TYPE.FEE_TYPE"
+              v-model="scope.row.feeType"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('金额')">
+          <template v-slot:default="scope">
+            <el-input
+              :disabled="!scope.row.editMode && !!scope.row.status"
+              v-model.number="scope.row.applicationFee"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('货币类型')">
+          <template v-slot:default="scope">
+            <el-select
+              :disabled="!scope.row.editMode && !!scope.row.status"
+              v-model="scope.row.applicationFeeCurrency"
+            >
+              <el-option
+                v-for="item in JSON.parse(currencys)"
+                :key="item.id"
+                :label="isChinese ? item.titleZh : item.titleEn"
+                :value="item.id"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('付款类型')">
+          <template v-slot="{ row }">
+            <dict-selector
+              :disabled="!row.editMode && !!row.status"
+              :type="DICT_TYPE.PAYMENT_TYPE"
+              v-model="row.payType"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('备注')">
+          <template v-slot:default="scope">
+            <el-input
+              :disabled="!scope.row.editMode && !!scope.row.status"
+              v-model="scope.row.remarks"
+              type="textarea"
+            ></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('确认收款')">
+          <template v-slot:default="scope">
+            <dict-tag
+              :type="DICT_TYPE.ECW_RECEIVABLE_STATE"
+              :value="scope.row.receiveFlag"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('申请人')">
+          <template v-slot:default="scope">
+            {{
+              scope.row.status === 0
+                ? $t("未提交")
+                : scope.row.applicationAuthor
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('操作')">
+          <template v-slot:default="scope">
+            <el-tag v-if="scope.row.status !== 0 && !scope.row.editMode">{{
+                STATUS[scope.row.status]
+              }}
+            </el-tag>
+            <!--el-button type="text" v-if="scope.row.status == 1" @click="examineFn">{{$t('审核中')}}</el-button-->
+            <el-button
+              type="text"
+              v-if="scope.row.id && modifable(scope.row)"
+              @click="modify(scope.row)"
+            >{{ $t("修改") }}
+            </el-button
+            >
+            <el-button
+              type="text"
+              v-if="scope.row.status === 0"
+              @click="del(scope.$index)"
+            >删除
+            </el-button
+            >
+            <el-button
+              type="text"
+              v-if="scope.row.id && scope.row.applicationFee === 0 && scope.row.status === 2 && !scope.row.editMode"
+              @click="deleteByFeeIsZero(scope.row.id)"
+            >删除
+            </el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="padding: 20px">
+        <work-flow xmlkey="free_apply" v-model="selectedUsers"/>
+      </div>
+      <div style="text-align: center; margin-top: 20px">
+        <el-button
+          type="primary"
+          v-if="!processInstanceId"
+          style="margin-right: 30px"
+          :disabled="!feeList.length && !editMode"
+          @click="submit"
+        >{{ $t("提交") }}
+        </el-button
+        >
+        <el-button
+          type="primary"
+          v-if="processInstanceId"
+          style="margin-right: 30px"
+          @click="goProcessDetail"
+        >{{ $t("审核中") }}
+        </el-button
+        >
+        <el-button
+          type="primary"
+          v-if="processInstanceId"
+          style="margin-right: 30px"
+          @click="cancel"
+        >{{ $t("取消审核") }}
+        </el-button
+        >
+        <el-button @click="$emit('update:dialogVisible', false)">{{
+            $t("返回")
+          }}
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  getOrder,
+  feeApplicationCreateBatch,
+  ApplicationListByOrderId,
+  applicationUpdate,
+  feeApplicationListByOrderId,
+  feeApplicationCancel,
+  getFeeApplicationApproveByOrderId,
+  getBatchFeeByProcessId,
+  qetBatchFeeByBusinessId,
+  getBatchFeeByBusinessId, feeApplicationDelete,
+} from "@/api/ecw/order";
+import {getDictDatas, DICT_TYPE} from "@/utils/dict";
+import workFlow from "@/components/WorkFlow";
+
+export default {
+  name: "feeApplication",
+  components: {workFlow},
+  props: {
+    orderId: [Number, String],
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+    currencys: String,
+  },
+  data() {
+    return {
+      orderDetails: {},
+      // 费用列表
+      list: [],
+      // 审核ID，没有则表示不在审核中
+      processInstanceId: null,
+
+      DICT_TYPE,
+      getDictDatas,
+      STATUS: {},
+      selectedUsers: [],
+    };
+  },
+  computed: {
+    isChinese() {
+      return this.$i18n.locale === "zh_CN";
+    },
+    feeList() {
+      // return this.list.filter((item) => item.status === 0);
+      return this.list;
+    },
+    // 正在编辑的费用申请
+    currentItem() {
+      return this.list.find((item) => item.editMode);
+    },
+    // 是否修改模式
+    editMode() {
+      return !!this.currentItem;
+    },
+    modifable() {
+      return (item) => {
+        // 审核中不允许修改
+        if (this.processInstanceId) return false;
+        // 有未提交的不允许修改
+        // if (this.feeList.length) return false;
+        // 修改中的不允许修改
+        if (item.editMode) return false;
+        return true;
+      }
+    }
+  },
+  created() {
+    this.getDictDatas(this.DICT_TYPE.AUDIT_STATUS).forEach((e) => {
+      this.STATUS[e.value] = e.label;
+    });
+
+    getOrder(this.orderId).then((res) => {
+      this.orderDetails = res.data;
+    });
+
+    // 查询历史申请
+    feeApplicationListByOrderId({orderId: this.orderId}).then((res) => {
+      this.list = res.data;
+    });
+
+    // 查询是否有审核中的费用申请
+    getFeeApplicationApproveByOrderId(this.orderId).then((res) => {
+      if (res.data) {
+        this.processInstanceId = res.data.formId;
+        /*getBatchFeeByBusinessId(res.data.orderApprovalId).then(res => {
+          this.list = res.data
+        })*/
+      }
+    });
+  },
+  methods: {
+    del(index) {
+      this.$confirm(this.$t("确定要删除此条费用申请么？")).then(() => {
+        this.list.splice(index, 1);
+      });
+    },
+    // 修改
+    modify(item) {
+      this.$set(item, "editMode", true);
+    },
+    addCost() {
+      this.list.push({
+        orderId: this.orderId,
+        feeType: undefined, //费用申请类型
+        applicationFee: undefined, //金额
+        applicationFeeCurrency: undefined, //	费用申请货币类型
+        remarks: undefined,
+        receiveFlag: 0,
+        applicationAuthor: undefined,
+        status: 0,
+      });
+    },
+    deleteByFeeIsZero(id) {
+      this.$confirm(this.$t("确定要删除此条费用申请么？")).then(() => {
+        feeApplicationDelete(id).then((r) => {
+          this.$message({
+            type: "success",
+            message: this.$t("删除成功"),
+          });
+          this.$emit("update:dialogVisible", false);
+        });
+      });
+    },
+    submit() {
+      // 判断费用申请是否有未填项
+      // console.log("提交的费用信息列表", this.feeList)
+      const errList = this.feeList.filter((item) => {
+        return (
+          !item["feeType"] ||
+          item.applicationFee == null || item.applicationFee == undefined ||
+          !item["applicationFeeCurrency"] ||
+          !item["payType"]
+        );
+      });
+      if (errList.length) {
+        return this.$message.error("请填写完整费用申请信息");
+      }
+      // if (this.editMode) {
+      //   // 要提交status=1,否则保持原状态
+      //   const data = {
+      //     ...this.currentItem,
+      //     status: 1,
+      //     copyUserId: this.selectedUsers,
+      //   };
+      //   return applicationUpdate(data).then((r) => {
+      //     this.$message.success(this.$t("修改成功"));
+      //     this.$emit("update:dialogVisible", false);
+      //   });
+      // }
+
+      feeApplicationCreateBatch({
+        orderFeeApplicationCreateReqVOList: this.feeList,
+        copyUserId: this.selectedUsers,
+        orderId: this.orderId,
+      }).then((r) => {
+        if (r.code === 0) {
+          this.$emit("update:dialogVisible", false);
+          this.$message.success(this.$t("添加成功"));
+          this.selectedUsers = [];
+          this.$emit("refresh")
+        }
+      });
+    },
+    goProcessDetail() {
+      this.$emit("update:dialogVisible", false);
+      this.$router.push(
+        "/bpm/process-instance/detail?id=" + this.processInstanceId
+      );
+    },
+    cancel() {
+      this.$prompt(this.$t("请输入取消原因"), this.$t("提示"), {
+        confirmButtonText: this.$t("确定"),
+        cancelButtonText: this.$t("取消"),
+      })
+        .then(({value}) => {
+          let item = this.list.find((e) => e.status === 1);
+          feeApplicationCancel({
+            huifu: value,
+            bpmProcessId: this.processInstanceId,
+          }).then((r) => {
+            this.$message({
+              type: "success",
+              message: this.$t("取消成功"),
+            });
+            this.$emit("update:dialogVisible", false);
+          });
+        })
+        .catch(() => {
+        });
+    },
+  },
+  watch: {
+    dialogVisible(val) {
+      if (val) {
+        this.getOrderList();
+        getOrder(this.orderId).then((r) => {
+          if (r.code === 0) {
+            this.orderDetails = r.data;
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.fee-application {
+  padding: 0 20px;
+
+  h1 {
+    font-weight: 600;
+    font-size: 20px;
+  }
+
+  .content {
+    width: 200px;
+  }
+}
+
+.my-process-designer {
+  height: calc(100vh - 200px);
+}
+
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>

src/views/ecw/cons/index.vue

@@ -170,6 +170,7 @@
           <el-button size="mini" type="text" icon="el-icon-edit" @click="transmutation(scope.row)">{{$t('转异')}}</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="specialNeedsCons(scope.row)">{{$t('特需')}}</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="specialNeedsConsLook(scope.row)">{{$t('特需查看')}}</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="feeApplication(scope.row)">{{$t('费用申请')}}</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -253,6 +254,7 @@
     <Transmutation :showException.sync="showException" :id="id" @determine="getList"></Transmutation>
     <SpecialNeedsCons :showSpecialNeedsCons.sync="showSpecialNeedsCons" :currency="JSON.stringify(currencyList)" :consId="id" :consNum="consNum" @determine="getList"></SpecialNeedsCons>
     <SpecialNeedsConsLook :showSpecialNeedsConsLook.sync="showSpecialNeedsConsLook" :consNum="consNum" :consId="id"></SpecialNeedsConsLook>
+    <fee-application-cons v-if="feeApplicationBol" :order-id="id" :currencys="JSON.stringify(currencyList)" :dialog-visible.sync="feeApplicationBol "@refresh="getList"></fee-application-cons>
 
   </div>
 </template>
@@ -263,12 +265,13 @@ import Transmutation from "@/views/ecw/cons/components/Transmutation.vue"
 import Template from "@/views/cms/template/index.vue";
 import UserSelector from "@/components/UserSelector/index.vue";
 import { getWarehouseList } from "@/api/ecw/warehouse";
-import {getTradeCountryList} from "@/api/ecw/region";
 import {getRegionList} from "@/api/ecw/order";
 import SpecialNeedsCons from "@/views/ecw/cons/components/SpecialNeedsCons.vue"
 import SpecialNeedsConsLook from "@/views/ecw/cons/components/SpecialNeedsConsLook.vue"
 
 import { getCurrencyList } from "@/api/ecw/currency"
+import FeeApplicationCons from "@/views/ecw/cons/components/FeeApplicationCons.vue"
+import FeeApplication from "@/views/ecw/order/feeApplication.vue"
 
 export default {
   name: "Cons",
@@ -276,6 +279,7 @@ export default {
     UserSelector,
     Transmutation,
     Template,
+    FeeApplicationCons,
     SpecialNeedsConsLook,
     SpecialNeedsCons
   },
@@ -343,6 +347,7 @@ export default {
       id: null,
       currencyList: [],
       consNum: null,
+      feeApplicationBol: false
     };
   },
   created() {
@@ -566,6 +571,12 @@ export default {
       this.id = row.id
       this.consNum = row.consNum
       this.showSpecialNeedsConsLook = true
+    },
+    //费用申请
+    feeApplication(row) {
+      this.id = row.id
+      this.consNum = row.consNum
+      this.feeApplicationBol = true
     }
   }
 };