0908

src/main/vue/src/mixins/formatters.js

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { format, parse } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 export default {
     methods: {
@@ -13,6 +13,9 @@ export default {
             if (cellValue) {
                 return format(new Date(cellValue), 'yyyy/MM/dd', { locale: zhCN });
             }
+        },
+        getTime(value, format1 = 'HH:mm:ss', format2 = 'HH:mm') {
+            return format(parse(value, format1, new Date()), format2);
         }
     }
 };

src/main/vue/src/views/performance/ArrangeJudgeList.vue

@@ -63,6 +63,7 @@
             row-class-name="table-row"
             cell-class-name="table-cell"
             :height="tableHeight"
+            :span-method="objectSpanMethod"
         >
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
             <!-- <el-table-column prop="id" label="ID" width="100"> </el-table-column> -->
@@ -75,7 +76,7 @@
             <el-table-column prop="address" label="活动地点"> </el-table-column>
             <el-table-column label="参赛专业">
                 <template slot-scope="{ row }">
-                    {{ row.specialtyName.join(',') }}
+                    {{ row.specialtyName ? row.specialtyName.join(',') : '' }}
                 </template>
             </el-table-column>
             <el-table-column prop="name" label="分组名称" min-width="130"> </el-table-column>
@@ -229,6 +230,21 @@ export default {
         }
     },
     methods: {
+        backMap(list, key = 'date') {
+            let _map = new Map();
+            list.forEach(item => {
+                let list = [];
+                if (_map.has(item[key])) {
+                    list = _map.get(item[key]);
+                    list.push(item);
+                } else {
+                    list.push(item);
+                }
+
+                _map.set(item[key], list);
+            });
+            return _map;
+        },
         competitionGroupFormatter(row, column, cellValue, index) {
             let selectedOption = this.competitionGroupOptions.find(i => i.value === cellValue);
             if (selectedOption) {
@@ -322,6 +338,12 @@ export default {
                         this.$message.error(e.error);
                     }
                 });
+        },
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            // console.log(row);
+            // console.log(column);
+            // console.log(rowIndex);
+            // console.log(columnIndex);
         }
     }
 };

src/main/vue/src/views/performance/ArrangeList.vue

@@ -12,8 +12,8 @@
                 class="filter-item"
                 >导出EXCEL
             </el-button> -->
-            <el-form :model="form" :rules="rules" ref="form" inline label-width="100px">
-                <el-form-item label="活动名称">
+            <el-form :model="form" :rules="rules" size="mini" ref="form" inline label-width="120px">
+                <el-form-item label="活动名称" prop="performanceId">
                     <el-select v-model="form.performanceId" filterable placeholder="活动名称" style="width: 100%">
                         <el-option
                             v-for="item in performances"
@@ -28,81 +28,138 @@
                     <el-button type="primary" @click="getData">查看活动分组情况</el-button>
                     <el-button type="primary" @click="intoGroup">查看未分组情况情况</el-button>
                 </el-form-item>
