irc_web/.svn/pristine/8d/8dc0ddd43f481f9388ff14f2b2c4159488dadae0.svn-base

<template>
  <div class="dictionary ">
    <div class="left">
      <el-tree
        ref="dictionaryTree"
        :data="treeList"
        node-key="Id"
        :props="defaultProps"
        :highlight-current="true"
        :current-node-key="currentNodekey"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      />
    </div>
    <div ref="rightContainer" class="right">
      <box-content>
        <div class="search">
          <el-button
            type="primary"
            size="mini"
            style="margin-left:auto;"
            :disabled="newBtnDisabled"
            @click="handleNew"
          >New</el-button>
        </div>
        <base-table
          v-loading="loading"
          :columns="columns"
          :list="list"
          :search-data="searchData"
          :total="total"
          @getList="getList"
          @edit="handleEdit"
          @delete="handleDelete"
          @sortByColumn="sortByColumn"
        />
      </box-content>
    </div>
    <dictionary-form v-if="dictionary_model.visible" :data="rowData" :type="type" :current-key-name="currentKeyName" @closeDialog="closeModel" />
  </div>
</template>
<script>

import { getDicTree, getDictionarySelectList, deleteDictionary } from '@/api/dictionary'
import DictionaryForm from './components/DictionaryForm'
import { dictionary_col1, dictionary_col2, dictionary_model } from './dictionary'
import BoxContent from '@/components/BoxContent'
import BaseTable from '@/components/BaseTable'
export default {
  name: 'Dictionary',
  components: { BoxContent, BaseTable, DictionaryForm },
  data() {
    return {
      treeList: [],
      defaultProps: {
        children: 'Children',
        label: 'KeyName'
      },
      currentNodekey: '', // 默认选中的节点树
      expandedkeys: [], // 默认展开的节点树
      dictionary_col1,
      dictionary_col2,
      dictionary_model,
      columns: [],
      list: [],
      total: 0,
      searchData: { KeyName: '', PageIndex: 1, PageSize: 20, Asc: true, SortField: '' },
      loading: false,
      rowData: {},
      currentKeyName: '',
      type: '',
      newBtnDisabled: true
    }
  },
  mounted() {
    this.initTree()
  },
  methods: {
    // 获取数据字典类型信息
    initTree() {
      getDicTree().then(res => {
        this.treeList = res.Result
        this.currentNodekey = res.Result[0].Children[0].Id
        this.expandedkeys.push(res.Result[0].Children[0].Id)
      })
    },
    // 获取某字典类型下的配置信息
    getList() {
      this.loading = true
      getDictionarySelectList(this.searchData).then(res => {
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      })
    },
    // 树节点点击事件回调
    handleNodeClick(data) {
      this.searchData.KeyName = data.KeyName
      this.type = data.Type
      this.currentKeyName = data.KeyName
      if (data.Children.length > 0) {
        this.newBtnDisabled = true
      } else {
        this.newBtnDisabled = false
      }
      if (data.Type === 'Employment' || data.Type === 'Specialty') {
        this.columns = this.dictionary_col1
      } else {
        this.columns = this.dictionary_col2
      }
      this.getList()
    },
    // 新增字典表配置信息
    handleNew() {
      this.rowData = {}
      this.dictionary_model.title = 'Add'
      this.dictionary_model.visible = true
    },
    // 编辑字典表配置信息
    handleEdit(row) {
      this.rowData = row
      this.dictionary_model.title = 'Edit'
      this.dictionary_model.visible = true
    },
    // 删除字典表配置信息
    handleDelete(row) {
      this.$confirm('Sure to delete?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      })
        .then(() => {
          deleteDictionary(row.Id)
            .then(res => {
              if (res.IsSuccess) {
                this.list.splice(this.list.findIndex(item => item.Id === row.Id), 1)
                this.$message.success('Deleted successfully!')
                this.$store.dispatch('global/setDictionary', {})
              }
            })
        })
    },
    // 关闭模态窗口
    closeModel() {
      this.dictionary_model.visible = false
      this.getList()
    },
    // 排序
    sortByColumn(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      }
      this.searchData.SortField = column.prop
      this.searchData.PageIndex = 1
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.dictionary{
  display: flex;
  .left{
    width: 0;
    flex-grow: 3;
    border-right: 1px solid #ddd;
    padding: 5px;
    overflow-y: auto;
  }
  .right{
    width: 0;
    flex-grow: 7;
    padding: 5px 10px;
    .add-btn{
      display:flex;
      align-items: center;
    }
  }
}
</style>