修改赋码页面

src/api/TagCodeApi.js

@@ -2,24 +2,24 @@ import BaseCurdApi from './BaseCurdApi'
 
 class TagCodeApi extends BaseCurdApi {
   getQrData = (tagId) => this.api({
-    url: `${this.basePath}/qr/${tagId}`,
+    url: `${this.basePath}/preview/${tagId}`,
     method: 'GET'
   })
 
-  batchPrint = (data) => this.api({
-    url: `${this.basePath}/qr/batch-print`,
+  setCode = (data) => this.api({
+    url: `${this.basePath}/coding`,
     method: 'POST',
     data
   })
 
   print = data => this.api({
-    url: `${this.basePath}/qr/print`,
+    url: `${this.basePath}/send`,
     method: 'POST',
     data
   })
 
   constructor () {
-    super('/tag/code')
+    super('/print/code')
   }
 }
 

src/components/DialogTagCodeSerialDetail.vue

@@ -3,20 +3,18 @@
     :visible.sync="visible"
     :title="`订单详情 ${oData ? oData.orderNo : ''}`"
     append-to-body
-    width="800px"
+    width="1200px"
   >
     <div class="flex column" style="padding-bottom:20px;height:600px">
-      <div class="font-size-14 height-text-color" style="text-align: right;">{{ oData ? oData.number : 0 }}个</div>
       <div class="flex-1 fit-size">
         <el-table
           ref="table"
-          :data="list"
+          :data="formattedList"
           stripe
           border
           height="100%"
           size="small"
           class="custom-el-table-style"
-          @selection-change="onSelectionChange"
         >
           <el-table-column
             type="index"
@@ -26,79 +24,115 @@
             fixed
           ></el-table-column>
           <el-table-column
-            label="流水号"
-            prop="serialNumber"
+            label="商品名称"
+            prop="goodsName"
             header-align="center"
+            min-width="200"
+            align="left"
+          ></el-table-column>
+          <el-table-column
+            label="商品编码"
+            prop="goodsCode"
+            header-align="center"
+            min-width="100"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="流水号范围"
+            prop="formatSerialNumberRange"
+            header-align="center"
+            min-width="150"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="物料编码"
+            prop="materielCode"
+            header-align="center"
+            min-width="100"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="最小包装数量"
+            prop="minimumPackingNumber"
+            header-align="center"
+            min-width="100"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="最小包装单位"
+            prop="minimumPackingUnit"
+            header-align="center"
+            min-width="100"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="标签类型"
+            prop="tagTypeName"
+            header-align="center"
+            min-width="100"
             align="center"
           ></el-table-column>
           <el-table-column
-            label="芯片编码"
-            prop="chipCode"
+            label="数量"
+            prop="number"
             header-align="center"
+            min-width="80"
             align="center"
           ></el-table-column>
+          <el-table-column
+            label="单价（元）"
+            prop="unitPrice"
+            header-align="center"
+            min-width="80"
+            align="right"
+          ></el-table-column>
+          <el-table-column
+            label="费用（元）"
+            prop="amount"
+            header-align="center"
+            min-width="80"
+            align="right"
+          ></el-table-column>
         </el-table>
       </div>
-
-      <my-pagination
-        :total="total"
-        :pagination="pagination"
-        @current-change="currentPageNoChange"
-      />
     </div>
   </el-dialog>
 </template>
 
 <script>
-import BaseCurdList from '@@/utils/BaseCurdList'
-import bindPrototype from '@@/utils/bindPrototype'
+// import BaseCurdList from '@@/utils/BaseCurdList'
+// import bindPrototype from '@@/utils/bindPrototype'
 
-import TagSerial from '@@/entries/TagSerial'
+// import TagSerial from '@@/entries/TagSerial'
 
 export default {
   name: 'DialogTagCodeSerialDetail',
-  extends: BaseCurdList(TagSerial),
+  // extends: BaseCurdList(TagSerial),
   data: () => ({
     visible: false,
-    oData: null
+    oData: null,
+    list: null
   }),
+  computed: {
+    formattedList () {
+      return this.list.map(item => {
+        return {
+          ...item,
+          formattedSerialNumberRange: item.serialNumberRange ? item.serialNumberRange.join('-') : ''
+        }
+      })
+    }
+  },
   methods: {
     open (data) {
       this.oData = data
-      this.pagination.pageNo = 1
       this.visible = true
-      this.loadList()
+      this.list = this.oData && this.oData.details ? this.oData.details : []
     },
     close () {
       this.oData = null
-      this.visible = true
-      this.total = 0
+      this.visible = false
       this.list = Object.freeze([])
-    },
-    loadList () {
-      const { oData } = this
-
-      if (!oData) {
-        return
-      }
-
-      this.$$request(TagSerial.$$api.getPagination, {
-        tagId: this.oData.id
-      }, this.pagination)
-        .then(data => {
-          const { count, list } = data
-          const { pagination } = this
-          const { pageSize } = pagination
-          if (list.length > 0 || pagination.pageNo === 1) {
-            this.total = count
-            this.list = Object.freeze(bindPrototype(data.list, TagSerial))
-            this.afterLoadList()
-            return
-          }
-
-          pagination.pageNo = Math.floor(count / pageSize)
-          this.loadList()
-        }).catch(console.error).finally(() => {})
     }
   }
 }

src/entries/TagCode.js

@@ -1,6 +1,7 @@
 import BaseCurdEntry from './BaseCurdEntry'
 
 import tagCodeApi from '@@/api/TagCodeApi'
+import TagApplyState from './TagApplyState'
 
 export default class TagCode extends BaseCurdEntry {
   orderNo
@@ -23,13 +24,18 @@ export default class TagCode extends BaseCurdEntry {
 
   providerName
 
-  tagTypeName
-
-  number
-
-  amount
-
-  tagApplyStateName
+  tagApplyStateId
+  get tagApplyStateName () {
+    const config = TagCode.$$optionData.TagApplyState
+    if (config) {
+      const option = config.map[this.tagApplyStateId]
+      if (option) {
+        return option[TagApplyState.$$nameProp]
+      }
+    }
+
+    return ''
+  }
 
   operatorName
 
@@ -40,4 +46,11 @@ export default class TagCode extends BaseCurdEntry {
   static get $$api () {
     return tagCodeApi
   }
+
+  static $$optionTargetConfigGroup = [
+    [{
+      Target: TagApplyState
+    }]
+  ]
+  static $$optionData = {}
 }

src/mock/index.js

@@ -105,29 +105,6 @@ const API_BASE_PATH = Constant.REQUEST_PREFIX
 //   data: true
 // })
 
-Mock.mock(/\/tag\/code\/page/, 'post', {
-  type: 'success',
-  data: {
-    'count|10-40': 1,
-    'list|1-20': [{
-      'id|1-20': 1,
-      dataTime: '2024/01/01 00:00:00',
-      orderNo: '123456',
-      expectedReceiptDate: '2024/01/02 00:00:00',
-      serialNumberRange: ['0000001', '000800'],
-      'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
-      'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
-      number: 123,
-      'amount|1-100.1-2': 30,
-      'tagApplyStateName|1': ['待支付', '待发货', '已发货'],
-      operatorName: '操作员',
-      applicantName: '申领人',
-      'unitPrice|1-100.1-2': 10,
-      createTime: '2024/01/01 00:00:00'
-    }]
-  }
-})
-
 // Mock.mock(/\/tag\/serial\/page/, 'post', {
 //   type: 'success',
 //   data: {
@@ -164,28 +141,28 @@ Mock.mock(/\/tag\/code\/qr/, 'get', {
   }
 })
 
-Mock.mock(/\/tag\/code\/page/, 'post', {
-  type: 'success',
-  data: {
-    'count|10-40': 1,
-    'list|1-20': [{
-      'id|1-20': 1,
-      dataTime: '2024/01/01 00:00:00',
-      orderNo: '123456',
-      expectedReceiptDate: '2024/01/02 00:00:00',
-      serialNumberRange: ['0000001', '000800'],
-      'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
-      'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
-      number: 123,
-      'amount|1-100.1-2': 30,
-      'tagApplyStateName|1': ['待支付', '待发货', '已发货'],
-      operatorName: '操作员',
-      applicantName: '申领人',
-      'unitPrice|1-100.1-2': 10,
-      createTime: '2024/01/01 00:00:00'
-    }]
-  }
-})
+// Mock.mock(/\/tag\/code\/page/, 'post', {
+//   type: 'success',
+//   data: {
+//     'count|10-40': 1,
+//     'list|1-20': [{
+//       'id|1-20': 1,
+//       dataTime: '2024/01/01 00:00:00',
+//       orderNo: '123456',
+//       expectedReceiptDate: '2024/01/02 00:00:00',
+//       serialNumberRange: ['0000001', '000800'],
+//       'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
+//       'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
+//       number: 123,
+//       'amount|1-100.1-2': 30,
+//       'tagApplyStateName|1': ['待支付', '待发货', '已发货'],
+//       operatorName: '操作员',
+//       applicantName: '申领人',
+//       'unitPrice|1-100.1-2': 10,
+//       createTime: '2024/01/01 00:00:00'
+//     }]
+//   }
+// })
 
 Mock.mock(/\/print\/queue\/page/, 'post', {
   type: 'success',

src/views/TagCode.vue

@@ -56,6 +56,7 @@
               type="selection"
               width="55"
               align="center"
+              :selectable="tagSelectAble"
               fixed
             ></el-table-column>
             <el-table-column
@@ -73,13 +74,6 @@
               align="center"
               fixed
             ></el-table-column>
-            <el-table-column
-              label="流水号范围"
-              prop="formatSerialNumberRange"
-              min-width="200"
-              header-align="center"
-              align="center"
-            ></el-table-column>
             <el-table-column
               label="申领日期"
               prop="formatDataTime"
@@ -101,20 +95,6 @@
               header-align="center"
               align="left"
             ></el-table-column>
-            <el-table-column
-              label="标签类型"
-              prop="tagTypeName"
-              min-width="150"
-              header-align="center"
-              align="left"
-            ></el-table-column>
-            <el-table-column
-              label="需求数量"
-              prop="number"
-              min-width="85"
-              header-align="center"
-              align="right"
-            ></el-table-column>
             <el-table-column
               label="费用（元）"
               prop="amount"
@@ -145,8 +125,8 @@
               <template v-slot="{ row }">
                 <div class="flex center layout-gap">
                   <edit-button :data="row" :on-click="onOpenDetailEditorBtnClick" icon="el-icon-tickets">详情</edit-button>
-                  <edit-button :data="row" :on-click="onPreviewBtnClick" icon="el-icon-view">预览</edit-button>
-                  <edit-button :data="row" :on-click="onPrintBtnClick" icon="el-icon-view">
+                  <edit-button :data="row" :on-click="onPreviewBtnClick" :disabled="row.tagApplyStateId ==='0'||row.tagApplyStateId ==='1'||row.tagApplyStateId ==='2'" icon="el-icon-view">预览</edit-button>
+                  <edit-button :data="row" :on-click="onPrintBtnClick" :disabled="row.tagApplyStateId !=='3'" icon="el-icon-view">
                     <template #icon>
                       <svg
                         viewBox="0 0 1024 1024"
@@ -188,14 +168,14 @@
             <div class="tag-logo"><img src="@/assets/imgs/logo.png" width="100%" height="100%" /></div>
             <div class="flex column valign-center tag-materiel-info">
               <template v-if="qrData">
-                <div>{{ qrData.materielName }},</div>
-                <div>{{ qrData.number }}</div>
+                <div>{{ qrData.materialName }},</div>
+                <div>{{ qrData.packageNumber }}</div>
               </template>
             </div>
             <div class="flex center tag-provider-name">{{ qrData ? qrData.providerName : '' }}</div>
           </div>
           <div class="tag-qr">
-            <qr-code-view v-if="qrData" :code="qrData.code"></qr-code-view>
+            <qr-code-view v-if="qrData" :code="qrData.qrCode"></qr-code-view>
           </div>
         </div>
       </div>
@@ -217,21 +197,73 @@ export default {
   }),
   methods: {
     onOpenDetailEditorBtnClick (data) {
-      this.onOpenEditorBtnClick(data, true)
+      this.$$request(TagCode.$$api.getDetail, data, this)
+        .then(data => {
+          if (data) {
+            this.$refs.editor.open(data)
+          }
+        }).catch(console.error).finally(() => {})
     },
     onCodeBtnClick () {
+      const { selectedList } = this
+      const { $$idProp } = this
 
+      const ids = selectedList
+        .filter(data => data.tagApplyStateId === '2')
+        .map(data => data[$$idProp])
+
+      this.$$request(this.$$api.setCode, ids).then((flag) => {
+        if (flag) {
+          this.$notify({
+            title: '成功',
+            message: '操作成功',
+            type: 'success',
+            position: 'bottom-right'
+          })
+          this.loadList()
+        }
+      }).catch(console.error).finally(() => {})
     },
     onBatchPrintBtnClick () {
+      const { selectedList } = this
+      const { $$idProp } = this
 
+      const ids = selectedList
+        .filter(data => data.tagApplyStateId === '3')
+        .map(data => data[$$idProp])
+
+      this.$$request(this.$$api.print, ids).then((flag) => {
+        if (flag) {
+          this.$notify({
+            title: '成功',
+            message: '操作成功',
+            type: 'success',
+            position: 'bottom-right'
+          })
+        }
+      }).catch(console.error).finally(() => {})
     },
     onPreviewBtnClick (data) {
       this.$$request(this.$$api.getQrData, data[this.$$Target.$$idProp]).then(data => {
         this.qrData = Object.freeze(data)
       }).catch(console.error).finally(() => {})
     },
-    onPrintBtnClick () {
-
+    onPrintBtnClick (data) {
+      const ids = []
+      ids.push(data[this.$$Target.$$idProp])
+      this.$$request(this.$$api.print, ids).then((flag) => {
+        if (flag) {
+          this.$notify({
+            title: '成功',
+            message: '操作成功',
+            type: 'success',
+            position: 'bottom-right'
+          })
+        }
+      }).catch(console.error).finally(() => {})
+    },
+    tagSelectAble (row) {
+      return row.tagApplyStateId === '2' || row.tagApplyStateId === '3'
     }
   }
 }