完成标签申领页面

src/api/CurdApi.js

@@ -3,6 +3,8 @@ import { api } from '@/utils/api'
 export default class CurdApi {
   basePath
 
+  api = api
+
   getList = (query) => api({
     url: `${this.basePath}/list`,
     method: 'POST',
@@ -15,17 +17,19 @@ export default class CurdApi {
     data: Object.assign({}, query, pagination)
   })
 
-  getDetail = (data, target) => api({
-    url: `${this.basePath}/${data[target.$$idProp]}`,
+  getDetail = (data, Target) => api({
+    url: `${this.basePath}/${data[Target.$$idProp]}`,
     method: 'GET'
   })
 
-  save = (data, saveType, target) => {
-
-  }
+  save = (data, saveType, Target) => api({
+    url: `${this.basePath}`,
+    method: saveType,
+    data
+  })
 
-  delete = (data, target) => api({
-    url: `${this.basePath}/${data[target.$$idProp]}`,
+  delete = (data, Target) => api({
+    url: `${this.basePath}/${data[Target.$$idProp]}`,
     method: 'DELETE'
   })
 

src/api/TagApplyApi.js

@@ -1,10 +1,31 @@
 import CurdApi from './CurdApi'
 
 class TagApplyApi extends CurdApi {
-  importData = () => {
-    console.log(123)
+  importData = (data) => {
+    const formData = new FormData()
+    formData.append('file', data.file)
+    return this.api({
+      url: `${this.basePath}`,
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
   }
 
+  downloadTemplate = () => this.api({
+    url: `${this.basePath}/download/template`,
+    method: 'GET',
+    responseType: 'blob'
+  })
+
+  confirmPay = (data) => this.api({
+    url: `${this.basePath}/pay`,
+    method: 'POST',
+    data: data
+  })
+
   constructor () {
     super('/tag/apply')
   }

src/components/DialogImport.vue

@@ -4,23 +4,28 @@
     append-to-body
     width="600px"
   >
-    <el-form ref="form" :data="uploadData">
-      <el-form-item prop="file">
-        <div class="flex center">
+    <el-form ref="form" :model="uploadData" style="height:300px">
+      <div class="flex center">
+        <el-form-item prop="file" :rules="[{
+          required: true,
+          message: '请选择需要上传的文件'
+        }]" style="width:360px;">
+
           <el-upload
+            ref="upload"
             drag
             action=""
             :auto-upload="false"
             :multiple="false"
             accept=".csv,.xlsx"
-            @change="onFileChange"
+            :on-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>
+            <div class="el-upload__tip" slot="tip">只能上传csv/excel文件</div>
           </el-upload>
-        </div>
-      </el-form-item>
+        </el-form-item>
+      </div>
     </el-form>
 
     <template #footer>
@@ -39,8 +44,11 @@
 </template>
 
 <script>
+import BasePage from '@/utils/BasePage'
+
 export default {
   name: 'DialogImport',
+  extends: BasePage,
   props: {
     api: {
       required: true,
@@ -55,13 +63,41 @@ export default {
   }),
   methods: {
     open () {
+      this.uploadData.file = null
       this.visible = true
+      this.$nextTick(() => {
+        this.$refs.upload.clearFiles()
+        this.$refs.form.resetFields()
+      })
     },
     onFileChange (event) {
-      console.log(event)
+      this.uploadData.file = event.raw
+      const uploadEl = this.$refs.upload
+      const { uploadFiles } = uploadEl
+      uploadFiles.splice(0, uploadFiles.length, event)
     },
     onImportDataBtnClick () {
+      this.$refs.form.validate(flag => {
+        if (!flag) {
+          return
+        }
+
+        this.$$request(this.api, this.uploadData).then((flag) => {
+          if (flag) {
+            this.$notify({
+              title: '成功',
+              message: '上传成功',
+              type: 'success',
+              position: 'bottom-right'
+            })
 
+            this.$refs.upload.clearFiles()
+            this.uploadData.file = null
+            this.visible = false
+            this.$emit('imported')
+          }
+        }).catch(console.error).finally(() => {})
+      })
     }
   }
 }

src/utils/BaseCurd.js

@@ -1,12 +1,12 @@
 import BasePage from './BasePage'
 
-export default (target) => ({
+export default (Target) => ({
   name: 'BaseCurd',
   extends: BasePage,
   computed: {
-    $$target: () => target,
-    $$api: () => target.$$api,
-    $$idProp: () => target.$$idProp,
-    $$nameProp: () => target.$$nameProp
+    $$Target: () => Target,
+    $$api: () => Target.$$api,
+    $$idProp: () => Target.$$idProp,
+    $$nameProp: () => Target.$$nameProp
   }
 })

src/utils/BaseCurdEditor.js

@@ -2,18 +2,20 @@ import BaseCurd from './BaseCurd'
 
 const operatorTypes = [{
   id: 1,
-  name: '新增'
+  name: '新增',
+  method: 'POST'
 }, {
   id: 2,
-  name: '修改'
+  name: '修改',
+  method: 'PUT'
 }, {
   id: 3,
   name: '查看'
 }]
 
-export default (target) => ({
+export default (Target) => ({
   name: 'BaseCurdEditor',
-  extends: BaseCurd(target),
+  extends: BaseCurd(Target),
   data: () => ({
     visible: false,
     data: null,
@@ -26,12 +28,84 @@ export default (target) => ({
     }
   },
   methods: {
-    open (data) {
-      if (data) {
-        this.operatorTypeId = operatorTypes[1].id
-      } else {
-        this.operatorTypeId = operatorTypes[0].id
-      }
+    onOpen () {
+      return Promise.resolve()
+    },
+    onGetDetail () {
+      return Promise.resolve()
+    },
+    afterGetDetail (model) {},
+    beforeSave () {
+      return Promise.resolve()
+    },
+    onSave () {},
+    open (data, isView) {
+      this.onOpen().then(() => {
+        if (data) {
+          this.operatorTypeId = isView ? operatorTypes[2].id : operatorTypes[1].id
+          this.getDetail(data)
+        } else {
+          this.operatorTypeId = operatorTypes[0].id
+          this.model = this.initModel()
+          this.clearFormValid()
+        }
+
+        this.visible = true
+      })
+    },
+    initModel () {
+      this.data = new Target(this)
+    },
+    getDetail (data) {
+      this.onGetDetail().then(() => {
+        this.$$request(this.$$api.getDetail(data, Target)).then(data => {
+          data = data || {}
+          this.data = data
+          this.clearFormValid()
+          this.afterGetDetail(data)
+        }).catch(console.error).finally(() => {})
+      })
+    },
+    clearFormValid () {
+      this.$nextTick(() => {
+        let formEl = this.getForm()
+        formEl && formEl.resetFields()
+      })
+    },
+    save () {
+      const formEl = this.getForm()
+      formEl && formEl.validate(flag => {
+        if (!flag) {
+          return
+        }
+
+        this.beforeSave().then(() => {
+          this.$$request(Target.$$api.save, this.data, this.operatorType.method, Target).then((data) => {
+            if (data) {
+              this.$notify({
+                title: '成功',
+                message: '保存成功',
+                type: 'success',
+                position: 'bottom-right'
+              })
+
+              this.onSave()
+              this.$emit('saved', this.data)
+              this.close()
+            }
+          }).catch(console.error).finally(() => {})
+        })
+      })
+    },
+    onSaveBtnClick () {
+      this.save()
+    },
+    onCloseBtnClick () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.$emit('close')
     },
     getForm () {
       return this.$refs[this.refFormName]

src/utils/BaseCurdList.js

@@ -2,12 +2,12 @@ import BaseCurd from './BaseCurd'
 import MapBuilder from './MapBuilder'
 import bindPrototype from './bindPrototype'
 
-export default (target, hasPagination = true) => ({
+export default (Target, hasPagination = true) => ({
   name: 'BaseCurdList',
-  extends: BaseCurd(target),
+  extends: BaseCurd(Target),
   data: () => ({
     optionGroup: Object.freeze({}),
-    query: target.$$getQuery(),
+    query: Target.$$getQuery(),
     pagination: {
       pageNo: 0,
       pageSize: 20
@@ -30,14 +30,14 @@ export default (target, hasPagination = true) => ({
       let query = Object.assign({}, this.query)
       if (hasPagination) {
         Object.assign(query, this.pagination)
-        this.$$request(target.$$api.getPagination, this.query, this.pagination)
+        this.$$request(Target.$$api.getPagination, this.query, 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, target))
+              this.list = Object.freeze(bindPrototype(data.list, Target))
               this.afterLoadList()
               return
             }
@@ -46,9 +46,9 @@ export default (target, hasPagination = true) => ({
             this.loadList()
           }).catch(console.error).finally(() => {})
       } else {
-        this.$$request(target.$$api.getList, this.query).then(list => {
+        this.$$request(Target.$$api.getList, this.query).then(list => {
           this.total = list.length
-          this.list = Object.freeze(bindPrototype(Object.freeze(list), target))
+          this.list = Object.freeze(bindPrototype(list, Target))
           this.afterLoadList()
         }).catch(console.error).finally(() => {})
       }
@@ -87,7 +87,7 @@ export default (target, hasPagination = true) => ({
       })
     },
     deleteData (data) {
-      this.$$request(target.$$api.delete, data)
+      this.$$request(Target.$$api.delete, data, Target)
         .then(this.deleteSuccess)
         .catch(this.deleteFailed)
         .finally(() => {})
@@ -104,6 +104,9 @@ export default (target, hasPagination = true) => ({
         this.deleteData(data)
       }).catch(() => {})
     },
+    onSaved () {
+      this.loadList()
+    },
     getEditor () {
       return this.$refs[this.editorName]
     },
@@ -128,7 +131,7 @@ export default (target, hasPagination = true) => ({
     async getOptionGroup () {
       const optionGroup = {}
 
-      const { $$optionTargetConfigGroup } = target
+      const { $$optionTargetConfigGroup } = Target
       if (Array.isArray($$optionTargetConfigGroup)) {
         const $$optionTargetConfigGroupLen = $$optionTargetConfigGroup.length
         for (let i = 0; i < $$optionTargetConfigGroupLen; i++) {
@@ -143,9 +146,9 @@ export default (target, hasPagination = true) => ({
       return Object.freeze(optionGroup)
     },
     setOptionGroup () {
-      this.getOptionGroup(target).then(optionGroup => {
+      this.getOptionGroup(Target).then(optionGroup => {
         this.optionGroup = optionGroup
-        target.$$optionData = optionGroup
+        Target.$$optionData = optionGroup
         this.loadList()
       })
     }

src/views/TagApply.vue

@@ -208,7 +208,7 @@
     </div>
   </el-card>
 
-  <dialog-import ref="dialogImport" :api="$$api.importData" @onImported="onDataImported"></dialog-import>
+  <dialog-import ref="dialogImport" :api="$$api.importData" @imported="onSaved"></dialog-import>
   <dialog-order-export ref="orderExportDialog"></dialog-order-export>
 </div>
 </template>
@@ -234,10 +234,20 @@ export default {
       this.$refs.orderExportDialog.open(this.selectedData)
     },
     onExportTemplateBtnClick () {
-
+      this.$$api.downloadTemplate().then(() => {}).catch(console.error).finally(() => {})
     },
     onConfirmPayBtnClick () {
-
+      this.$$api.confirmPay().then((flag) => {
+        if (flag) {
+          this.$notify({
+            title: '成功',
+            message: '操作成功',
+            type: 'success',
+            position: 'bottom-right'
+          })
+          this.loadList()
+        }
+      }).catch(console.error).finally(() => {})
     }
   }
 }