提交

config/index.js

@@ -10,7 +10,11 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        target: 'http://192.168.1.4:7003/',
+      }
+    },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST

src/api/CurdApi.js → src/api/BaseCurdApi.js

@@ -1,4 +1,5 @@
 import { api } from '@/utils/api'
+import QsUtil from '@/utils/QsUtil'
 
 export default class CurdApi {
   basePath
@@ -12,9 +13,12 @@ export default class CurdApi {
   })
 
   getPagination = (query, pagination) => api({
-    url: `${this.basePath}/page`,
+    url: `${this.basePath}/page${QsUtil.stringify({
+      offset: (pagination.pageNo - 1) * pagination.pageSize,
+      limit: pagination.pageSize
+    })}`,
     method: 'POST',
-    data: Object.assign({}, query, pagination)
+    data: query
   })
 
   getDetail = (data, Target) => api({

src/api/TagApplyApi.js

@@ -1,6 +1,6 @@
-import CurdApi from './CurdApi'
+import BaseCurdApi from './BaseCurdApi'
 
-class TagApplyApi extends CurdApi {
+class TagApplyApi extends BaseCurdApi {
   importData = (data) => {
     const formData = new FormData()
     formData.append('file', data.file)

src/api/TagApplyStateApi.js

@@ -1,3 +1,3 @@
-import CurdApi from './CurdApi'
+import BaseCurdApi from './BaseCurdApi'
 
-export default new CurdApi('/tag/apply/state')
+export default new BaseCurdApi('/tag/apply/state')

src/api/TagPurchaseApi.js

@@ -0,0 +1,9 @@
+import BaseCurdApi from './BaseCurdApi'
+
+class TagPurchaseApi extends BaseCurdApi {
+  constructor () {
+    super('/tag/purchase')
+  }
+}
+
+export default new TagPurchaseApi()

src/api/TagPurchaseStateApi.js

@@ -0,0 +1,3 @@
+import BaseCurdApi from './BaseCurdApi'
+
+export default new BaseCurdApi('/tag/purchase/state')

src/api/TagTypeApi.js

@@ -0,0 +1,3 @@
+import BaseCurdApi from './BaseCurdApi'
+
+export default new BaseCurdApi('/tag/type')

src/assets/base.scss

@@ -158,6 +158,10 @@ body {
   text-align: left;
 }
 
+.text-right {
+  text-align: right;
+}
+
 ul {
   list-style: none;
 }

src/assets/el-style.scss

@@ -5,7 +5,7 @@
 }
 
 .el-button {
-  min-width: 106px;
+  // min-width: 106px;
 
   &.el-button--primary {
     background-color: var(--brand-color);
@@ -73,6 +73,12 @@
       &.current-row>td.el-table__cell {
         color: var(--table-row-highlight-color);
         background: var(--table-row-highlight-bg) !important;
+
+        .table-operator-item {
+          > span {
+            color: var(--table-row-highlight-color)
+          }
+        }
       }
     }
   }
@@ -86,3 +92,48 @@
     border-color: var(--table-border-color) !important;
   }
 }
+
+.filter-card {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.el-form-item {
+  margin-bottom: var(--layout-gap);
+}
+
+.el-dialog__body {
+  padding: calc(var(--layout-gap) / 2) var(--layout-gap) var(--layout-gap) !important;
+}
+
+.el-dialog__footer {
+  padding-top: 0 !important;
+}
+
+.el-dialog__title {
+  font-size: 16px !important;
+}
+
+.form-collapse {
+  border: 0 !important;
+}
+.form-collapse-item {
+  .el-collapse-item__header {
+    height: 30px;
+    padding: 0 10px 0 20px;
+    color: var(--color-bg-color);
+    background: var(--brand-color);
+  }
+
+  .el-collapse-item__wrap {
+    border: 0;
+  }
+
+  .el-collapse-item__content {
+    padding: {
+      top: var(--layout-gap);
+      bottom: 0;
+    }
+  }
+}

src/assets/main.scss

@@ -6,6 +6,7 @@
 
   --layout-bg: #EBECF0;
   --brand-color: #0078DB;
+  --color-bg-color: #FFFFFF;
   --brand-hover-color: var(--height-text-color);
   --brand-active-color: var(--brand-color);
   --brand-border-color: #3393E2;
@@ -14,6 +15,7 @@
   --error-color: #F2323F;
   --tip-color: #FCB017;
   --link-color: #2D4EF5;
+  --desc-color: #BDBDBC;
 
   --layout-gap: 20px;
 
@@ -23,7 +25,9 @@
   --table-row-hover-bg: #99C9F0;;
   // --table-row-hover-color: #FFFFFF;
   --table-row-highlight-bg: #1A85DE;
-  --table-row-highlight-color: #FFFFFF
+  --table-row-highlight-color: #FFFFFF;
+
+  --dialog-footer-border-color: #E5E9F0;
 }
 
 .flex {
@@ -31,3 +35,32 @@
     gap: var(--layout-gap);
   }
 }
+
+.table-operator-item {
+  gap: 2px;
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    > span {
+      color: var(--brand-border-color);
+    }
+  }
+
+  > i {
+    color: #BDBDBC
+  }
+
+  > span {
+    color: var(--height-text-color)
+  }
+}
+
+.filter-button {
+  min-width: 106px;
+}
+
+.dialog-footer {
+  padding-top: var(--layout-gap);
+  border-top: 1px solid var(--dialog-footer-border-color);
+}

