Smart_platform_ui/src/components/boxCost/index.vue

<template>
  <trade-card title="费用信息">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="应收" name="first" :key="'first'" v-if="tabShow == 1 || tabShow == 2">
      </el-tab-pane>
      <el-tab-pane label="应付" name="second" :key="'second'" v-if="tabShow == 1 || tabShow == 3">
      </el-tab-pane>
    </el-tabs>
    <avue-crud
        :option="option"
        :data="dataList"
        v-model="form"
        @row-save="rowSave"
        ref="crud"
        :key="key"
        @row-update="rowUpdate"
        @resetColumn="resetColumn('crud','option','optionBack',codeValue)"
        @saveColumn="saveColumn('crud','option','optionBack',codeValue)">
      <template slot-scope="{type,size,row,index}" slot="menu">
        <el-button icon="el-icon-edit" :size="size" :type="type" :disabled="row.settlementAmount > 0" @click="$refs.crud.rowEdit(row,index)">编辑
        </el-button>
        <el-button icon="el-icon-delete" :size="size" :type="type" :disabled="row.settlementAmount > 0" @click="rowDel(row,index)">删除</el-button>
      </template>
      <template slot="itemNameForm">
        <breakdown-select v-model="form.itemId" @selectValue="selectValue"
                          :configuration="breakConfiguration"></breakdown-select>
      </template>
      <template slot="corpNameForm">
        <crop-select v-model="form.corpId" @getCorpData="getGSDataTwo" corpType="KH"/>
      </template>
    </avue-crud>
  </trade-card>
</template>

<script>

import {tradingBoxFees} from "@/api/boxManagement";
import {mapStates} from "element-ui/packages/table/src/store/helper";

