修改弹窗类型和推送类型关联逻辑

src/views/push/dialog/detail.vue

@@ -15,22 +15,23 @@
       <el-form-item v-if="form.forwardType" label="跳转地址：" prop="forwardUrl">
         <el-input v-model="form.forwardUrl" placeholder="请输入跳转地址" />
       </el-form-item>
+      <el-form-item label="弹窗类型：" prop="type">
+        <el-select v-model="form.type" placeholder="请选择弹窗类型" @change="handleChangeType">
+          <el-option v-for="item in dialogTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="推送类型：" prop="pushType">
-        <el-select v-model="form.pushType" placeholder="请选择推送类型" @change="handleChangePushType">
+        <el-select v-model="form.pushType" placeholder="请选择推送类型">
           <el-option v-for="item in pushTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.pushType === 1" label="用户列表：" prop="user">
-        <el-input v-model="form.user" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入内容" />
+        <el-input v-model="form.user" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }"
+          placeholder="请输入用户ID, 一行一个" />
       </el-form-item>
       <el-form-item v-if="form.pushType === 2" label="用户列表：" prop="fileUrl">
-        <el-input v-model="form.fileUrl" readonly style="width: calc(100% - 120px) ;margin-right: 20px" />
-        <Upload @upload="upload($event, 'fileUrl')" :disabled="disabled" />
-      </el-form-item>
-      <el-form-item label="弹窗类型：" prop="type">
-        <el-select v-model="form.type" placeholder="请选择弹窗类型">
-          <el-option v-for="item in dialogTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
-        </el-select>
+        <el-input v-model="form.fileUrl" readonly style="width: calc(100% - 120px); margin-right: 20px" />
+        <Upload class="upload" @upload="upload($event, 'fileUrl')" :disabled="disabled" />
       </el-form-item>
       <el-form-item prop="level">
         <template slot="label">
@@ -61,7 +62,9 @@ export default {
   data() {
     return {
       // 表单
-      form: {},
+      form: {
+        fileUrl: ''
+      },
       // 跳转类型
       forwardTypeOptions: [{
         value: 5,
@@ -70,17 +73,6 @@ export default {
         value: 6,
         label: 'H5外链'
       }],
-      // 推送类型
-      pushTypeOptions: [{
-        value: 0,
-        label: '全部用户'
-      }, {
-        value: 1,
-        label: '指定用户-输入'
-      }, {
-        value: 2,
-        label: '指定用户-上传'
-      }],
       // 弹窗类型
       dialogTypeOptions: [{
         value: 0,
@@ -92,6 +84,8 @@ export default {
         value: 2,
         label: '新用户弹窗'
       }],
+      // 推送类型
+      pushTypeOptions: [],
       // 只读
       disabled: false,
       // 校验
@@ -115,7 +109,7 @@ export default {
           required: true, message: '请输入用户Id', trigger: 'blur'
         }],
         fileUrl: [{
-          required: true, message: '请上传用户Id文件', trigger: 'change'
+          required: true, message: '请上传用户Id文件', trigger: 'blur'
         }],
         type: [{
           required: true, message: '请选择弹窗类型', trigger: 'change'
@@ -146,14 +140,20 @@ export default {
     },
 
     // 推送类型改变
-    handleChangePushType(val) {
-      if (val === 0) {
-        delete this.form.user
-        delete this.form.fileUrl
-      } else if (val === 1) {
-        delete this.form.fileUrl
-      } else {
-        delete this.form.user
+    handleChangeType(val) {
+      this.pushTypeOptions = [{
+        value: 0,
+        label: '全部用户'
+      }, {
+        value: 1,
+        label: '指定用户-输入'
+      }, {
+        value: 2,
+        label: '指定用户-上传'
+      }]
+      if (val === 2) {
+        this.pushTypeOptions.splice(0, 1)
+        this.$set(this.form, 'pushType', '')
       }
     },
 
@@ -169,10 +169,17 @@ export default {
 
     // 提交
     getSubmit() {
-      submit(this.form).then(res => {
-        if (res.code === 0) {
-          this.$message.success('提交成功！')
-          this.cancel()
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.form.pushType === 0 ? [delete this.form.user, delete this.form.fileUrl] : this.form.pushType === 1 ? delete this.form.fileUrl : delete this.form.user
+          submit(this.form).then(res => {
+            if (res.code === 0) {
+              this.$message.success('提交成功！')
+              this.cancel()
+            }
+          })
+        } else {
+          return false
         }
       })
     }
@@ -198,4 +205,10 @@ export default {
     }
   }
 }
+
+::v-deep .upload {
+  button {
+    margin: 0;
+  }
+}
 </style>