-                <el-form-item label="活动日期">
-                    <el-date-picker
-                        v-model="dateRange"
-                        value-format="yyyy-MM-dd"
-                        type="daterange"
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                    >
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item label="活动地点">
-                    <el-select v-model="form.address">
-                        <el-option
-                            v-for="(item, index) in addresses"
-                            :key="index"
-                            :value="item"
-                            :label="item"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="时间安排">
-                    <el-checkbox v-model="form.morning">上午</el-checkbox>
-                    <el-time-picker
-                        v-model="timeRange"
-                        format="HH:mm"
-                        value-format="HH:mm:ss"
-                        is-range
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        placeholder="选择时间范围"
-                    >
-                    </el-time-picker>
-                    <el-checkbox v-model="form.afternoon">下午</el-checkbox>
-                    <el-time-picker
-                        v-model="afterTimeRange"
-                        format="HH:mm"
-                        value-format="HH:mm:ss"
-                        is-range
-                        range-separator="至"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                        placeholder="选择时间范围"
-                    >
-                    </el-time-picker>
-                </el-form-item>
-                <el-form-item label="分组节目数量">
-                    <!-- <el-input-number type="number" v-model="form.quantity"></el-input-number> -->
-                    <el-select v-model="form.quantity" clearable>
-                        <el-option v-for="item in nums" :key="item" :label="item" :value="item"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="单个节目时长">
-                    <!-- <el-input-number type="number" v-model="form.duration"></el-input-number> -->
-                    <el-select v-model="form.duration" clearable>
-                        <el-option v-for="item in times" :key="item" :label="item" :value="item"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="参赛专业">
-                    <el-select v-model="form.specialtyId" multiple>
-                        <el-option
-                            v-for="item in artTypes"
-                            :key="item.value"
-                            :value="item.value"
-                            :label="item.label"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="clear">清空</el-button>
-                    <el-button type="primary" @click="group">节目分组</el-button>
-                    <el-button type="primary">发布分组安排</el-button>
-                    <el-button type="primary">导出分组安排</el-button>
-                </el-form-item>
+                <el-card shadow="hover" :body-style="{ padding: '20px' }" style="margin-bottom: 20px">
+                    <el-row :gutter="15">
+                        <el-col :span="12" :offset="0">
+                            <el-form-item label="活动日期" prop="dateRange">
+                                <el-date-picker
+                                    v-model="dateRange"
+                                    value-format="yyyy-MM-dd"
+                                    type="daterange"
+                                    range-separator="至"
+                                    start-placeholder="开始日期"
+                                    end-placeholder="结束日期"
+                                    style="width: 316px"
+                                >
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item prop="address" class="flex" label="活动地点" style="width: 100%">
+                                <el-select v-model="form.address">
+                                    <el-option
+                                        v-for="(item, index) in addresses"
+                                        :key="index"
+                                        :value="item"
+                                        :label="item"
+                                    ></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="时间安排" prop="morning">
+                                <el-checkbox v-model="form.morning" disabled>上午</el-checkbox>
+                                <el-time-select
+                                    placeholder="起始时间"
+                                    format="HH:mm"
+                                    value-format="HH:mm:ss"
+                                    v-model="timeRange[0]"
+                                    :picker-options="{
+                                        start: '08:30',
+                                        step: '00:15',
+                                        end: '12:00'
+                                    }"
+                                    class="time"
+                                >
+                                </el-time-select>
+                                <el-time-select
+                                    placeholder="结束时间"
+                                    v-model="timeRange[1]"
+                                    :picker-options="{
+                                        start: '08:30',
+                                        step: '00:15',
+                                        end: '12:00',
+                                        minTime: timeRange[0]
+                                    }"
+                                    class="time"
+                                >
+                                </el-time-select>
+                            </el-form-item>
+                        </el-col>
+
+                        <el-col :span="6" :offset="0">
+                            <el-form-item class="flex" label="分组节目数量" prop="quantity">
+                                <!-- <el-input-number type="number" v-model="form.quantity"></el-input-number> -->
+                                <el-select v-model="form.quantity" clearable>
+                                    <el-option v-for="item in nums" :key="item" :label="item" :value="item"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6" :offset="0">
+                            <el-form-item class="flex" label="单个节目时长" prop="duration">
+                                <!-- <el-input-number type="number" v-model="form.duration"></el-input-number> -->
+                                <el-select v-model="form.duration" clearable>
+                                    <el-option
+                                        v-for="item in times"
+                                        :key="item"
+                                        :label="item"
+                                        :value="item"
+                                    ></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" :offset="0">
+                            <el-form-item label=" " prop="afternoon">
+                                <el-checkbox v-model="form.afternoon" disabled>下午</el-checkbox>
+
+                                <el-time-select
+                                    placeholder="起始时间"
+                                    format="HH:mm"
+                                    value-format="HH:mm:ss"
+                                    v-model="afterTimeRange[0]"
+                                    :picker-options="{
+                                        start: '13:00',
+                                        step: '00:15',
+                                        end: '18:00'
+                                    }"
+                                    class="time"
+                                >
+                                </el-time-select>
+                                <el-time-select
+                                    placeholder="结束时间"
+                                    v-model="afterTimeRange[1]"
+                                    :picker-options="{
+                                        start: '13:00',
+                                        step: '00:15',
+                                        end: '18:00',
+                                        minTime: afterTimeRange[0]
+                                    }"
+                                    class="time"
+                                >
+                                </el-time-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6" :offset="0">
+                            <el-form-item label="参赛专业" class="flex" prop="specialtyId">
+                                <el-select v-model="form.specialtyId" multiple>
+                                    <el-option
+                                        v-for="item in artTypes"
+                                        :key="item.value"
+                                        :value="item.value"
+                                        :label="item.label"
+                                    ></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+
+                    <el-form-item>
+                        <el-button type="primary" @click="clear">清空</el-button>
+                        <el-button type="primary" @click="group">节目分组</el-button>
+                        <el-button type="primary">发布分组安排</el-button>
+                        <el-button type="primary">导出分组安排</el-button>
+                    </el-form-item>
+                </el-card>
             </el-form>
         </div>
         <el-table
