Smart_platform_ui/src/views/iosBasicData/finvouchers/index.vue

<template>
  <div>
    <basic-container v-if="isShow">
      <custom-loading ref="customLloading">
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
          :permission="permissionList" :before-open="beforeOpen" v-model="form" id="out-table"
          :header-cell-class-name="headerClassName" ref="crud" @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', 321)"
          @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 321)">
          <template slot="menuLeft">
            <div style="margin-top: 0px; width: 260px">
              <el-tabs type="card" v-model="query.voucherStatus" @tab-click="handleClick">
                <el-tab-pane label="新建凭证" name="0"></el-tab-pane>
                <el-tab-pane label="已记账凭证" name="1"></el-tab-pane>
              </el-tabs>
            </div>
          </template>
          <template slot="menuRight">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="addbtnfun()">新建财务凭证
            </el-button>
            <el-button v-if="query.voucherStatus==='0'" type="danger" size="small" icon="el-icon-delete" plain @click="handleDelete">删 除
            </el-button>
            <el-button v-if="query.voucherStatus==='0'" type="success" size="small" plain @click.stop="voucherAccountingfun">凭证记账
            </el-button>
            <el-button v-if="query.voucherStatus==='1'" type="danger" size="small" style="margin-right: 40px" plain @click="revokeFinVouchersfun">撤销记账
            </el-button>
          </template>
          <template slot="menu" slot-scope="{row}">
            <el-button type="text" size="small" @click="editFun(row)" :disabled="row.voucherStatus == 1">编辑
            </el-button>
            <el-button type="text" size="small" @click="rowDel(row)" :disabled="row.voucherStatus == 1">删除
            </el-button>
          </template>
          <template slot="billNo" slot-scope="{row}">
            <span class="textHide" style="color: #1e9fff;cursor: pointer;" @click="editFun(row)">{{ row.billNo }}</span>
          </template>
        </avue-crud>
      </custom-loading>

    </basic-container>
    <finvouchersitems ref="finvouchersitemsRef" :key="datekey" v-if="!isShow" @goBack="goBack" @toAddEdit="toAddEdit">
    </finvouchersitems>
  </div>
</template>

