yf-admin-ui/src/components/oceanFreight/index.vue

<template>
  <span>
      <avue-crud
          :option="option"
          :data="dataList"
          v-model="form"
          @row-save="rowSave"
          ref="crud"
          :key="key"
          @selection-change="selectionChange"
          @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.submitPay > 0"
                     @click="$refs.crud.rowEdit(row,index)">编辑
          </el-button>
          <el-button icon="el-icon-delete" :size="size" :type="type" :disabled="row.submitPay > 0"
                     @click="rowDel(row,index)">删除
          </el-button>
        </template>
        <template slot="menuLeft">
          <!--        <el-button-->
          <!--            class="el-icon-download"-->
          <!--            type="info"-->
          <!--            size="small"-->
          <!--            :disabled="!id || listData.length === 0"-->
          <!--            @click="openReport">打印-->
          <!--        </el-button>-->
          <el-button
              class="el-icon-download"
              type="warning"
              size="small"
              :disabled="(selectionList.length === 0 || !(selectionList.findIndex(item => item.submitPay == '1') == -1))"
              @click="generateBill">生成账单
          </el-button>
          <el-button
              class="el-icon-download"
              type="danger"
              size="small"
              :disabled="(selectionList.length === 0 || !(selectionList.findIndex(item => item.submitPay == '0') == -1))"
              @click="revokeBill">撤销账单
          </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>
      <report-dialog
          :switchDialog="switchDialog"
          :reportId="id"
          :reportName="reportName"
          @onClose="onClose()"
      />
  </span>
</template>

<script>

import {tradingBoxFees} from "@/api/boxManagement";
import reportDialog from "@/components/report-dialog/main.vue";
import {generateBill,revokeBill} from "@/api/oceanShipping/maritimeExport";
export default {
  name: "index",
  components: {reportDialog},
  data() {
    return {
      code: '',
      switchDialog: false,
      reportName:'',
      option: {},
      optionBack: {
        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: '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
        }]
      },
      selectionList: [],
      dataList: [],
      form: {},
      key: 0,
      data_one: [],
      data_two: [],
      breakConfiguration: {
        multipleChoices: false,
        multiple: false,
        disabled: false,
        searchShow: true,
        collapseTags: false,
        clearable: true,
        placeholder: "请点击右边按钮选择",
        dicData: []
      },
      activeNameTwo: "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.activeNameTwo === "first") {
        this.dataList = this.data_one;
      } else {
        this.dataList = this.data_two;
      }
      this.key++
    },
    "option.menu":{
      handler(newVla,oldVal) {
        if (newVla !== oldVal) {
          this.key++
        }
      },
    },
    code(newVla, oldVal) {
      if (this.code){
        this.findObject(this.option.column, "code").dicUrl = `/api/blade-box-tube/archives/selectArchivesByCodeList?code=${this.code}`
      }
      this.key++
    },
    activeNameTwo(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
    },
    oceanFreight: {
      type: Boolean//切换默认费用和展开费用
    },
    // 1.显示全部 2.收费 3.付费
    tabShow: {
      type: Number,
      default: 1
    },
    activeName: {
      type: String,
      default: 'first'
    },
    id: {
      type: String
    }
  },
  async created() {
    if (!this.codeValue) this.codeValue = 235.2
    // 判断activeNameTwo默认的显示
    this.activeNameTwo = this.activeName
    this.option = await this.getColumnData(this.getColumnName(this.codeValue), this.optionBack);
    if (this.activeNameTwo === "first") {
      this.findObject(this.option.column, "corpName").label = "收款对象"
    } else {
      this.findObject(this.option.column, "corpName").label = "付款对象"
    }
    // this.$set(this.option,"selectable",(row,index)=>{
    //   return row.isCheck === 0;
    // })
    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.dictKey == 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: {
    openReport() {
      for (let item of this.listData) {
        if (!item.id) {
          this.$confirm("有未保存的费用，是否继续打印?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.type === "CK" || this.type === "JK"){
              if (this.activeNameTwo === "first"){
                this.reportName = "收款费用详情(进出口)"
              }else {
                this.reportName = "付款费用详情(进出口)"
              }
            }else {
              if (this.activeNameTwo === "first"){
                this.reportName = "收款费用详情(箱管)"
              }else {
                this.reportName = "付款费用详情(箱管)"
              }
            }
            this.switchDialog = true
          })
        }
      }
      this.switchDialog = true
    },
    // 报表关闭
    onClose(val) {
      this.switchDialog = val;
    },
    handleClick(tab, event) {
      this.activeNameTwo = tab.name
      if (tab.name === "first") {
        this.findObject(this.option.column, "corpName").label = "收款对象"
      } else {
        this.findObject(this.option.column, "corpName").label = "付款对象"
      }
    },
    selectionChange(list){
      this.selectionList = list
    },
    //生成账单
    generateBill(){
      this.$confirm("您确定要生成账单吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(255,255,255,0.7)'
        });
        const data = {
          id: this.id,
          shippingFeesList:this.selectionList
        }
        generateBill(data).then(rest => {
          loading.close();
          this.$message.success('生成成功')
          this.$emit("generateBill")
        }).catch(() => {
          loading.close();
        })
      })
    },
    //撤销账单
    revokeBill(){
      this.$confirm("您确定要撤销账单吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(255,255,255,0.7)'
        });
        const data = {
          id: this.id,
          shippingFeesList:this.selectionList
        }
        revokeBill(data).then(rest => {
          loading.close();
          this.$message.success('撤销成功')
          this.$emit("generateBill")
        }).catch(() => {
          loading.close();
        })
      })
    },
    rowSave(form, done, loading) {
      done({
        ...form,
        feesType: this.activeNameTwo === "first" ? 1 : 2,
        sort: this.dataList.length
      })
      if (this.activeNameTwo === "first") {
        this.dataList = this.dataList.concat(this.data_two)
        this.$emit("callBack", this.dataList);
      } else {
        this.dataList = this.dataList.concat(this.data_one)
        this.$emit("callBack", this.dataList);
      }
    },
    rowUpdate(form, index, done, loading) {
      done(form)
      if (this.activeNameTwo === "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.activeNameTwo === "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.activeNameTwo === "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>