提交

src/api/CurdApi.js

@@ -1,17 +1,18 @@
 import { api } from '@/utils/api'
-import QsUtil from '@/utils/QsUtil'
 
 export default class CurdApi {
   basePath
 
   getList = (query) => api({
-    url: `${this.basePath}${QsUtil.stringify(query)}`,
-    method: 'GET'
+    url: `${this.basePath}/list`,
+    method: 'POST',
+    data: query
   })
 
   getPagination = (query, pagination) => api({
-    url: `${this.basePath}/page${QsUtil.stringify(Object.assign({}, query, pagination))}`,
-    method: 'GET'
+    url: `${this.basePath}/page`,
+    method: 'POST',
+    data: Object.assign({}, query, pagination)
   })
 
   getDetail = (data, target) => api({

src/api/TagApplyApi.js

@@ -1,3 +1,13 @@
 import CurdApi from './CurdApi'
 
-export default new CurdApi('/tag/apply')
+class TagApplyApi extends CurdApi {
+  importData = () => {
+    console.log(123)
+  }
+
+  constructor () {
+    super('/tag/apply')
+  }
+}
+
+export default new TagApplyApi()

src/components/DialogImport.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    append-to-body
+    width="600px"
+  >
+    <el-form ref="form" :data="uploadData">
+      <el-form-item prop="file">
+        <div class="flex center">
+          <el-upload
+            drag
+            action=""
+            :auto-upload="false"
+            :multiple="false"
+            accept=".csv,.xlsx"
+            @change="onFileChange"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="flex valign-center align-right">
+        <el-button
+          plain
+          icon="el-icon-upload"
+          type="primary"
+          size="small"
+          class="custom-plain-button"
+          @click="onImportDataBtnClick"
+        >导入数据</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DialogImport',
+  props: {
+    api: {
+      required: true,
+      type: Function
+    }
+  },
+  data: () => ({
+    visible: false,
+    uploadData: {
+      file: null
+    }
+  }),
+  methods: {
+    open () {
+      this.visible = true
+    },
+    onFileChange (event) {
+      console.log(event)
+    },
+    onImportDataBtnClick () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/components/PdfExporter.vue

@@ -28,4 +28,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss"></style>

src/entries/TagApply.js

@@ -66,7 +66,8 @@ export default class TagApply extends BaseCurdEntry {
       offset: 0
     })),
     providerName: '',
-    tagApplyStateId: ''
+    tagApplyStateId: '',
+    order: [['dataTime', 'DESC']]
   })
 
   static $$optionTargetConfigGroup = [

src/mock/index.js

@@ -3,7 +3,7 @@ import TagApplyState from '@/entries/TagApplyState'
 
 const API_BASE_PATH = process.env.API_BASE_PATH
 
-Mock.mock(`${API_BASE_PATH}/tag/apply/state`, 'get', {
+Mock.mock(`${API_BASE_PATH}/tag/apply/state/list`, 'post', {
   code: 200,
   data: [
     new TagApplyState(0, '待支付'),
@@ -12,10 +12,10 @@ Mock.mock(`${API_BASE_PATH}/tag/apply/state`, 'get', {
   ]
 })
 
-Mock.mock(/\/tag\/apply\/page/, 'get', {
+Mock.mock(/\/tag\/apply\/page/, 'post', {
   code: 200,
   data: {
-    count: 40,
+    'count|10-40': 1,
     'list|1-20': [{
       'id|1-20': 1,
       dataTime: '2024/01/01 00:00:00',

src/utils/BaseCurdEditor.js

@@ -1,6 +1,40 @@
 import BaseCurd from './BaseCurd'
 
+const operatorTypes = [{
+  id: 1,
+  name: '新增'
+}, {
+  id: 2,
+  name: '修改'
+}, {
+  id: 3,
+  name: '查看'
+}]
+
 export default (target) => ({
   name: 'BaseCurdEditor',
-  extends: BaseCurd(target)
+  extends: BaseCurd(target),
+  data: () => ({
+    visible: false,
+    data: null,
+    operatorTypeId: 1,
+    refFormName: 'form'
+  }),
+  computed: {
+    operatorType () {
+      return operatorTypes[this.operatorTypeId - 1]
+    }
+  },
+  methods: {
+    open (data) {
+      if (data) {
+        this.operatorTypeId = operatorTypes[1].id
+      } else {
+        this.operatorTypeId = operatorTypes[0].id
+      }
+    },
+    getForm () {
+      return this.$refs[this.refFormName]
+    }
+  }
 })

src/utils/BaseCurdList.js

@@ -12,10 +12,11 @@ export default (target, hasPagination = true) => ({
       pageNo: 0,
       pageSize: 20
     },
-    data: Object.freeze([]),
+    list: Object.freeze([]),
     total: 0,
     selectedData: null,
-    selectedList: Object.freeze([])
+    selectedList: Object.freeze([]),
+    editorName: 'editor'
   }),
   methods: {
     afterLoadList () {
@@ -31,14 +32,23 @@ export default (target, hasPagination = true) => ({
         Object.assign(query, this.pagination)
         this.$$request(target.$$api.getPagination, this.query, this.pagination)
           .then(data => {
-            this.total = data.count
-            this.data = Object.freeze(bindPrototype(data.list, target))
-            this.afterLoadList()
+            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, target))
+              this.afterLoadList()
+              return
+            }
+
+            pagination.pageNo = Math.floor(count / pageSize)
+            this.loadList()
           }).catch(console.error).finally(() => {})
       } else {
         this.$$request(target.$$api.getList, this.query).then(list => {
           this.total = list.length
-          this.data = Object.freeze(bindPrototype(Object.freeze(list), target))
+          this.list = Object.freeze(bindPrototype(Object.freeze(list), target))
           this.afterLoadList()
         }).catch(console.error).finally(() => {})
       }
@@ -56,6 +66,47 @@ export default (target, hasPagination = true) => ({
     onRowClick (data) {
       this.selectedData = data
     },
+    onOpenEditorBtnClick (data) {
+      const editor = this.getEditor()
+      data instanceof Event ? editor.open() : editor.open(data)
+    },
+    deleteSuccess () {
+      this.loadList()
+      this.$notify({
+        title: '成功',
+        message: '删除成功',
+        type: 'success',
+        position: 'bottom-right'
+      })
+    },
+    deleteFailed () {
+      this.$notify.error({
+        title: '失败',
+        message: '删除失败',
+        position: 'bottom-right'
+      })
+    },
+    deleteData (data) {
+      this.$$request(target.$$api.delete, data)
+        .then(this.deleteSuccess)
+        .catch(this.deleteFailed)
+        .finally(() => {})
+    },
+    onDeleteBtnClick (data) {
+      const name = this[this.$$nameProp]
+      this.$confirm(`此操作将永久删除${name ? `'${name}'` : '该记录'}, 是否继续？`, '确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'confirm-dialog-confirm-btn',
+        cancelButtonClass: 'confirm-dialog-cancel-btn',
+        type: 'warning'
+      }).then(() => {
+        this.deleteData(data)
+      }).catch(() => {})
+    },
+    getEditor () {
+      return this.$refs[this.editorName]
+    },
     getOptions (optionTargetConfigs, optionGroup) {
       return Promise.all(
         optionTargetConfigs.map(

src/views/TagApply.vue

@@ -67,7 +67,7 @@
           type="primary"
           size="small"
           class="custom-plain-button"
-          @click="onImportDataBtnClick"
+          @click="onOpenEditorBtnClick"
         >导入数据</el-button>
         <el-button
           :disabled="!selectedData"
@@ -101,7 +101,7 @@
       <div class="flex-1 fit-size">
         <el-table
           ref="table"
-          :data="data"
+          :data="list"
           stripe
           border
           highlight-current-row
@@ -208,6 +208,7 @@
     </div>
   </el-card>
 
+  <dialog-import ref="dialogImport" :api="$$api.importData" @onImported="onDataImported"></dialog-import>
   <dialog-order-export ref="orderExportDialog"></dialog-order-export>
 </div>
 </template>
@@ -219,9 +220,15 @@ import TagApply from '@/entries/TagApply'
 export default {
   name: 'TagApply',
   extends: BaseCurdList(TagApply),
+  data: () => ({
+    editorName: 'dialogImport'
+  }),
   methods: {
     onImportDataBtnClick () {
-
+      this.$refs.dialogImport.open()
+    },
+    onDataImported () {
+      this.loadList()
     },
     onExportOrderBtnClick () {
       this.$refs.orderExportDialog.open(this.selectedData)