批量挂接

src/assets/styles/archives-manage.scss

@@ -758,7 +758,7 @@
     color: #0C0E1E;
     &.is-anjuan{
       background: url("~@/assets/images/collect/aj.png") no-repeat left -2px;
-    background-size: 50px 39px;
+      background-size: 50px 39px;
     }
     &.is-juannei{
       background: url("~@/assets/images/collect/jn.png") no-repeat left top;

src/assets/styles/yxk-admin.scss

@@ -1939,6 +1939,21 @@ input[type ='number'] {
   }
 }
 
+// 2023-10-8
+.upload-bgColor{
+  position: relative;
+  .upload-input{
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+  }
+  .el-button{
+    color: #fff !important;
+    background-color: #1F55EB !important;
+    border: none !important;
+  }
+}
 
 .row-state{
   display: inline-block;

src/views/collectReorganizi/batchConnection/index.vue

@@ -1,215 +1,165 @@
 <template>
   <div class="app-container archives-container">
     <div class="container-main" style="justify-content: flex-start;">
-      <div class="elect-cont-left">
-        <div class="container-left">
-          <span class="right-top-line" />
-          <span class="left-bottom-line" />
-          <div class="arc-left-tree">
-            <h3 class="arc-title arc-title-top">档案门类</h3>
-            <div class="tree-scroll">
-              <el-tree ref="categroyTree" v-loading="crud.loading" class="arc-tree" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
-                <span slot-scope="{ node, data }" class="custom-tree-node">
-                  <span v-if="data.isType === 1 " class="iconFolder">
-                    {{ data.cnName }}
-                  </span>
-                  <span v-if="data.isType === 2" class="iconArch">
-                    {{ data.cnName }}
-                  </span>
-                  <span v-if="data.isType === 3" class="iconFile">
-                    {{ data.cnName }}
-                  </span>
-                </span>
-              </el-tree>
-            </div>
+      <CategoryTree ref="categoryTree" @nodeClick="handleNodeClick" />
+      <div class="elect-cont-right">
+        <div class="connection-header collect-header">
+          <h4 class="is-anjuan">{{ currentCategory && currentCategory.cnName }} </h4>
+          <div class="head-search">
+            <date-range-picker v-model="blurryTime" class="date-item" />
+            <rrOperation />
           </div>
+          <crudOperation>
+            <template v-slot:right>
+              <el-button size="mini" :disabled="crud.selections.length === 0" @click="doLoalHitch(crud.selections)">
+                <i class="iconfont icon-bendiguajie" />
+                本地挂接
+              </el-button>
+              <el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
+                <i class="iconfont icon-daochu" />
+                导出
+              </el-button>
+            </template>
+          </crudOperation>
         </div>
+        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler" @row-dblclick="handleDetail">
+          <el-table-column type="selection" align="center" width="55" />
+          <el-table-column prop="code" label="编号" width="300" />
+          <el-table-column prop="create_by" label="操作人" width="100" />
+          <el-table-column prop="create_time" label="操作时间">
+            <template slot-scope="scope">
+              <div>{{ scope.row.create_time | parseTime }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="type" label="重复检验方式" />
+          <el-table-column prop="filed" label="挂接字段" />
+          <el-table-column prop="total" label="挂接结果" width="240">
+            <template slot-scope="scope">
+              <div>共 {{ scope.row.total }} 条原文，成功<span class="success-status"> {{ scope.row.success }} </span>条，失败<span class="error-status"> {{ scope.row.error }} </span>条</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination v-if="crud.data.length !== 0" />
       </div>
-      <div class="elect-cont-right" />
     </div>
+    <LocalForm ref="localForm" />
+    <HitchDetail ref="mDetail" />
   </div>
 </template>
 
 <script>
-import crudCategory from '@/api/category/category'
-import CRUD, { presenter, header } from '@crud/crud'
+// import crudConnection from '@/api/system/role'
+import crudRoles from '@/api/system/role'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import DateRangePicker from '@/components/DateRangePicker'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import CategoryTree from '@/views/components/categoryTree'
+import LocalForm from './module/form'
+import HitchDetail from './module/detail'
+// import { exportFile } from '@/utils/index'
+// import qs from 'qs'
+import { mapGetters } from 'vuex'
+
+import tableData from './table.json'
+
 export default {
   name: 'BatchConnection',
-  components: { },
+  components: { CategoryTree, LocalForm, HitchDetail, DateRangePicker, rrOperation, crudOperation, pagination },
   cruds() {
     return [
       CRUD({
-        title: '批量挂接', url: 'api/category/menu',
-        crudMethod: { ...crudCategory },
+        title: '批量挂接', url: 'api/role/initRoleList',
+        crudMethod: { ...crudRoles },
         optShow: {
           add: false,
           edit: false,
           del: false,
+          reset: true,
           download: false,
           group: false
         }
       })
     ]
   },
-  mixins: [presenter(), header()],
+  mixins: [presenter(), header(), crud()],
   props: {
   },
   data() {
     return {
-      defaultProps: {
-        children: 'children',
-        label: 'cnName'
-      },
-      selectedCategory: {}
+      currentCategory: null,
+      blurryTime: null
     }
   },
-  watch: {
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
   },
   created() {
   },
   mounted() {
   },
   methods: {
-    filterData(data) {
-      return data.filter(node => {
-        if (node.children && node.children.length > 0) {
-          node.children = this.filterData(node.children) // 递归处理子节点
-        }
-        return node.isType !== 3 // 过滤掉isType为3的节点
-      })
-    },
-    // 逆归实现 获取指定元素
-    findNode(tree, func) {
-      for (const node of tree) {
-        if (func(node)) return node
-        if (node.children) {
-          const res = this.findNode(node.children, func)
-          if (res) return res
-        }
-      }
-      return null
-    },
-    // 展开选中的父级
-    expandParents(node) {
-      node.expanded = true
-      if (node.parent) {
-        this.expandParents(node.parent)
+    [CRUD.HOOK.beforeRefresh]() {
+      if (this.blurryTime) {
+        this.crud.query.startTime = this.blurryTime[0]
+        this.crud.query.endTime = this.blurryTime[1]
       }
     },
     [CRUD.HOOK.afterRefresh]() {
-      this.crud.data = this.filterData(this.crud.data)
-      this.$nextTick(() => {
-        let currentKey
-        if (localStorage.getItem('currentArchivesKey')) {
-          currentKey = JSON.parse(localStorage.getItem('currentArchivesKey'))
-          // 删除门类节点后
-          if (this.$refs.categroyTree.getCurrentKey(currentKey.id) == null) {
-            localStorage.removeItem('currentArchivesKey')
-          }
-          // 缓存的门类节点判断
-          if (currentKey.isType === 1) {
-            if (currentKey.children.length !== 0) {
-              currentKey = this.findNode(currentKey.children, (node) => {
-                return node.isType !== 1
-              })
-            }
-          }
-        } else {
-        // 默认
-          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]
-          }
-        }
-        if (currentKey.id) {
-        // 设置某个节点的当前选中状态
-          this.$refs.categroyTree.setCurrentKey(currentKey.id)
-          this.$nextTick(() => {
-          // 设置某个节点的父级展开
-            const selectedKey = this.$refs.categroyTree.getCurrentNode()
-            if (this.$refs.categroyTree.getNode(selectedKey) && this.$refs.categroyTree.getNode(selectedKey).parent) {
-              this.expandParents(this.$refs.categroyTree.getNode(selectedKey).parent)
-            }
-            // 选中节点的门类详情
-            this.handleNodeClick(selectedKey)
-          })
-        }
-      })
+      this.crud.data = tableData
+    },
+    handleNodeClick(data) {
+      this.currentCategory = data
+    },
+    doLoalHitch(data) {
+      this.$refs.localForm.localHitchVisible = true
     },
-    handleNodeClick(val) {
-      this.selectedCategory = val
-      // 缓存当前的选中的
-      localStorage.setItem('currentArchivesKey', JSON.stringify(val))
+    handleDetail() {
+      this.$refs.mDetail.hitchDetialVisible = true
+    },
+    doExport(data) {
+      crud.downloadLoading = true
+      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const ids = []
+        data.forEach(val => {
+          ids.push(val.id)
+        })
+        // const params = {
+        //   'roleIds': ids
+        // }
+        // exportFile(this.baseApi + '/api/role/exportRole?' + qs.stringify(params, { indices: false }))
+      }).catch(() => {
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.elect-cont-left{
-  width: 296px;
-  padding: 0 !important;
-}
-[data-theme=light] .elect-cont-left .container-left {
-  min-height: calc(100vh - 140px);
-}
-[data-theme=dark] .elect-cont-left .container-left {
-  min-height: calc(100vh - 160px);
-}
-.openSidebar .elect-cont-right {
-  width: calc(100vw - 592px);
-}
-// [data-theme=light] .elect-cont-right .container-right.tab-content {
-//   min-height: calc(100vh - 200px) !important;
-// }
-
-[data-theme=light] .elect-cont-right {
-    padding: 20px 0 !important;
-}
-[data-theme=dark] .elect-cont-right {
-    margin-top: 0 !important;
-}
-.arc-title{
-  position: relative;
-  height: 48px;
-  line-height: 48px;
-  text-align: center;
-  font-size: 16px;
-  color: #0C0E1E;
-  background-color: #F3F5F8;
-  &::after{
-    content: "";
-    position: absolute;
-    right: 12px;
-    bottom: 0;
-  }
-}
-.arc-title-top{
-  &::after{
-    width: 44px;
-    height: 35px;
-    background: url("~@/assets/images/collect/daml.png") no-repeat;
-    background-size: 100% 100%;
+.connection-header{
+  padding: 0 10px 0 20px;
+  height: auto;
+  border-top: none;
+  ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
+    width: 220px;
   }
-}
-.arc-title-bottom{
-  &::after{
-    width: 41px;
-    height: 40px;
-    background: url("~@/assets/images/collect/kssx.png") no-repeat;
-    background-size: 100% 100%;
+  .crud-opts{
+    display: block;
   }
 }
-.arc-tree{
-  padding: 0 20px;
-  overflow: hidden;
-  overflow-y: scroll;
+.success-status{
+  color: #2ECAAC;
 }
-
-::v-deep .el-tree-node__children .custom-tree-node{
-  font-size: 14px;
+.error-status{
+  color: #ED4A41;
 }
 </style>

src/views/collectReorganizi/batchConnection/module/detail.vue

@@ -0,0 +1,72 @@
+<template>
+  <!-- 挂接详情 -->
+  <el-dialog title="挂接详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="hitchDetialVisible">
+    <div class="setting-dialog">
+      <ul class="hitch-info">
+        <li><span>操作编号：</span>e57d742c-7d0d-4704-a12a-f9d8d2777d24</li>
+        <li><span style="width: 114px;">重复验证方式：</span>跳过</li>
+        <li><span>操作人：</span>admin</li>
+        <li><span style="width: 114px;">操作时间：</span>2016-09-21 08:50:08</li>
+        <li style="width: 100%;"><span>挂接字段：</span>$archival_code$</li>
+        <li style="width: 100%;"><span>挂接结果：</span>共 2 条原文，成功 1 条，失败 1 条</li>
+      </ul>
+      <el-table ref="table" :data="tableData" style="width: 100%;">
+        <el-table-column prop="code" label="文件名称" />
+        <el-table-column prop="create_by" label="操作结果" />
+        <el-table-column prop="type" label="详情" />
+        <el-table-column prop="create_time" label="操作时间">
+          <template slot-scope="scope">
+            <div>{{ scope.row.create_time | parseTime }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="filed" label="所属档案" />
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ConnectionDetail',
+  components: { },
+  mixins: [],
+  data() {
+    return {
+      hitchDetialVisible: false,
+      tableData: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+::v-deep .el-dialog{
+  width: 860px;
+  .el-dialog__body{
+    padding: 10px 0 30px 0;
+  }
+}
+.hitch-info{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  li{
+    width: 50%;
+    font-size: 14px;
+    line-height: 28px;
+    span{
+      display: inline-block;
+      width:80px;
+      text-align: right;
+      color: #0C0E1E;
+    }
+  }
+}
+</style>

src/views/collectReorganizi/batchConnection/module/form.vue

@@ -0,0 +1,151 @@
+<template>
+  <!-- 本地挂接 -->
+  <el-dialog title="本地挂接" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="localHitchVisible">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="重复验证方式" prop="hitchType">
+        <el-select v-model="form.hitchType" placeholder="请选择" style="width: 400px;">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="挂接字段" prop="hitchFiled">
+        <el-select v-model="form.hitchFiled" placeholder="请选择" style="width: 400px;">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="挂接详情" prop="hitchRemark">
+        <el-input v-model="form.hitchRemark" style="width: 400px;" />
+      </el-form-item>
+      <el-form-item label="上传附件" prop="file">
+        <div class="upload-bgColor">
+          <input class="upload-input" type="file" @change="handleFile">
+          <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />点击上传</el-button>
+        </div>
+        <div v-for="item in fileList" :key="item.name" class="file-list">
+          <i class="iconfont icon-xiaowenjian" />
+          {{ item.name }}
+        </div>
+        <el-input v-show="false" v-model="form.file" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="text" @click="handleCancel">取消</el-button>
+      <el-button type="primary" @click.native="handleComfired">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'LocalHitch',
+  components: { },
+  mixins: [],
+  data() {
+    return {
+      localHitchVisible: false,
+      form: {
+        hitchType: null,
+        hitchFiled: null,
+        hitchRemark: null,
+        file: null
+      },
+      fileList: [],
+      typeOptions: [
+        {
+          value: '1',
+          label: '跳过'
+        },
+        {
+          value: '2',
+          label: '覆盖'
+        },
+        {
+          value: '3',
+          label: '追加'
+        }
+      ],
+      options: [
+        {
+          value: 'archival',
+          label: '档号'
+        }
+      ],
+      rules: {
+        hitchType: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        hitchFiled: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        hitchRemark: [
+          { required: true, message: '请输入', trigger: 'blur' }
+        ],
+        file: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    handleFile(event) {
+      const files = event.target.files
+      // const file = files[0] // 获取上传的文件
+      // const allowedExtensions = /(\.xlsx)$/i // 定义允许上传的文件格式，这里只限制为xlsx格式
+      // if (!allowedExtensions.exec(file.name)) {
+      //   this.$message.warning('只能上传Excel文件！') // 弹出提示信息
+      //   event.target.value = '' // 清空文件输入框内容
+      //   return false
+      // }
+      for (let i = 0; i < files.length; i++) {
+        this.fileList = []
+        this.form.file = null
+        this.fileList.push(files[i])
+        this.form.file = files[i]
+      }
+    },
+    handleCancel() {
+      this.$refs['form'].resetFields()
+      this.fileList = []
+      this.form.file = null
+      this.localHitchVisible = false
+    },
+    handleComfired() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.localHitchVisible = false
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+::v-deep .el-dialog{
+  width: 585px;
+}
+.dialog-footer{
+  margin-top: 0;
+}
+
+.file-list{
+  width: 400px;
+  font-size: 12px;
+  color: #A6ADB6;
+}
+</style>

src/views/collectReorganizi/batchConnection/table.json

@@ -0,0 +1,13 @@
+[
+    {
+      "id": "005E76FEC5A2AAB368CA1F",
+      "code": "e57d742c-7d0d-4704-a12a-f9d8d2777d24",
+      "type": "跳过",
+      "filed": "$archival_code$",
+      "total": 5,
+      "success": 5,
+      "error": 0,
+      "create_by": "admin",
+      "create_time": 1687330805000
+    }
+  ]

src/views/components/categoryTree.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="elect-cont-left">
+    <div class="container-left">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <div class="arc-left-tree">
+        <h3 class="arc-title arc-title-top">档案门类</h3>
+        <div class="tree-scroll">
+          <el-tree ref="tree" v-loading="loading" class="arc-tree" :data="categroyTree" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
+            <span slot-scope="{ node, data }" class="custom-tree-node">
+              <span v-if="data.isType === 1 " class="iconFolder">
+                {{ data.cnName }}
+              </span>
+              <span v-if="data.isType === 2" class="iconArch">
+                {{ data.cnName }}
+              </span>
+              <span v-if="data.isType === 3" class="iconFile">
+                {{ data.cnName }}
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchCategoryMenu } from '@/api/system/category/category'
+export default {
+  name: 'CategoryTree',
+  data() {
+    return {
+      categroyTree: [],
+      loading: false,
+      defaultProps: {
+        children: 'children',
+        label: 'cnName'
+      },
+      selectedCategory: {}
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.getCateTree()
+  },
+  mounted() {
+  },
+  methods: {
+    filterData(data) {
+      return data.filter(node => {
+        if (node.children && node.children.length > 0) {
+          node.children = this.filterData(node.children) // 递归处理子节点
+        }
+        return node.isType !== 3 // 过滤掉isType为3的节点
+      })
+    },
+    // 逆归实现 获取指定元素
+    findNode(tree, func) {
+      for (const node of tree) {
+        if (func(node)) return node
+        if (node.children) {
+          const res = this.findNode(node.children, func)
+          if (res) return res
+        }
+      }
+      return null
+    },
+    // 展开选中的父级
+    expandParents(node) {
+      node.expanded = true
+      if (node.parent) {
+        this.expandParents(node.parent)
+      }
+    },
+    getCateTree() {
+      this.loading = true
+      FetchCategoryMenu().then(res => {
+        this.categroyTree = this.filterData(res)
+        this.$nextTick(() => {
+          let currentKey
+          if (this.categroyTree[0].isType === 1) {
+            currentKey = this.findNode(this.categroyTree[0].children, (node) => {
+              return node.isType !== 1
+            })
+          } else {
+            currentKey = this.categroyTree[0]
+          }
+          if (currentKey.id) {
+            // 设置某个节点的当前选中状态
+            this.$refs.tree.setCurrentKey(currentKey.id)
+            this.$nextTick(() => {
+              // 设置某个节点的父级展开
+              const selectedKey = this.$refs.tree.getCurrentNode()
+              if (this.$refs.tree.getNode(selectedKey) && this.$refs.tree.getNode(selectedKey).parent) {
+                this.expandParents(this.$refs.tree.getNode(selectedKey).parent)
+              }
+              // 选中节点的门类详情
+              this.handleNodeClick(selectedKey)
+            })
+          }
+        })
+        this.loading = false
+      })
+    },
+    handleNodeClick(val) {
+      this.selectedCategory = val
+      if (val.cnName) {
+        this.$emit('nodeClick', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.elect-cont-left{
+  width: 296px;
+  padding: 0 !important;
+}
+[data-theme=light] .elect-cont-left .container-left {
+  min-height: calc(100vh - 140px);
+}
+[data-theme=dark] .elect-cont-left .container-left {
+  min-height: calc(100vh - 160px);
+}
+.openSidebar .elect-cont-right {
+  width: calc(100vw - 592px);
+}
+// [data-theme=light] .elect-cont-right .container-right.tab-content {
+//   min-height: calc(100vh - 200px) !important;
+// }
+
+[data-theme=light] .elect-cont-right {
+    padding: 20px 0 !important;
+}
+[data-theme=dark] .elect-cont-right {
+    margin-top: 0 !important;
+}
+.arc-title{
+  position: relative;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-size: 16px;
+  color: #0C0E1E;
+  background-color: #F3F5F8;
+  &::after{
+    content: "";
+    position: absolute;
+    right: 12px;
+    bottom: 0;
+  }
+}
+.arc-title-top{
+  &::after{
+    width: 44px;
+    height: 35px;
+    background: url("~@/assets/images/collect/daml.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.arc-title-bottom{
+  &::after{
+    width: 41px;
+    height: 40px;
+    background: url("~@/assets/images/collect/kssx.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.arc-tree{
+  padding: 0 20px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+::v-deep .el-tree-node__children .custom-tree-node{
+  font-size: 14px;
+}
+</style>