export default {
  name: "index",
  data() {
    return {
      code:'',
      option: {},
      optionBack: {},
      leaseIn:{
        align: 'center',
        index: true,
        height:500,
        addBtnText: "录入明细",
        refreshBtn: false,
        addBtn: true,
        selection: true,
        span: 6,
        dialogTop: "25%",
        addRowBtn: false,
        cellBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogDrag: true,
        dialogWidth: "80%",
        showSummary: true,
        sumColumnList: [{
          name: 'quantity',
          type: 'sum',
          decimals: 0
        }, {
          name: 'amount',
          type: 'sum',
          decimals: 2
        }, {
          name: 'settlementAmount',
          type: 'sum',
          decimals: 2
        }],
        column: [{
          label: '收款对象',
          prop: 'corpName',
          overHidden: true,
          width: 160
        }, {
          label: '箱号',
        prop: 'code',
        width: 140,
        overHidden: true,
        filterable: true,
        type: "select",
        dicUrl: `/api/blade-box-tube/archives/selectArchivesByCodeList?code=${this.code}`,
        props: {
          label: "code",
          value: "code"
        },
      }, {
        label: '费用名称',
        prop: 'itemName',
        overHidden: true,
        width: 120
      }, {
        label: '币别',
        prop: 'currency',
        width: 100,
        overHidden: true,
        filterable: true,
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
      }, {
        label: '汇率',
        prop: 'exchangeRate',
        width: 100,
        type: 'number',
        disabled: true,
        overHidden: true,
        controls: false,
        precision: 4
      }, {
        label: '单价',
        prop: 'price',
        type: 'number',
        overHidden: true,
        precision: 2,
        controls: false,
        width: 140
      }, {
        label: '数量',
        prop: 'quantity',
        type: 'number',
        precision: 0,
        value: 1,
        controls: false,
        overHidden: true,
        width: 100
      }, {
        label: '金额',
        prop: 'amount',
        type: 'number',
        precision: 2,
        disabled: true,
        controls: false,
          overHidden: true,
          width: 140
        }, {
          label: '日期起',
          prop: 'rentStartDate',
          width: 100,
          overHidden: true,
          type: "date",
          disabled: true,
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss"
        }, {
          label: '日期止',
          prop: 'rentEndDate',
          width: 100,
          disabled: true,
          overHidden: true,
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss"
        }, {
          label: '结算金额',
          prop: 'settlementAmount',
          type: 'number',
          precision: 2,
          disabled: true,
          controls: false,
          overHidden: true,
          width: 140
        }, {
          label: '结算时间',
          prop: 'settlementDate',
          width: 100,
          disabled: true,
          overHidden: true,
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss"
        }, {
          label: '业务类型',
          prop: 'billType',
          display:false,
          width: 100
        }, {
          label: '备注',
          prop: 'remarks',
          type: 'textarea',
          overHidden: true,
          minRows: 3,
          span: 24,
          width: 200
        }]
    },
      boxTube:{
        align: 'center',
        index: true,
        height:500,
        addBtnText: "录入明细",
        refreshBtn: false,
        addBtn: true,
        span: 6,
        dialogTop: "25%",
        addRowBtn: false,
        cellBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogDrag: true,
        dialogWidth: "80%",
        showSummary: true,
        sumColumnList: [{
          name: 'quantity',
          type: 'sum',
          decimals: 0
        }, {
          name: 'amount',
          type: 'sum',
          decimals: 2
        }, {
          name: 'settlementAmount',
          type: 'sum',
          decimals: 2
        }],
        column: [{
          label: '收款对象',
          prop: 'corpName',
          overHidden: true,
          width: 160
        }, {
          label: '箱号',
        prop: 'code',
        width: 140,
        overHidden: true,
        filterable: true,
        type: "select",
        dicUrl: `/api/blade-box-tube/archives/selectArchivesByCodeList?code=${this.code}`,
        props: {
          label: "code",
          value: "code"
        },
      }, {
        label: '费用名称',
        prop: 'itemName',
        overHidden: true,
        width: 120
      }, {
        label: '币别',
        prop: 'currency',
        width: 100,
        overHidden: true,
        filterable: true,
        type: "select",
        dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
        props: {
          label: "dictValue",
          value: "dictKey"
        },
      }, {
        label: '汇率',
        prop: 'exchangeRate',
        width: 100,
        type: 'number',
        disabled: true,
        overHidden: true,
        controls: false,
        precision: 4
      }, {
        label: '单价',
        prop: 'price',
        type: 'number',
        overHidden: true,
        precision: 2,
        controls: false,
        width: 140
      }, {
        label: '数量',
        prop: 'quantity',
        type: 'number',
        precision: 0,
        value: 1,
        controls: false,
        overHidden: true,
        width: 100
      }, {
        label: '金额',
        prop: 'amount',
        type: 'number',
        precision: 2,
        disabled: true,
        controls: false,
        overHidden: true,
        width: 140
      }, {
          label: '结算金额',
          prop: 'settlementAmount',
          type: 'number',
          precision: 2,
          disabled: true,
          controls: false,
          overHidden: true,
          width: 140
        }, {
          label: '结算时间',
          prop: 'settlementDate',
          width: 100,
          disabled: true,
          overHidden: true,
          type: "date",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss"
        }, {
          label: '业务类型',
          prop: 'billType',
          display:false,
          width: 100
        }, {
        label: '备注',
        prop: 'remarks',
        type: 'textarea',
        overHidden: true,
        minRows: 3,
        span: 24,
        width: 200
      }]
    },
      customsList: {
        align: 'center',
        index: true,
        height:500,
        addBtnText: "录入明细",
        refreshBtn: false,
        addBtn: true,
        span: 6,
        dialogTop: "25%",
        addRowBtn: false,
        cellBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogDrag: true,
        dialogWidth: "80%",
        showSummary: true,
        sumColumnList: [{
          name: 'quantity',
          type: 'sum',
          decimals: 0
        },{
          name: 'amount',
          type: 'sum',
          decimals: 2
        },{
          name: 'settlementAmount',
          type: 'sum',
          decimals: 2
        }],
        column: [{
          label: '收款对象',
          prop: 'corpName',
          overHidden: true,
          width: 160
        }, {
          label: '费用名称',
          prop: 'itemName',
          overHidden: true,
          width: 120
        }, {
          label: '币别',
          prop: 'currency',
          width: 100,
          overHidden: true,
          filterable: true,
          type: "select",
          dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
          props: {
            label: "dictValue",
            value: "dictKey"
          },
        }, {
          label: '汇率',
          prop: 'exchangeRate',
          width: 100,
          type: 'number',
          disabled: true,
          overHidden: true,
          controls: false,
          precision: 4
        }, {
          label: '单价',
          prop: 'price',
          type: 'number',
          overHidden: true,
          precision: 2,
          controls: false,
          width: 140
        }, {
          label: '数量',
          prop: 'quantity',
          type: 'number',
          precision: 0,
          value: 1,
          controls: false,
          overHidden: true,
          width: 100
        }, {
          label: '金额',
          prop: 'amount',
          type: 'number',
          precision: 2,
          disabled: true,
          controls: false,
          overHidden: true,
          width: 140
        },
          // {
          //   label: '结算金额',
          //   prop: 'settlementAmount',
          //   type: 'number',
          //   precision: 2,
          //   disabled: true,
          //   controls: false,
          //   overHidden: true,
          //   width: 140
          // }, {
          //   label: '结算时间',
          //   prop: 'settlementDate',
          //   width: 100,
          //   disabled: true,
          //   overHidden: true,
          //   type: "date",
          //   format: "yyyy-MM-dd",
          //   valueFormat: "yyyy-MM-dd HH:mm:ss"
          // }, {
          //   label: '业务类型',
          //   prop: 'billType',
          //   display:false,
          //   width: 100
          // },
          {
          label: '备注',
          prop: 'remark',
          type: 'textarea',
          overHidden: true,
          minRows: 3,
          span: 24
        }]
      },
      dataList: [],
      form: {},
      key: 0,
      data_one: [],
      data_two: [],
      breakConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        clearable: true,
        placeholder: "请点击右边按钮选择",
        dicData: []
      },
      activeName: "first"
    }
  },
  watch: {
    listData(newVla, oldVal) {
      this.data_one = newVla.filter(item => item.feesType === 1); //应收
      this.data_two = newVla.filter(item => item.feesType === 2); //应付
      if (this.activeName === "first") {
        this.dataList = this.data_one;
      } else {
        this.dataList = this.data_two;
      }
    },
    code(newVla, oldVal) {
      if (this.code){
        this.findObject(this.option.column, "code").dicUrl = `/api/blade-box-tube/archives/selectArchivesByCodeList?code=${this.code}`
      }
      console.log(this.code)
      this.key++
    },
    activeName(newVla, oldVal) {
      if (newVla !== oldVal) {
        if (newVla === "first") {
          this.data_two = this.dataList;
          this.dataList = this.data_one;
        } else {
          this.data_one = this.dataList;
          this.dataList = this.data_two;
        }
      }
    }
  },
  model: {
    prop: "listData",
    event: "callBack"
  },
  props: {
    listData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    codeValue: {
      type: String
    },
    type:{
      type: String
    },
    url: {
      type: String
    },
    // 1.显示全部 2.收费 3.付费
    tabShow: {
      type: Number,
      default: 1
    },
    activeName: {
      type: String,
      default: 'first'
    }
  },
  async created() {
    if (this.type === 'BG'){
      this.optionBack = this.customsList
    }else if (this.type === 'ZR' || this.type === 'ZC'){
      this.optionBack = this.leaseIn
    }else {
      this.optionBack = this.boxTube
    }
    if (!this.codeValue) this.codeValue = 235.2
    // 判断tabShow的activeName默认的显示
    this.activeName = this.tabShow == 1 ? "first" : this.tabShow == 2 ? "first" : "second";
    this.option = await this.getColumnData(this.getColumnName(this.codeValue), this.optionBack);
    if (this.activeName === "first") {
      this.findObject(this.option.column, "corpName").label = "收款对象"
    } else {
      this.findObject(this.option.column, "corpName").label = "付款对象"
    }
    this.findObject(this.option.column, "price").change = ({value, column}) => {
      if (value && this.form.quantity) {
        if (this.form.exchangeRate) {
          this.form.amount = value * this.form.quantity * this.form.exchangeRate
        } else {
          this.form.amount = value * this.form.quantity
        }
      }
    }
    this.findObject(this.option.column, "currency").change = ({value, column}) => {
      for (let item of this.$refs.crud.DIC.currency) {
        if (item.dictValue == value) {
          this.form.exchangeRate = item.remark
          if (this.form.price && this.form.quantity) {
            this.form.amount = this.form.price * this.form.quantity * item.remark
          }
        }
      }
    }
    this.findObject(this.option.column, "quantity").change = ({value, column}) => {
      if (this.form.price && value) {
        if (this.form.exchangeRate) {
          this.form.amount = this.form.price * value * this.form.exchangeRate
        } else {
          this.form.amount = this.form.price * value
        }
      }
    }
    this.key++
  },
  methods: {
    handleClick(tab, event) {
      // this.activeName = tab.name
      if (tab.name === "first") {
        this.findObject(this.option.column, "corpName").label = "收款对象"
      } else {
        this.findObject(this.option.column, "corpName").label = "付款对象"
      }
    },
    rowSave(form, done, loading) {
      done({
        ...form,
        feesType: this.activeName === "first" ? 1 : 2,
        sort: this.dataList.length
      })
      if (this.activeName === "first") {
        this.$emit("callBack", this.dataList.concat(this.data_two));
      } else {
        this.$emit("callBack", this.data_one.concat(this.dataList));
      }
    },
    rowUpdate(form, index, done, loading) {
      done(form)
      if (this.activeName === "first") {
        this.$emit("callBack", this.dataList.concat(this.data_two));
      } else {
        this.$emit("callBack", this.data_one.concat(this.dataList));
      }
    },
    // 明细删除
    rowDel(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          tradingBoxFees(row.id, this.url ? this.url : "/api/blade-box-tube/tradingBoxFees/remove").then(res => {
            if (res.data.success) {
              this.dataList.splice(index, 1);
              this.$message.success("操作成功!");
              if (this.activeName === "first") {
                this.$emit("callBack", this.dataList.concat(this.data_two));
              } else {
                this.$emit("callBack", this.data_one.concat(this.dataList));
              }
            }
          });
        } else {
          this.dataList.splice(index, 1);
          this.$message.success("操作成功!");
          if (this.activeName === "first") {
            this.$emit("callBack", this.dataList.concat(this.data_two));
          } else {
            this.$emit("callBack", this.data_one.concat(this.dataList));
          }
        }
      });
    },
    //选择费用名称
    selectValue(value) {
      this.form.itemName = value.cname
    },
    getGSDataTwo(row) {
      this.form.corpName = row.cname
    },
    //自定义列保存
    async saveColumn(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      this.$emit("resetTrigger")
      if (inSave) {

        this.findObject(this.option.column, "price").change = ({value, column}) => {
          if (value && this.form.quantity) {
            if (this.form.exchangeRate) {
              this.form.amount = value * this.form.quantity * this.form.exchangeRate
            } else {
              this.form.amount = value * this.form.quantity
            }
          }
        }
        this.findObject(this.option.column, "currency").change = ({value, column}) => {
          for (let item of this.$refs.crud.DIC.currency) {
            if (item.dictValue == value) {
              this.form.exchangeRate = item.remark
              if (this.form.price && this.form.quantity) {
                this.form.amount = this.form.price * this.form.quantity * item.remark
              }
            }
          }
        }
        this.findObject(this.option.column, "quantity").change = ({value, column}) => {
          if (this.form.price && value) {
            if (this.form.exchangeRate) {
              this.form.amount = this.form.price * value * this.form.exchangeRate
            } else {
              this.form.amount = this.form.price * value
            }
          }
        }
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    }
  }
}
</script>

<style scoped>

</style>