提交

package-lock.json

@@ -7444,6 +7444,15 @@
         "minimist": "^1.2.6"
       }
     },
+    "mockjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz",
+      "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==",
+      "dev": true,
+      "requires": {
+        "commander": "*"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -47,6 +47,7 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "mockjs": "^1.1.0",
     "node-notifier": "^5.1.2",
     "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^3.2.0",

src/api/CurdApi.js

@@ -1,25 +1,32 @@
+import { api } from '@/utils/api'
+import QsUtil from '@/utils/QsUtil'
+
 export default class CurdApi {
   basePath
 
-  getOptions (target, query) {
+  getList = (query) => api({
+    url: `${this.basePath}${QsUtil.stringify(query)}`,
+    method: 'GET'
+  })
 
-  }
+  getPagination = (query, pagination) => api({
+    url: `${this.basePath}/page${QsUtil.stringify(Object.assign({}, query, pagination))}`,
+    method: 'GET'
+  })
 
-  getPagination (target, query) {
+  getDetail = (data, target) => api({
+    url: `${this.basePath}/${data[target.$$idProp]}`,
+    method: 'GET'
+  })
 
-  }
-
-  getDetail (data, target) {
+  save = (data, saveType, target) => {
 
   }
 
-  save (data, saveType, target) {
-
-  }
-
-  delete (data, target) {
-
-  }
+  delete = (data, target) => api({
+    url: `${this.basePath}/${data[target.$$idProp]}`,
+    method: 'DELETE'
+  })
 
   constructor (basePath) {
     this.basePath = basePath

src/api/TagApplyStateApi.js

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

src/assets/el-style.scss

@@ -49,8 +49,31 @@
     }
   }
 
+  .el-table__fixed {
+    &:before {
+      background-color: var(--table-border-color);
+    }
+  }
+
+  &.el-table--striped {
+    .el-table__body tr.el-table__row--striped td.el-table__cell {
+      background: var(--table-striped-bg)
+    }
+  }
+
+  .el-table__body {
+    tr.hover-row>td.el-table__cell {
+      color: var(--table-row-hover-color);
+      background: var(--table-row-hover-bg);
+    }
+  }
+
   th.el-table__cell {
     background: var(--table-header-bg) !important;
     color: var(--table-header-color);
   }
+
+  td.el-table__cell {
+    border-color: var(--table-border-color) !important;
+  }
 }

src/assets/main.scss

@@ -4,7 +4,7 @@
 :root {
   --height-text-color: #1A85DE;
 
-  --layout-bg: #ebecf0;
+  --layout-bg: #EBECF0;
   --brand-color: #0078DB;
   --brand-hover-color: var(--height-text-color);
   --brand-active-color: var(--brand-color);
@@ -17,7 +17,11 @@
 
   --layout-gap: 20px;
 
-  --custom-plain-botton-bg: #ffffff;
+  --custom-plain-botton-bg: #FFFFFF;
+
+  --table-striped-bg: #E7F1FA;
+  --table-row-hover-bg: #99C9F0;
+  // --table-row-hover-color: #FFFFFF;
 }
 
 .flex {

src/entries/BaseCurdEntry.js

@@ -11,6 +11,8 @@ export default class BaseCurdEntry {
 
   static $$optionTargetConfigGroup = []
 
+  static $$optionData = {}
+
   // static $$initQuery () {
   //   return Promise.resolve(undefined)
   // }

src/entries/TagApply.js

@@ -2,14 +2,22 @@ import BaseCurdEntry from './BaseCurdEntry'
 import DataTimeRange from '@/utils/DataTimeRange'
 import TagApplyState from './TagApplyState'
 
+import tagApplyApi from '@/api/tagApplyApi'
+
 export default class TagApply extends BaseCurdEntry {
   id
 
   dataTime
+  get formatDataTime () {
+    return new Date(this.dataTime).format('YYYY-MM-DD')
+  }
 
   orderNo
 
-  ExpectedReceiptDate
+  expectedReceiptDate
+  get formatExpectedReceiptDate () {
+    return new Date(this.expectedReceiptDate).format('YYYY-MM-DD')
+  }
 
   providerName
 
@@ -19,10 +27,25 @@ export default class TagApply extends BaseCurdEntry {
 
   amount
 
-  state
+  tagApplyStateId
+  get tagApplyStateName () {
+    const tagApplyStateConfig = TagApply.$$optionData.TagApplyState
+    if (tagApplyStateConfig) {
+      const tagApplyState = tagApplyStateConfig.map[this.tagApplyStateId]
+      if (tagApplyState) {
+        return tagApplyState[TagApplyState.$$nameProp]
+      }
+    }
+
+    return ''
+  }
 
   operatorName
 
+  static get $$api () {
+    return tagApplyApi
+  }
+
   static $$getQuery = () => ({
     ...(new DataTimeRange({
       unit: 'Date',
@@ -39,4 +62,6 @@ export default class TagApply extends BaseCurdEntry {
       getQuery: () => ({})
     }]
   ]
+
+  static $$optionData = {}
 }

src/entries/TagApplyState.js

@@ -1,16 +1,9 @@
 import BaseCurdEntry from './BaseCurdEntry'
+import tagApplyStateApi from '@/api/TagApplyStateApi'
 
 export default class TagApplyState extends BaseCurdEntry {
   static get $$api () {
-    return {
-      getList () {
-        return Promise.resolve([
-          new TagApplyState(0, '待支付'),
-          new TagApplyState(1, '待发货'),
-          new TagApplyState(2, '已发货')
-        ])
-      }
-    }
+    return tagApplyStateApi
   }
 
   id

src/main.js

@@ -15,6 +15,10 @@ import 'element-ui/lib/theme-chalk/index.css'
 
 import MyComponent from './components'
 
+if (process.env.NODE_ENV === 'development') {
+  require('./mock/index')
+}
+
 Vue.config.productionTip = false
 
 Vue.use(ElementUI)

src/mock/index.js

@@ -0,0 +1,34 @@
+import Mock from 'mockjs'
+import TagApplyState from '@/entries/TagApplyState'
+
+const API_BASE_PATH = process.env.API_BASE_PATH
+
+Mock.mock(`${API_BASE_PATH}/tag/apply/state`, 'get', {
+  code: 200,
+  data: [
+    new TagApplyState(0, '待支付'),
+    new TagApplyState(1, '待发货'),
+    new TagApplyState(2, '已发货')
+  ]
+})
+
+Mock.mock(/\/tag\/apply\/page/, 'get', {
+  code: 200,
+  data: {
+    count: 40,
+    '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: '操作员'
+    }]
+  }
+})
+
+export default Mock

src/utils/BaseCurdList.js

@@ -1,5 +1,6 @@
 import BaseCurd from './BaseCurd'
 import MapBuilder from './MapBuilder'
+import bindPrototype from './bindPrototype'
 
 export default (target, hasPagination = true) => ({
   name: 'BaseCurdList',
@@ -19,15 +20,15 @@ export default (target, hasPagination = true) => ({
       let query = Object.assign({}, this.query)
       if (hasPagination) {
         Object.assign(query, this.pagination)
-        this.$$request(target.$$api.getPagination, Object.assign({}, this.query, this.pagination))
+        this.$$request(target.$$api.getPagination, this.query, this.pagination)
           .then(data => {
-            this.total = data.total
-            this.list = Object.freeze(data.record)
+            this.total = data.count
+            this.data = Object.freeze(bindPrototype(data.list, target))
           }).catch(console.error).finally(() => {})
       } else {
         this.$$request(target.$$api.getList, this.query).then(list => {
           this.total = list.length
-          this.list = Object.freeze(list)
+          this.data = Object.freeze(bindPrototype(Object.freeze(list), target))
         }).catch(console.error).finally(() => {})
       }
     },
@@ -76,6 +77,7 @@ export default (target, hasPagination = true) => ({
     setOptionGroup () {
       this.getOptionGroup(target).then(optionGroup => {
         this.optionGroup = optionGroup
+        target.$$optionData = optionGroup
         this.loadList()
       })
     }

src/utils/QsUtil.js

@@ -1,6 +1,6 @@
 import qs from 'qs'
 
-export default class QSUtil {
+export default class QsUtil {
   /**
    * 将对象转为query字符串
    * @param query   query对象

src/utils/api.js

@@ -65,9 +65,9 @@ request.interceptors.response.use(response => new Promise((resolve, reject) => {
   return Promise.reject(error)
 })
 
-export const api = (param) => {
+export const api = (config) => {
   const source = CancelToken.source()
-  const config = Object.assign({ cancelToken: source.token }, param.config)
+  config = Object.assign({ cancelToken: source.token }, config)
   const promise = request(config)
   promise.abort = () => source.cancel(REQUEST_CANCEL)
   return promise

src/utils/bindPrototype.js

@@ -0,0 +1,9 @@
+export default (list, target) => {
+  const { prototype } = target
+  const len = list.length
+  for (let i = 0; i < len; i++) {
+    Object.setPrototypeOf(list[i], prototype)
+  }
+
+  return list
+}

src/views/TagApply.vue

@@ -102,17 +102,82 @@
           size="small"
           class="custom-el-table-style"
         >
-          <el-table-column type="section" width="55" align="center"></el-table-column>
-          <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
-          <el-table-column label="申领日期" align="center"></el-table-column>
-          <el-table-column label="订单编号" align="center"></el-table-column>
-          <el-table-column label="预期收货日期" align="center"></el-table-column>
-          <el-table-column label="供应商名称" align="center"></el-table-column>
-          <el-table-column label="标签类型" align="center"></el-table-column>
-          <el-table-column label="需求数量" align="center"></el-table-column>
-          <el-table-column label="费用（元）" align="center"></el-table-column>
-          <el-table-column label="状态" align="center"></el-table-column>
-          <el-table-column label="操作员" align="center"></el-table-column>
+          <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"
+          ></el-table-column>
+          <el-table-column
+            label="订单编号"
+            prop="orderNo"
+            min-width="90"
+            header-align="center"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="预期收货日期"
+            prop="formatExpectedReceiptDate"
+            min-width="100"
+            header-align="center"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="供应商名称"
+            prop="providerName"
+            min-width="200"
+            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="center"
+          ></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="tagApplyStateName"
+            min-width="70"
+            header-align="center"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="操作员"
+            prop="operatorName"
+            min-width="85"
+            header-align="center"
+            align="center"
+          ></el-table-column>
         </el-table>
       </div>