src/components/DialogImport.vue

@@ -29,15 +29,17 @@
     </el-form>
 
     <template #footer>
-      <div class="flex valign-center align-right">
+      <div class="flex center dialog-footer">
+        <el-button
+          size="mini"
+          @click="onCloseBtnClick"
+        >取消</el-button>
+
         <el-button
-          plain
-          icon="el-icon-upload"
           type="primary"
-          size="small"
-          class="custom-plain-button"
+          size="mini"
           @click="onImportDataBtnClick"
-        >导入数据</el-button>
+        >确定</el-button>
       </div>
     </template>
   </el-dialog>
@@ -91,13 +93,19 @@ export default {
               position: 'bottom-right'
             })
 
-            this.$refs.upload.clearFiles()
-            this.uploadData.file = null
-            this.visible = false
+            this.close()
             this.$emit('imported')
           }
         }).catch(console.error).finally(() => {})
       })
+    },
+    close () {
+      this.$refs.upload.clearFiles()
+      this.uploadData.file = null
+      this.visible = false
+    },
+    onCloseBtnClick () {
+      this.close()
     }
   }
 }

src/components/DialogOrderExport.vue

@@ -79,13 +79,15 @@
     </pdf-exporter>
 
     <template #footer>
-      <div class="flex valign-center align-right">
+      <div class="flex center dialog-footer">
+        <el-button
+          size="mini"
+          @click="onCloseBtnClick"
+        >取消</el-button>
+
         <el-button
-          plain
-          icon="el-icon-download"
           type="primary"
-          size="small"
-          class="custom-plain-button"
+          size="mini"
           @click="onExportPdfBtnClick"
         >导出</el-button>
       </div>
@@ -110,9 +112,16 @@ export default {
       this.data = data
       this.visible = true
     },
-    onExportPdfBtnClick () {
+    async onExportPdfBtnClick () {
       const { data } = this
-      this.$refs.pdfExporter.export(`标签需求订单_${data.orderNo}_${data.providerName}_${data.tagTypeName}`)
+      await this.$refs.pdfExporter.export(`标签需求订单_${data.orderNo}_${data.providerName}_${data.tagTypeName}`)
+      this.close()
+    },
+    close () {
+      this.visible = false
+    },
+    onCloseBtnClick () {
+      this.close()
     }
   }
 }

