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

<template>
  <div>
    <basic-container>
      <avue-form :option="optionForm" v-model="query" class="form-mb">
        <tempalte slot="button" slot-scope="{ row }">
          <span style="display: flex;justify-content: end;">
            <el-button icon="el-icon-arrow-down" size="small" @click="searchShow = true, showHight()" v-if="!searchShow">展
              开</el-button>
            <el-button icon="el-icon-arrow-up" size="small" @click="searchShow = false, showHight()" v-if="searchShow">收
              缩</el-button>
            <!-- <el-button type="primary" size="small" plain @click="inItial">初始入账
            </el-button> -->
            <el-button type="success" size="small" plain @click="outExport">导出
            </el-button>
          </span>
        </tempalte>
      </avue-form>
      <div v-show="searchShow">
        <avue-form :option="optionForm2" v-model="query" class="form-mb">
          <tempalte slot="levelStart" slot-scope="{ row }">
            <span style="display: flex;">
              <avue-select v-model="query.levelStart" placeholder="请选择科目级次" :dic="dic"></avue-select>
              <span style="margin: 0 4px;">至</span>
              <avue-select v-model="query.levelEnd" placeholder="请选择科目级次" :dic="dic"></avue-select>
            </span>
          </tempalte>
          <tempalte slot="type" slot-scope="{ row }">
            <el-row>
              <el-col :span="6"> <avue-select v-model="query.type" placeholder="请选择核算类型"
                  :dic="typeDic"></avue-select></el-col>
              <el-col :span="18"> <avue-select v-model="query.corpList" placeholder="请选择核算项目" :dic="corpDic"
                  :props="corpProps" :filterable="true" :multiple="true" :tags="true"></avue-select></el-col>
            </el-row>
          </tempalte>
        </avue-form>
        <span style="display: flex;justify-content: end;">
          <el-button type="primary" icon="el-icon-search" size="small" @click="serach">搜 索</el-button>
          <el-button icon="el-icon-delete" size="small" @click="reset">清 空</el-button>
        </span>
      </div>
    </basic-container>
    <basic-container v-show="treeData.length > 0">
      <el-row>
        <el-col :span="4">
          <avue-tree ref="tree" :class="searchShow ? 'treeStyle' : 'bigTreeStyle'" :option="treeOption" :data="treeData"
            v-model="treeForm" @node-click="nodeClick">
          </avue-tree>
        </el-col>
        <el-col :span="20" style="padding-left: 20px;">
          <avue-crud :option="option" :data="dataList" ref="crud" id="out-table"
            :header-cell-class-name="headerClassName">
            <template slot="voucherNo" slot-scope="{ row }">
              <span style="color: #1e9fff;cursor: pointer;" @click="toJump(row)">{{ row.voucherNo }}
              </span>
            </template>
          </avue-crud>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import {
  getList,
  getAllList,
  getTreelist,
  initialization
} from "@/api/iosBasicData/accountsDetails";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { dateFormat } from "@/util/date";
import { getToken } from "@/util/auth";
export default {
  components: { SearchQuery },
  data() {
    return {
      treeForm: {},
      treeData: [],
      treeOption: {
        menu: false,
        addBtn: false,
        props: {
          label: 'accName',
          value: 'id'
        }
      },
      query: {
        startYear: null,
        endYear: null,
        monthDate: [dateFormat(new Date(), 'yyyy-MM'), dateFormat(new Date(), 'yyyy-MM')],
        checkbox: [],
        accIds: null,
        accList: [],
        levelStart: null,
        levelEnd: null,
        type: null,
        corpList: [],
        corpIds: null,
        auxiliaryAccounting: 0,
        foreignCurrency: 0,
        lastLevelItem: 0,
        blcNotZero: 0,
        noAmountIncurred: 0,
        doNotDisplayYear: 0,
        oppositeAcc: 0,
        total: 0
      },
      outExportQuery: {},
      searchShow: true,
      optionForm: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '期间',
            prop: 'monthDate',
            type: 'monthrange',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM',
            span: 6,
          },
          {
            label: '',
            prop: 'button',
            span: 18,
          }
        ]
      },
      optionForm2: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '科目',
            prop: 'accList',
            type: 'select',
            filterable: true,
            multiple: true,
            tags: true,
            dicUrl: "/api/blade-los/accounts/selectList?isDetail=1",
            props: {
              label: 'cnName',
              desc: 'code',
              value: 'id',
              res: 'data'
            },
            span: 6,
          },
          {
            label: '科目级次',
            prop: 'levelStart',
            span: 6,
          },
          {
            label: '分录摘要',
            prop: 'descr',
            span: 6,
            row: true,
          },
          {
            label: '显示辅助核算',
            prop: 'auxiliaryAccounting',
            type: 'switch',
            dicData: [{
              label: '',
              value: 0
            }, {
              label: '',
              value: 1
            }],
            span: 6,
          },
          {
            label: '辅助核算',
            prop: 'type',
            display: false,
            span: 12,
          },
          {
            label: '多选',
            prop: 'checkbox',
            type: 'checkbox',
            span: 24,
            dicData: [
              {
                label: '只显示最明细级',
                value: 'lastLevelItem'
              }, {
                label: '是否显示外币',
                value: 'foreignCurrency'
              }, {
                label: '显示对方科目辅助核算',
                value: 'oppositeAcc'
              }, {
                label: '余额为0不显示',
                value: 'blcNotZero'
              }, {
                label: '无发生额且余额为0不显示',
                value: 'noAmountIncurred'
              }, {
                label: '发生额为0不显示本期合计、本年累计',
                value: 'doNotDisplayYear'
              }, {
                label: '显示合计',
                value: 'total'
              }
            ],
          },
        ]
      },
      dic: [{
        label: '1',
        value: 1
      }, {
        label: '2',
        value: 2
      }, {
        label: '3',
        value: 3
      }],
      typeDic: [{
        label: '客户',
        value: 1
      }, {
        label: '部门',
        value: 2
      }, {
        label: '职工',
        value: 3
      }],
      corpProps: {
        label: 'name',
        value: 'id'
      },
      corpDic: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        border: true,
        index: true,
        menu: false,
        addBtn: false,
        header: false,
        summaryText: "合计",
        showSummary: false,
        sumColumnList: [{
          name: "amountDr",
          type: "sum",
          decimals: 2
        }, {
          name: "amountCr",
          type: "sum",
          decimals: 2
        }, {
          name: "amountDrUsd",
          type: "sum",
          decimals: 2
        }, {
          name: "amountCrUsd",
          type: "sum",
          decimals: 2
        }, {
          name: "amountUsdBlc",
          type: "sum",
          decimals: 2
        }],
        column: [
          {
            label: "凭证号",
            prop: "voucherNo",
            overHidden: true,
          },
          {
            label: "凭证日期",
            prop: "voucherDate",
            overHidden: true,
          },
          {
            label: "摘要",
            prop: "descr",
            overHidden: true,
          },
          {
            label: "币种",
            prop: "curCode",
            hide: true,
            type: 'select',
            dicData: [
              {
                label: 'CNY',
                value: 'CNY'
              }, {
                label: 'USD',
                value: 'USD'
              },
            ],
            overHidden: true,
          },
          {
            label: "借方金额",
            prop: "amountDr",
            width: '100',
            overHidden: true,
          },
          {
            label: "贷方金额",
            prop: "amountCr",
            width: '100',
            overHidden: true,
          },
          {
            label: "本期余额",
            prop: "amountBlc",
            overHidden: true,
          },
          {
            label: "本期外币借方金额",
            prop: "amountDrUsd",
            overHidden: true,
            hide: false,
            width: 120,
          },
          {
            label: "本期外币贷方金额",
            prop: "amountCrUsd",
            overHidden: true,
            hide: false,
            width: 120,
          },
          {
            label: "本期外币期初余额",
            prop: "amountUsdBlc",
            overHidden: true,
            hide: false,
            width: 120,
          },

          {
            label: "方向",
            prop: "dc",
            type: 'select',
            dicData: [
              {
                label: '借方',
                value: 'D'
              }, {
                label: '贷方',
                value: 'C'
              },
            ],
            overHidden: true,
          },

        ]
      },
      dataList: []
    };
  },
  watch: {
    "query.monthDate": {
      handler(newVla, oldVal) {
        if (newVla && newVla.length > 0) {
          this.query.startYear = newVla[0]
          this.query.endYear = newVla[1]
        } else {
          this.query.startYear = null
          this.query.endYear = null
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    "query.checkbox": {
      handler(newVla, oldVal) {
        this.resetData()
        if (newVla.filter(e => e == 'foreignCurrency') && newVla.filter(e => e == 'foreignCurrency').length) {
          this.findObject(this.option.column, "amountDrUsd").hide = false;
          this.findObject(this.option.column, "amountCrUsd").hide = false;
          this.findObject(this.option.column, "amountUsdBlc").hide = false;
        } else {
          this.findObject(this.option.column, "amountDrUsd").hide = true;
          this.findObject(this.option.column, "amountCrUsd").hide = true;
          this.findObject(this.option.column, "amountUsdBlc").hide = true;
        }
        if (newVla.filter(e => e == 'total') && newVla.filter(e => e == 'total').length) {
          this.option.showSummary = true
        } else {
          this.option.showSummary = false
        }
        this.$refs.crud.refreshTable();
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    "query.accList": {
      handler(newVla, oldVal) {
        this.resetData()
        if (newVla && newVla.length) {
          this.query.accIds = newVla.join(',')
        } else {
          this.query.accIds = null
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    "query.auxiliaryAccounting": {
      handler(newVla, oldVal) {
        if (newVla == 1) {
          this.findObject(this.optionForm2.column, "type").display = true;
        } else {
          this.findObject(this.optionForm2.column, "type").display = false;
          this.query.type = null
          this.query.corpList = []
          this.corpDic = []
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    "query.type": {
      handler(newVla, oldVal) {
        if (newVla) {
          this.query.corpList = []
          this.corpDic = []
          getAllList({ type: newVla }).then(res => {
            this.corpDic = res.data.data
          })
        } else {
          this.query.corpList = []
          this.corpDic = []
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    "query.corpList": {
      handler(newVla, oldVal) {
        if (newVla && newVla.length) {
          this.query.corpIds = newVla.join(',')
        } else {
          this.query.corpIds = null
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    // "searchShow": {
    //   handler(newVla, oldVal) {
    //     if (newVla) {
    //       this.option.height = this.option.height - 149;
    //     } else {
    //       this.option.height = this.option.height + 149;
    //     }
    //     this.$refs.crud.getTableHeight();
    //   },
    //   deep: false, // 深度监听
    //   immediate: false  // 第一次改变就执行
    // },
  },
  created() {
    this.option.height = window.innerHeight - 360;
  },
  activated() {
    if (this.$route.query.accId) {
      setTimeout(() => {
        if (!this.$store.getters.subLedgerStatus) {
          this.$store.commit("IN_SUBLED_DETAIL");
          this.query.accList = this.$route.query.accId ? this.$route.query.accId.split(',') : []
          this.serach()
        }
      }, 200);
    }
  },
  methods: {
    toJump(row) {
      if (this.$store.getters.voucherStatus) {
        this.$alert("财务凭证页面已存在,请关闭财务凭证再进行操作", "温馨提示", {
          confirmButtonText: "确定",
          type: 'warning',
          callback: action => {
          }
        });
      } else {
        this.$router.push({
          path: `/iosBasicData/finvouchers/index`,
          query: {
            id: row.voucherId
          },
        });
      }
    },
    showHight() {
      // this.$refs.crud.getTableHeight();
    },
    nodeClick(data) {
      this.getList(data)
    },
    //初始入账
    inItial() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      });
      this.$confirm('是否继续初始入账?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        initialization().then(res => {
          this.$message({
            type: 'success',
            message: '初始入账成功!'
          });
          this.getTreelist()
        })
      }).finally(() => {
        loading.close();
      });

    },
    //重置特殊值
    resetData() {
      this.query.foreignCurrency = this.query.checkbox.find(e => e == 'foreignCurrency') ? 1 : 0
      this.query.lastLevelItem = this.query.checkbox.find(e => e == 'lastLevelItem') ? 1 : 0
      this.query.blcNotZero = this.query.checkbox.find(e => e == 'blcNotZero') ? 1 : 0
      this.query.noAmountIncurred = this.query.checkbox.find(e => e == 'noAmountIncurred') ? 1 : 0
      this.query.doNotDisplayYear = this.query.checkbox.find(e => e == 'doNotDisplayYearc') ? 1 : 0
      this.query.oppositeAcc = this.query.checkbox.find(e => e == 'oppositeAcc') ? 1 : 0
      this.query.total = this.query.checkbox.find(e => e == 'total') ? 1 : 0
    },
    //导出
    outExport() {
      this.$confirm('是否导出当前所有数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const routeData = this.$router.resolve({
          path: '/api/blade-los/accounts/accountsDetailsListExport',      //跳转目标窗口的地址
          query: {
            'Blade-Auth': getToken(),
            ...this.outExportQuery   //括号内是要传递给新窗口的参数
          }
        })
        window.open(routeData.href.slice(1, routeData.href.length));
      })
    },
    serach() {
      if (!this.query.startYear && !this.query.endYear) {
        return this.$message.error("请选择期间!");
      }
      this.searchShow = false
      this.getTreelist()
    },
    reset() {
      this.query = this.$options.data().query
      this.dataList = []
    },
    getTreelist() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      });
      getTreelist(this.query).then(res => {
        this.treeData = res.data.data
        if (res.data.data && res.data.data.length > 0) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(res.data.data[0].id)
            this.getList(res.data.data[0])
          })
        }

      }).finally(() => {
        loading.close();
      });
    },
    getList(data) {
      let obj = {}
      obj = {
        ...this.query,
        accIds: data.id,
        accType: data.type,
        corpId: data.corpId,
        deptId: data.deptId,
        emplId: data.emplId
      }
      this.outExportQuery = obj
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.7)'
      });
      // console.log("当前回显选中:" + this.$refs.tree.getCurrentKey())
      getList(obj).then(res => {
        this.dataList = res.data.data
      }).finally(() => {
        this.$refs.crud.refreshTable();
        loading.close();
      });
    },
    //自定义列保存
    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;
}

.treeStyle {
  height: 56vh;
  margin-bottom: 60px;
  /* overflow-y: scroll; */
}

.bigTreeStyle {
  height: 72vh;
  margin-bottom: 60px;
}
</style>