yxk-electronic-archives/src/views/prearchiveLibrary/module/scope.vue

<template>
  <!-- 归档范围 -->
  <el-dialog class="move-form" append-to-body :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible="scopeVisible" title="归档范围">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <div class="move-main">
        <div class="move-left">
          <!--门类树状结构-->
          <div class="tree-scroll">
            <el-tree
              ref="tree2"
              v-loading="crud.loading"
              :data="crud.data"
              node-key="id"
              default-expand-all
              :props="defaultProps"
              :expand-on-click-node="false"
              @node-click="handleNodeClick2"
            />
          </div>
        </div>
        <div class="move-right">
          <h4>归档范围</h4>
          <div class="raido-main" style="height: 395px;">
            <el-table
              ref="table"
              v-loading="loading"
              lazy
              :show-header="false"
              :data="tableData"
              :row-key="getRowKey"
              :load="getSonClass"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              :highlight-current-row="false"
              height="395px"
              @select="handleSelect"
              @selection-change="selectionChangeHandler"
              @row-click="clickRowHandler"
            >
              <el-table-column type="selection" align="center" width="55" />
              <el-table-column :show-overflow-tooltip="true" prop="scopeName" label="名称">
                <template slot-scope="scope">
                  【{{ scope.row.scopeCode }}】{{ scope.row.scopeName }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="select-content">
            <span>当前选中：</span>
            <el-tooltip v-if="selections.length !== 0" class="item" effect="dark" :content="'【'+ selections[0].scopeCode +'】'+ selections[0].scopeName" :enterable="false" placement="top">
              <p>【{{ selections[0].scopeCode }}】{{ selections[0].scopeName }}</p>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancelScope">取消</el-button>
        <el-button type="primary" @click="confirmedScope">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { preLibraryCrud } from '../mixins/index'
import { FetchInitArchivesScope, FetchSonArchivesScope } from '@/api/system/archivesScope'
import CRUD, { presenter, header, crud } from '@crud/crud'
import Vue from 'vue'
export default {
  name: 'ScopeModule',
  components: { },
  cruds() {
    return [
      CRUD({
        title: '归档范围', url: 'api/category/menu',
        crudMethod: {}, sort: []
      })
    ]
  },
  mixins: [presenter(), header(), crud(), preLibraryCrud],
  data() {
    return {
      scopeVisible: false,
      selectedCategory: null,
      loading: false,
      tableData: [],
      selections: [],
      defaultProps: { children: 'children', label: 'cnName' }
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    getRowKey(row) {
      return row.id
    },
    [CRUD.HOOK.afterRefresh]() {
      this.crud.data = this.filterData(this.crud.data)
      this.$nextTick(() => {
        if (this.$refs.tree2) {
          let currentKey
          if (this.crud.data[0].isType === 1) {
            currentKey = this.findNode(this.crud.data[0].children, (node) => {
              return node.isType !== 1
            })
          } else {
            currentKey = this.crud.data[0]
          }
          // 设置某个节点的当前选中状态
          this.$refs.tree2.setCurrentKey(currentKey.id)
          this.$nextTick(() => {
            // 设置某个节点的父级展开
            const selectedKey = this.$refs.tree2.getCurrentNode()
            if (this.$refs.tree2.getNode(selectedKey) && this.$refs.tree2.getNode(selectedKey).parent) {
              this.expandParents(this.$refs.tree2.getNode(selectedKey).parent)
            }
            // 选中节点的门类详情
            this.handleNodeClick2(selectedKey)
          })
        }
      })
    },
    // 选中门类后，设置门类详情数据
    handleNodeClick2(val) {
      console.log('handleNodeClick2', val)
      console.log('handleNodeClick233', val.isType)
      if (val) {
        this.selectedCategory = val
        if (val.pid !== '0') {
          Vue.set(this.selectedCategory, 'parentName', this.$refs.tree2.getNode(val.pid).data.cnName)
        }
        this.loading = true
        this.getInitArchivesScope(this.selectedCategory)
      }
    },
    getInitArchivesScope(data) {
      this.tableData = []
      let params
      if (data.isType !== 3) {
        params = {
          'categoryId': data.id
        }
      } else {
        params = {
          'categoryId': data.pid
        }
      }
      FetchInitArchivesScope(params).then(res => {
        this.tableData = res.content.map(function(item, index) {
          if (item.sonNum !== 0) {
            item.hasChildren = true
            item.children = null
          } else {
            item.hasChildren = false
          }
          return item
        })
        this.loading = false
      })
    },
    getSonClass(tree, treeNode, resolve) {
      setTimeout(() => {
        FetchSonArchivesScope({ pid: tree.id }).then(res => {
          const data = res.map(function(obj) {
            if (obj.sonNum !== 0 && obj.sonNum) {
              obj.hasChildren = true
              obj.children = null
            } else {
              obj.hasChildren = false
            }
            return obj
          })
          resolve(data)
        })
      }, 100)
    },
    handleSelect(selection) {
      this.$refs.table.clearSelection() // 清除当前选择
      if (selection.length > 0) {
      // 设置选中项
        this.$refs.table.toggleRowSelection(selection[0])
      }
    },
    // table - 当前选中得row
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      if (val.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(val.pop())
      } else {
        this.selections = val
      }
    },
    cancelScope() {
      this.scopeVisible = false
      this.$refs.table.clearSelection() // 清除当前选择
      this.selections = []
    },
    confirmedScope() {
      this.scopeVisible = false
      console.log('confirmedScope', this.selectedCategory)
      this.$emit('getScope', this.selections, this.selectedCategory)
    },
    handleClose(done) {
      this.scopeVisible = false
      this.$refs.table.clearSelection() // 清除当前选择
      this.selections = []
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/prearchive-library.scss";
</style>