条码功能

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

@@ -79,4 +79,13 @@ export function findInCase(params) {
     method: 'get'
   })
 }
-export default { add, edit, del, unpacking, findInCase }
+
+// 批量打印盒数据
+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

@@ -8,7 +8,7 @@
           <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-input v-model="form.barcode" style="width: 370px;" :disabled="crud.status.edit" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">

src/views/components/category/PreviewForm.vue

@@ -48,7 +48,7 @@
       <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-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>
@@ -132,6 +132,7 @@ export default {
       setParentsId: null,
       result: null,
       autoMatic: null,
+      isEdit: false,
       // isType: 'category',
       normalizer(node) {
         if (node.childMenus == null || node.childMenus === 'null') {