Fix: 上传测试的 Dialog

Author: lisgroup

admin/src/api/api_param.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-export function getList(params) {
+export function getListParam(params) {
   return request({
     url: '/api/api_param',
     method: 'get',

admin/src/views/api_excel/add.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { getList } from '@/api/api_param'
+import { getListParam } from '@/api/api_param'
 import { postAdd } from '@/api/api_excel'
 import { getToken } from '@/utils/auth'
 
@@ -124,7 +124,7 @@ export default {
       this.$emit('getItem', this.form.apiParam)
     },
     init() {
-      getList({ perPage: 20 }).then(response => {
+      getListParam({ perPage: 20 }).then(response => {
         this.apiParam = response.data.data
       })
     },

admin/src/views/api_excel/index.vue

@@ -7,22 +7,66 @@
       <el-button type="primary" size="medium" @click="dialogFormVisible = true">Dialog</el-button>
       <el-button :loading="reload" type="primary" class="reload" plain @click="fetchData">{{ reload_name }}</el-button>
     </el-row>
-    <el-dialog :visible.sync="dialogFormVisible" title="收货地址">
-      <el-form :model="form">
-        <el-form-item :label-width="formLabelWidth" label="活动名称">
-          <el-input v-model="form.name" autocomplete="off"/>
-        </el-form-item>
-        <el-form-item :label-width="formLabelWidth" label="活动区域">
-          <el-select v-model="form.region" placeholder="请选择活动区域">
-            <el-option label="区域一" value="shanghai"/>
-            <el-option label="区域二" value="beijing"/>
+    <el-dialog :visible.sync="dialogFormVisible" title="上传测试">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="接口" prop="api_param_id">
+          <el-select v-model="item" placeholder="请选择接口" value-key="name">
+            <el-option v-for="(cate, index) in apiParam" :key="index" :label="cate.name" :value="cate.id">
+              <span style="float: left; color: #8492a6; font-size: 13px">{{ cate.name }}</span>
+            </el-option>
           </el-select>
         </el-form-item>
+
+        <el-form-item label="appkey" prop="appkey">
+          <el-col :span="11">
+            <el-input v-model="form.appkey"/>
+          </el-col>
+          <el-col :span="13"/>
+        </el-form-item>
+        <el-form-item label="并发请求" prop="concurrent">
+          <el-col :span="2">
+            <el-input v-model="form.concurrent"/>
+          </el-col>
+          <el-col :span="22">
+            &nbsp;&nbsp; 任务执行时并发请求的数量，字段必须是数字默认： 5
+          </el-col>
+        </el-form-item>
+        <el-form-item label="上传文件" prop="upload_url" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
+          <input v-model="form.upload_url" type="hidden">
+          <el-upload
+            :action="uploadUrl"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-success="handleSuccess"
+            :before-remove="beforeRemove"
+            :on-exceed="handleExceed"
+            :file-list="fileList"
+            multiple
+            class="upload-demo">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传 xls/xlsx 文件，且不超过 20M</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="描述内容" prop="description">
+          <el-col :span="11">
+            <el-input v-model="form.description" size="medium" placeholder="请输入内容" />
+          </el-col>
+          <el-col :span="13"/>
+        </el-form-item>
+        <el-form-item label="自动删除时间" prop="auto_delete">
+          <el-col :span="2">
+            <el-input v-model="form.auto_delete"/>
+          </el-col>
+          <el-col :span="22">
+            &nbsp;&nbsp; 任务执行完成后自动删除的时间（单位：天），默认： 2 天
+          </el-col>
+          <el-col :span="13"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit('form')">提交</el-button>
+          <el-button @click="resetForm('form')">重置</el-button>
+        </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-      </div>
     </el-dialog>
     <el-table
       v-loading="listLoading"
@@ -145,6 +189,8 @@
 </template>
 
 <script>
+import { getListParam } from '@/api/api_param'
+import { postAdd } from '@/api/api_excel'
 import { getToken } from '@/utils/auth'
 import { getList, deleteAct, search, startTask, download_log } from '@/api/api_excel'
 
@@ -161,18 +207,46 @@ export default {
   },
   data() {
     return {
+      // Add -- start
       dialogFormVisible: false,
+      // 请求需要携带 token
+      uploadUrl: process.env.BASE_API + '/api/upload?token=' + getToken(),
+      fileList: [],
+      item: '',
+      apiParam: [],
       form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
+        upload_url: '',
+        api_param_id: '',
+        appkey: '',
+        concurrent: 5,
+        uid: '',
+        description: '',
+        auto_delete: 2,
+        sort: '',
+        loading: false
+      },
+      rules: {
+        api_param_id: [
+          { required: true, message: '请选择接口', trigger: 'blur' }
+        ],
+        upload_url: [
+          { required: true, message: '请上传文件', trigger: 'blur' }
+        ],
+        appkey: [
+          { required: true, message: '请输入 appkey', trigger: 'blur' }
+        ],
+        concurrent: [
+          { required: true, message: '请输入并发请求数', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入描述', trigger: 'blur' }
+        ],
+        auto_delete: [
+          { required: true, message: '请输入天数', trigger: 'blur' }
+        ]
       },
-      formLabelWidth: '120px',
+      redirect: '/api_excel/index',
+      // Add -- end
       reload: false,
       reload_name: '点击刷新',
       list: null,
@@ -185,6 +259,13 @@ export default {
       websock: null
     }
   },
+  watch: {
+    item(value) {
+      this.form.api_param_id = value
+      // console.log(this.form.api_param_id)
+      this.getItem()
+    }
+  },
   created() {
     this.listQuery = this.$route.query
     const page = parseInt(this.listQuery.page)
@@ -193,6 +274,7 @@ export default {
     this.perpage = isNaN(perPage) ? this.perpage : perPage
     // this.fetchData()
     this.initWebSocket()
+    this.init()
   },
   destroyed() {
     this.websock.close() // 离开路由之后断开 websocket 连接
@@ -396,7 +478,73 @@ export default {
           return false
         }
       })
+    },
+    // Add -- start
+    getItem() {
+      this.$emit('getItem', this.form.apiParam)
+    },
+    init() {
+      getListParam({ perPage: 20 }).then(response => {
+        this.apiParam = response.data.data
+      })
+    },
+    handleRemove(file, fileList) {
+      // console.log(file, fileList)
+    },
+    handlePreview(file) {
+      // console.log(file)
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    handleSuccess(response, file, fileList) {
+      // console.log(response)
+      if (response.code !== 200) {
+        this.$message({
+          message: response.reason,
+          type: 'error'
+        })
+      } else {
+        this.form.upload_url = response.data.url
+      }
+    },
+    onSubmit(form) {
+      // console.log(this.form)
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          postAdd(this.form).then(response => {
+            this.loading = false
+            if (response.code === 200) {
+              this.$message({
+                message: '操作成功',
+                type: 'success'
+              })
+              this.$router.push({ path: this.redirect || '/' })
+            } else {
+              this.$message.error(response.reason)
+            }
+          })
+        } else {
+          // this.$message('error submit!')
+          // console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    onCancel() {
+      this.$message({
+        message: 'cancel!',
+        type: 'warning'
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
     }
+    // Add -- end
   }
 }
 </script>