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

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

@@ -1,54 +1,66 @@
 <template>
   <div>
-    <el-dialog :title="exData.id ? '编辑': '新增'"
-               :visible.sync="dialog"
-               width="60%"
-               :close-on-click-modal="false"
-               top="50px">
-      <el-form ref="form"
-               :model="form"
-               :rules="formRules"
-               label-width="120px">
-        <el-form-item prop="plan_time"
-                      :rules="formRules.time"
-                      label="演出日期：">
+    <el-dialog
+      :title="exData.id ? '编辑': '新增'"
+      :visible.sync="dialog"
+      width="68%"
+      :close-on-click-modal="false"
+      top="50px">
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="formRules"
+        label-width="100px">
+        <el-form-item label="演出日期：">
           <el-date-picker
-            v-model="form.plan_time"
+            v-model="plan_time"
+            readonly
             align="right"
             type="date"
-            placeholder="选择日期"
-            :picker-options="pickerOptions"
+            placeholder="根据第1节开始时间生成"
             value-format="yyyy-MM-dd">
           </el-date-picker>
         </el-form-item>
-        <el-form-item v-for="(part, index) in form.postData"
-                      :label="'第' + (index + 1) + '节'"
-                      :key="index"
-                      :prop="'postData.' + index + '.user_id'"
-                      :rules="singerNameRules">
-          <el-select v-model="part.user_id"
-                     filterable
-                     placeholder="请选择演唱艺人">
-            <el-option
-              v-for="item in singerData"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <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="form.postData.length <= 1"
-                     @click.prevent="removePostData(part)">删除
-          </el-button>
+        <el-form-item
+          v-for="(part, index) in form.postData"
+          :label="'第' + (index + 1) + '节'"
+          :key="index"
+          :prop="'postData.' + index + '.user_id'"
+          :rules="singerNameRules">
+          <el-row>
+            <el-col :span="6">
+              <el-select
+                v-model="part.user_id"
+                filterable
+                placeholder="请选择演唱艺人">
+                <el-option
+                  v-for="item in singerData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="14" :offset="1">
+              <el-date-picker
+                v-model="part.date"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                placeholder="选择时间范围"
+                :default-time="['18:00:00', '19:00:00']"
+                value-format="yyyy-MM-dd HH:mm:ss">
+              </el-date-picker>
+            </el-col>
+            <el-col :span="3">
+              <el-button
+                type="warning"
+                :disabled="form.postData.length <= 1"
+                @click.prevent="removePostData(part)">删除
+              </el-button>
+            </el-col>
+          </el-row>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer text-center">
@@ -99,17 +111,11 @@ export default {
 
     return {
       dialog: !!this.value,
-      pickerOptions: {
-        disabledDate (time) {
-          return time.getTime() < Date.now() - 8.64e7
-        }
-      },
       // 演唱艺人及演唱时间段校验规则
       singerNameRules: [
-        { required: true, validator: checkSingerName, trigger: 'blur' }
+        { required: true, validator: checkSingerName, trigger: ['blur', 'change'] }
       ],
       form: {
-        plan_time: '',
         postData: [
           {
             user_id: '', // 艺人ID
@@ -119,6 +125,20 @@ export default {
       }
     }
   },
+  computed: {
+    plan_time: {
+      get () {
+        let planTime = ''
+        const { postData } = this.form
+        const date = postData[0].date
+        if (Array.isArray(date)) {
+          planTime = date[0].replace(/\s\w.*/, '')
+        }
+        return planTime
+      },
+      set () {}
+    }
+  },
   methods: {
     removePostData (item) {
       var index = this.form.postData.indexOf(item)
@@ -140,7 +160,7 @@ export default {
         if (valid) {
           const postData = this.form.postData.map(item => ({
             user_id: item.user_id,
-            plan_time: this.form.plan_time,
+            plan_time: this.plan_time,
             plan_start_time: item.date[0],
             plan_end_time: item.date[1]
           }))