条码功能

package.json

@@ -44,6 +44,7 @@
     "html2canvas": "^1.4.1",
     "js-beautify": "^1.10.2",
     "js-cookie": "2.2.0",
+    "jsbarcode": "^3.11.6",
     "jsencrypt": "^3.0.0-rc.1",
     "jszip": "^3.7.1",
     "mavon-editor": "^2.9.1",
@@ -61,6 +62,7 @@
     "vue-echarts": "^5.0.0-beta.0",
     "vue-highlightjs": "^1.3.3",
     "vue-image-crop-upload": "^2.5.0",
+    "vue-print-nb-element": "^1.8.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vuedraggable": "2.20.0",

src/api/archivesManage/archivesList.js

@@ -160,5 +160,14 @@ export function FetchTransferMainLibrary(parameter) {
   })
 }
 
-export default { add, edit, del, FetchInitArchivesView, FetchTableDisplayFields, FetchFormDisplayFields, FetchDoeditIsRepeat, queryVagueArchives, querySeniorArchives }
+// 打印条形码
+export function FetchPrintArchivesBarcode(parameter) {
+  return request({
+    url: 'api/archives/printArchivesBarcode',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export default { add, edit, del, FetchInitArchivesView, FetchTableDisplayFields, FetchFormDisplayFields, FetchDoeditIsRepeat, queryVagueArchives, querySeniorArchives, FetchPrintArchivesBarcode }
 

src/api/archivesManage/caseManage.js

@@ -1,82 +1,91 @@
-import request from '@/utils/request'
-import qs from 'qs'
-
-export function add(form) {
-  return edit(form)
-}
-
-export function edit(parameter) {
-  return request({
-    url: 'api/case/edit',
-    method: 'post',
-    data: parameter
-  })
-}
-// 删除档案盒
-export function del(data) {
-  return request({
-    url: 'api/case/del',
-    method: 'post',
-    data: data
-  })
-}
-
-// 判断盒名称是否重复
-export function caseNameIsRepeat(parameter) {
-  return request({
-    url: 'api/case/caseNameIsRepeat',
-    method: 'get',
-    params: parameter
-  })
-}
-// 判断条形码值是否重复
-export function barcodeIsRepeat(parameter) {
-  return request({
-    url: 'api/case/barcodeIsRepeat',
-    method: 'get',
-    params: parameter
-  })
-}
-
-// 档案盒列表
-export function FetchInitCaseList(parameter) {
-  return request({
-    url: 'api/case/initCaseList',
-    method: 'get',
-    params: parameter
-  })
-}
-
-// 档案盒装盒列表
-export function FetchInitCartoningList(parameter) {
-  return request({
-    url: 'api/case/initCartoningList',
-    method: 'get',
-    params: parameter
-  })
-}
-
-// 装盒
-export function FetchCartoning(data) {
-  return request({
-    url: 'api/case/cartoning',
-    method: 'post',
-    data: data
-  })
-}
-// 拆盒
-export function unpacking(data) {
-  return request({
-    url: 'api/case/unpacking',
-    method: 'post',
-    data: data
-  })
-}
-// 盒详情
-export function findInCase(params) {
-  return request({
-    url: 'api/case/findInCase' + '?' + qs.stringify(params, { indices: false }),
-    method: 'get'
-  })
-}
-export default { add, edit, del, unpacking, findInCase }
+import request from '@/utils/request'
+import qs from 'qs'
+
+export function add(form) {
+  return edit(form)
+}
+
+export function edit(parameter) {
+  return request({
+    url: 'api/case/edit',
+    method: 'post',
+    data: parameter
+  })
+}
+// 删除档案盒
+export function del(data) {
+  return request({
+    url: 'api/case/del',
+    method: 'post',
+    data: data
+  })
+}
+
+// 判断盒名称是否重复
+export function caseNameIsRepeat(parameter) {
+  return request({
+    url: 'api/case/caseNameIsRepeat',
+    method: 'get',
+    params: parameter
+  })
+}
+// 判断条形码值是否重复
+export function barcodeIsRepeat(parameter) {
+  return request({
+    url: 'api/case/barcodeIsRepeat',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 档案盒列表
+export function FetchInitCaseList(parameter) {
+  return request({
+    url: 'api/case/initCaseList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 档案盒装盒列表
+export function FetchInitCartoningList(parameter) {
+  return request({
+    url: 'api/case/initCartoningList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 装盒
+export function FetchCartoning(data) {
+  return request({
+    url: 'api/case/cartoning',
+    method: 'post',
+    data: data
+  })
+}
+// 拆盒
+export function unpacking(data) {
+  return request({
+    url: 'api/case/unpacking',
+    method: 'post',
+    data: data
+  })
+}
+// 盒详情
+export function findInCase(params) {
+  return request({
+    url: 'api/case/findInCase' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
+// 批量打印盒数据
+export function printCaseBarcode(data) {
+  return request({
+    url: 'api/case/printCaseBarcode',
+    method: 'post',
+    data: data
+  })
+}
+export default { add, edit, del, unpacking, findInCase, printCaseBarcode }

src/assets/styles/archives-manage.scss

@@ -9,6 +9,7 @@ $arcCyan: #0FBED9;
 .head-archives{
   padding: 0 0 20px 0;
   .archives-crud{
+    position: relative;
     float: left;
   }
   .archives-recycle{

src/main.js

@@ -28,6 +28,8 @@ import App from './App'
 import store from './store'
 import router from './router/routers'
 
+import Print from 'vue-print-nb-element'
+
 import './assets/icons' // icon
 import './router/index' // permission control
 import 'echarts-gl'
@@ -37,6 +39,7 @@ import { parseTime } from '@/utils/index.js'
 Vue.filter('parseTime', function(time, cFormat) {
   return parseTime(time, cFormat)
 })
+Vue.use(Print)
 Vue.use(checkPer)
 Vue.use(VueHighlightJS)
 Vue.use(mavonEditor)

src/views/archivesManage/archivesList/archivesAnjuan/index.vue

@@ -2,6 +2,9 @@
   <div class="archives-warp">
     <!--工具栏-->
     <div class="head-container head-archives clearfix">
+      <div v-if="!recycleMain.isRecycle" class="archives-handler-btn">
+        <el-button :loading="codeLoading" style="position: absolute; left: 0; top: 0; padding: 0 14px 0 8px;" type="primary" class="warehousing-btn iconfont" :disabled="selections.length === 0" @click="printArchivesCode(selections)"><svg-icon icon-class="print" class="svg-arc-style" />批量打印条形码</el-button>
+      </div>
       <div v-if="!recycleMain.isRecycle" class="archives-crud">
         <!-- 新增 -->
         <el-button v-if="!isHasProject" size="mini" :disabled="isProject && selectedCategory.isType === 2" icon="el-icon-plus" @click="handleForm('add','档案', 1)">新增</el-button>
@@ -48,6 +51,15 @@
         <!-- 绑定标签btn 单选 -->
         <el-button v-if="selectedCategory.isType !== 3" class="binding-btn iconfont" type="primary" :disabled="selections.length !== 1" @click="bindingTag(selections)"><svg-icon icon-class="bindbiaoqian" class="svg-arc-style" />绑定标签</el-button>
       </div>
+
+      <div ref="printDiv" style="display: none;">
+        <div v-for="item in selectedRows" :key="item.barcode" style="page-break-after:always; margin-top: 8px; margin-left: 20px;">
+          <div>
+            <img :src="item.barcode | creatBarCode(item.barcode, item.title)" style="border: 1px solid #000; width: 160px;">
+          </div>
+        </div>
+      </div>
+      <iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
     </div>
 
     <!--新增 / 编辑 表单组件-->
@@ -174,6 +186,7 @@
         </div>
       </div>
     </el-dialog>
+
   </div>
 </template>
 

src/views/archivesManage/archivesList/archivesJuannei/index.vue

@@ -2,6 +2,9 @@
   <div class="archives-warp">
     <!--工具栏-->
     <div class="head-container head-archives clearfix">
+      <div v-if="!recycleMain.isRecycle" class="archives-handler-btn" style="float: none;">
+        <el-button :loading="codeLoading" type="primary" :class="['warehousing-btn iconfont', selectedCategory.isType !== 4 ? 'archivesJn-code-ac':'archivesJn-code' ]" style="padding: 0 14px 0 8px;" :disabled="selections.length === 0" @click="printArchivesCode(selections)"><svg-icon icon-class="print" class="svg-arc-style" />批量打印条形码</el-button>
+      </div>
       <div v-if="!recycleMain.isRecycle" class="archives-crud">
         <!-- 新增 -->
         <el-button v-if="selectedCategory.isType !== 4" size="mini" :disabled="isAnjuan" icon="el-icon-plus" @click="handleForm('add','档案',2)">新增</el-button>
@@ -39,6 +42,15 @@
         <!-- 绑定标签btn 单选 -->
         <el-button class="binding-btn iconfont" type="primary" :disabled="selections.length !== 1" @click="bindingTag(selections)"><svg-icon icon-class="bindbiaoqian" class="svg-arc-style" />绑定标签</el-button>
       </div>
+
+      <div ref="printDiv" style="display: none;">
+        <div v-for="item in selectedRows" :key="item.barcode" style="page-break-after:always; margin-top: 8px; margin-left: 20px;">
+          <div>
+            <img :src="item.barcode | creatBarCode(item.barcode, item.title)" style="border: 1px solid #000; width: 160px;">
+          </div>
+        </div>
+      </div>
+      <iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
     </div>
 
     <!--新增 / 编辑 表单组件-->
@@ -163,6 +175,7 @@
         </div>
       </div>
     </el-dialog>
+
   </div>
 </template>
 
@@ -389,4 +402,14 @@ export default {
   background-color:#02255f;
   border-bottom: none;
 }
+
+.archivesJn-code{
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.archivesJn-code-ac{
+  display: block;
+  margin-bottom: 10px;
+}
 </style>

src/views/archivesManage/archivesList/index.vue

@@ -457,7 +457,6 @@ export default {
             }
           }
           console.log(this.intellClassifyTree)
-
           this.intellClassifyLoading = false
         }, 2000)
       }

src/views/archivesManage/archivesList/mixins/archives.js

@@ -1,7 +1,31 @@
 import qs from 'qs'
 import { exportFile } from '@/utils/index'
-import { FetchTableDisplayFields, FetchInitArchivesView, FetchFormDisplayFields } from '@/api/archivesManage/archivesList'
+import JsBarcode from 'jsbarcode'
+import { FetchTableDisplayFields, FetchInitArchivesView, FetchFormDisplayFields, FetchPrintArchivesBarcode } from '@/api/archivesManage/archivesList'
 export const archivesCrud = {
+  filters: {
+    creatBarCode(barCodeData, codePrintData, barCodeText) {
+      // console.log('触发条码生成事件')
+      console.log('codePrintData', codePrintData)
+      console.log('barCodeText', barCodeText)
+      const canvas = document.createElement('canvas')
+      // 'fantasy', // 设置文本的字体
+      JsBarcode(canvas, barCodeData, {
+        format: 'CODE128',
+        displayValue: true,
+        text: barCodeText,
+        fontOptions: 'bold', // 使文字加粗体或变斜体
+        font: 'arial',
+        margin: 15,
+        height: 120,
+        width: 5,
+        fontSize: 36,
+        textMargin: 6,
+        textPosition: 'top'
+      })
+      return canvas.toDataURL('image/png')
+    }
+  },
   // 组件共用属性
   data() {
     return {
@@ -16,6 +40,9 @@ export const archivesCrud = {
         size: 10,
         total: 0
       },
+      codeLoading: false,
+      selectedRows: [],
+      codePrintData: [],
       storageTxt: [],
       borrowTxt: [],
       tableDisplayFields: [], // table-list-title字段
@@ -257,7 +284,9 @@ export const archivesCrud = {
         this.$nextTick(() => {
           if (type === 'edit') {
             this.$refs.previewForm.addOrUpdateForm = data.echo
+            this.$refs.previewForm.isEdit = true
           } else {
+            this.$refs.previewForm.isEdit = false
             if (this.recycleMain.selectedCategory.isType !== 5) {
             // 新增时拿到项目和案卷的相同的字段的值
               this.formPreviewData.forEach(item => {
@@ -296,7 +325,7 @@ export const archivesCrud = {
         this.getTotalSumAll()
       }
     },
-    getTotalSumAll() {
+    getTotalSumAll(data) {
       this.totalSumAll = 0
       this.selections.map((item) => { if (!isNaN(item.children_num)) this.totalSumAll += item.children_num })
       if (isNaN(this.totalSumAll)) {
@@ -304,6 +333,42 @@ export const archivesCrud = {
       }
       return this.totalSumAll
     },
+    // 打印条码
+    printArchivesCode(data) {
+      this.codeLoading = true
+      const params = data.map(item => {
+        return item.id
+      })
+      FetchPrintArchivesBarcode(params).then(res => {
+        if (res && res.length !== 0) {
+          this.selectedRows = res
+        } else {
+          this.selectedRows = []
+          this.$message({
+            message: '无相关可打印条码数据!',
+            type: 'warning'
+          })
+          return false
+        }
+        this.$nextTick(() => {
+          this.codePrintData.count = this.selectedRows.length
+          var printIframe = this.$refs.printIframe
+          var html = this.$refs.printDiv.innerHTML
+          printIframe.setAttribute('srcdoc', html)
+          printIframe.onload = function() {
+            console.log(printIframe.contentWindow)
+            // 去掉iframe里面的dom的body的padding margin的默认数值
+            printIframe.contentWindow.document.body.style.padding = '0px'
+            printIframe.contentWindow.document.body.style.margin = '0px'
+            // 开始打印
+            printIframe.contentWindow.focus()
+            printIframe.contentWindow.print()
+          }
+        })
+        // this.crud.refresh()
+        this.codeLoading = false
+      })
+    },
     // 删除 - 关闭
     handleClose(done) {
       this.formVisible = false

src/views/archivesManage/archivesList/oneClickDelete/index.vue

@@ -132,7 +132,12 @@ export default {
     },
     intellClassifyTree: function(newValue, oldValue) {
       if (newValue) {
-        this.archiveYearOptions = newValue[0].childMenus
+        const index = newValue.findIndex(item => item.dicName === '年度')
+        if (index !== -1) {
+          this.archiveYearOptions = newValue[index].childMenus
+        } else {
+          this.archiveYearOptions = []
+        }
         newValue.filter(item => {
           if (item.dicCode === 'Search_BGQX') {
             this.retentionOptions = item.childMenus

src/views/archivesManage/caseManage/caseList/index.vue

@@ -17,13 +17,15 @@
         </template>
         <template v-slot:rightButtonGroup>
           <div class="archives-handler-btn">
-            <el-button class="part-btn iconfont" type="primary" :disabled="crud.selections.length !== 1" @click="getPrintData"><svg-icon icon-class="print" class="svg-arc-style" />打印目录</el-button>
+            <el-button :loading="codeLoading" class="warehousing-btn iconfont" type="primary" :disabled="crud.selections.length === 0" @click="onPrint(crud.selections)"><svg-icon icon-class="print" class="svg-arc-style" />批量打印条形码</el-button>
+            <el-button :loading="contentLoading" class="part-btn iconfont" type="primary" :disabled="crud.selections.length !== 1" @click="getPrintData"><svg-icon icon-class="print" class="svg-arc-style" />打印目录</el-button>
             <el-button class="packing-btn iconfont icon-chaihe-fanbai" type="primary" :disabled="crud.selections.length === 0" @click="openCase(crud.selections)">拆盒</el-button>
             <el-button class="binding-btn iconfont icon-bangding-fanbai" type="primary" :disabled="crud.selections.length !== 1" @click="bindingTag(crud.selections)">绑定标签</el-button>
           </div>
         </template>
       </crudOperation>
     </div>
+
     <!-- <div class="app-container container-wrap"> -->
     <span class="right-top-line" />
     <span class="left-bottom-line" />
@@ -111,12 +113,20 @@
       </el-table>
     </div>
 
+    <div ref="printDiv" style="display: none;">
+      <div v-for="item in selectedRows" :key="item.barcode" style="page-break-after:always; margin-top: 8px; margin-left: 20px;">
+        <div>
+          <img :src="item.barcode | creatBarCode(item.barcode, item.title)" style="border: 1px solid #000; width: 160px;">
+        </div>
+      </div>
+    </div>
+    <iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
   </div>
 </template>
 
 <script>
 import caseCrudMethod from '@/api/archivesManage/caseManage'
-import { del } from '@/api/archivesManage/caseManage'
+import { del, printCaseBarcode } from '@/api/archivesManage/caseManage'
 import BindingTagDlg from '@/views/components/BindingTagDlg'
 import eForm from './module/form'
 import openCaseDlg from './module/openCaseDlg'
@@ -126,6 +136,7 @@ import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
 import detailDialog from './module/detailDialog'
 
+import JsBarcode from 'jsbarcode'
 import html2canvas from 'html2canvas'
 import printJS from 'print-js'
 export default {
@@ -142,6 +153,27 @@ export default {
         case 3:
           return '待出'
       }
+    },
+    creatBarCode(barCodeData, codePrintData, barCodeText) {
+      // console.log('触发条码生成事件')
+      console.log('codePrintData', codePrintData)
+      console.log('barCodeText', barCodeText)
+      const canvas = document.createElement('canvas')
+      // 'fantasy', // 设置文本的字体
+      JsBarcode(canvas, barCodeData, {
+        format: 'CODE128',
+        displayValue: true,
+        text: barCodeText,
+        fontOptions: 'bold', // 使文字加粗体或变斜体
+        font: 'arial',
+        margin: 15,
+        height: 120,
+        width: 5,
+        fontSize: 36,
+        textMargin: 6,
+        textPosition: 'top'
+      })
+      return canvas.toDataURL('image/png')
     }
   },
   components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg, openCaseDlg, detailDialog },
@@ -164,7 +196,11 @@ export default {
   },
   data() {
     return {
+      codeLoading: false,
+      selectedRows: [],
+      codePrintData: [],
       isHidden: false,
+      contentLoading: false,
       printData: [],
       permission: {
         add: ['admin', 'caseManage:add'],
@@ -214,11 +250,48 @@ export default {
       ]
     }
   },
+
   mounted() {
   },
   methods: {
-    // 打印
+    // 打印条码
+    onPrint(data) {
+      this.codeLoading = true
+      const params = data.map(item => {
+        return item.id
+      })
+      printCaseBarcode(params).then(res => {
+        if (res && res.length !== 0) {
+          this.selectedRows = res
+        } else {
+          this.selectedRows = []
+          this.$message({
+            message: '无相关可打印条码数据!',
+            type: 'warning'
+          })
+        }
+        this.$nextTick(() => {
+          this.codePrintData.count = this.selectedRows.length
+          var printIframe = this.$refs.printIframe
+          var html = this.$refs.printDiv.innerHTML
+          printIframe.setAttribute('srcdoc', html)
+          printIframe.onload = function() {
+            console.log(printIframe.contentWindow)
+            // 去掉iframe里面的dom的body的padding margin的默认数值
+            printIframe.contentWindow.document.body.style.padding = '0px'
+            printIframe.contentWindow.document.body.style.margin = '0px'
+            // 开始打印
+            printIframe.contentWindow.focus()
+            printIframe.contentWindow.print()
+          }
+        })
+        this.crud.refresh()
+        this.codeLoading = false
+      })
+    },
+    // 打印目录
     getPrintData() {
+      this.contentLoading = true
       const params = {
         caseId: this.crud.selections[0].id
       }
@@ -231,6 +304,7 @@ export default {
           this.printFn()
           this.isHidden = false
         })
+        this.contentLoading = false
       })
     },
     printFn() {

src/views/archivesManage/caseManage/caseList/module/form.vue

@@ -1,76 +1,76 @@
-<template>
-  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :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" size="small" label-width="80px">
-        <el-form-item label="盒名称" prop="caseName">
-          <el-input v-model="form.caseName" style="width: 370px;" />
-        </el-form-item>
-        <el-form-item label="条形码" prop="barcode">
-          <el-input v-model="form.barcode" style="width: 370px;" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <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 { caseNameIsRepeat, barcodeIsRepeat } from '@/api/archivesManage/caseManage'
-
-const defaultForm = {
-  id: null,
-  caseName: null,
-  barcode: null
-}
-export default {
-  mixins: [form(defaultForm)],
-  data() {
-    var checkCaseName = (rule, value, callback) => {
-      if (!value) {
-        callback(new Error('请输入盒名称'))
-      } else {
-        caseNameIsRepeat({ caseId: this.form.id, caseName: value }).then((res) => {
-          if (res) {
-            callback(new Error('盒名称重复'))
-          } else {
-            callback()
-          }
-        })
-      }
-    }
-    var checkBarcode = (rule, value, callback) => {
-      if (value) {
-        barcodeIsRepeat({ caseId: this.form.id, barcode: value }).then((res) => {
-          if (res) {
-            callback(new Error('条形码重复'))
-          } else {
-            callback()
-          }
-        })
-      } else {
-        callback()
-      }
-    }
-    return {
-      rules: {
-        caseName: [
-          { validator: checkCaseName, trigger: 'blur' }
-        ],
-        barcode: [
-          { validator: checkBarcode, trigger: 'blur' }
-        ]
-      }
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-</style>
+<template>
+  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :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" size="small" label-width="80px">
+        <el-form-item label="盒名称" prop="caseName">
+          <el-input v-model="form.caseName" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="条形码" prop="barcode">
+          <el-input v-model="form.barcode" style="width: 370px;" :disabled="crud.status.edit" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <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 { caseNameIsRepeat, barcodeIsRepeat } from '@/api/archivesManage/caseManage'
+
+const defaultForm = {
+  id: null,
+  caseName: null,
+  barcode: null
+}
+export default {
+  mixins: [form(defaultForm)],
+  data() {
+    var checkCaseName = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入盒名称'))
+      } else {
+        caseNameIsRepeat({ caseId: this.form.id, caseName: value }).then((res) => {
+          if (res) {
+            callback(new Error('盒名称重复'))
+          } else {
+            callback()
+          }
+        })
+      }
+    }
+    var checkBarcode = (rule, value, callback) => {
+      if (value) {
+        barcodeIsRepeat({ caseId: this.form.id, barcode: value }).then((res) => {
+          if (res) {
+            callback(new Error('条形码重复'))
+          } else {
+            callback()
+          }
+        })
+      } else {
+        callback()
+      }
+    }
+    return {
+      rules: {
+        caseName: [
+          { validator: checkCaseName, trigger: 'blur' }
+        ],
+        barcode: [
+          { validator: checkBarcode, trigger: 'blur' }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+</style>

src/views/components/category/PreviewForm.vue

@@ -1,496 +1,497 @@
-<template>
-  <div class="preview-content right-preview">
-    <el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" :validate-on-rule-change="false" label-width="120px">
-      <el-row :gutter="4" style="padding:0 20px">
-        <draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDraggable" @update="datadragEnd">
-          <el-col v-for="(item,index) in formPreviewData" v-show="item.fieldName !== 'barcode'" :key="index" :class="['drag-item',item.fieldName === 'barcode'? 'barcode-input':'']" :span="item.isLine || item.fieldName === 'barcode' ? 24 : 12">
-            <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
-              <!-- select  :load-options="loadOptions"-->
-              <treeselect
-                v-if="item.isInputClass === 'select'"
-                v-model="addOrUpdateForm[item.fieldName]"
-                :options="item.options"
-                :normalizer="normalizer"
-                :clearable="false"
-                placeholder=""
-                :style="{ width: item.editLength+'px'}"
-                :disabled="isDisabled"
-                :validate-event="!isDisabled"
-                no-options-text="无数据"
-                @select="selectTree"
-                @open="openTree(item)"
-              >
-                <div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div>
-              </treeselect>
-              <!-- text / number / textarea / popover -->
-              <!-- :validate-event="isDisabled" -->
-              <el-input
-                v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date' && item.fieldName !== 'barcode' "
-                v-model="addOrUpdateForm[item.fieldName]"
-                :type="item.isInputClass === 'popover'? 'text' : item.isInputClass"
-                :rows="item.isInputClass === 'textarea' ? 3 : ''"
-                :class="{'input-popover':(item.isInputClass === 'popover')}"
-                :style="{ width: item.editLength+'px'}"
-                :disabled="isDisabled"
-                :validate-event="!isDisabled"
-                @keyup.enter.native="isRepeatHandle(item)"
-                @input="autoAddZero(item.isFilling, item.fieldName, addOrUpdateForm[item.fieldName], item.fillingDigit)"
-                @blur="isRepeatHandle(item)"
-              >
-                <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 v-if="item.isInputClass === 'date'" v-model="addOrUpdateForm[item.fieldName]" type="date" align="right" format="yyyy-MM-dd" placeholder="" :clearable="false" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="!isDisabled" />
-            </el-form-item>
-          </el-col>
-        </draggable>
-      </el-row>
-      <el-row v-if="!isHasCode" style="border-top: 1px solid #339cff; padding: 20px 20px 0 20px;">
-        <el-col v-for="(item,index) in formPreviewData.slice(formPreviewData.length-1,formPreviewData.length)" :key="'barcode'+index">
-          <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
-            <el-input v-model="addOrUpdateForm[item.fieldName]" type="text" style="width: 510px" :disabled="isDisabled" :validate-event="!isDisabled" @keyup.enter.native="isRepeatHandle(item)" @blur="isRepeatHandle(item)" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-
-    <!-- 弹框形式的内容展示 -->
-    <el-dialog class="edit-form-dialog" :append-to-body="true" :visible="popoverVisible" :before-close="handleClose" :close-on-click-modal="false" title="字典列表">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <el-table ref="popoverTable" :data="popoverTableData" highlight-current-row row-key="id" :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" style="width: 100%;" @selection-change="handleSelectionChange" @row-click="clickRowHandler">
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="dicName" label="字典名称" />
-          <el-table-column prop="dicCode" label="字典代码" />
-          <el-table-column prop="dicExplain" label="内容说明" />
-        </el-table>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { crud } from '@crud/crud'
-import { edit, FetchDoeditIsRepeat } from '@/api/archivesManage/archivesList'
-import { getNoFormatField } from '@/api/category/fileNoFormat'
-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 },
-  mixins: [crud()],
-  props: {
-    isDisabled: {
-      type: Boolean,
-      required: true
-    },
-    formPreviewData: {
-      type: Array,
-      required: true
-    },
-    selectedCategory: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    },
-    arcId: {
-      type: String,
-      default: ''
-    },
-    parentsId: {
-      type: String,
-      default: ''
-    },
-    isHasCode: {
-      type: Boolean,
-      required: true
-    },
-    isDraggable: {
-      type: Boolean,
-      default: false
-    },
-    isDesFormType: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      addOrUpdateForm: {},
-      rules: {},
-      popoverTableData: [], // popover - popoverTableData
-      popoverVisible: false, // popover - visible
-      currentFieldName: null, // popover 当前fieldName
-      treeCurrentFiled: null,
-      categoryId: null,
-      setParentsId: null,
-      result: null,
-      autoMatic: null,
-      // isType: 'category',
-      normalizer(node) {
-        if (node.childMenus == null || node.childMenus === 'null') {
-          delete node.childMenus
-        }
-        return {
-          id: node.dicName,
-          label: node.dicName,
-          children: node.childMenus
-        }
-      }
-    }
-  },
-  watch: {
-    selectedCategory: function(newValue, oldValue) {
-    },
-    arcId: function(newValue, oldValue) {
-    },
-    parentsId: function(newValue, oldValue) {
-    },
-    isDesFormType: function(newValue, oldValue) {
-    },
-    formPreviewData: function() {
-      this.editFormRow()
-      // 区分 门类著录项 和 档案管理
-      if (this.isDesFormType === 'category') {
-        this.FetchNoFormatField(this.selectedCategory.id)
-      }
-    }
-  },
-  created() {
-    this.editFormRow()
-  },
-  mounted() {
-    // if (this.isType !== 'arcives') {
-    //   this.FetchNoFormatField(this.selectedCategory.id)
-    // }
-  },
-  methods: {
-    // 递归查询字典名称对应的字典代码
-    // getNode(tree, dicName) {
-    //   for (let i = 0; i < tree.length; i++) {
-    //     if (tree[i].dicName === dicName) {
-    //       return tree[i]
-    //     } else {
-    //       if (tree[i].childMenus) {
-    //         return this.getNode(tree[i].childMenus, dicName)
-    //       }
-    //     }
-    //   }
-    // },
-    // 处理vue-treeSelect回显出现unknown问题
-    getAutoNameUnknown(name) {
-      if (name.lastIndexOf('unknown') > -1) {
-        // 当treeselect翻译不了值时，name中有id，截取id，去调接口或者字典查询出名字
-        return name.split('(')[0]
-      } else {
-        return name
-      }
-    },
-    getNode(list, dicName) {
-      let data;
-      (list || []).map(item => {
-        if (item.dicName === dicName) {
-          data = [item]
-        } else {
-          const child = this.getNode(item.childMenus, dicName)
-          if (child) {
-            data = child
-          }
-        }
-      })
-      return data
-    },
-    // 自动生成
-    handleAuto() {
-      let string = ''
-      const getAutoFiledVal = []
-      this.autoMatic.forEach(async val => {
-        if (!this.addOrUpdateForm[val.fieldName]) {
-          string += ''
-        } else {
-          const fieldInfo = this.formPreviewData.find(element => element.fieldName === val.fieldName)
-          if (fieldInfo.isInputClass === 'select' || fieldInfo.isInputClass === 'popover') {
-            await FetchFindAllSubsetById({ id: fieldInfo.dictionaryConfigId.id }).then(res => {
-              const option = this.getNode(res, this.addOrUpdateForm[val.fieldName])
-              if (option) {
-                const obj = {}
-                obj.name = val.fieldName
-                obj.val = option[0].dicCode + val.connector
-                obj.sequence = val.sequence
-                // string += '' + option[0].dicCode + val.connector
-                getAutoFiledVal.push(obj)
-              }
-            })
-          } else {
-            const obj = {}
-            obj.name = val.fieldName
-            obj.val = this.addOrUpdateForm[val.fieldName] + val.connector
-            obj.sequence = val.sequence
-            // string += '' + this.addOrUpdateForm[val.fieldName] + val.connector
-            getAutoFiledVal.push(obj)
-          }
-        }
-        // 按照指定顺序排再拼接
-        getAutoFiledVal.sort(this.compare('sequence'))
-        string = getAutoFiledVal.map((item) => item.val).join('')
-
-        this.formPreviewData.map(item => {
-          if (item.isAutomatic) {
-            this.$set(this.addOrUpdateForm, item.fieldName, string)
-          }
-        })
-      })
-    },
-    // 排序
-    compare(property) {
-      return function(a, b) {
-        var value1 = a[property]
-        var value2 = b[property]
-        return value1 - value2
-      }
-    },
-    // 获取档号组成项
-    FetchNoFormatField(categoryId) {
-      getNoFormatField({ categoryId: categoryId }).then(res => {
-        this.autoMatic = res
-        // this.handleAuto()
-      })
-    },
-    // 获取对应字典子集数据
-    getAllSubset(item) {
-      if (item.dictionaryConfigId) {
-        FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => {
-          if (item.isInputClass === 'select') {
-            this.$set(item, 'options', res)
-          } else if (item.isInputClass === 'popover') {
-            this.popoverTableData = 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)
-      }
-
-      if (!item.isAutomatic) {
-        const index = this.autoMatic.findIndex(i => item.fieldName === i.fieldName)
-        if (index !== -1) {
-          this.handleAuto()
-        }
-      }
-    },
-    // tree - open
-    openTree(item) {
-      this.treeCurrentFiled = item
-      this.$set(item, 'options', [])
-      this.getAllSubset(this.treeCurrentFiled)
-    },
-    // tree - select
-    selectTree(val) {
-      this.addOrUpdateForm[this.treeCurrentFiled.fieldName] = val.dicName
-      // this.treeName = val.dicName
-      // 自动重复字段 - 是否重复 - 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)
-      }
-      const index = this.autoMatic.findIndex(i => this.treeCurrentFiled.fieldName === i.fieldName)
-      if (index !== -1) {
-        this.handleAuto()
-      }
-    },
-    // popover - table 单选
-    clickRowHandler(row) {
-      this.$refs.popoverTable.clearSelection()
-      this.$refs.popoverTable.toggleRowSelection(row)
-    },
-    // popover - table 选中得项
-    handleSelectionChange(val) {
-      if (val.length > 0) {
-        this.addOrUpdateForm[this.currentFieldName] = val[0].dicName
-      }
-      this.$refs.popoverTable.clearSelection()
-      this.popoverVisible = false
-
-      const index = this.autoMatic.findIndex(i => this.currentFieldName === i.fieldName)
-      if (index !== -1) {
-        this.handleAuto()
-      }
-    },
-    // popover - 当前选中得
-    handleCurrentFieldName(item) {
-      this.popoverVisible = true
-      this.currentFieldName = item.fieldName
-      this.getAllSubset(item)
-    },
-    // 预览和输入时，自动补零
-    autoAddZero(isFilling, fieldName, value, fillingDigit) {
-      if (isFilling) {
-        this.addOrUpdateForm[fieldName] = value.toString().padStart(fillingDigit, '0').slice(-1 * fillingDigit)
-      }
-    },
-    // 动态生成表单
-    editFormRow() {
-      this.rules = {}
-      this.formPreviewData.map(item => {
-        if (item.isInputClass === 'select') {
-          this.$set(item, 'options', [])
-          this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
-        }
-        if (item.isDefaultValue !== '') {
-          this.$set(this.addOrUpdateForm, item.fieldName, item.isDefaultValue)
-        } else {
-          this.$set(this.addOrUpdateForm, item.fieldName, '')
-          if (item.isInputClass === 'select') {
-            this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
-          }
-        }
-        this.$set(this.rules, item.fieldName, [
-          {
-            required: !!item.isRequired,
-            message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName,
-            trigger: item.isInputClass === 'text' ? 'blur' : 'change'
-          }
-        ])
-      })
-    },
-    // 预览界面排序
-    datadragEnd(event) {
-      // 调换顺序
-      const oldIndex = event.oldIndex // 移动初始位置
-      const newIndex = event.newIndex // 运动终止位置
-      const diff = Math.abs(newIndex - oldIndex) // 插值绝对值
-      const index = this.formPreviewData[oldIndex]
-      if (oldIndex > newIndex) {
-        for (let i = 0; i < diff; i++) {
-          this.formPreviewData[oldIndex - i] = this.formPreviewData[oldIndex - i - 1]
-        }
-        this.formPreviewData[newIndex] = index
-      } else {
-        for (let i = 0; i < diff; i++) {
-          this.formPreviewData[oldIndex + i] = this.formPreviewData[oldIndex + i + 1]
-        }
-        this.formPreviewData[newIndex] = index
-      }
-    },
-    submitForm(formName, categoryId) {
-      // 时间格式化
-      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])
-          }
-        }
-      })
-      if (this.selectedCategory.isType !== 4 || this.selectedCategory.isType !== 3) {
-        this.setParentsId = this.parentsId
-      } else {
-        const parent_id = this.selectedCategory.pid
-        if (parseInt(parent_id) === 0) {
-          this.setParentsId = null
-        } else {
-          this.setParentsId = parent_id
-        }
-      }
-      delete this.addOrUpdateForm.id
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          const params = {
-            'id': this.arcId,
-            'categoryId': categoryId,
-            'parentsId': this.setParentsId,
-            'jsonString': JSON.stringify(this.addOrUpdateForm)
-          }
-          console.log(this.addOrUpdateForm)
-          edit(params).then(res => {
-            if (res) {
-              this.$message.success(res)
-              this.$emit('emitTableList')
-              this.crud.refresh()
-              localStorage.setItem('isForm', true)
-              localStorage.removeItem('isDelt')
-            }
-          })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    handleClose(done) {
-      this.popoverVisible = false
-      done()
-    }
-  }
-}
-
-</script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-.preview-content {
-  padding: 20px 0 0 0 !important;
-  margin-top: 0 !important;
-  border-radius: 4px;
-  border: 1px solid #3a99fd;
-  margin: 0 auto;
-
-  .el-row {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-  .el-col {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-  ::v-deep .el-input__inner {
-    width: 100%;
-  }
-  ::v-deep .el-input__prefix {
-    text-align: right;
-    right: 5px !important;
-    color: #339cff;
-  }
-  .input-popover {
-    ::v-deep .el-input__suffix {
-      right: 10px;
-      color: #339cff;
-    }
-  }
-  ::v-deep .el-date-editor {
-    width: 196px;
-    .el-input__inner {
-      padding-left: 15px;
-    }
-  }
-  ::v-deep .el-form-item--small .el-form-item__content {
-    line-height: 30px;
-  }
-}
-</style>
+<template>
+  <div class="preview-content right-preview">
+    <el-form ref="addOrUpdateForm" :model="addOrUpdateForm" :rules="rules" :validate-on-rule-change="false" label-width="120px">
+      <el-row :gutter="4" style="padding:0 20px">
+        <draggable v-bind="{draggable:'.drag-item',animation:500}" :disabled="!isDraggable" @update="datadragEnd">
+          <el-col v-for="(item,index) in formPreviewData" v-show="item.fieldName !== 'barcode'" :key="index" :class="['drag-item',item.fieldName === 'barcode'? 'barcode-input':'']" :span="item.isLine || item.fieldName === 'barcode' ? 24 : 12">
+            <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
+              <!-- select  :load-options="loadOptions"-->
+              <treeselect
+                v-if="item.isInputClass === 'select'"
+                v-model="addOrUpdateForm[item.fieldName]"
+                :options="item.options"
+                :normalizer="normalizer"
+                :clearable="false"
+                placeholder=""
+                :style="{ width: item.editLength+'px'}"
+                :disabled="isDisabled"
+                :validate-event="!isDisabled"
+                no-options-text="无数据"
+                @select="selectTree"
+                @open="openTree(item)"
+              >
+                <div slot="value-label" slot-scope="{ node }">{{ getAutoNameUnknown(node.label) }}</div>
+              </treeselect>
+              <!-- text / number / textarea / popover -->
+              <!-- :validate-event="isDisabled" -->
+              <el-input
+                v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date' && item.fieldName !== 'barcode' "
+                v-model="addOrUpdateForm[item.fieldName]"
+                :type="item.isInputClass === 'popover'? 'text' : item.isInputClass"
+                :rows="item.isInputClass === 'textarea' ? 3 : ''"
+                :class="{'input-popover':(item.isInputClass === 'popover')}"
+                :style="{ width: item.editLength+'px'}"
+                :disabled="isDisabled"
+                :validate-event="!isDisabled"
+                @keyup.enter.native="isRepeatHandle(item)"
+                @input="autoAddZero(item.isFilling, item.fieldName, addOrUpdateForm[item.fieldName], item.fillingDigit)"
+                @blur="isRepeatHandle(item)"
+              >
+                <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 v-if="item.isInputClass === 'date'" v-model="addOrUpdateForm[item.fieldName]" type="date" align="right" format="yyyy-MM-dd" placeholder="" :clearable="false" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="!isDisabled" />
+            </el-form-item>
+          </el-col>
+        </draggable>
+      </el-row>
+      <el-row v-if="!isHasCode" style="border-top: 1px solid #339cff; padding: 20px 20px 0 20px;">
+        <el-col v-for="(item,index) in formPreviewData.slice(formPreviewData.length-1,formPreviewData.length)" :key="'barcode'+index">
+          <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
+            <el-input v-model="addOrUpdateForm[item.fieldName]" type="text" style="width: 510px" :disabled="isDisabled || isEdit" :validate-event="!isDisabled" @keyup.enter.native="isRepeatHandle(item)" @blur="isRepeatHandle(item)" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 弹框形式的内容展示 -->
+    <el-dialog class="edit-form-dialog" :append-to-body="true" :visible="popoverVisible" :before-close="handleClose" :close-on-click-modal="false" title="字典列表">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-table ref="popoverTable" :data="popoverTableData" highlight-current-row row-key="id" :tree-props="{children: 'childMenus', hasChildren: 'hasChildren'}" style="width: 100%;" @selection-change="handleSelectionChange" @row-click="clickRowHandler">
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="dicName" label="字典名称" />
+          <el-table-column prop="dicCode" label="字典代码" />
+          <el-table-column prop="dicExplain" label="内容说明" />
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { crud } from '@crud/crud'
+import { edit, FetchDoeditIsRepeat } from '@/api/archivesManage/archivesList'
+import { getNoFormatField } from '@/api/category/fileNoFormat'
+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 },
+  mixins: [crud()],
+  props: {
+    isDisabled: {
+      type: Boolean,
+      required: true
+    },
+    formPreviewData: {
+      type: Array,
+      required: true
+    },
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    arcId: {
+      type: String,
+      default: ''
+    },
+    parentsId: {
+      type: String,
+      default: ''
+    },
+    isHasCode: {
+      type: Boolean,
+      required: true
+    },
+    isDraggable: {
+      type: Boolean,
+      default: false
+    },
+    isDesFormType: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      addOrUpdateForm: {},
+      rules: {},
+      popoverTableData: [], // popover - popoverTableData
+      popoverVisible: false, // popover - visible
+      currentFieldName: null, // popover 当前fieldName
+      treeCurrentFiled: null,
+      categoryId: null,
+      setParentsId: null,
+      result: null,
+      autoMatic: null,
+      isEdit: false,
+      // isType: 'category',
+      normalizer(node) {
+        if (node.childMenus == null || node.childMenus === 'null') {
+          delete node.childMenus
+        }
+        return {
+          id: node.dicName,
+          label: node.dicName,
+          children: node.childMenus
+        }
+      }
+    }
+  },
+  watch: {
+    selectedCategory: function(newValue, oldValue) {
+    },
+    arcId: function(newValue, oldValue) {
+    },
+    parentsId: function(newValue, oldValue) {
+    },
+    isDesFormType: function(newValue, oldValue) {
+    },
+    formPreviewData: function() {
+      this.editFormRow()
+      // 区分 门类著录项 和 档案管理
+      if (this.isDesFormType === 'category') {
+        this.FetchNoFormatField(this.selectedCategory.id)
+      }
+    }
+  },
+  created() {
+    this.editFormRow()
+  },
+  mounted() {
+    // if (this.isType !== 'arcives') {
+    //   this.FetchNoFormatField(this.selectedCategory.id)
+    // }
+  },
+  methods: {
+    // 递归查询字典名称对应的字典代码
+    // getNode(tree, dicName) {
+    //   for (let i = 0; i < tree.length; i++) {
+    //     if (tree[i].dicName === dicName) {
+    //       return tree[i]
+    //     } else {
+    //       if (tree[i].childMenus) {
+    //         return this.getNode(tree[i].childMenus, dicName)
+    //       }
+    //     }
+    //   }
+    // },
+    // 处理vue-treeSelect回显出现unknown问题
+    getAutoNameUnknown(name) {
+      if (name.lastIndexOf('unknown') > -1) {
+        // 当treeselect翻译不了值时，name中有id，截取id，去调接口或者字典查询出名字
+        return name.split('(')[0]
+      } else {
+        return name
+      }
+    },
+    getNode(list, dicName) {
+      let data;
+      (list || []).map(item => {
+        if (item.dicName === dicName) {
+          data = [item]
+        } else {
+          const child = this.getNode(item.childMenus, dicName)
+          if (child) {
+            data = child
+          }
+        }
+      })
+      return data
+    },
+    // 自动生成
+    handleAuto() {
+      let string = ''
+      const getAutoFiledVal = []
+      this.autoMatic.forEach(async val => {
+        if (!this.addOrUpdateForm[val.fieldName]) {
+          string += ''
+        } else {
+          const fieldInfo = this.formPreviewData.find(element => element.fieldName === val.fieldName)
+          if (fieldInfo.isInputClass === 'select' || fieldInfo.isInputClass === 'popover') {
+            await FetchFindAllSubsetById({ id: fieldInfo.dictionaryConfigId.id }).then(res => {
+              const option = this.getNode(res, this.addOrUpdateForm[val.fieldName])
+              if (option) {
+                const obj = {}
+                obj.name = val.fieldName
+                obj.val = option[0].dicCode + val.connector
+                obj.sequence = val.sequence
+                // string += '' + option[0].dicCode + val.connector
+                getAutoFiledVal.push(obj)
+              }
+            })
+          } else {
+            const obj = {}
+            obj.name = val.fieldName
+            obj.val = this.addOrUpdateForm[val.fieldName] + val.connector
+            obj.sequence = val.sequence
+            // string += '' + this.addOrUpdateForm[val.fieldName] + val.connector
+            getAutoFiledVal.push(obj)
+          }
+        }
+        // 按照指定顺序排再拼接
+        getAutoFiledVal.sort(this.compare('sequence'))
+        string = getAutoFiledVal.map((item) => item.val).join('')
+
+        this.formPreviewData.map(item => {
+          if (item.isAutomatic) {
+            this.$set(this.addOrUpdateForm, item.fieldName, string)
+          }
+        })
+      })
+    },
+    // 排序
+    compare(property) {
+      return function(a, b) {
+        var value1 = a[property]
+        var value2 = b[property]
+        return value1 - value2
+      }
+    },
+    // 获取档号组成项
+    FetchNoFormatField(categoryId) {
+      getNoFormatField({ categoryId: categoryId }).then(res => {
+        this.autoMatic = res
+        // this.handleAuto()
+      })
+    },
+    // 获取对应字典子集数据
+    getAllSubset(item) {
+      if (item.dictionaryConfigId) {
+        FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => {
+          if (item.isInputClass === 'select') {
+            this.$set(item, 'options', res)
+          } else if (item.isInputClass === 'popover') {
+            this.popoverTableData = 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)
+      }
+
+      if (!item.isAutomatic) {
+        const index = this.autoMatic.findIndex(i => item.fieldName === i.fieldName)
+        if (index !== -1) {
+          this.handleAuto()
+        }
+      }
+    },
+    // tree - open
+    openTree(item) {
+      this.treeCurrentFiled = item
+      this.$set(item, 'options', [])
+      this.getAllSubset(this.treeCurrentFiled)
+    },
+    // tree - select
+    selectTree(val) {
+      this.addOrUpdateForm[this.treeCurrentFiled.fieldName] = val.dicName
+      // this.treeName = val.dicName
+      // 自动重复字段 - 是否重复 - 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)
+      }
+      const index = this.autoMatic.findIndex(i => this.treeCurrentFiled.fieldName === i.fieldName)
+      if (index !== -1) {
+        this.handleAuto()
+      }
+    },
+    // popover - table 单选
+    clickRowHandler(row) {
+      this.$refs.popoverTable.clearSelection()
+      this.$refs.popoverTable.toggleRowSelection(row)
+    },
+    // popover - table 选中得项
+    handleSelectionChange(val) {
+      if (val.length > 0) {
+        this.addOrUpdateForm[this.currentFieldName] = val[0].dicName
+      }
+      this.$refs.popoverTable.clearSelection()
+      this.popoverVisible = false
+
+      const index = this.autoMatic.findIndex(i => this.currentFieldName === i.fieldName)
+      if (index !== -1) {
+        this.handleAuto()
+      }
+    },
+    // popover - 当前选中得
+    handleCurrentFieldName(item) {
+      this.popoverVisible = true
+      this.currentFieldName = item.fieldName
+      this.getAllSubset(item)
+    },
+    // 预览和输入时，自动补零
+    autoAddZero(isFilling, fieldName, value, fillingDigit) {
+      if (isFilling) {
+        this.addOrUpdateForm[fieldName] = value.toString().padStart(fillingDigit, '0').slice(-1 * fillingDigit)
+      }
+    },
+    // 动态生成表单
+    editFormRow() {
+      this.rules = {}
+      this.formPreviewData.map(item => {
+        if (item.isInputClass === 'select') {
+          this.$set(item, 'options', [])
+          this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
+        }
+        if (item.isDefaultValue !== '') {
+          this.$set(this.addOrUpdateForm, item.fieldName, item.isDefaultValue)
+        } else {
+          this.$set(this.addOrUpdateForm, item.fieldName, '')
+          if (item.isInputClass === 'select') {
+            this.$set(this.addOrUpdateForm, item.fieldName, null) // 防止unkonwn
+          }
+        }
+        this.$set(this.rules, item.fieldName, [
+          {
+            required: !!item.isRequired,
+            message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName,
+            trigger: item.isInputClass === 'text' ? 'blur' : 'change'
+          }
+        ])
+      })
+    },
+    // 预览界面排序
+    datadragEnd(event) {
+      // 调换顺序
+      const oldIndex = event.oldIndex // 移动初始位置
+      const newIndex = event.newIndex // 运动终止位置
+      const diff = Math.abs(newIndex - oldIndex) // 插值绝对值
+      const index = this.formPreviewData[oldIndex]
+      if (oldIndex > newIndex) {
+        for (let i = 0; i < diff; i++) {
+          this.formPreviewData[oldIndex - i] = this.formPreviewData[oldIndex - i - 1]
+        }
+        this.formPreviewData[newIndex] = index
+      } else {
+        for (let i = 0; i < diff; i++) {
+          this.formPreviewData[oldIndex + i] = this.formPreviewData[oldIndex + i + 1]
+        }
+        this.formPreviewData[newIndex] = index
+      }
+    },
+    submitForm(formName, categoryId) {
+      // 时间格式化
+      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])
+          }
+        }
+      })
+      if (this.selectedCategory.isType !== 4 || this.selectedCategory.isType !== 3) {
+        this.setParentsId = this.parentsId
+      } else {
+        const parent_id = this.selectedCategory.pid
+        if (parseInt(parent_id) === 0) {
+          this.setParentsId = null
+        } else {
+          this.setParentsId = parent_id
+        }
+      }
+      delete this.addOrUpdateForm.id
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const params = {
+            'id': this.arcId,
+            'categoryId': categoryId,
+            'parentsId': this.setParentsId,
+            'jsonString': JSON.stringify(this.addOrUpdateForm)
+          }
+          console.log(this.addOrUpdateForm)
+          edit(params).then(res => {
+            if (res) {
+              this.$message.success(res)
+              this.$emit('emitTableList')
+              this.crud.refresh()
+              localStorage.setItem('isForm', true)
+              localStorage.removeItem('isDelt')
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    handleClose(done) {
+      this.popoverVisible = false
+      done()
+    }
+  }
+}
+
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.preview-content {
+  padding: 20px 0 0 0 !important;
+  margin-top: 0 !important;
+  border-radius: 4px;
+  border: 1px solid #3a99fd;
+  margin: 0 auto;
+
+  .el-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .el-col {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  ::v-deep .el-input__inner {
+    width: 100%;
+  }
+  ::v-deep .el-input__prefix {
+    text-align: right;
+    right: 5px !important;
+    color: #339cff;
+  }
+  .input-popover {
+    ::v-deep .el-input__suffix {
+      right: 10px;
+      color: #339cff;
+    }
+  }
+  ::v-deep .el-date-editor {
+    width: 196px;
+    .el-input__inner {
+      padding-left: 15px;
+    }
+  }
+  ::v-deep .el-form-item--small .el-form-item__content {
+    line-height: 30px;
+  }
+}
+</style>