Smart_platform_ui/src/views/billM/billingCenter/index.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      id="out-table"
      :header-cell-class-name="headerClassName"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 313)"
      @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 313)"
      @on-load="onLoad"
    >
      <template slot="menuLeft">
        <!--<el-button type="danger"-->
        <!--           size="small"-->
        <!--           icon="el-icon-delete"-->
        <!--           plain-->
        <!--           v-if="permission.finaccbills_delete"-->
        <!--           @click="handleDelete">删 除-->
        <!--</el-button>-->
        <!--  <el-button type="primary"-->
        <!--             size="small"-->
        <!--             plain-->
        <!--             @click="handleDelete">结 算-->
        <!--  </el-button>-->
        <!--  <el-button type="success"-->
        <!--             size="small"-->
        <!--             plain-->
        <!--             @click="handleDelete">发 票-->
        <!--  </el-button>-->
        <!--  <el-button type="info"-->
        <!--             size="small"-->
        <!--             plain-->
        <!--             @click="handleDelete">凭 证-->
        <!--  </el-button>-->
        <!--  <el-button type="warning"-->
        <!--             size="small"-->
        <!--             plain-->
        <!--             @click="handleDelete">付费申请-->
        <!--  </el-button>-->
      </template>
      <template slot="reconciliationAmount" slot-scope="{ row }">
        <el-popover trigger="click">
          <avue-crud :data="rlaData" :option="rlaOption"></avue-crud>
          <span style="color: #409EFF;cursor: pointer" slot="reference" @click="viewRLA(row)">{{ row.reconciliationAmount }}</span>
        </el-popover>
      </template>
      <template slot="reconciliationAmountUsd" slot-scope="{ row }">
        <el-popover trigger="click">
          <avue-crud :data="rlaData" :option="rlaOption"></avue-crud>
          <span style="color: #409EFF;cursor: pointer" slot="reference" @click="viewRLA(row)">{{ row.reconciliationAmountUsd }}</span>
        </el-popover>
      </template>
      <template slot="billNo" slot-scope="scope" @click="billNoDetails(scope.row)">
        <span style="color: #1e9fff;cursor: pointer">{{ scope.row.billNo }}</span>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/iosBasicData/finaccbills";
