yxk-electronic-archives/src/views/system/fieldCorresManage/index.vue

<template>
  <div class="app-container row-container">
    <!--工具栏-->
    <div class="head-container">
      <div class="head-search">
        <!-- 搜索 -->
        <el-input v-model="query.blurry" clearable size="small" placeholder="输入规则名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <!-- @input="changePid" -->
        <treeselect
          v-model="query.source"
          :options="sourceOptions"
          :load-options="loadSource"
          style="width: 320px;"
          placeholder="请选择源分类（文件库分类）"
        />
        <treeselect
          v-model="query.target"
          :options="targetOptions"
          :load-options="loadSource"
          style="width: 320px;"
          placeholder="请选择目标门类（整理库/管理库门类）"
        />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <template v-slot:middle>
          <el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1" @click="toEdit(crud.selections[0])">
            <i class="iconfont icon-bianji" />
            编辑
          </el-button>
        </template>
      </crudOperation>
    </div>
    <!--表单渲染-->
    <el-dialog class="dialog-middle" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" title="新增对应">
      <div class="setting-dialog">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="源分类" prop="source">
            <treeselect
              v-model="form.source"
              :options="sourceOptions"
              :load-options="loadSource"
              style="width: 400px;"
              placeholder="请选择源分类（文件库分类）"
            />
          </el-form-item>
          <el-form-item label="目标门类" prop="target">
            <treeselect
              v-model="form.target"
              :options="targetOptions"
              :load-options="loadSource"
              style="width: 400px;"
              placeholder="请选择目标门类（整理库/管理库门类）"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="toCorresForm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <eForm ref="corresForm" />
    <!--表格渲染-->
    <div class="container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        row-key="id"
        @select="crud.selectChange"
        @select-all="crud.selectAllChange"
        @selection-change="crud.selectionChangeHandler"
        @cell-dblclick="tableDoubleClick"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :show-overflow-tooltip="true" prop="name" label="规则名称" />
        <el-table-column :show-overflow-tooltip="true" prop="sourceClassify" label="源分类（文件库-文件表）" />
        <el-table-column :show-overflow-tooltip="true" prop="target" label=" 目标门类（整理库/管理库-文件表）" />
        <el-table-column :show-overflow-tooltip="true" prop="number" label="已对应字段数量" />
        <el-table-column prop="createTime" label="创建日期" width="200px">
          <template slot-scope="scope">
            <div>{{ scope.row.createTime | parseTime }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import crudMenu from '@/api/system/menu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import eForm from './module/form.vue'

// crud交由presenter持有
const defaultForm = { id: null, target: null, source: null }
export default {
  name: 'FieldCorresManage',
  components: { crudOperation, rrOperation, Treeselect, eForm },
  cruds() {
    return CRUD({
      title: '对应关系',
      url: 'api/menus',
      crudMethod: { },
      optShow: {
        add: true,
        edit: false,
        del: true,
        reset: false,
        download: true,
        group: false
      }
    })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      sourceOptions: [],
      targetOptions: [],
      permission: {
      },
      rules: {
        source: [
          { required: true, message: '请选择源分类（文件库分类）', trigger: 'input' }
        ],
        target: [
          { required: true, message: '请选择目标门类（整理库/管理库门类）', trigger: 'input' }
        ]
      }
    }
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    toCorresForm() {
      this.$refs.corresForm.corresVisible = true
    },
    // table - 双击查看详情
    tableDoubleClick(row) {
      this.$refs.corresForm.title = '对应关系'
      this.$refs.corresForm.corresVisible = true
    },
    toEdit() {
      this.$refs.corresForm.title = '编辑对应关系'
      this.$refs.corresForm.corresVisible = true
    },
    loadSource({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudMenu.getMenusTree(parentNode.id).then(res => {
          parentNode.children = res.map(function(obj) {
            if (!obj.leaf) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 100)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>