<script>
import {
  finvouchersList,
  finvouchersDetail,
  finvouchersSubmit,
  finvouchersRemove,
  confirmFinVouchers, revokeFinVouchers
} from "@/api/iosBasicData/finvouchers";
import { mapGetters } from "vuex";
import finvouchersitems from "@/views/iosBasicData/finvouchers/finvouchersitems.vue";
import finstlbillsDetails from "@/views/iosBasicData/finstlbills/finstlbillsDetails.vue";
import { getWorkDicts } from "@/api/system/dictbiz";
import CustomLoading from '@/views/iosBasicData/finvouchers/components/loading.vue'
import { bbusinesstypeList } from "@/api/iosBasicData/bbusinesstype";
export default {
  data() {
    return {
      datekey: Date.now(),
      isShow: true, // 详情弹窗
      form: {},
      query: {
        voucherStatus: "0",
      },
      loading: true,
      page: {
        pageSize: 1000,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 50, 100, 200, 300, 400, 500, 1000]
      },
      voucherTypeData: [],
      selectionList: [],
      option: {},
      optionBack: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        searchSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        menuWidth: '100',
        searchIcon: true,
        searchIndex: 4,
        column: [
          {
            label: "期间",
            prop: "searchPeriod",
            overHidden: true,
            width: 100,
            hide: true,
            type: "month",
            search: true,
            searchOrder: 1,
            searchSpan: 4,
            format: "yyyy-MM",
            valueFormat: "yyyy-MM",
          },
          {
            label: "单据编号",
            prop: "billNo",
            search: true,
            searchOrder: 6,
            overHidden: true,
            width: 120,
          },
          {
            label: "凭证字",
            prop: "voucherType",
            overHidden: true,
            width: 90,

            type: "select",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dicData: [],
            search: true,
            searchOrder: 2,
            sortable: true
          },
          {
            label: "凭证号",
            prop: "voucherNo",
            search: true,
            searchOrder: 3,
            overHidden: true,
            width: 100,
            sortable: true
          },
          {
            label: "凭证日期",
            prop: "voucherDate",
            overHidden: true,
            width: 100,
          },
          /*
          {
            label: "凭证开始日期",
            prop: "voucherDateStart",
            search: true,
            searchOrder: 4,
            overHidden: true,
            searchLabelWidth: "100",
            hide: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width: 100,
          },
          {
            label: "凭证结束日期",
            prop: "voucherDateEnd",
            search: true,
            searchOrder: 5,
            overHidden: true,
            searchLabelWidth: "100",
            hide: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width: 100,
          },
          */
          /*
          {
            label: "年",
            prop: "accountYear",
            overHidden: true,
            width: 40,
          },
          {
            label: "月",
            prop: "accountMonth",
            overHidden: true,
            width: 40,
          },
          */
          {
            label: "凭证摘要",
            prop: "descr",
            overHidden: true,
            width: 200,
            search: true,
            searchOrder: 7,
          },
          {
            label: "借方金额(CNY)",
            prop: "amountDr",
            overHidden: true,
            width: 120,
          },
          {
            label: "贷方金额(CNY)",
            prop: "amountCr",
            overHidden: true,
            width: 120,
          },
          {
            label: "CNY金额",
            prop: "amountDr",
            overHidden: true,
            width: 120,
            hide: true,
            search: true,
            searchOrder: 8,
          },
          {
            label: "借方金额(USD)",
            prop: "amountDrUsd",
            overHidden: true,
            width: 120,
          },
          {
            label: "贷方金额(USD）",
            prop: "amountCrUsd",
            overHidden: true,
            width: 120,
          },
          {
            label: "USD金额",
            prop: "amountDrUsd",
            overHidden: true,
            width: 120,
            hide: true,
            search: true,
            searchOrder: 9,
          },
          {
            label: "外币",
            prop: "isForeign",
            search: true,
            searchOrder: 10,
            type: 'select',
            dicData: [],
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=ifInvoice",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            overHidden: true,
            width: 60,
          },
          /*
          {
            label: "数量",
            prop: "isQuantity",
            search: true,
            type: 'select',
            dicData: [],
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=ifInvoice",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            overHidden: true,
            width: 60,
          },
           */
          {
            label: "凭证来源",
            prop: "voucherSource",
            search: true,
            searchOrder: 11,
            type: 'select',
            dicData: [],
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=voucher_source_los",
            props: {
              label: "cnName",
              value: "code"
            },
            overHidden: true,
            width: 100,
          },
          {
            label: "来源单号",
            prop: "srcBlllNo",
            overHidden: true,
            width: 140,
            search: true,
            searchOrder: 12,
          },
          {
            label: "制单人",
            prop: "createUserName",
            overHidden: true,
            width: 80,
          },
          {
            label: "制单时间",
            prop: "createTime",
            overHidden: true,
            width: 100,
          },
          {
            label: "复核人",
            prop: "checkUserName",
            overHidden: true,
            width: 80,
          },
          {
            label: "复核时间",
            prop: "checkTime",
            overHidden: true,
            width: 100,
          },
          {
            label: "记账人",
            prop: "postUserName",
            overHidden: true,
            width: 80,
          },
          {
            label: "记账时间",
            prop: "postTime",
            overHidden: true,
            width: 100,
          },
          {
            label: "状态",
            prop: "voucherStatus",
            type: 'select',
            dicData: [],
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=voucher_status_los",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            overHidden: true,
            width: 60,
          },
          {
            label: "备注",
            prop: "remarks",
            overHidden: true,
            width: 180,
          },
        ]
      },
      data: []
    };
  },
  components: { finstlbillsDetails, finvouchersitems, CustomLoading },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.finvouchers_add, false),
        viewBtn: this.vaildData(this.permission.finvouchers_view, false),
        delBtn: this.vaildData(this.permission.finvouchers_delete, false),
        editBtn: this.vaildData(this.permission.finvouchers_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  async created() {
    let opt = await this.getColumnData(this.getColumnName(321), this.optionBack);
    let col = this.findObject(opt.column, "searchPeriod");
    if(col) col.searchValue = new Date().toISOString().substring(0, 10) + " 00:00:00";
    console.log(col, new Date().toISOString().substring(0, 7));
    this.option = opt;
    await this.voucherStatusWorkDictsfun()
    this.$nextTick(()=>{
      this.onLoad(this.page, this.query)
    })
  },
  activated() {
    if (this.$route.query.id) {
      setTimeout(() => {
        if (!this.$store.getters.voucherStatus) {
          this.editFun(this.$route.query)
        }
      }, 200);
    }
  },
  methods: {
    toAddEdit() {
      this.datekey = Date.now()
    },
    // 获取字典数据
    setColumnDictData(name, data) {
      let col = this.findObject(this.option.column, name);
      if(col && typeof col === "object") col.dicData = Array.isArray(data) ? data : [];
    },
    voucherStatusWorkDictsfun() {
      getWorkDicts("voucher_status_los").then(res => {
        this.setColumnDictData("voucherStatus", res.data.data);
      })
      // 是否字典
      getWorkDicts("ifInvoice").then(res => {
        this.setColumnDictData("isForeign", res.data.data);
        this.setColumnDictData("isQuantity", res.data.data);
      })

      bbusinesstypeList(1,100,{enableVoucher:'1'}).then(res => {
        let data=[{id: 0, code: "MANUAL", cnName: "手工凭证"}].concat(res.data.data.records)
        this.setColumnDictData("voucherSource", data);
      })
      // getWorkDicts("voucher_source_los").then(res => {
      //   this.findObject(this.option.column, "voucherSource").dicData = res.data.data;
      // })
      getWorkDicts("voucher_word_los").then((res) => {
        this.voucherTypeData = res.data.data;
        this.setColumnDictData("voucherType", res.data.data);
      });
    },

    // 凭证记账
    voucherAccountingfun() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      if (this.selectionList.length === 1) {
        if (this.selectionList[0].voucherStatus == 1) {
          return this.$message.warning("请选择还未记账的数据");
        }
      }
      this.$confirm("确定将选择数据进行记账?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let arrids = this.selectionList.map(item => {
          if (item.voucherStatus == 0) {
            return item.id
          }
        })
        // this.loading = true;
        this.$refs.customLloading.startLoading()
        confirmFinVouchers({ ids: arrids.join(',') }).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // this.loading = false;
          this.onLoad(this.page, this.query);
        })
          .finally(() => {
            this.$refs.customLloading.endLoading()
          });
      })
    },
    // 撤销记账
    revokeFinVouchersfun() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      if (this.selectionList.length === 1) {
        if (this.selectionList[0].voucherStatus == 0) {
          return this.$message.warning("请选择已记账的数据");
        }
      }
      this.$confirm("确定将选择数据撤销记账?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let arrids = this.selectionList.map(item => {
          if (item.voucherStatus == 1) {
            return item.id
          }
        })
        this.$refs.customLloading.startLoading()
        revokeFinVouchers({ ids: arrids.join(',') }).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad(this.page, this.query);
        })
          .finally(() => {
            this.$refs.customLloading.endLoading()
          });
      })
    },
    // 新建凭证
    addbtnfun() {
      this.isShow = false
      this.$store.commit("IN_VOUCHER_DETAIL");
    },
    // 编辑
    editFun(row) {
      this.isShow = false
      this.$nextTick(() => {
        this.$refs.finvouchersitemsRef.finvouchersDetailfun(row.id)
      })
      this.$store.commit("IN_VOUCHER_DETAIL");
    },
    // 详情的返回列表
    goBack() {
      // 初始化数据
      if (JSON.stringify(this.$route.query) != "{}") {
        this.$router.$avueRouter.closeTag();
        this.$router.push({
          path: "/iosBasicData/finvouchers/index"
        });
      }
      this.isShow = true;
      this.onLoad(this.page, this.query);
      this.$store.commit("OUT_VOUCHER_DETAIL");
    },
    rowSave(row, done, loading) {
      finvouchersSubmit(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      finvouchersSubmit(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 finvouchersRemove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return finvouchersRemove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        finvouchersDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {
        voucherStatus: "0",
      };
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
      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);
    },
    // tabs切换筛选
    handleClick(tab, event) {
      this.page = {
        pageSize: 10,
        currentPage: 1,
        total: 0
      };
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      if(!this.query.searchPeriod){
        this.query.searchPeriod = new Date().toISOString().substring(0, 7);
      }
      let sp = this.query.searchPeriod;
      this.query.accountYear = parseInt(sp.substring(0, 4))
      this.query.accountMonth = parseInt(sp.substring(5, 7))

      let query = Object.assign(params, this.query)

      finvouchersList(page.currentPage, page.pageSize, query).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records.map(item => {
          item.isForeign = item.isForeign + ''
          item.isQuantity = item.isQuantity + ''
          item.voucherStatus = item.voucherStatus + ''
          return item
        })
        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;

        this.voucherStatusWorkDictsfun()
      }
    },
    // 更改表格颜色
    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;
}

.textHide {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .el-col-md-8 {
  width: 24.33333%;
}
</style>