管理后台-演出管理：演出安排

htmldev/manage/src/views/business/sms/plan/details.vue

@@ -12,22 +12,21 @@
         <el-form-item prop="plan_time"
                       :rules="formRules.time"
                       label="演出日期：">
-          <el-col :span="16">
-            <el-date-picker
-              v-model="form.plan_time"
-              align="right"
-              type="date"
-              placeholder="选择日期"
-              :picker-options="pickerOptions"
-              value-format="yyyy-MM-dd">
-            </el-date-picker>
-          </el-col>
+          <el-date-picker
+            v-model="form.plan_time"
+            align="right"
+            type="date"
+            placeholder="选择日期"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
         </el-form-item>
-        <el-form-item v-for="(domain, index) in form.domains"
+        <el-form-item v-for="(part, index) in form.postData"
                       :label="'第' + (index + 1) + '节'"
-                      :key="domain.key"
-                      :prop="'domains.' + index + '.value'">
-          <el-select v-model="domain.singer"
+                      :key="index"
+                      :prop="'postData.' + index + '.user_id'"
+                      :rules="singerNameRules">
+          <el-select v-model="part.user_id"
                      filterable
                      placeholder="请选择演唱艺人">
             <el-option
@@ -37,23 +36,24 @@
               :value="item.value">
             </el-option>
           </el-select>
-          <el-time-picker class="af-el-date-editor"
-                          is-range
-                          v-model="domain.value1"
-                          range-separator="至"
-                          start-placeholder="演唱开始时间"
-                          end-placeholder="演唱结束时间"
-                          placeholder="选择时间范围">
+          <el-time-picker
+            is-range
+            v-model="part.date"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围"
+            value-format="yyyy-MM-dd HH:mm:ss">
           </el-time-picker>
           <el-button type="warning"
-                     :disabled="index === 0"
-                     @click.prevent="removeDomain(domain)">删除
+                     :disabled="form.postData.length <= 1"
+                     @click.prevent="removePostData(part)">删除
           </el-button>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer text-center">
         <el-button @click="dialog = false">取 消</el-button>
-        <el-button @click="addDomain">新增时间段</el-button>
+        <el-button @click="addPostData">新增时间段</el-button>
         <el-button type="primary" @click="handleSubmit">确 定</el-button>
       </div>
     </el-dialog>
@@ -82,6 +82,21 @@ export default {
     }
   },
   data () {
+    const checkSingerName = (rule, value, callback) => {
+      const index = rule.field.replace(/\w*\./, '').replace(/\.\w*/, '')
+      const showTime = this.form.postData[index * 1].date
+      if (value && showTime) {
+        callback()
+      } else {
+        if (!value) {
+          callback(new Error('请选择演唱艺人'))
+        }
+        if (!showTime) {
+          callback(new Error('请选择演出时间段'))
+        }
+      }
+    }
+
     return {
       dialog: !!this.value,
       pickerOptions: {
@@ -89,42 +104,48 @@ export default {
           return time.getTime() < Date.now() - 8.64e7
         }
       },
+      // 演唱艺人及演唱时间段校验规则
+      singerNameRules: [
+        { required: true, validator: checkSingerName, trigger: 'blur' }
+      ],
       form: {
-        plan_time: new Date(), // 年月日, 回传后端时间格式要求2021-05-23
-        plan_start_time: '', // 演出开始时间(Y-m-d H:i:s)
-        plan_end_time: '', // 演出结束时间(Y-m-d H:i:s)
-        domains: [
-          {
-            user_id: '', // 艺人ID
-            value1: [new Date(), new Date()]
-          },
+        plan_time: '',
+        postData: [
           {
             user_id: '', // 艺人ID
-            value1: [new Date(), new Date()]
+            date: null
           }
         ]
       }
     }
   },
   methods: {
-    removeDomain (item) {
-      var index = this.form.domains.indexOf(item)
+    removePostData (item) {
+      var index = this.form.postData.indexOf(item)
       if (index !== -1) {
-        this.form.domains.splice(index, 1)
+        this.form.postData.splice(index, 1)
       }
     },
-    addDomain () {
-      this.form.domains.push({
-        value: '',
-        key: Date.now()
+    addPostData () {
+      this.form.postData.push({
+        user_id: '',
+        date: null
       })
     },
     handleSubmit () {
-      const url = this.exData.id ? '/v1/bar/modify' : '/v1/bar/show/plan/add'
+      // todo 修改
+      const url = this.exData.id ? '' : '/v1/bar/show/plan/add'
+
       this.$refs.form.validate(async valid => {
         if (valid) {
+          const postData = this.form.postData.map(item => ({
+            user_id: item.user_id,
+            plan_time: this.form.plan_time,
+            plan_start_time: item.date[0],
+            plan_end_time: item.date[1]
+          }))
           const data = await this.$fetch(url, {
-            ...this.form
+            plans: postData
           })
           if (data.code === 200) {
             this.$message.success('提交成功')