提交

src/assets/base.scss

@@ -195,6 +195,52 @@ input {
   text-overflow: ellipsis;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.origin-table {
+  --border-color: #999999;
+  width: 100%;
+
+  > :first-child,
+  colgroup + * {
+    > tr:first-child {
+      th,
+      td {
+        border-top: 1px solid var(--border-color);
+      }
+    }
+  }
+
+  th,
+  td {
+    border: {
+      right: 1px solid var(--border-color);
+      bottom: 1px solid var(--border-color);
+    }
+
+    &:first-child {
+      border: {
+        left: 1px solid var(--border-color);
+      }
+    }
+  }
+
+  .cell {
+    min-height: 40px;
+    padding: 8px 10px;
+  }
+
+  tr {
+    &:not(:first-child) {
+      td {
+        border-top: 0;
+      }
+    }
+  }
+}
+
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;

src/assets/el-style.scss

@@ -64,9 +64,16 @@
   }
 
   .el-table__body {
-    tr.hover-row>td.el-table__cell {
-      color: var(--table-row-hover-color);
-      background: var(--table-row-hover-bg);
+    tr {
+      &.hover-row>td.el-table__cell {
+        color: var(--table-row-hover-color);
+        background: var(--table-row-hover-bg) !important;
+      }
+
+      &.current-row>td.el-table__cell {
+        color: var(--table-row-highlight-color);
+        background: var(--table-row-highlight-bg) !important;
+      }
     }
   }
 

src/assets/main.scss

@@ -20,8 +20,10 @@
   --custom-plain-botton-bg: #FFFFFF;
 
   --table-striped-bg: #E7F1FA;
-  --table-row-hover-bg: #99C9F0;
+  --table-row-hover-bg: #99C9F0;;
   // --table-row-hover-color: #FFFFFF;
+  --table-row-highlight-bg: #1A85DE;
+  --table-row-highlight-color: #FFFFFF
 }
 
 .flex {

src/components/DialogOrderExport.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    append-to-body
+    width="1000px"
+  >
+    <div class="overflow-auto" style="height:500px;margin:0 -20px">
+      <div class="flex column layout-gap" style="min-height:100%;padding:20px;color:#000000;">
+        <div class="text-center" style="font-size:16px;font-weight:600;">标签需求订单</div>
+        <div class="flex valign-center">
+          <div>订单编号：</div>
+          <VueBarcode v-if="data" :value="data.orderNo" format="CODE128" :height="40" :font-size="14"></VueBarcode>
+        </div>
+        <div style="width:100%;">
+          <table cellspacing="0" cellpadding="0" border="0" class="origin-table">
+            <colgroup>
+              <col />
+              <col width="250" />
+              <col />
+              <col />
+              <col />
+              <col />
+              <col />
+              <col />
+            </colgroup>
+            <thead>
+              <tr>
+                <th><div class="cell">序号</div></th>
+                <th><div class="cell">供应商名称</div></th>
+                <th><div class="cell">申领人员</div></th>
+                <th><div class="cell">标签类型</div></th>
+                <th><div class="cell">创建日期</div></th>
+                <th><div class="cell">需求数量</div></th>
+                <th><div class="cell">单价（元）</div></th>
+                <th><div class="cell">小计（元）</div></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-if="data">
+                <td align="center"><div class="cell">{{ 1 }}</div></td>
+                <td align="center"><div class="cell">{{ data.providerName }}</div></td>
+                <td align="center"><div class="cell">{{ data.applicantName }}</div></td>
+                <td align="center"><div class="cell">{{ data. tagTypeName}}</div></td>
+                <td align="center"><div class="cell">{{ data.formatCreateTime }}</div></td>
+                <td align="center"><div class="cell">{{ data.number }}</div></td>
+                <td align="center"><div class="cell">{{ data.unitPrice }}</div></td>
+                <td align="center"><div class="cell">{{ data.subtotal }}</div></td>
+              </tr>
+              <tr>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+                <td><div class="cell"></div></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="flex layout-gap" style="padding-top:20px;">
+          <div class="flex flex-1" style="gap:5px">
+            <label>制单人：</label>
+            <div class="flex-1 fit-size"></div>
+          </div>
+          <div class="flex flex-1" style="gap:5px">
+            <label>日期：</label>
+            <div class="flex-1 fit-size"></div>
+          </div>
+          <div class="flex flex-1" style="gap:5px">
+            <label>需求单位（签章）：</label>
+            <div class="flex-1 fit-size"></div>
+          </div>
+          <div class="flex" style="gap:5px">
+            <label>日期：</label>
+            <div style="width:100px"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex valign-center align-right">
+        <el-button
+          plain
+          icon="el-icon-download"
+          type="primary"
+          size="small"
+          class="custom-plain-button"
+          @click="onExportPdfBtnClick"
+        >导出</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import VueBarcode from 'vue-barcode'
+
+export default {
+  name: 'DialogOrderExport',
+  components: {
+    VueBarcode
+  },
+  data: () => ({
+    visible: false,
+    data: null
+  }),
+  methods: {
+    open (data) {
+      this.data = data
+      this.visible = true
+    },
+    onExportPdfBtnClick () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/entries/TagApply.js

@@ -42,6 +42,19 @@ export default class TagApply extends BaseCurdEntry {
 
   operatorName
 
+  applicantName
+
+  unitPrice
+
+  createTime
+  get formatCreateTime () {
+    return new Date(this.createTime).format('YYYY-MM-DD')
+  }
+
+  get subtotal () {
+    return this.amount
+  }
+
   static get $$api () {
     return tagApplyApi
   }

src/mock/index.js

@@ -26,7 +26,10 @@ Mock.mock(/\/tag\/apply\/page/, 'get', {
       number: 123,
       'amount|1-100.1-2': 30,
       'tagApplyStateId|0-2': 0,
-      operatorName: '操作员'
+      operatorName: '操作员',
+      applicantName: '申领人',
+      'unitPrice|1-100.1-2': 10,
+      createTime: '2024/01/01 00:00:00'
     }]
   }
 })

src/utils/BaseCurdList.js

@@ -13,10 +13,14 @@ export default (target, hasPagination = true) => ({
       pageSize: 20
     },
     data: Object.freeze([]),
-    total: 0
+    total: 0,
+    selectedData: null,
+    selectedList: Object.freeze([])
   }),
   methods: {
     afterLoadList () {
+      this.selectedList = Object.freeze([])
+      this.selectedData = null
       setTimeout(() => {
         this.$refs.table && this.$refs.table.doLayout()
       }, 0)
@@ -46,6 +50,12 @@ export default (target, hasPagination = true) => ({
       this.pagination.pageNo = 1
       this.loadList()
     },
+    onSelectionChange (selection) {
+      this.selectedList = Object.freeze(selection)
+    },
+    onRowClick (data) {
+      this.selectedData = data
+    },
     getOptions (optionTargetConfigs, optionGroup) {
       return Promise.all(
         optionTargetConfigs.map(

src/views/TagApply.vue

@@ -63,12 +63,15 @@
       <div class="flex valign-center">
         <el-button
           plain
+          icon="el-icon-upload2"
           type="primary"
           size="small"
           class="custom-plain-button"
           @click="onImportDataBtnClick"
         >导入数据</el-button>
         <el-button
+          :disabled="!selectedData"
+          icon="el-icon-download"
           plain
           type="primary"
           size="small"
@@ -76,6 +79,7 @@
           @click="onExportOrderBtnClick"
         >导出订单</el-button>
         <el-button
+          icon="el-icon-download"
           plain
           type="primary"
           size="small"
@@ -83,6 +87,8 @@
           @click="onExportTemplateBtnClick"
         >下载模版</el-button>
         <el-button
+          :disabled="selectedList.length === 0"
+          icon="el-icon-check"
           plain
           type="primary"
           size="small"
@@ -98,9 +104,12 @@
           :data="data"
           stripe
           border
+          highlight-current-row
           height="100%"
           size="small"
           class="custom-el-table-style"
+          @selection-change="onSelectionChange"
+          @row-click="onRowClick"
         >
           <el-table-column
             type="selection"
@@ -185,7 +194,6 @@
         <div><span>总计</span><span style="color:var(--height-text-color);">（{{ total }}）条</span></div>
 
         <div class="flex align-right flex-1 fit-size">
-          <!-- <VueBarcode value="2013010000" format="CODE128"></VueBarcode> -->
           <el-pagination
             :current-page.sync="pagination.pageNo"
             :page-size="pagination.pageSize"
@@ -199,6 +207,8 @@
       </div>
     </div>
   </el-card>
+
+  <dialog-order-export ref="orderExportDialog"></dialog-order-export>
 </div>
 </template>
 
@@ -206,20 +216,15 @@
 import BaseCurdList from '@/utils/BaseCurdList'
 import TagApply from '@/entries/TagApply'
 
-import VueBarcode from 'vue-barcode'
-
 export default {
   name: 'TagApply',
   extends: BaseCurdList(TagApply),
-  components: {
-    VueBarcode
-  },
   methods: {
     onImportDataBtnClick () {
 
     },
     onExportOrderBtnClick () {
-
+      this.$refs.orderExportDialog.open(this.selectedData)
     },
     onExportTemplateBtnClick () {