feeApplication.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"
              @change="updatePayer(scope.row)"
            />
          </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="{ row }">
            <dict-selector
              :disabled="!row.editMode && !!row.status"
              :type="DICT_TYPE.DRAWEE"
              :filter="payerDictFilter"
              v-model="row.payer"
            />
          </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, getFeeDraweeByFeeType,
} 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);
      });
    },
    // 过滤订单状态筛选字典内容
    payerDictFilter(item) {
      if (item.value && item.value == 3) {
        return false
      }
      return true
    },
    // 修改
    modify(item) {
      this.$set(item, "editMode", true);
    },
    updatePayer(item) {
      console.log("变动的费用记录:", item);
      this.$nextTick(() => {
        // 根据新费用类型和索引更新payer付款人信息
        this.orderDetails.drawee ? (this.orderDetails.drawee != 3 ? this.$set(item, "payer", this.orderDetails.drawee) : this.getDraweePayer(item)) : undefined; //	费用申请付款人
        console.log("变动的费用记录:", item);
      })
    },
    getDraweePayer(item) {
      let feeType = item.feeType
        if (feeType) {
          getFeeDraweeByFeeType(feeType).then(res => {
            console.log(res.data)
            let drawee = res.data
            console.log("自定义费用枚举值：", drawee)
            if (drawee) {
              if (this.orderDetails.customDraweeVOList && this.orderDetails.customDraweeVOList.length > 0) {
                let customDrawee = this.orderDetails.customDraweeVOList.find(item => item.name == drawee)
                console.log("自定义费用类型值：", customDrawee)
                if (customDrawee) {
                  console.log("返回值：", customDrawee.value)
                  this.$set(item, "payer", customDrawee.value)
                }
              }
            }
          });
        }
    },

    addCost() {
      this.list.push({
        orderId: this.orderId,
        feeType: undefined, //费用申请类型
        applicationFee: undefined, //金额
        applicationFeeCurrency: undefined, //	费用申请货币类型
        payer: this.orderDetails.drawee && this.orderDetails.drawee != 3 ? this.orderDetails.drawee : 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>