优化

src/api/user/customer/customer.js

@@ -423,3 +423,17 @@ export function saveInformation(data) {
     data: data
   })
 }
+/**
+ * 上传数据文件
+ * @param {*} reportDate 报表月份
+ * @param {*} reportName 报表名称
+ * @param {*} reportFile 文件
+ * @returns
+ */
+export function saveMarketReport(params) {
+  return request({
+    url: '/user/market/saveMarketReport',
+    method: 'get',
+    params
+  })
+}

src/views/user/customer/market-edit.vue

@@ -2,20 +2,26 @@
   <div class="app-container" style="width: 800px; margin: 0 auto">
     <div class="form-tips">
       <p>
-        文件上传完成后，若不是最终想要的数据效果，可先暂时保存，方可预览报表，等数据最终确定了，再重新上传新文件，最后生成报表。
+        文件上传完成后，可先预览报表，若不是最终想要的数据效果，可先暂时保存，等数据最终确定了，再重新上传新文件，最后生成报表。
       </p>
     </div>
-    <el-form ref="bannerForm" :model="form" label-width="100px">
-      <el-form-item label="报表月份:" prop="guidingOne" :rules="rules.month">
-        <el-date-picker v-model="form.month" type="month" format="M月" placeholder="选择月份" style="width: 280px" />
+    <el-form ref="importForm" :model="form" label-width="100px">
+      <el-form-item label="报表月份:" prop="reportDate" :rules="rules.reportDate">
+        <el-date-picker
+          v-model="form.reportDate"
+          type="month"
+          format="M月"
+          placeholder="选择月份"
+          style="width: 280px"
+        />
       </el-form-item>
-      <el-form-item label="报表名称:" prop="guidingTwo" :rules="rules.title">
-        <el-input v-model="form.title" placeholder="请输入报表名称" maxlength="30" style="width: 280px" />
+      <el-form-item label="报表名称:" prop="reportName" :rules="rules.reportName">
+        <el-input v-model="form.reportName" placeholder="请输入报表名称" maxlength="30" style="width: 280px" />
       </el-form-item>
       <el-form-item label="报表文件" prop="fileUrl" :rules="rules.fileUrl">
         <el-upload
           ref="upload"
-          accept=".xlsx, .xls"
+          accept=".zip, .rar"
           action="https://jsonplaceholder.typicode.com/posts/"
           :limit="1"
           :file-list="fileList"
@@ -25,22 +31,20 @@
           :auto-upload="false"
         >
           <el-button slot="trigger" size="small" type="primary"> 选取文件 </el-button>
-          <div slot="tip" class="el-upload__tip">只能上传.zip格式文件</div>
+          <div slot="tip" class="el-upload__tip">只能上传.zip,.rar格式文件</div>
         </el-upload>
         <input v-show="false" v-model="form.fileUrl" type="text" />
       </el-form-item>
     </el-form>
     <div class="el-dialog__footer" style="text-align: left; margin-top: 100px">
-      <el-button type="primary" @click="onSubmit('bannerForm')"> 生成报表 </el-button>
-      <el-button type="warning" @click="onSubmit('bannerForm')"> 暂时保存 </el-button>
-      <el-button type="success" :disabled="isPivDisabled" @click="onSubmit('bannerForm')"> 预览报表 </el-button>
+      <el-button type="primary" @click="handleImportConfirm"> 保存 </el-button>
       <el-button plain @click="backToList"> 返回 </el-button>
     </div>
   </div>
 </template>
 
 <script>
-import { saveShopPopUp, getShopPopUp } from '@/api/user/customer/customer'
+import { saveMarketReport, getShopPopUp } from '@/api/user/customer/customer'
 
 export default {
   name: 'MarketEdit',
@@ -48,20 +52,19 @@ export default {
     const defaultForm = () => {
       return {
         id: '',
-        fileUrl: '', // 数据文件
-        month: '', // 引导语1
-        title: '' // 引导语2
+        reportFile: '', // 数据文件
+        reportDate: '', // 报表月份
+        reportName: '' // 报表月份
       }
     }
     return {
       form: defaultForm(),
       loadImgLoading: false,
-      isPivDisabled: true,
       fileList: [],
       rules: {
-        fileUrl: [{ required: true, message: '请导入数据文件', trigger: 'blur' }],
-        month: [{ required: true, message: '请选择报表数据月份', trigger: 'blur' }],
-        title: [{ required: true, message: '请输入报表名称', trigger: 'blur' }]
+        fileUrl: [{ required: true, message: '请导入数据文件', trigger: ['change'] }],
+        reportDate: [{ required: true, message: '请选择报表数据月份', trigger: 'blur' }],
+        reportName: [{ required: true, message: '请输入报表名称', trigger: 'blur' }]
       }
     }
   },
@@ -90,6 +93,32 @@ export default {
         console.log('error', error)
       }
     },
+    // 确定保存
+    async handleImportConfirm() {
+      try {
+        await this.$refs.importForm.validate()
+        this.importSumbit()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async importSumbit() {
+      const file = this.fileList.length > 0 && this.fileList[0]
+      if (!file) return
+      try {
+        const formData = new FormData()
+        this.fileList = []
+        formData.append('keywordFile', file.raw)
+        this.form.reportFile = formData
+        await saveMarketReport(this.form)
+        this.$message.success('保存成功')
+        // setTimeout(() => {
+        //   this.$router.push({ path: '/user/customer/list' })
+        // }, 1000)
+      } catch (error) {
+        console.log(error)
+      }
+    },
     onSubmit(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -106,14 +135,6 @@ export default {
         }
       })
     },
-    async saveShopPopUp(params) {
-      // 保存
-      await saveShopPopUp(params)
-      this.$message.success('保存成功')
-      setTimeout(() => {
-        this.$router.push({ path: '/user/customer/list' })
-      }, 1000)
-    },
     // 文件上传成功
     handleUploadSuccess(response, file, fileList) {
       this.importForm.fileUrl = response.url