tire-platform-ui/src/components/fee-info/main.vue

<template>
  <div>
    <containerTitle title="费用明细"></containerTitle>
    <basic-container>
      <avue-crud
        ref="feeCrud"
        :data="feeData"
        :option="feeOption"
        @saveColumn="saveColumn"
        @selection-change="selectionChange"
        :summary-method="summaryMethod"
        :cell-style="cellStyle"
      >
        <template slot="menuLeft">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="应收" name="first" :key="'first'">
            </el-tab-pane>
            <el-tab-pane label="应付" name="second" :key="'second'">
            </el-tab-pane>
          </el-tabs>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click.stop="rowAdd"
            :disabled="disabled"
            >新增</el-button
          >
          <el-button
            type="warning"
            size="small"
            @click.stop="billingDetails('收费')"
            :disabled="disabled || selectionList.length == 0"
            v-if="selectTab === 1"
          >生成账单</el-button>
          <el-button
            type="info"
            size="small"
            @click.stop="rowAdd"
            :disabled="disabled || selectionList.length == 0"
            v-if="selectTab === 1"
          >查看生成记录</el-button>
          <el-button
            type="warning"
            size="small"
            @click.stop="billingDetails('申请')"
            :disabled="disabled || selectionList.length == 0"
            v-if="selectTab === 2"
          >申请货款</el-button>
          <el-button
            type="info"
            size="small"
            @click.stop="rowAdd"
            :disabled="disabled || selectionList.length == 0"
            v-if="selectTab === 2"
          >查看申请记录</el-button>
        </template>
        <template slot="menu" slot-scope="{ row, index }">
          <el-button
            size="small"
            icon="el-icon-edit"
            type="text"
            @click="rowCell(row, index)"
            :disabled="disabled"
            >{{ row.$cellEdit ? "保存" : "修改" }}</el-button
          >
          <el-button
            size="small"
            icon="el-icon-delete"
            type="text"
            @click="rowDel(row, index)"
            :disabled="disabled"
            >删 除</el-button
          >
        </template>
        <template slot="corpId" slot-scope="{ row, index }">
          <span v-if="row.$cellEdit" class="required_fields">*</span>
          <crop-select
            style="width: 90% !important;display: inline-block"
            v-if="row.$cellEdit"
            v-model="row.corpId"
            :cropIndex="index"
            @getCorpData="getCorpData"
            corpType="KH"
          ></crop-select>
          <span v-else>{{ row.corpName }}</span>
        </template>
        <template slot="feeName" slot-scope="{ row, index }">
          <span v-if="row.$cellEdit" class="required_fields">*</span>
          <breakdown-select
            style="width: 90% !important;"
            v-if="row.$cellEdit"
            v-model="row.itemId"
            @selectValue="(value) => selectValue(value,row)"
            :configuration="breakConfiguration"
          >
          </breakdown-select>
          <span v-else>{{ row.feeName }}</span>
        </template>
        <template slot="price" slot-scope="{ row }">
          <el-input
            v-if="row.$cellEdit"
            v-model="row.price"
            size="small"
            oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            @change="countChange(row)"
          ></el-input>
          <span v-else>{{ row.price | micrometerFormat }}</span>
        </template>
        <template slot="quantity" slot-scope="{ row }">
          <el-input
            v-if="row.$cellEdit"
            v-model="row.quantity"
            size="small"
            oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            @change="countChange(row)"
          ></el-input>
          <span v-else>{{ row.quantity }}</span>
        </template>
        <template slot="amount" slot-scope="{ row }">
          <span>{{ row.amount | micrometerFormat }}</span>
        </template>
        <template slot="exchangeRate" slot-scope="{ row }">
          <el-input
            v-if="row.$cellEdit"
            v-model="row.exchangeRate"
            size="small"
            oninput='this.value=this.value.replace(/[^(\d.)]/g,"").replace(/^(\d+)\.(\d\d).*$/, "$1.$2")'
            @change="rateChange(row)"
            placeholder="请输入"
          ></el-input>
          <span v-else>{{ row.exchangeRate }}</span>
        </template>
        <template slot="currency" slot-scope="{ row }">
          <el-select
            v-if="row.$cellEdit"
            v-model="row.currency"
            filterable
            allow-create
            default-first-option
            placeholder="请输入"
            size="small"
            @change="currencyChange(row)"
          >
            <el-option
              v-for="(item, index) in currencyList"
              :key="index"
              :label="item.dictValue"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          <span v-else>{{ row.currency }}</span>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog
      title="导入费用"
      append-to-body
      :visible.sync="feeDialog"
      top="5vh"
      width="60%"
      :close-on-click-modal="false"
      @closed="feeClose"
      class="el-dialogDeep"
      v-dialog-drag
    >
      <el-row style="height: 0;">
        <el-col :span="5">
          <div style="margin-top:45px">
            <el-scrollbar>
              <basic-container>
                <avue-tree
                  :option="treeOption"
                  :data="treeData"
                  @node-click="nodeClick"
                />
              </basic-container>
            </el-scrollbar>
          </div>
        </el-col>
        <el-col :span="19">
          <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            @refresh-change="refreshChange"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            :page.sync="page"
            @on-load="onLoad"
            :cell-style="cellStyle"
          >
          </avue-crud>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="feeDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="importData"
          :disabled="this.selectionList.length == 0"
        >
          导入
        </el-button>
      </span>
    </el-dialog>
    <crop-dialog ref="cropDialog" @importCorp="importCorp"></crop-dialog>
    <el-dialog
      append-to-body
      title="账单"
      class="el-dialogDeep"
      :visible.sync="applyPaymentDialog"
      width="70%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      v-dialog-drag
    >
      <apply-payment
        :billType="billType"
        :billData="billData"
        :arrList="arrList"
        @choceFun="choceFun"
      >
      </apply-payment>
    </el-dialog>
  </div>
