index.vue 6.23 KB
/**
* @Description: 会计期段树
* @author wx
* @date 2022/12/23
*/
<template>
  <div class="dxStAccountingConfigTree-com">
    <el-tree
      :data="treeData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :highlight-current="true"
      @node-click="nodeClick"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <div>
          <span>{{ data.label }} </span>
        </div>
        <span v-if="data.isDefault" class="tree-btn-box">
          <span class="btn-item" title="设置" @click="() => setConfig(data, node)">
            <img src="/icons/c-setting.png" alt="">
          </span>
        </span>
      </span>
    </el-tree>
    <dee-dialog
      :dialog-visible="dialogVisible"
      title="设置会计期段"
      width="580px"
      @handleClose="handleClose"
    >
      <dee-form
        ref="AddForm"
        :form="form"
        :form-data="AddData"
        form-btn-position="center"
        :inline="true"
        :rules="rules1"
      />
      <dee-up-table
        table-height="auto"
        :columns="tableColums"
        :data="tableData"
      >
        <span v-if="curNodeData && curNodeData.label" slot="header">{{ curNodeData.label }}{{ getFirstDayOfMonth(curNodeData.label,1) }}~{{ getLastDayOfMonth(curNodeData.label,12) }}</span>
      </dee-up-table>
      <span style="display:flex;justify-content: center;margin-top: 20px;">
        <el-button
          type="primary"
          class="searchBtn"
          @click="handleSubmit"
        >确定</el-button>

        <el-button
          class="searchBtn"
          @click="handleClose"
        >取消</el-button>
      </span>
    </dee-dialog>
  </div>
</template>

<script>
import { getDxStAccountingConfigTree } from '@/api/storage'
import countSection from './countSection'
export default {
  componentName: '会计期段树',
  name: 'DxStAccountingConfigTree',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  mixins: [countSection],
  props: {
    basicData: {
      type: Object,
      default: null
    }
  },
  data() {
    // 这里存放数据
    return {
      evenList: [
        {
          even: 'nodeClick',
          name: '节点被点击时的回调'
        }
      ],
      dialogVisible: false,
      curNodeData: null,
      treeData: [{
        id: -1,
        label: '年度',
        children: []
      }],
      form: {
        sectionType: ''
      },
      rules1: {
        sectionType: [
          { required: true, message: '请输入', trigger: 'change' }
        ] },
      AddData: [
        {
          split: 2,
          data: [{
            key: 'sectionType',
            title: '期段',
            component: {
              name: 'el-select',
              options: [{
                label: '月度',
                value: 12
              }, {
                label: '季度',
                value: 4
              }, {
                label: '半年度',
                value: 2
              }, {
                label: '年度',
                value: 1
              }]
            }
          }]
        }],
      tableData: [],
      tableColums: [
        {
          title: '期段', key: 'section', align: 'center'
        },
        {
          title: '开始时间', key: 'startDay', align: 'center'
        },
        {
          title: '结束时间', key: 'endDay', align: 'center'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {

  },
  // 监控data中的数据变化
  watch: {
    'form.sectionType': {
      handler: function(val) {
        this.getTableData(val)
      }
    }
  },
  // 生命周期 - 创建完成(可以访问当前this实例)
  created() {
  },
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.getDxStAccountingConfigTree()
  },
  activated() {
  },
  // 方法集合
  methods: {
    getDxStAccountingConfigTree() {
      const params = {
        'maxPageSize': 10000,
        'indices': [],
        'globalSearch': false,
        'aggregationSearchParam': {
          'groupBys': [
            {
              'fieldName': 'years',
              'typeName': '.TermsAggregationGroupBy',
              'ascOrder': true
            }
          ],
          'metrics': [
            {
              'name': 'idCount',
              'fieldName': 'id',
              'metricsType': 'CARDINALITY'
            }
          ]
        },
        'openProps': [],
        'searchItems': {
          'items': [],
          'operator': 'AND'
        },
        'sortItem': []
      }
      const curYear = new Date().getFullYear()
      getDxStAccountingConfigTree(params).then(res => {
        this.treeData[0].children = res.items.data.map((r, index) => {
          return {
            id: index + 1,
            label: r.years
          }
        })
        const findCurYear = this.treeData[0].children.find(r => r.label === curYear)
        if (!findCurYear) {
          this.treeData[0].children.push({
            id: this.treeData[0].children.length + 1,
            label: curYear,
            isDefault: true
          })
        }
      })
    },
    nodeClick(val) {
      val.id !== -1 && this.$emit('nodeClick', val)
    },
    setConfig(data, node) {
      this.curNodeData = data
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleSubmit() {
      const params = JSON.parse(JSON.stringify(this.tableData)).map(r => {
        r.startDay = r.startDay + ' 00:00:00'
        r.endDay = r.endDay + ' 23:59:59'
        return r
      })
      this.$api.recursion('DxStAccountingConfig', params, true).then(res => {
        this.$utils.showMessageSuccess('设置成功')
        this.getDxStAccountingConfigTree()
        this.handleClose()
      })
    }
  }
}
</script>
<style lang='scss'>
.dxStAccountingConfigTree-com{
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }

    .tree-btn-box {
      width: 66px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      .btn-item img {
        padding: 4px;
        width: 14px;
        height: 14px;
      }
    }
  }
</style>