Smart_platform_ui/src/views/base/credentials.vue

<template>
  <div>
    <basic-container style="width: 25%;float: left">
      <avue-tree :option="getList" :data="accountList" @node-click="nodeClickTwo"/>
    </basic-container>
    <basic-container style="width: 15%;float: left">
      <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
    </basic-container>
    <basic-container style="width: 60%;float: right">
      <avue-crud
          :data="data"
          :option="option"
          :page.sync="page"
          @on-load="onLoad"
          @row-del="rowDel"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @search-change="searchChange"
          @search-reset="searchReset"
          @refresh-change="refreshChange"
      ></avue-crud>
    </basic-container>
  </div>
</template>
<script>
import {
  customerList,
  getAccountList,
  getDeptLazyTree,
  jdmoduleDelete,
  jdmoduleSave,
  jdmoduleUpdate
} from '@/api/base/credentials'

export default {
  name: "credentials",
  data() {
    return {
      page: {
        size: 10,
        current: 1
      },
      treeData: [],
      accountList: [],
      treeOption: {
        nodeKey: 'id',
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 0 : node.data.id;
          getDeptLazyTree(parentId).then(res => {
            resolve(res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          labelText: '标题',
          label: 'dictValue',
          value: 'dictValue',
          children: 'children'
        }
      },
      getList: {
        nodeKey: 'id',
        lazy: true,
        treeLoad: function (node, resolve) {
          const parentId = (node.level === 0) ? 0 : node.data.id;
          getAccountList(parentId).then(res => {
            resolve(res.data.data.map(item => {
              return {
                ...item,
                leaf: !item.hasChildren
              }
            }))
          });
        },
        addBtn: false,
        menu: false,
        size: 'small',
        props: {
          labelText: '标题',
          label: 'accountName',
          value: 'accountId',
          children: 'children'
        }
      },
      data: [],
      treeDeptName: '',
      accountId: '',
      option: {
        searchMenuPosition: "right",
        searchMenuSpan: 18,
        height:500,
        index: true,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '模块名称',
            prop: 'module',
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=voucher_type",
            props: {
              label: "dictValue",
              value: "dictValue"
            }
          },
          {
            label: '业务币种',
            display: false,
            children: [{
              label: '币种代码',
              prop: 'currencyCode',
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
              props: {
                label: "dictValue",
                value: "dictValue"
              },
              rules: [{
                required: true,
                message: " ",
                trigger: "change"
              }],
              search: true
            }, {
              label: '币种名称',
              prop: 'currency',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }]
          }, {
            label: '凭证类型',
            display: false,
            children: [{
              label: '凭证类型',
              prop: 'voucherType',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }, {
              label: '凭证名称',
              prop: 'voucher',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }]
          }, {
            label: '分录',
            display: false,
            children: [{
              label: '分录类型',
              prop: 'projectType',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }, {
              label: '科目代码',
              prop: 'projectCode',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }, {
              label: '科目名称',
              prop: 'projectName',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }]
          }, {
            label: '金额方向',
            prop: 'accountName',
            rules: [{
              required: true,
              message: " ",
              trigger: "blur"
            }]
          }, {
            label: '摘要',
            display: false,
            children: [{
              label: '静态值',
              prop: 'abstractStatic',
              rules: [{
                required: true,
                message: " ",
                trigger: "blur"
              }]
            }, {
              label: '附加公式',
              prop: 'abstractFormula'
            }]
          }
        ]
      }
    }
  },
  methods: {
    //列表查询
    onLoad(page, params) {
      if (!this.accountId) return this.$message.warning('请选择套账')
      customerList({...params, size: page.size, current: page.current}, this.treeDeptName, this.accountId).then(res => {
        this.data = res.data.data.records
        this.page.total = res.data.data.total
      })
    },
    // 模块名称选中后触发列表查询
    nodeClick(data) {
      this.treeDeptName = data.dictValue;
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    // 套账选中后触发列表查询
    nodeClickTwo(data) {
      this.accountId = data.accountId
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    //刷新按钮触发
    refreshChange() {
      this.onLoad(this.page);
    },
    //表单搜索按钮触发
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done()
    },
    //清空
    searchReset() {
      this.page.currentPage = 1;
      this.treeDeptName = this.accountId = ''
      this.onLoad(this.page);
    },
    //新增
    rowSave(row, done, loading) {
      jdmoduleSave(row).then(() => {
        this.$message.success('新增成功');
        loading()
        done()
      })
    },
    //编辑
    rowUpdate(row, index, done, loading) {
      jdmoduleUpdate(row).then(() => {
        this.$message.success('修改成功');
        this.onLoad(this.page);
        loading()
        done()
      })
    },
    //删除
    rowDel(row, index, done) {
      jdmoduleDelete(row.id).then(() => {
        this.$message.success('删除成功');
        done()
      })
    }
  }
}
</script>

<style scoped>

</style>