</template>

<script>
import feeOption from "./config/feeInfo.json";
import option from "./config/feeList.json";
import { getDeptLazyTree, customerList } from "@/api/basicData/basicFeesDesc";
import { delItem } from "@/api/feeInfo/fee-info";
import { isPercentage, micrometerFormat } from "@/util/validate";
// import customerDialog from "@/components/customer-dialog/main";
import cropDialog from "@/components/crop-dialog/main";
import _ from "lodash";
import ApplyPayment from "../finance/applyPayment";

export default {
  name: "feeInfo",
  data() {
    return {
      option: option,
      feeOption: {},
      feeDialog: false,
      treeOption: {
        nodeKey: "id",
        lazy: true,
        treeLoad: function(node, resolve) {
          const parentId = node.level === 0 ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(
              res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                };
              })
            );
          });
        },
        addBtn: false,
        menu: false,
        size: "small",
        props: {
          labelText: "标题",
          label: "title",
          value: "value",
          children: "children"
        }
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      treeDeptId: null,
      loading: false,
      receivableButton: "primary",
      copeWithButton: "",
      data: [],
      feeData: [],
      selectionList: [],
      reData: null,
      billData:{
        optionType:'JK'
      },
      currencyList: [],
      breakConfiguration:{
        multipleChoices:false,
        multiple:false,
        disabled:false,
        searchShow:true,
        collapseTags:false,
        clearable:true,
        placeholder:'请点击右边按钮选择',
        dicData:[]
      },
      allData:[],
      data_one:[],
      data_two:[],
      selectTab:1,
      activeName:"first",
      tab1:true,
      tab2:false,
      applyPaymentDialog:false,
      billType:'',
      arrList:[],
    };
  },
  props: {
    orderFeesList: {
      type: Array
    },
    disabled: {
      type: Boolean
    },
    feeUrl: {
      type: String
    }
  },
  filters: {
    isPercentage(val) {
      return isPercentage(val);
    },
    micrometerFormat(val) {
      return micrometerFormat(val);
    }
  },
  async created() {
    this.feeOption = await this.getColumnData(
      this.getColumnName(33),
      feeOption
    );
    this.getWorkDicts("currency").then(res => {
      this.currencyList = res.data.data;
    });
  },
  components: {
    cropDialog,
    ApplyPayment
  },
  methods: {
    //选择费用
    selectValue(value,row){
      this.$set(row,"feeName",value.cname)
      this.$set(row,"unit",value.unitno)
      this.$set(row,"currency",value.fcyno)
      this.currencyChange(row)
    },
    //选择应收应付
    handleClick(tab){
      if(tab.name == "first") {
        this.tab1 = true;
        this.tab2 = false;

        //将上一个tab页数据放到 对应data上
        this.data_two = this.feeData

        this.selectTab = 1
        this.feeData = this.data_one  //切换数据
        this.selectionList = [];
        this.arrList = [];

      } else if(tab.name == "second") {
        this.tab1 = false;
        this.tab2 = true;
        if(this.selectTab === 1){
          this.data_one = this.feeData
        }
        this.selectTab = 2
        this.feeData = this.data_two
        this.selectionList = [];
        this.arrList = [];
      }
    },
    cellStyle() {
      return "padding:0;height:40px;";
    },
    importCorp(row) {
      this.feeData.push({
        itemId: null,
        corpId: row.id,
        corpName: row.name,
        feeName: null,
        price: null,
        unit: null,
        quantity: null,
        amount: null,
        currency: null,
        exchangeRate: null,
        remarks: null,
        $cellEdit: true,
        feesType:this.selectTab
      });
    },
    currencyChange(row) {
      if (row.currency == "CNY") {
        row.exchangeRate = 1;
      }
      if (row.currency == "USD") {
        row.exchangeRate = 6.3843;
      }
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //费用判断是否需要调用删除接口
        if (row.id) {
          delItem(row.id, this.feeUrl).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.feeData.splice(index, 1);
          });
        } else {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.feeData.splice(index, 1);
        }
      });
    },
    getCorpData(row) {
      this.feeData[row.index].corpName = row.cname;
    },
    countChange(row) {
      if (row.price && row.quantity) {
        row.amount = _.multiply(row.quantity, row.price).toFixed(2);
      }
    },
    rateChange(row) {
      row.exchangeRate;
      if (row.exchangeRate >= 100) {
        row.exchangeRate = 0;
        this.$message.error("汇率不能超过100%");
      }
    },
    currentChange(val) {
      this.page.currentPage = val;
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
    },
    //刷新
    refreshChange() {
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    //多选
    selectionChange(list) {
      this.selectionList = list;
    },
    rePick(row, index) {
      this.reData = {
        ...row,
        index: index
      };
      this.feeDialog = true;

      this.onLoad(this.page);
    },
    //费用编辑
    rowCell(row, index) {
      if (row.$cellEdit == true) {
        this.$set(row, "$cellEdit", false);
      } else {
        this.$set(row, "$cellEdit", true);
      }
    },
    //新增
    rowAdd() {
      this.$refs.cropDialog.init();
    },
    onLoad(page) {
      this.loading = true;
      let data = {
        size: page.pageSize,
        current: page.currentPage,
        parentId: 0,
        feesTypeId: this.treeDeptId
      };
      customerList(data).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        if (this.page.total) {
          this.option.height = window.innerHeight - 350;
        }
      });
    },
    //导入页左费用类型查询
    nodeClick(data) {
      this.treeDeptId = data.id;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    feeClose() {
      this.selectionList = [];
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0
      };
      this.treeDeptId = null;
      this.loading = false;
      this.data = [];
      this.reData = null;
    },
    importData() {
      if (this.reData) {
        this.selectionList.length;
        if (this.selectionList.length != 1) {
          return this.$message.error("重新选择的时候只能选择一条数据");
        } else {
          this.selectionList.forEach(e => {
            this.feeData.forEach((item, index) => {
              if (index == this.reData.index) {
                item.itemId = e.id;
                item.corpId = this.reData.corpId;
                item.feeName = e.cname;
                item.price = this.reData.price;
                item.unit = e.unitno;
                item.quantity = this.reData.quantity;
                item.amount = this.reData.amount;
                item.currency = e.fcyno;
                item.exchangeRate = this.reData.exchangeRate;
                item.remarks = this.reData.remarks;
                item.$cellEdit = true;
              }
            });
          });
        }
      } else {
        this.selectionList.forEach(e => {
          this.feeData.push({
            itemId: e.id,
            corpId: null,
            feeName: e.cname,
            price: 0,
            unit: e.unitno,
            quantity: 0,
            amount: 0,
            currency: e.fcyno,
            exchangeRate: null,
            remarks: null,
            $cellEdit: true,
          });
        });
      }
      this.feeDialog = false;
    },
    submitData() {
      this.allData = []
      //保存时  将所出的tab页数据赋值到相应 data上
      if(this.selectTab == 1){
        this.data_one = this.feeData
      }else{
        this.data_two = this.feeData
      }

      this.allData.push(...this.data_one,...this.data_two)

      return this.allData;
    },

    billingDetails(type){
      //查看是否改动过数据
      this.$emit("beforeFinance",this.submitData(),(params)=>{
        if(params.valid){
          for(let i=0;i<this.selectionList.length;i++){
            if(this.selectionList[i].corpId != this.selectionList[0].corpId){
              return this.$message.error('批量操作结算单位必须一致')
            }
          }
          this.billType = type
          if(type === '申请'){
             this.selectionList.map(item =>{
              delete item.id
              item.corpsName = item.corpName
              item.srcFeesId = item.id
              item.costType = item.itemId
              item.itemType = '采购'
              item.optionType = 'JK'
              item.srcType = 2   //费用明细申请
              let form = {
                form:{
                  ...item,
                }
              }
              this.arrList.push(form)
            })
          }else{
            this.selectionList.map(item =>{
              delete item.id
              item.corpsName = item.corpName
              item.srcFeesId = item.id
              item.costType = item.itemId
              item.itemType = '采购'
              item.optionType = 'JK'
              item.srcType = 2   //费用明细申请
              let form = {
                form:{
                  ...item,
                }
              }
              this.arrList.push(form)
            })
          }
          this.openApplyPayment()
        }
      })
    },
    //打开账单
    openApplyPayment(){
      this.applyPaymentDialog = true;
    },
    //关闭账单
    choceFun(){

    },
    summaryMethod({ columns, data }) {
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((item, index) => {
          sums[0] = "合计";
          if (item.property == "quantity" || item.property == "amount") {
            let qtySum = 0;
            let amountSum = 0;
            data.forEach(e => {
              qtySum = _.add(qtySum, Number(e.quantity));
              amountSum = _.add(amountSum, Number(e.amount));
            });
            //数量总计
            if (item.property == "quantity") {
              sums[index] = qtySum ? qtySum.toFixed(2) : "0.00";
            }
            //金额总计
            if (item.property == "amount") {
              sums[index] = micrometerFormat(amountSum);
            }
          }
        });
      }
      return sums;
    },
    async saveColumn() {
      const inSave = await this.saveColumnData(
        this.getColumnName(33),
        this.feeOption
      );
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs.feeCrud.$refs.dialogColumn.columnBox = false;
      }
    }
  },
  watch: {
    orderFeesList: function(rows) {
      this.allData = rows ? rows : [];
      if(this.allData.length !=0){
        this.data_one=this.allData.filter(item=>item.feesType === 1)  //应收
        this.data_two=this.allData.filter(item=>item.feesType === 2)  //应付

        if( this.feeData.length != 0){
          this.feeData = this.data_one
        }

      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .required_fields{
    color: #F56C6C;
    display:inline-block;
    width: 7%
  }
</style>