Smart_platform_ui/src/views/iosBasicData/cashier/components/cashierItem.vue

<template>
  <div>
    <el-dialog title="指示" :visible.sync="dialogVisible" append-to-body width="60%" :before-close="handleClose">
      <avue-crud
        v-if="dialogVisible"
        :option="option"
        :table-loading="loading"
        :data="data"
        ref="crud"
        id="out-table"
        :header-cell-class-name="headerClassName"
        @selection-change="selectionChange"
        @on-load="onLoad"
      >
        <template slot="status" slot-scope="{ row }">
          <span v-if="row.status == 0">{{ row.dc == "D" ? "未收款" : "未支付" }}</span>
          <span v-if="row.status == 1">{{ row.dc == "D" ? "已收款" : "已支付" }}</span>
          <span v-if="row.status == 2">{{ row.dc == "D" ? "部分收款" : "部分支付" }}</span>
        </template>
        <template slot="applyCashierAmount" slot-scope="{ row }">
          <el-popover width="700" trigger="click">
            <avue-crud :data="cashierData" :option="cashierOption"></avue-crud>
            <span style="color: #409EFF;cursor: pointer" slot="reference" @click="viewCashier(row)">{{ row.applyCashierAmount }}</span>
          </el-popover>
        </template>
        <template slot="thisAmount" slot-scope="{ row }">
          <el-input-number
            style="width: 100%;"
            v-model="row.thisAmount"
            label="请输入本次金额"
            size="small"
            :max="row.remainingCashierAmount"
            @change="calculateChange(row)"
            :controls="false"
            :disabled="row.status == 1"
          ></el-input-number>
        </template>
      </avue-crud>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button size="mini" type="danger" @click="allClick('撤销出纳')" :disabled="selectionList.length == 0"
          >撤销{{ form.dc == "D" ? "收款" : "支付" }}</el-button
        >
        <el-button size="mini" type="success" @click="allClick('确认出纳')" :disabled="selectionList.length == 0"
          >确认{{ form.dc == "D" ? "收款" : "支付" }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { MktSlotQuotation, quotationImportBatch } from "@/api/iosBasicData/bills";
import dicSelect from "@/components/dicSelect/main";
import { getListAll, confirmCashier, revokeConfirmCashier, confirmCashier2, revokeConfirmCashier2, cashierList } from "@/api/iosBasicData/cashier.js";
import { bcurrencyGetExrate } from "@/api/iosBasicData/rateManagement";
export default {
  props: {},
  components: { dicSelect },
  data() {
    return {
      cashierData: [],
      cashierOption: {
        header: false,
        menu: false,
        align: "center",
        column: [
          {
            label: "收/付",
            prop: "dc",
            width: "60",
            type: "select",
            dicData: [
              {
                label: "收",
                value: "D"
              },
              {
                label: "付",
                value: "C"
              }
            ],
            overHidden: true
          },
          {
            label: "币别",
            prop: "curCode",
            width: "60",
            overHidden: true
          },
          {
            label: "汇率",
            prop: "exrate",
            width: "80",
            overHidden: true
          },
          {
            label: "金额",
            prop: "amount",
            width: "100",
            overHidden: true
          },
          {
            label: "转汇后金额",
            prop: "amountLoc",
            width: "100",
            overHidden: true
          },
          {
            label: "税率(%)",
            prop: "taxRate",
            width: "80",
            overHidden: true
          },
          {
            label: "净额",
            prop: "amountNet",
            width: "100",
            overHidden: true
          },
          {
            label: "税额",
            prop: "amountTax",
            width: "80",
            overHidden: true
          },
          {
            label: "创建人",
            prop: "createUserName",
            width: "100",
            overHidden: true
          },
          {
            label: "创建时间",
            prop: "createTime",
            width: "100",
            overHidden: true
          }
        ]
      },
      selectionList: [],
      form: {},
      data: [],
      options: [
        {
          value: 0,
          label: "不含税"
        },
        {
          value: 1,
          label: "含税"
        }
      ],
      dialogVisible: false,
      loading: false,
      option: {
        height: 500,
        calcHeight: 30,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        menu: false,
        menuWidth: 100,
        header: false,
        align: "center",
        selection: true,
        tip: false,
        column: [
          {
            label: "状态",
            prop: "status",
            width: "60",
            overHidden: true
          },
          {
            label: "收/付",
            prop: "dc",
            width: "60",
            type: "select",
            dicData: [
              {
                label: "收",
                value: "D"
              },
              {
                label: "付",
                value: "C"
              }
            ],
            overHidden: true
          },
          {
            label: "币别",
            prop: "curCode",
            width: "60",
            overHidden: true
          },
          {
            label: "汇率",
            prop: "exrate",
            width: "80",
            overHidden: true
          },
          {
            label: "金额",
            prop: "amount",
            width: "100",
            overHidden: true
          },
          {
            label: "已出纳金额",
            prop: "applyCashierAmount",
            width: "100",
            overHidden: true
          },
          {
            label: "剩余出纳金额",
            prop: "remainingCashierAmount",
            width: "100",
            overHidden: true
          },
          {
            label: "本次金额",
            prop: "thisAmount",
            width: "100",
            overHidden: true
          },
          {
            label: "转汇后金额",
            prop: "amountLoc",
            width: "100",
            overHidden: true
          },
          {
            label: "税率(%)",
            prop: "taxRate",
            width: "80",
            overHidden: true
          },
          {
            label: "净额",
            prop: "amountNet",
            width: "100",
            overHidden: true
          },
          {
            label: "税额",
            prop: "amountTax",
            width: "80",
            overHidden: true
          },
          {
            label: "经办人",
            prop: "cashierName",
            width: "100",
            overHidden: true
          },
          {
            label: "经办时间",
            prop: "cashierTime",
            width: "100",
            overHidden: true
          },
          {
            label: "创建人",
            prop: "createUserName",
            width: "100",
            overHidden: true
          },
          {
            label: "创建时间",
            prop: "createTime",
            width: "100",
            overHidden: true
          },
          {
            label: "备注",
            prop: "remarks",
            width: 120,
            overHidden: true
          }
        ]
      }
    };
  },
  async created() {
    // this.option = await this.getColumnData(this.getColumnName(309.6), this.optionBack);
  },
  methods: {
    viewCashier(row) {
      this.cashierData = [];
      cashierList({ pid: row.id }).then(res => {
        this.cashierData = res.data.data.records;
      });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    calculateChange(row) {
      row.amountLoc = Number(Number(row.thisAmount ? row.thisAmount : 0) * Number(row.exrate ? row.exrate : 0)).toFixed(2);
      row.amountTax = Number(Number(row.amountLoc ? row.amountLoc : 0) * Number(row.taxRate ? row.taxRate / 100 : 0)).toFixed(2);
      row.amountNet = Number(Number(row.amountLoc ? row.amountLoc : 0) - Number(row.amountTax ? row.amountTax : 0)).toFixed(2);
    },
    allClick(name) {
      if (name == "确认出纳") {
        for (let item of this.selectionList) {
          if (item.status == 1) {
            return this.$message.error("请选择未出纳的数据");
          }
        }
        let obj = {
          applyCashierList: this.selectionList
        };
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(255,255,255,0.7)"
        });
        // 对账和付费申请
        if (!this.form.type) {
          confirmCashier(obj)
            .then(res => {
              this.openDialog(this.form);
            })
            .finally(() => {
              loading.close();
            });
        }
        // 发票申请
        if (this.form.type == "销项") {
          confirmCashier2(obj)
            .then(res => {
              this.openDialog(this.form);
            })
            .finally(() => {
              loading.close();
            });
        }
      }
      if (name == "撤销出纳") {
        for (let item of this.selectionList) {
          if (item.status == 0) {
            return this.$message.error("请选择已出纳的数据");
          }
        }
        this.$confirm("是否撤销?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {
            applyCashierList: this.selectionList
          };
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          // 对账和付费申请
          if (!this.form.type) {
            revokeConfirmCashier(obj)
              .then(res => {
                this.openDialog(this.form);
              })
              .finally(() => {
                loading.close();
              });
          }
          // 发票申请
          if (this.form.type == "销项") {
            revokeConfirmCashier2(obj)
              .then(res => {
                this.openDialog(this.form);
              })
              .finally(() => {
                loading.close();
              });
          }
        });
      }
    },
    openDialog(row) {
      this.dialogVisible = true;
      this.form = row;
      let obj = {
        srcIds: row.id
      };
      this.loading = true;
      getListAll(obj)
        .then(res => {
          this.data = res.data.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //自定义列保存
    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;
        this.searchReset();
      }
    },
    //自定义列重置
    async resetColumn(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;
  padding: 4px 0;
}

::v-deep#out-table .back-two {
  background: #ecf5ff !important;
  text-align: center;
  padding: 4px 0;
}
</style>