字段对应管理

2 years ago · 9d37e36ec4
5 changed files with 412 additions and 3 deletions
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@ -121,6 +121,23 @@
  .icon-zhuangtai{
    font-size: 14px;
  }
+  // tree-select
+  .vue-treeselect{
+    margin-right: 10px;
+    .vue-treeselect__control{
+      font-size: 12px !important;
+      height: 30px !important;
+      background-color: transparent !important;
+      border-radius: 4px;
+      @include input_style;
+      .vue-treeselect__placeholder{
+        line-height: 28px !important;
+      }
+      .vue-treeselect__input{
+        font-size: 13px !important;
+      }
+    }
+  }
 }

 .el-tabs{
--- a/src/views/system/fieldCorresManage/index.vue
+++ b/src/views/system/fieldCorresManage/index.vue
@ -1,9 +1,150 @@
 <template>
-  <div>字段对应管理</div>
+  <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" />
+    </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"
+      >
+        <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: { }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      sourceOptions: [],
+      targetOptions: [],
+      permission: {
+        add: ['admin', 'field:add'],
+        edit: ['admin', 'field:edit'],
+        del: ['admin', 'field:del']
+      },
+      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
+    },
+    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 lang="scss" scoped>
 </style>
--- a/src/views/system/fieldCorresManage/module/data.json
+++ b/src/views/system/fieldCorresManage/module/data.json
@ -0,0 +1,22 @@
+[
+  {
+    "id": 1,
+    "label": "字段A",
+    "isType": 1
+  },
+  {
+    "id": 2,
+    "label": "字段B",
+    "isType": 1
+  },
+  {
+    "id": 3,
+    "label": "字段C",
+    "isType": 1
+  },
+  {
+    "id": 4,
+    "label": "字段D",
+    "isType": 1
+  }
+]
--- a/src/views/system/fieldCorresManage/module/form.vue
+++ b/src/views/system/fieldCorresManage/module/form.vue
@ -0,0 +1,229 @@
+<template>
+  <el-dialog
+    append-to-body
+    :close-on-click-modal="false"
+    :before-close="crud.cancelCU"
+    :visible="corresVisible"
+    :title="crud.status.title"
+  >
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <el-form ref="form" :model="form" :rules="rules" inline size="small" label-width="90px">
+        <el-form-item label="规则名称" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+      </el-form>
+      <div class="corres-field-main">
+        <div class="corres-field-left">
+          <div class="corres-field-title">
+            <p>源分类（文件库-文件表）</p>
+            <span>文件库分类A</span>
+          </div>
+          <div class="field-list">
+            <div v-for="(i,index) in targetData.length" :key="index" class="field-item">
+              <el-select v-if="!isModify[index]" v-model="sourceValue[index]" placeholder="请选择字段" @change="(val)=>selectFiled(val,index)">
+                <el-option
+                  v-for="v in options"
+                  :key="v.value"
+                  :label="v.label"
+                  :value="v.value"
+                />
+              </el-select>
+              <p v-if="isModify[isNum]" @click="modifyFiled(index)">{{ sourceValue[index] }}</p>
+              <div class="field-state"><span class="is-select">显示</span></div>
+            </div>
+          </div>
+        </div>
+        <div class="corres-field-right">
+          <div class="corres-field-title">
+            <p>目标门类（整理库/管理库-文件表）</p>
+            <span>文书档案（文件）</span>
+          </div>
+          <div class="field-list">
+            <div v-for="(item,index) in targetData" :key="index" class="field-item">
+              <p>{{ item.label }}</p>
+              <div class="field-state"><span class="is-select">{{ item.isType === 1 ? '显示': '隐藏' }}</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <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="crud.submitCU"
+        >
+          确定
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+import fieldData from './data.json'
+const defaultForm = {
+  id: null,
+  name: '',
+  jobSort: 999,
+  description: null
+}
+export default {
+  mixins: [form(defaultForm)],
+  props: {
+  },
+  data() {
+    return {
+
+      corresVisible: false,
+      options: [{
+        value: '字段A',
+        label: '字段A'
+      }, {
+        value: '字段B',
+        label: '字段B'
+      }, {
+        value: '字段C',
+        label: '字段C'
+      }, {
+        value: '字段D',
+        label: '字段D'
+      }, {
+        value: '字段E',
+        label: '字段E'
+      }],
+      sourceValue: [],
+      targetData: [],
+      isModify: [],
+      isNum: null,
+      rules: {
+        name: [
+          { required: true, message: '规则名称不可为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.targetData = fieldData
+    this.targetData.forEach((item, index) => {
+      this.isModify[index] = false
+    })
+    console.log(this.isModify)
+  },
+  mounted() {
+    console.log(this.sourceValue)
+  },
+  methods: {
+    selectFiled(val, index) {
+      console.log(val, index)
+      this.sourceValue[index] = val
+      this.isModify[index] = true
+    },
+    modifyFiled(i) {
+      this.isNum = i
+      this.isModify[i] = true
+      this.sourceValue[i] = ''
+      console.log(this.isModify)
+      console.log(this.sourceValue)
+      console.log(this.isModify[i])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  width: 829px;
+  .el-dialog__body{
+    .el-form{
+      text-align: center;
+      .el-form-item {
+        .el-form-item__content{
+          width: 400px !important;
+        }
+      }
+    }
+  }
+}
+.corres-field-main{
+  display: flex;
+  justify-content: space-between;
+  height: 428px;
+  border: 1px solid #E6E8ED;
+  .corres-field-left,
+  .corres-field-right{
+    flex: 1;
+    .corres-field-title{
+      height: 60px;
+      line-height: 20px;
+      background-color: #F5F9FC;
+      text-align: center;
+      p{
+        font-size: 14px;
+        color: #0C0E1E;
+        padding-top: 10px;
+      }
+      span{
+        font-size: 12px;
+        color: #0348F3;
+      }
+    }
+    .field-list{
+      min-height: 368px;
+      overflow: hidden;
+      overflow-y: scroll;
+      .field-item{
+        display: flex;
+        justify-content: space-between;
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #E6E8ED;
+        p{
+          flex: 1;
+          font-size: 14px;
+          color: #545B65;
+          text-align: center;
+        }
+        ::v-deep .el-select{
+          width: 306px;
+          .el-input__inner{
+            height: 38px;
+            line-height: 38px;
+            border: none;
+          }
+        }
+        .field-state{
+          width: 88px;
+          text-align: center;
+          border-left: 1px solid #E6E8ED;
+          span.is-select{
+            display: inline-block;
+            width: 48px;
+            height: 22px;
+            line-height: 22px;
+            font-size: 12px;
+            color: #0348F3;
+            border-radius: 3px;
+            background-color: #EEF5FE;
+            border: 1px solid #90B0F9;
+          }
+        }
+      }
+    }
+  }
+  .corres-field-left{
+    border-right: 1px solid #E6E8ED;
+  }
+}
+</style>
--- a/src/views/system/watermarkManage/module/form.vue
+++ b/src/views/system/watermarkManage/module/form.vue
@ -42,7 +42,7 @@
                :before-upload="beforeAvatarUpload"
                :data="qiniuData"
              >
-                <el-button size="small" type="primary"><i class="iconfont icon-fabu" />点击上传</el-button>
+                <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />点击上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </el-form-item>