src/components/DialogTagPurchase.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="`${operatorType.name}采购`"
+    append-to-body
+    width="800"
+  >
+    <el-form
+      ref="form"
+      :model="data"
+      size="mini"
+    >
+      <el-collapse v-model="activeCollapseName" class="flex column layout-gap form-collapse">
+        <el-collapse-item title="采购信息" name="1" class="form-collapse-item">
+          1
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+
+    <template #footer>
+      <div class="flex center dialog-footer">
+        <el-button
+          size="mini"
+          @click="onCloseBtnClick"
+        >取消</el-button>
+
+        <el-button
+          type="primary"
+          size="mini"
+          @click="onSaveBtnClick"
+        >确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import BaseCurdEditor from '@/utils/BaseCurdEditor'
+import TagPurchase from '@/entries/TagPurchase'
+
+export default {
+  name: 'DialogTagPurchase',
+  extends: BaseCurdEditor(TagPurchase),
+  props: {
+    optionGroup: {
+      required: true,
+      type: Object
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/components/EditButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="table-operator-item flex valign-center" @click="onClick">
+    <i class="el-icon-edit"></i><span class="">编辑</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditButton',
+  props: {
+    data: {
+      required: true,
+      type: Object
+    },
+    onClick: {
+      required: true,
+      type: Function
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/components/MyPagination.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex valign-center layout-gap font-size-12">
+    <div><span>总计</span><span style="color:var(--height-text-color);">（{{ total }}）条</span></div>
+
+    <div class="flex align-right flex-1 fit-size">
+      <el-pagination
+        :current-page.sync="pagination.pageNo"
+        :page-size="pagination.pageSize"
+        :total="total"
+        layout="prev, pager, next"
+        size="mini"
+        @current-change="currentPageNoChange"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyPagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    pagination: {
+      required: true,
+      type: Object
+    }
+  },
+  methods: {
+    currentPageNoChange (...args) {
+      this.$emit('current-change', ...args)
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/entries/TagApply.js

@@ -29,11 +29,11 @@ export default class TagApply extends BaseCurdEntry {
 
   tagApplyStateId
   get tagApplyStateName () {
-    const tagApplyStateConfig = TagApply.$$optionData.TagApplyState
-    if (tagApplyStateConfig) {
-      const tagApplyState = tagApplyStateConfig.map[this.tagApplyStateId]
-      if (tagApplyState) {
-        return tagApplyState[TagApplyState.$$nameProp]
+    const config = TagApply.$$optionData.TagApplyState
+    if (config) {
+      const option = config.map[this.tagApplyStateId]
+      if (option) {
+        return option[TagApplyState.$$nameProp]
       }
     }
 

src/entries/TagApplyState.js

@@ -2,10 +2,6 @@ import BaseCurdEntry from './BaseCurdEntry'
 import tagApplyStateApi from '@/api/TagApplyStateApi'
 
 export default class TagApplyState extends BaseCurdEntry {
-  static get $$api () {
-    return tagApplyStateApi
-  }
-
   id
 
   name
@@ -16,4 +12,8 @@ export default class TagApplyState extends BaseCurdEntry {
     this.id = id
     this.name = name
   }
+
+  static get $$api () {
+    return tagApplyStateApi
+  }
 }

src/entries/TagPurchase.js

@@ -0,0 +1,84 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import DataTimeRange from '@/utils/DataTimeRange'
+import TagType from './TagType'
+import TagPurchaseState from './TagPurchaseState'
+
+import tagPurchaseApi from '@/api/TagPurchaseApi'
+
+export default class TagPurchase extends BaseCurdEntry {
+  id
+
+  dataTime
+  get formatDataTime () {
+    return new Date(this.dataTime).format('YYYY-MM-DD')
+  }
+
+  orderNo
+
+  tagTypeId
+  get tagTypeName () {
+    const config = TagPurchase.$$optionData.TagType
+    if (config) {
+      const option = config.map[this.tagTypeId]
+      if (option) {
+        return option[TagType.$$nameProp]
+      }
+    }
+
+    return ''
+  }
+
+  number
+
+  amount
+
+  buyerName
+
+  receiveDate
+  get formatReceiveDate () {
+    return new Date(this.receiveDate).format('YYYY-MM-DD')
+  }
+
+  tagPurchaseStateId
+  get tagPurchaseStateName () {
+    const config = TagPurchase.$$optionData.TagPurchaseState
+    if (config) {
+      const option = config.map[this.tagPurchaseStateId]
+      if (option) {
+        return option[TagPurchaseState.$$nameProp]
+      }
+    }
+
+    return ''
+  }
+
+  static get $$api () {
+    return tagPurchaseApi
+  }
+
+  static $$getQuery = () => ({
+    ...(new DataTimeRange({
+      unit: 'Date',
+      diff: 7,
+      offset: 0
+    })),
+    tagPurchaseStateId: '',
+    order: [['dataTime', 'DESC']]
+  })
+
+  static $$optionTargetConfigGroup = [
+    [{
+      target: TagType
+    }, {
+      target: TagPurchaseState,
+      setQuery: (options, query, Target) => {
+        const [ option ] = options
+        if (option) {
+          query.tagPurchaseStateId = option[Target.$$idProp]
+        }
+      }
+    }]
+  ]
+
+  static $$optionData = {}
+}

src/entries/TagPurchaseState.js

@@ -0,0 +1,19 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import tagPurchaseStateApi from '@/api/TagPurchaseStateApi'
+
+export default class TagPurchaseState extends BaseCurdEntry {
+  id
+
+  name
+
+  constructor (id, name) {
+    super()
+
+    this.id = id
+    this.name = name
+  }
+
+  static get $$api () {
+    return tagPurchaseStateApi
+  }
+}

src/entries/TagType.js

@@ -0,0 +1,19 @@
+import BaseCurdEntry from './BaseCurdEntry'
+import tagTypeApi from '@/api/TagTypeApi'
+
+export default class TagType extends BaseCurdEntry {
+  id
+
+  name
+
+  constructor (id, name) {
+    super()
+
+    this.id = id
+    this.name = name
+  }
+
+  static get $$api () {
+    return tagTypeApi
+  }
+}

src/mock/index.js

@@ -1,35 +1,72 @@
 import Mock from 'mockjs'
-import TagApplyState from '@/entries/TagApplyState'
+// import TagApplyState from '@/entries/TagApplyState'
+import TagType from '@/entries/TagType'
+import TagPurchaseState from '@/entries/TagPurchaseState'
 
 const API_BASE_PATH = process.env.API_BASE_PATH
 
-Mock.mock(`${API_BASE_PATH}/tag/apply/state/list`, 'post', {
-  code: 200,
+// Mock.mock(`${API_BASE_PATH}/tag/apply/state/list`, 'post', {
+//   type: 'success',
+//   data: [
+//     new TagApplyState(0, '待支付'),
+//     new TagApplyState(1, '待发货'),
+//     new TagApplyState(2, '已发货')
+//   ]
+// })
+
+// Mock.mock(/\/tag\/apply\/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',
+//       'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
+//       'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
+//       number: 123,
+//       'amount|1-100.1-2': 30,
+//       'tagApplyStateId|0-2': 0,
+//       operatorName: '操作员',
+//       applicantName: '申领人',
+//       'unitPrice|1-100.1-2': 10,
+//       createTime: '2024/01/01 00:00:00'
+//     }]
+//   }
+// })
+
+Mock.mock(`${API_BASE_PATH}/tag/type/list`, 'post', {
+  type: 'success',
+  data: [
+    new TagType(1, '高性能不干胶标签'),
+    new TagType(2, '柔性抗金属标签'),
+    new TagType(3, '扎带标签')
+  ]
+})
+
+Mock.mock(`${API_BASE_PATH}/tag/purchase/state/list`, 'post', {
+  type: 'success',
   data: [
-    new TagApplyState(0, '待支付'),
-    new TagApplyState(1, '待发货'),
-    new TagApplyState(2, '已发货')
+    new TagPurchaseState(1, '新建'),
+    new TagPurchaseState(2, '完成')
   ]
 })
 
-Mock.mock(/\/tag\/apply\/page/, 'post', {
-  code: 200,
+Mock.mock(/\/tag\/purchase\/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',
-      'providerName|+1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
-      'tagTypeName|+1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
+      'tagTypeId|1': [1, 2, 3],
       number: 123,
       'amount|1-100.1-2': 30,
-      'tagApplyStateId|0-2': 0,
-      operatorName: '操作员',
-      applicantName: '申领人',
-      'unitPrice|1-100.1-2': 10,
-      createTime: '2024/01/01 00:00:00'
+      buyerName: '采购者',
+      receiveDate: '2024/01/02 00:00:00',
+      'tagPurchaseStateId|1-2': 1
     }]
   }
 })

src/router/index.js

@@ -15,10 +15,18 @@ export default new Router({
         path: '/page-in-src/tag-apply',
         name: 'OrderForTag',
         meta: {
-          title: '申领计单',
+          title: '申领订单',
           permission: 'isAuthenticated'
         },
         component: () => import('@/views/TagApply.vue')
+      }, {
+        path: '/page-in-src/tag-purchase',
+        name: 'PurchaseForTag',
+        meta: {
+          title: '采购订单',
+          permission: 'isAuthenticated'
+        },
+        component: () => import('@/views/TagPurchase.vue')
       }]
     }
   ]

src/utils/BaseCurdEditor.js

@@ -20,7 +20,8 @@ export default (Target) => ({
     visible: false,
     data: null,
     operatorTypeId: 1,
-    refFormName: 'form'
+    refFormName: 'form',
+    activeCollapseName: '1'
   }),
   computed: {
     operatorType () {

src/utils/BaseCurdList.js

@@ -94,7 +94,7 @@ export default (Target, hasPagination = true) => ({
     },
     onDeleteBtnClick (data) {
       const name = this[this.$$nameProp]
-      this.$confirm(`此操作将永久删除${name ? `'${name}'` : '该记录'}, 是否继续？`, '确认', {
+      this.$confirm(`此操作将删除${name ? `'${name}'` : '该记录'}, 是否继续？`, '确认', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         confirmButtonClass: 'confirm-dialog-confirm-btn',
@@ -111,11 +111,13 @@ export default (Target, hasPagination = true) => ({
       return this.$refs[this.editorName]
     },
     getOptions (optionTargetConfigs, optionGroup) {
+      const { query } = this
       return Promise.all(
         optionTargetConfigs.map(
           optionTargetConfig => {
             const optionTarget = optionTargetConfig.target
             return this.$$request(optionTarget.$$api.getList, typeof optionTargetConfig.getQuery === 'function' ? optionTargetConfig.getQuery(optionGroup) : undefined).then(options => {
+              options = bindPrototype(options, optionTarget)
               optionGroup[optionTarget.name] = {
                 list: options,
                 map: MapBuilder.getObjectMap(options, optionTarget.$$idProp),
@@ -123,7 +125,7 @@ export default (Target, hasPagination = true) => ({
               }
 
               const { setQuery } = optionTargetConfig
-              typeof setQuery === 'function' && setQuery(options)
+              typeof setQuery === 'function' && setQuery(options, query, optionTarget)
             })
           })
       )

src/utils/api.js

@@ -47,12 +47,12 @@ request.interceptors.response.use(response => new Promise((resolve, reject) => {
     return reject(new AjaxError('数据格式不正确', 30000))
   }
 
-  const { code } = data
-  if (code >= 200 && code < 300) {
+  const { type } = data
+  if (type === 'success') {
     return resolve(data.data)
   }
 
-  return reject(new AjaxError(data.msg, code))
+  return reject(new AjaxError(data.msg, 500))
 }), error => {
   if (error.message === REQUEST_CANCEL) {
     return

src/views/TagApply.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="wrapper flex column layout-gap">
-  <el-card shadow="hover">
+  <el-card shadow="hover" class="filter-card">
     <el-form label-width="80px">
       <el-row :gutter="$$Constant.LAYOUT_GAP">
         <el-col :span="8">
@@ -34,10 +34,10 @@
               <el-option label="全部" value=""></el-option>
               <template v-if="optionGroup.TagApplyState">
                 <el-option
-                  v-for="tagApplyState in optionGroup.TagApplyState.list"
-                  :key="tagApplyState.id"
-                  :value="tagApplyState.id"
-                  :label="tagApplyState.name"
+                  v-for="option in optionGroup.TagApplyState.list"
+                  :key="option.id"
+                  :value="option.id"
+                  :label="option.name"
                 ></el-option>
               </template>
             </el-select>
@@ -45,10 +45,12 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="$$Constant.LAYOUT_GAP">
+      <el-row :gutter="$$Constant.LAYOUT_GAP" :style="{
+        'margin-top': `${$$Constant.LAYOUT_GAP}px`
+      }">
         <el-col :span="24">
           <div class="flex align-right">
-            <el-button type="primary" @click="onSearchBtnClick">查询</el-button>
+            <el-button type="primary" class="filter-button" @click="onSearchBtnClick">查询</el-button>
           </div>
         </el-col>
       </el-row>
@@ -130,11 +132,12 @@
             align="center"
             min-width="100"
             header-align="center"
+            fixed
           ></el-table-column>
           <el-table-column
             label="订单编号"
             prop="orderNo"
-            min-width="90"
+            min-width="120"
             header-align="center"
             align="center"
           ></el-table-column>
@@ -164,7 +167,7 @@
             prop="number"
             min-width="85"
             header-align="center"
-            align="center"
+            align="right"
           ></el-table-column>
           <el-table-column
             label="费用（元）"
@@ -190,21 +193,11 @@
         </el-table>
       </div>
 
-      <div class="flex valign-center layout-gap font-size-12">
-        <div><span>总计</span><span style="color:var(--height-text-color);">（{{ total }}）条</span></div>
-
-        <div class="flex align-right flex-1 fit-size">
-          <el-pagination
-            :current-page.sync="pagination.pageNo"
-            :page-size="pagination.pageSize"
-            :total="total"
-            layout="prev, pager, next"
-            size="mini"
-            @current-change="currentPageNoChange"
-          >
-          </el-pagination>
-        </div>
-      </div>
+      <my-pagination
+        :total="total"
+        :pagination="pagination"
+        @current-change="currentPageNoChange"
+      />
     </div>
   </el-card>
 

src/views/TagPurchase.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="wrapper flex column layout-gap">
+    <el-card shadow="hover" class="filter-card">
+      <el-form label-width="100px">
+        <el-row :gutter="$$Constant.LAYOUT_GAP">
+          <el-col :span="8">
+            <el-form-item label="采购日期范围">
+              <data-time-query
+                :query="query"
+                style="width:100%"
+                @change="onSearchBtnClick"
+              ></data-time-query>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="采购订单状态">
+              <el-select
+                v-model="query.tagPurchaseStateId"
+                style="width:100%"
+                @change="onSearchBtnClick"
+              >
+                <template v-if="optionGroup.TagPurchaseState">
+                  <el-option
+                    v-for="option in optionGroup.TagPurchaseState.list"
+                    :key="option.id"
+                    :value="option.id"
+                    :label="option.name"
+                  ></el-option>
+                </template>
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8" class="text-right">
+            <el-button
+              plain
+              class="filter-button"
+            >重置</el-button>
+            <el-button
+              type="primary"
+              class="filter-button"
+              @click="onSearchBtnClick"
+            >查询</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <el-card
+      shadow="hover"
+      class="z-card flex column flex-1 fit-size"
+    >
+      <div class="wrapper flex column layout-gap">
+        <div class="flex valign-center">
+          <el-button
+            plain
+            icon="el-icon-plus"
+            type="primary"
+            size="small"
+            class="custom-plain-button"
+            @click="onOpenEditorBtnClick"
+          >新建采购</el-button>
+
+          <el-button
+            plain
+            icon="el-icon-finished"
+            type="primary"
+            size="small"
+            class="custom-plain-button"
+            @click="onInStorageBtnClick"
+          >已入库</el-button>
+        </div>
+
+        <div class="flex-1 fit-size">
+          <el-table
+            ref="table"
+            :data="list"
+            stripe
+            border
+            highlight-current-row
+            height="100%"
+            size="small"
+            class="custom-el-table-style"
+            @selection-change="onSelectionChange"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+              align="center"
+              fixed
+            ></el-table-column>
+            <el-table-column
+              type="index"
+              label="序号"
+              width="60"
+              align="center"
+              fixed
+            ></el-table-column>
+            <el-table-column
+              label="采购日期"
+              prop="formatDataTime"
+              align="center"
+              min-width="100"
+              header-align="center"
+              fixed
+            ></el-table-column>
+            <el-table-column
+              label="采购订单编号"
+              prop="orderNo"
+              min-width="120"
+              header-align="center"
+              align="center"
+            ></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="106"
+              header-align="center"
+              align="right"
+            ></el-table-column>
+            <el-table-column
+              label="总价（元）"
+              prop="amount"
+              min-width="84"
+              header-align="center"
+              align="right"
+            ></el-table-column>
+            <el-table-column
+              label="采购人员"
+              prop="buyerName"
+              min-width="85"
+              header-align="center"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="收货日期"
+              prop="formatReceiveDate"
+              align="center"
+              min-width="100"
+              header-align="center"
+            ></el-table-column>
+            <el-table-column
+              label="采购订单状态"
+              prop="tagPurchaseStateName"
+              min-width="102"
+              header-align="center"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="操作栏"
+              min-width="80"
+              header-align="center"
+              align="center"
+            >
+              <template v-slot="{ row }">
+                <div class="flex center layout-gap">
+                  <edit-button :data="row" :on-click="onOpenEditorBtnClick"></edit-button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <my-pagination
+          :total="total"
+          :pagination="pagination"
+          @current-change="currentPageNoChange"
+        />
+      </div>
+    </el-card>
+
+    <dialog-tag-purchase
+      ref="editor"
+      :optionGroup="optionGroup"
+    ></dialog-tag-purchase>
+  </div>
+</template>
+
+<script>
+import BaseCurdList from '@/utils/BaseCurdList'
+import TagPurchase from '@/entries/TagPurchase'
+
+export default {
+  name: 'TagPurchase',
+  extends: BaseCurdList(TagPurchase),
+  methods: {
+    onInStorageBtnClick () {}
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>