@@ -120,13 +177,13 @@
             <el-table-column prop="address" label="活动地点"> </el-table-column>
             <el-table-column prop="name" label="分组名称" min-width="130"> </el-table-column>
             <el-table-column label="时间安排" min-width="100">
-                <template slot-scope="{ row }"> {{ row.startTime }}-{{ row.endTime }} </template>
+                <template slot-scope="{ row }"> {{ getTime(row.startTime) }}-{{ getTime(row.endTime) }} </template>
             </el-table-column>
             <el-table-column prop="quantity" label="节目数量"> </el-table-column>
             <!-- <el-table-column prop="duration" label="节目时长"> </el-table-column> -->
             <el-table-column label="参赛专业">
                 <template slot-scope="{ row }">
-                    {{ row.specialtyName.join(',') }}
+                    {{ row.specialtyName ? row.specialtyName.join(',') : '' }}
                 </template>
             </el-table-column>
             <el-table-column prop="writerDirector" label="编导姓名"> </el-table-column>
@@ -214,6 +271,7 @@
 <script>
 import { mapState } from 'vuex';
 import pageableTable from '@/mixins/pageableTable';
+import { time } from 'echarts';
 
 export default {
     name: 'ArrangeList',
@@ -227,15 +285,9 @@ export default {
             form: {},
             performances: [],
             addresses: [],
-            timeRange: '',
+            timeRange: [null, null],
             dateRange: '',
-            afterTimeRange: '',
-            rules: {
-                performanceId: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
-                address: [{ required: true, message: '请选择活动地点', trigger: 'blur' }],
-                quantity: [{ required: true, message: '请输入分组节目数量', trigger: 'blur' }],
-                duration: [{ required: true, message: '请输入单个节目时长', trigger: 'blur' }]
-            },
+            afterTimeRange: [null, null],
             artTypes: [],
             showProgramme: false,
             unGrouped: [],
@@ -247,6 +299,19 @@ export default {
             times: [3, 5, 10, 15, 20]
         };
     },
+    watch: {
+        timeRange(value) {
+            let checked = value.includes(null);
+            console.log(checked);
+            this.form.morning = !checked;
+            this.$refs.form.validateField('afternoon');
+        },
+        afterTimeRange(value) {
+            let checked = value.includes(null);
+            console.log(checked);
+            this.form.afternoon = !checked;
+        }
+    },
     created() {
         this.$http
             .post(
@@ -311,6 +376,34 @@ export default {
     computed: {
         selection() {
             return this.$refs.table.selection.map(i => i.id);
+        },
+        rules() {
+            return {
+                performanceId: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
+                address: [{ required: true, message: '请选择活动地点', trigger: 'blur' }],
+                quantity: [{ required: true, message: '请输入分组节目数量', trigger: 'blur' }],
+                duration: [{ required: true, message: '请输入单个节目时长', trigger: 'blur' }],
+                morning: [
+                    {
+                        validator: (rule, value, callback) => {
+                            callback();
+                        },
+                        trigger: 'change'
+                    }
+                ],
+                afternoon: [
+                    {
+                        validator: (rule, value, callback) => {
+                            if (this.form.afternoon || this.form.morning) {
+                                callback();
+                            } else {
+                                callback(new Error('请选择时间安排!'));
+                            }
+                        },
+                        trigger: 'change'
+                    }
+                ]
+            };
         }
     },
     methods: {
@@ -491,18 +584,41 @@ export default {
                 });
         },
         clear() {
-            this.form = {};
+            this.form = {
+                address: '',
+                morning: '',
+                afternoon: '',
+                quantity: '',
+                duration: '',
+                specialtyId: ''
+            };
             this.dateRange = '';
-            this.form.address = '';
-            this.form.morning = '';
-            this.form.afternoon = '';
-            this.timeRange = '';
-            this.afterTimeRange = '';
-            this.form.quantity = '';
-            this.form.duration = '';
-            this.form.specialtyId = '';
+            this.timeRange = [null, null];
+            this.afterTimeRange = [null, null];
+            this.$nextTick(() => {
+                this.$refs.form.resetFields();
+            });
         }
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.flex {
+    display: flex;
+    width: 100%;
+    /deep/ .el-form-item__content {
+        flex-grow: 1;
+
+        .el-select {
+            width: 100%;
+        }
+    }
+}
+.time {
+    width: 120px;
+    margin-left: 15px;
+    & + .time {
+        margin-left: 10px;
+    }
+}
+</style>