import { mapGetters } from "vuex";
import { BcorpsList, getBcorpslistByType } from "@/api/iosBasicData/bcorps";
import { getWorkDicts } from "@/api/system/dictbiz";
import { getListAll } from "@/api/iosBasicData/finstlbills";
export default {
  data() {
    return {
      rlaData: [],
      rlaOption: {
        header: false,
        menu: false,
        align: "center",
        column: [
          {
            label: "来源单号",
            prop: "srcNo",
            width: "200",
            overHidden: true
          },
          {
            label: "来源类型",
            prop: "srcType",
            width: "80",
            overHidden: true
          },
          {
            label: "签收金额",
            prop: "signedAmount",
            width: "100",
            overHidden: true
          },
          {
            label: "签收人",
            prop: "consigneeName",
            width: "100",
            overHidden: true
          },
          {
            label: "签收时间",
            prop: "signingTime",
            width: "120",
            overHidden: true
          }
        ]
      },
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {},
      optionBack: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        menu: false,
        searchIcon: true,
        searchIndex: 3,
        searchLabelWidth: "100",
        column: [
          {
            label: "账单编号",
            prop: "billNo",
            search: true,
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入账单编号",
                trigger: "blur"
              }
            ]
          },
          {
            label: "账单日期",
            prop: "billDate",
            type: "date",
            width: 100,
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入账单日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "账单属性",
            prop: "accountDc",
            type: "select",
            search: true,
            dicData: [
              {
                label: "应收",
                value: "D"
              },
              {
                label: "应付",
                value: "C"
              }
            ],
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入账单属性",
                trigger: "blur"
              }
            ]
          },
          {
            label: "财务日期",
            prop: "accountDate",
            type: "date",
            width: "100",
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入财务日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "财务日期",
            prop: "accountDateList",
            search: true,
            hide: true,
            width: 100,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchRange: true,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入财务日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "业务类型",
            prop: "businessType",
            type: "select",
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入业务类型",
                trigger: "blur"
              }
            ]
          },
          {
            label: "业务单据编号",
            prop: "businessBillNo",
            search: true,
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入业务单据编号",
                trigger: "blur"
              }
            ]
          },
          {
            label: "业务单据日期",
            prop: "businessDate",
            type: "date",
            width: 180,
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入业务单据日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "业务单据日期",
            prop: "businessDateList",
            search: true,
            hide: true,
            width: 100,
            overHidden: true,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchRange: true,
            rules: [
              {
                required: true,
                message: "请输入业务单据日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "付款方式",
            prop: "paymode",
            type: "select",
            overHidden: true,
            dicData: [
              {
                label: "预付",
                value: "PP"
              },
              {
                label: "到付",
                value: "CC"
              },
              {
                label: "FPA",
                value: "FPA"
              },
              {
                label: "Other",
                value: "Other"
              }
            ],
            rules: [
              {
                required: true,
                message: "请输入付款方式 PP=预付, CC=到付, FPA, Other",
                trigger: "blur"
              }
            ]
          },
          {
            label: "结算单位",
            prop: "corpCnName",
            search: true,
            width: 180,
            overHidden: true,
            type: "select",
            filterable: true,
            remote: true,
            dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
            dicData: [],
            props: {
              label: "cnName",
              value: "cnName",
              res: "data.records"
            }
            // dicFormatter: (res => {
            //     return res.data.records
            // }),
          },
          {
            label: "客户中文名称",
            prop: "billCorpCnName",
            search: true,
            width: 180,
            overHidden: true,
            type: "select",
            filterable: true,
            remote: true,
            dicData: [],
            dicUrl: "/api/blade-los/bcorps/listByType?cnName={{key}}",
            props: {
              label: "cnName",
              value: "cnName",
              res: "data.records"
            }
            // dicFormatter: (res => {
            //     return res.data.records
            // }),
          },
          {
            label: "MB/L NO",
            prop: "mblno",
            search: true,
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入MB/L NO",
                trigger: "blur"
              }
            ]
          },
          {
            label: "HB/L NO",
            prop: "hblno",
            width: 180,
            search: true,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入HB/L NO",
                trigger: "blur"
              }
            ]
          },
          {
            label: "Reference NO",
            prop: "refno",
            search: true,
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入Reference NO",
                trigger: "blur"
              }
            ]
          },
          {
            label: "所属岗位",
            prop: "teamName",
            search: true,
            overHidden: true,
            type: "select",
            filterable: true,
            remote: true,
            dicUrl: "/api/blade-system/post/list?current=1&size=10&postName={{key}}",
            props: {
              label: "postName",
              value: "postName",
              res: "data.records"
            }
          },
          {
            label: "签收CNY",
            prop: "reconciliationAmount",
            width: 100,
            overHidden: true
          },
          {
            label: "签收USD",
            prop: "reconciliationAmountUsd",
            width: 110,
            overHidden: true
          },
          {
            label: "已申请结算金额",
            prop: "appliedAmountStl",
            width: 110,
            overHidden: true
          },
          {
            label: "已申请发票结算金额",
            prop: "appliedInvoiceAmountStl",
            width: 130,
            overHidden: true
          },
          {
            label: "已申请结算金额USD",
            prop: "appliedAmountStlUsd",
            width: 130,
            overHidden: true
          },
          {
            label: "已申请发票结算金额USD",
            prop: "appliedInvoiceAmountStlUsd",
            width: 160,
            overHidden: true
          },
          {
            label: "CNY应收",
            prop: "amountDr",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入本位币应收(CNY)",
                trigger: "blur"
              }
            ]
          },
          {
            label: "CNY应付",
            prop: "amountCr",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入本位币应付(CNY)",
                trigger: "blur"
              }
            ]
          },
          {
            label: "综合USD应收",
            prop: "amountDrUsd",
            width: 120,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入综合 USD 应收(USD) - 非 USD 外币转换为 USD",
                trigger: "blur"
              }
            ]
          },
          {
            label: "综合USD应付",
            prop: "amountCrUsd",
            width: 120,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入综合 USD 应付(USD) - 非 USD 外币转换为 USD",
                trigger: "blur"
              }
            ]
          },
          {
            label: "合计CNY应收",
            prop: "amountDrLoc",
            width: 120,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入合计本位币应收(CNY )",
                trigger: "blur"
              }
            ]
          },
          {
            label: "合计CNY应付",
            prop: "amountCrLoc",
            width: 120,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入合计本位币应付(CNY)",
                trigger: "blur"
              }
            ]
          },
          {
            label: "结算单据编号",
            prop: "stlBillNo",
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入结算单据编号",
                trigger: "blur"
              }
            ]
          },
          {
            label: "结算日期",
            prop: "stlDate",
            type: "date",
            width: 100,
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入结算日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "已结算CNY应收",
            prop: "stlAmountDr",
            width: 120,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入已结算本位币应收(CNY)",
                trigger: "blur"
              }
            ]
          },
          {
            label: "已结算CNY应付",
            prop: "stlAmountCr",
            width: 120,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入已结算本位币应付(CNY)",
                trigger: "blur"
              }
            ]
          },
          // {
          //   label: "已结算综合USD应收",
          //   prop: "stlAmountDrUsd",
          //   width:"140",
          //   overHidden:true,
          //   rules: [{
          //     required: true,
          //     message: "请输入已结算综合 USD 应收(USD) - 非 USD 外币转换为 USD",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "已结算综合USD应付",
          //   prop: "stlAmountCrUsd",
          //   width:"140",
          //   overHidden:true,
          //   rules: [{
          //     required: true,
          //     message: "请输入已结算综合 USD 应付(USD) - 非 USD 外币转换为 USD",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "已结算合计CNY应收",
            prop: "stlAmountDrLoc",
            width: 140,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入已结算合计本位币应收(CNY)",
                trigger: "blur"
              }
            ]
          },
          {
            label: "已结算合计CNY应付",
            prop: "stlAmountCrLoc",
            width: 140,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入已结算合计本位币应付(CNY)",
                trigger: "blur"
              }
            ]
          },
          {
            label: "发票号",
            prop: "invoiceNo",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入发票号",
                trigger: "blur"
              }
            ]
          },
          {
            label: "发票日期",
            prop: "invoiceDate",
            type: "date",
            width: 100,
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入发票日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "开票CNY",
            prop: "uninvoicedAmount",
            overHidden: true
          },
          {
            label: "开票USD",
            prop: "uninvoicedAmountUsd",
            overHidden: true
          },
          {
            label: "付费申请金额CNY",
            prop: "appliedAmount",
            overHidden: true,
            width: 120
          },
          {
            label: "付费申请金额USD",
            prop: "appliedAmountUsd",
            overHidden: true,
            width: 120
          },
          {
            label: "申请发票金额CNY",
            prop: "appliedInvoiceAmount",
            overHidden: true,
            width: 120
          },
          {
            label: "申请发票金额USD",
            prop: "appliedInvoiceAmountUsd",
            overHidden: true,
            width: 120
          },
          // {
          //   label: "签收CNY",
          //   prop: "reconciliationAmount",
          //   width: 100,
          //   overHidden: true
          // },
          // {
          //   label: "签收USD",
          //   prop: "reconciliationAmountUsd",
          //   width: 100,
          //   overHidden: true
          // },
          {
            label: "凭证号",
            prop: "voucherNo",
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入凭证号",
                trigger: "blur"
              }
            ]
          },
          {
            label: "凭证日期",
            prop: "voucherDate",
            type: "date",
            width: 100,
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入凭证日期",
                trigger: "blur"
              }
            ]
          },
          {
            label: "是否对账",
            prop: "isChecked",
            type: "select",
            dicData: [
              {
                label: "未对账",
                value: 0
              },
              {
                label: "部分对账",
                value: 1
              },
              {
                label: "已对账",
                value: 2
              }
            ],
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入是否对账",
                trigger: "blur"
              }
            ]
          },
          {
            label: "是否销账",
            prop: "isCleared",
            type: "select",
            dicData: [
              {
                label: "未销账",
                value: 0
              },
              {
                label: "部分销账",
                value: 3
              },
              {
                label: "销账",
                value: 9
              }
            ],
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入是否销账",
                trigger: "blur"
              }
            ]
          },
          {
            label: "是否发票",
            prop: "invoiceStatus",
            type: "select",
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            overHidden: true
          },
          {
            label: "账单状态",
            prop: "billStatus",
            type: "select",
            dicData: [
              {
                label: "未完成",
                value: 0
              },
              {
                label: "已完成",
                value: 1
              }
            ],
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入账单状态",
                trigger: "blur"
              }
            ]
          },
          {
            label: "备注",
            prop: "remarks",
            width: 180,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "请输入备注",
                trigger: "blur"
              }
            ]
          }
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.finaccbills_add, false),
        viewBtn: this.vaildData(this.permission.finaccbills_view, false),
        delBtn: this.vaildData(this.permission.finaccbills_delete, false),
        editBtn: this.vaildData(this.permission.finaccbills_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(313), this.optionBack);
    this.getBcorpslistByTypefun();
    this.getWorkDictsfun();
  },
  methods: {
    viewRLA(row) {
      this.rlaData = [];
      getListAll({ billId: row.id }).then(res => {
        this.rlaData = res.data.data;
      });
    },
    // 获取字典数据
    getWorkDictsfun() {
      // 获取业务类型
      getWorkDicts("business_type_los").then(res => {
        this.findObject(this.option.column, "businessType").dicData = res.data.data;
      });
      // 获取发票状态
      getWorkDicts("reconciliation_invoice_los").then(res => {
        this.findObject(this.option.column, "invoiceStatus").dicData = res.data.data;
      });
    },
    getBcorpslistByTypefun() {
      getBcorpslistByType(1, 10).then(res => {
        this.findObject(this.option.column, "corpCnName").dicData = res.data.data.records;
        this.findObject(this.option.column, "billCorpCnName").dicData = res.data.data.records;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        },
        error => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    // 详情数据
    billNoDetails() {},
    // 批量删除 这个表不能批量删除
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    // 搜索点击回调
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records.map(item => {
          item.invoiceStatus = item.invoiceStatus + "";
          return item;
        });
        this.$nextTick(() => {
          this.$refs.crud.doLayout();
          this.$refs.crud.dicInit();
          this.$refs.crud.refreshTable();
        });
        this.loading = false;
        this.selectionClear();
      });
    },

    //自定义列保存
    async saveColumnTwo(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 resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },

    // 更改表格颜色
    headerClassName(tab) {
      //颜色间隔
      let back = "";
      if (tab.columnIndex >= 0 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one";
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two";
        }
      }
      return back;
    }
  }
};
</script>

<style scoped>
::v-deep#out-table .back-one {
  background: #ecf5ff !important;
  text-align: center;
}

::v-deep#out-table .back-two {
  background: #ecf5ff !important;
  text-align: center;
}

/deep/ .el-col-md-8 {
  width: 24.33333%;
}

::v-deep.el-form-item {
  margin-bottom: 0;
}
</style>