档案管理 新增-编辑-上传附件

src/api/archivesManage/archivesList.js

@@ -36,4 +36,13 @@ export function del(parameter) {
   })
 }
 
-export default { add, edit, del, getTableDisplayFields, getFormDisplayFields }
+// 档案判断值是否重复
+export function FetchDoeditIsRepeat(parameter) {
+  return request({
+    url: 'api/archives/doeditIsRepeat',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export default { add, edit, del, getTableDisplayFields, getFormDisplayFields, FetchDoeditIsRepeat }

src/assets/styles/archives-manage.scss

@@ -148,3 +148,39 @@ $arcCyan: #0FBED9;
   background-color: #031435 !important;
   box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16);
 }
+
+.archives-tab{
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  padding: 0 70px;
+  font-size: 16px;
+  border-bottom: 1px solid #339CFF;
+  z-index: 1001;
+  li{
+    padding: 22px 14px 14px 14px;
+    color: #339CFF;
+    cursor: pointer;
+    &.active{
+      position: relative;
+      color: #fff;
+      &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+        width: 100%;
+        height: 3px;
+        border-radius: 3px;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// 上传附件
+.upload-file{
+  .upload-curd{
+    margin: 20px 32px;
+  }
+}

src/views/archivesManage/archivesList/archivesDetail.vue

@@ -34,11 +34,14 @@
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <!-- :this-fields="form" -->
-        <PreviewForm v-if="formPreviewData.length" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" />
+        <ul class="archives-tab">
+          <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
+          <li v-if="isEditOrAdd !== 'add'" :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">上传附件</li>
+        </ul>
+        <PreviewForm v-if="formPreviewData.length && archivesTabIndex == 0" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" :selected-category="selectedCategory" :arc-id="arcId" />
+        <UploadFile v-if="archivesTabIndex==1" />
         <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="handlerArchivesSubmit">确认</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="handlerArchivesSubmit">保存</el-button>
         </div>
       </div>
     </el-dialog>
@@ -107,9 +110,10 @@ import crudOperation from '@crud/CRUD.operation'
 import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
 import PreviewForm from '@/views/components/category/PreviewForm'
+import UploadFile from './module/uploadFile'
 
 export default {
-  components: { crudOperation, rrOperation, pagination, PreviewForm },
+  components: { crudOperation, rrOperation, pagination, PreviewForm, UploadFile },
   mixins: [
     presenter(),
     header(),
@@ -166,7 +170,10 @@ export default {
       getTableDisplayFieldsLoading: false, // table-loading
       formPreviewData: [], // 预览界面data
       isEditOrAdd: '',
-      selectedData: null
+      selectedData: null,
+      archivesTabIndex: 0, // 新增
+      tabDisabled: true,
+      arcId: null // 档案ID
     }
   },
   watch: {
@@ -206,22 +213,47 @@ export default {
     [CRUD.HOOK.beforeToCU](crud, form, btn) {
       this.isEditOrAdd = btn
       this.selectedData = crud.selections
+      if (this.isEditOrAdd === 'add') {
+        this.tabDisabled = true
+        this.arcId = null
+      } else if (this.isEditOrAdd === 'edit') {
+        this.arcId = this.selectedData[0].id
+        this.tabDisabled = false
+      }
       this.form.dictionaryConfigId = {}
+      this.formPreviewData = []
       // 档案预编辑获取字段
       getFormDisplayFields({ categoryId: this.selectedCategory.id }).then(data => {
-        this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput })
+        // this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput })
+        this.formPreviewData = data.showFiled
         this.form.categoryId = this.selectedCategory.id
+        this.$nextTick(() => {
+          if (this.isEditOrAdd === 'edit') {
+            this.$refs.previewForm.addOrUpdateForm = this.selectedData[0]
+          }
+        })
         return true
       })
     },
+    // [CRUD.HOOK.beforeToEdit](crud, form, btn) {
+    //   console.log(this.crud)
+    //   this.$nextTick(() => {
+    //     console.log(this.$refs.previewForm)
+    //   })
+    // },
+    changeActiveTab(index) {
+      this.archivesTabIndex = index
+    },
     handlerArchivesSubmit() {
-      let arcId
-      if (this.isEditOrAdd === 'add') {
-        arcId = null
-      } else if (this.isEditOrAdd === 'edit') {
-        arcId = this.selectedData[0].id
-      }
-      this.$refs.previewForm.submitForm('addOrUpdateForm', this.selectedCategory.id, arcId)
+      // let arcId
+      // if (this.isEditOrAdd === 'add') {
+      //   arcId = null
+      //   this.tabDisabled = true
+      // } else if (this.isEditOrAdd === 'edit') {
+      //   arcId = this.selectedData[0].id
+      //   this.tabDisabled = false
+      // }
+      this.$refs.previewForm.submitForm('addOrUpdateForm')
     },
     // table - 当前选中得row
     clickRowHandler(row) {
@@ -274,10 +306,13 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import "~@/assets/styles/archives-manage.scss";
 .preview-dialog {
-  ::v-deep .el-dialog {
-    width: 680px;
+::v-deep .el-dialog {
+    width: 940px !important;
+    .el-dialog__body{
+      padding: 0;
+      height: calc(100vh - 174px);
+    }
     .preview-content {
-      max-height: calc(100vh - 330px);
       overflow: hidden;
       overflow-y: auto;
       .el-textarea__inner {
@@ -288,6 +323,10 @@ export default {
     .el-dialog__header {
       width: 420px;
     }
+    .dialog-footer{
+      margin: 0 auto;
+      padding: 15px 0 30px 0;
+    }
   }
 }
 </style>

src/views/archivesManage/archivesList/module/data.json

@@ -0,0 +1,27 @@
+{
+	"code": 200,
+	"message": "操作成功",
+	"data": [{
+    "fileName": "附件标题",
+    "fileFormat":"xls",
+    "fileSize":"76kb",
+    "fileDpi":"1920*1080",
+    "fileCover":"https://qiniu.aiyxlib.com/yuekan-5-h5bg.jpg",
+    "create_date":"2022-5-27 08:00"
+  },{
+    "fileName": "附件标题2",
+    "fileFormat":"xls",
+    "fileSize":"76kb",
+    "fileDpi":"1920*1080",
+    "fileCover":"",
+    "create_date":"2022-5-27 08:00"
+  },{
+    "fileName": "附件标题3",
+    "fileFormat":"xls",
+    "fileSize":"76kb",
+    "fileDpi":"1920*1080",
+    "fileCover":"",
+    "create_date":"2022-5-27 08:00"
+  }
+  ]
+}

src/views/archivesManage/archivesList/module/uploadFile.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="upload-file">
+    <!-- 上传附件curd -->
+    <div class="upload-curd">
+      <el-button icon="el-icon-plus">新增</el-button>
+      <el-button icon="el-icon-delete" :disabled="selections.length === 0">删除</el-button>
+      <el-button icon="el-icon-sort">排序</el-button>
+    </div>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="min-width: 100%"
+      height="calc(100vh - 315px)"
+      @row-click="clickRowHandler"
+      @selection-change="selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column prop="fileName" label="文件名称" min-width="140" align="center" />
+      <el-table-column prop="fileFormat" label="格式" min-width="60" align="center" />
+      <el-table-column prop="fileSize" label="大小" min-width="85" align="center" />
+      <el-table-column prop="fileDpi" label="分辨率" min-width="85" align="center" />
+      <el-table-column prop="fileCover" label="缩览图" min-width="60" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.fileCover">
+            <img width="60px" height="32px" :src="scope.row.fileCover" @click="showCoverVisible=true">
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_date" label="创建时间" min-width="100" align="center" />
+    </el-table>
+
+    <!-- 点击缩略图看大图 -->
+    <el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <img src="https://qiniu.aiyxlib.com/yuekan-5-h5bg.jpg">
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import CRUD, { presenter, header } from '@crud/crud'
+// import crudOperation from '@crud/CRUD.operation'
+import data from './data.json'
+export default {
+  name: 'UploadFile',
+  components: {},
+  data() {
+    return {
+      tableData: [],
+      selections: [],
+      showCoverVisible: false
+    }
+  },
+  created() {
+    this.tableData = data.data
+  },
+  methods: {
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    handleClose(done) {
+      this.deleteData = {}
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+</style>

src/views/components/category/PreviewForm.vue

@@ -14,9 +14,13 @@
                 placeholder=""
                 :style="{ width: item.editLength+'px'}"
                 :disabled="isDisabled"
-                :validate-event="isDisabled"
+                :validate-event="!isDisabled"
+                no-options-text="无数据"
+                @select="selectTree"
+                @open="openTree(item)"
               />
               <!-- text / number / textarea / popover -->
+              <!-- :validate-event="isDisabled" -->
               <el-input
                 v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date'"
                 v-model="addOrUpdateForm[item.fieldName]"
@@ -25,9 +29,11 @@
                 :class="{'input-popover':(item.isInputClass === 'popover')}"
                 :style="{ width: item.editLength+'px'}"
                 :disabled="isDisabled"
-                :validate-event="isDisabled"
+                :validate-event="!isDisabled"
+                @keyup.enter.native="isRepeatHandle(item)"
+                @blur="isRepeatHandle(item)"
               >
-                <i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="popoverVisible = true" />
+                <i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="handleCurrentFieldName(item)" />
               </el-input>
               <!-- date -->
               <el-date-picker
@@ -40,7 +46,7 @@
                 :clearable="false"
                 :style="{ width: item.editLength+'px'}"
                 :disabled="isDisabled"
-                :validate-event="isDisabled"
+                :validate-event="!isDisabled"
               />
             </el-form-item>
           </el-col>
@@ -66,12 +72,13 @@
 
 <script>
 // import formPreviewData from './data.json'
-import { form } from '@crud/crud'
-import { edit } from '@/api/archivesManage/archivesList'
+import CRUD, { form } from '@crud/crud'
+import { edit, FetchDoeditIsRepeat } from '@/api/archivesManage/archivesList'
 import draggable from 'vuedraggable'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { FetchFindAllSubsetById } from '@/api/archivesConfig/dictDetail'
+import { parseTime } from '@/utils/index.js'
 export default {
   name: 'PreviewForm',
   components: { draggable, Treeselect },
@@ -86,26 +93,45 @@ export default {
     formPreviewData: {
       type: Array,
       required: true
+    },
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    arcId: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
       addOrUpdateForm: {},
       rules: {},
-      tableData: [],
-      popoverVisible: false,
+      tableData: [], // popover - tableData
+      popoverVisible: false, // popover - visible
+      currentFieldName: null, // popover 当前fieldName
+      treeCurrentFiled: null,
+      categoryId: null,
       normalizer(node) {
         if (node.childMenus == null || node.childMenus === 'null') {
           delete node.childMenus
         }
         return {
-          id: node.id,
+          id: node.dicName,
           label: node.dicName,
           children: node.childMenus
         }
       }
     }
   },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+    },
+    arcId: function(newValue, oldValue) {
+    }
+  },
   mounted() {
     this.getAllSubset()
     this.editFormRow()
@@ -120,12 +146,54 @@ export default {
             if (item.isInputClass === 'select') {
               this.$set(item, 'options', res)
             } else if (item.isInputClass === 'popover') {
+              if (item.fieldName === this.currentFieldName) {
                 this.tableData = res
               }
+            }
           })
         }
       })
     },
+    // 判断重复api
+    handlerIsRepeat(params, item) {
+      FetchDoeditIsRepeat(params).then(res => {
+        if (res) {
+          this.$message.error(item.fieldCnName + '字段不可重复，请重新输入或选择')
+        }
+      })
+    },
+    // input 判断是否重复
+    isRepeatHandle(item) {
+      // 自动重复字段 - 是否重复
+      if (item.isRepeat) {
+        const params = {
+          'categoryId': this.selectedCategory.id,
+          'archivesId': this.arcId,
+          'fieldName': item.fieldName,
+          'value': this.addOrUpdateForm[item.fieldName]
+        }
+        this.handlerIsRepeat(params, item)
+      }
+    },
+    // tree - open
+    openTree(item) {
+      this.treeCurrentFiled = item
+    },
+    // tree - select
+    selectTree(val) {
+      this.addOrUpdateForm[this.treeCurrentFiled.fieldName] = val.dicName
+      this.getAllSubset()
+      // 自动重复字段 - 是否重复 - treeSelect方式
+      if (this.treeCurrentFiled.isRepeat) {
+        const params = {
+          'categoryId': this.selectedCategory.id,
+          'archivesId': this.arcId,
+          'fieldName': this.treeCurrentFiled.fieldName,
+          'value': val.dicName
+        }
+        this.handlerIsRepeat(params, this.treeCurrentFiled)
+      }
+    },
     // popover - table 单选
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
@@ -133,20 +201,27 @@ export default {
     },
     // popover - table 选中得项
     handleSelectionChange(val) {
-      this.formPreviewData.map(item => {
-        if (item.sysDictionaryId && item.isInputClass === 'popover') {
       if (val.length > 0) {
-            this.addOrUpdateForm[item.fieldName] = val[0].dicName
+        this.addOrUpdateForm[this.currentFieldName] = val[0].dicName
       }
+      this.$refs.table.clearSelection()
       this.popoverVisible = false
-        }
-      })
+    },
+    // popover - 当前选中得
+    handleCurrentFieldName(item) {
+      this.popoverVisible = true
+      this.currentFieldName = item.fieldName
+      this.tableData = []
+      this.getAllSubset()
     },
     // 动态生成表单
     editFormRow() {
       this.rules = {}
       this.formPreviewData.map(item => {
         this.$set(this.addOrUpdateForm, item.fieldName, '')
+        if (item.isInputClass === 'select') {
+          this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
+        }
         this.rules[item.fieldName] = [
           {
             required: !!item.isRequired,
@@ -167,12 +242,21 @@ export default {
       // console.log('获取拖拽改变数据索引后，被拖拽的元素 :' +
       //           this.formPreviewData[evt.newIndex])
     },
-    submitForm(formName, categoryId, arcId) {
+    submitForm(formName, arcId) {
+      // 时间格式化
+      this.formPreviewData.map(item => {
+        if (item.isInputClass === 'date') {
+          if (this.addOrUpdateForm[item.fieldName] !== '') {
+            this.$set(this.addOrUpdateForm, item.fieldName, parseTime(this.addOrUpdateForm[item.fieldName]).split('00:00:00')[0])
+          }
+        }
+      })
+      console.log(this.addOrUpdateForm)
       this.$refs[formName].validate((valid) => {
         if (valid) {
           const params = {
-            'id': arcId,
-            'categoryId': categoryId,
+            'id': this.arcId,
+            'categoryId': this.selectedCategory.id,
             'jsonString': JSON.stringify(this.addOrUpdateForm)
           }
           edit(params).then(res => {
@@ -181,7 +265,7 @@ export default {
               type: 'success',
               duration: 2500
             })
-            console.log(this.crud.state)
+            this.crud.status.add = CRUD.STATUS.NORMAL
             this.crud.refresh()
           })
         } else {
@@ -200,11 +284,15 @@ export default {
 <style lang="scss" scoped>
 .preview-content {
   width: 640px !important;
-  min-height: calc(100vh - 312px);
-  padding: 20px 15px 20px 0 !important;
+  height: calc(100vh - 312px);
+  padding: 20px 0 0 0 !important;
   margin-top: 0 !important;
   border-radius: 4px;
   border: 1px solid #3a99fd;
+  margin: 0 auto;
+  .el-row{
+    margin-right: 20px !important;
+  }
   ::v-deep .el-input__inner {
     width: 100%;
   }