优化排版功能

wuxw
1 parent 11d1e1ed
Showing 9 changed files with 73 additions and 65 deletions
src/components/org/editScheduleClassesDay.vue
src/components/org/scheduleClassesDay.vue
src/components/org/scheduleClassesMonth.vue
src/components/org/scheduleClassesWeek.vue
src/views/fee/payFeeOrderList.vue
src/views/org/addScheduleClassesList.vue
src/views/org/editScheduleClassesLang.js
src/views/org/editScheduleClassesList.vue
src/views/user/login/Login.vue
@@ -16,7 +16,7 @@
               <el-input v-model="item.startTime" :placeholder="$t('editScheduleClassesDay.startTimePlaceholder')" />
             </el-form-item>
           </el-col>
-          <el-col :span="11" :offset="2">
+          <el-col :span="11">
             <el-form-item :label="$t('editScheduleClassesDay.endTime')">
               <el-input v-model="item.endTime" :placeholder="$t('editScheduleClassesDay.endTimePlaceholder')" />
             </el-form-item>
@@ -46,11 +46,14 @@ export default {
   },
   methods: {
     notify(params) {
-      this.localDays = params.days || []
-      this.$emit('update:scheduleCycle', params.scheduleCycle || 1)
-      if (!params.days || params.days.length === 0) {
-        this.changeInspectionPeriodWeek()
+      this.days = params.days;
+      this.scheduleCycle = params.scheduleCycle;
+
+      if (params.days && params.days.length > 0) {
+        return;
       }
+
+      this.changeInspectionPeriod();
     },
     initData(scheduleCycle) {
       this.scheduleCycle = scheduleCycle
@@ -66,7 +69,7 @@ export default {
           times: []
         })
       }
-      this.$emit('cycle-change', this.scheduleCycle)
+      this.$emit('cycleChange', this.scheduleCycle)
     },
     changeWorkdayInfo(item) {
       this.$emit('editDay', item)
 <template>
   <div>
     <el-form-item :label="$t('scheduleClassesMonth.scheduleCycle')">
-      <el-select
-        v-model="scheduleCycle"
-        :placeholder="$t('scheduleClassesMonth.scheduleCyclePlaceholder')"
-        @change="changeInspectionPeriod"
-        style="width:100%"
-      >
-        <el-option
-          :label="`1${$t('scheduleClassesMonth.month')}`"
-          value="1"
-        />
+      <el-select v-model="scheduleCycle" :placeholder="$t('scheduleClassesMonth.scheduleCyclePlaceholder')"
+        @change="changeInspectionPeriod" style="width:100%">
+        <el-option :label="`1${$t('scheduleClassesMonth.month')}`" value="1" />
       </el-select>
     </el-form-item>
     <el-form-item :label="$t('scheduleClassesMonth.scheduleInfo')">
       <div class="schedule-days-container">
-        <div
-          v-for="(item, index) in days"
-          :key="index"
-          class="schedule-day-item"
-          @click="changeWorkdayInfo(item)"
-        >
+        <div v-for="(item, index) in days" :key="index" class="schedule-day-item" @click="changeWorkdayInfo(item)">
           <div class="day-number">{{ item.day }}</div>
           <div class="workday-name">{{ item.workdayName }}</div>
-          <div
-            v-for="(time, timeIndex) in item.times"
-            :key="timeIndex"
-            class="time-range"
-          >
+          <div v-for="(time, timeIndex) in item.times" :key="timeIndex" class="time-range">
             {{ time.startTime }}-{{ time.endTime }}
           </div>
         </div>
@@ -65,6 +49,14 @@ export default {
       this.scheduleCycle = scheduleCycle
       this.changeInspectionPeriod()
     },
+    notify(_params) {
+      this.days = _params.days;
+      this.scheduleCycle = _params.scheduleCycle;
+      if (_params.days && _params.days.length > 0) {
+        return;
+      }
+      this.changeInspectionPeriod();
+    },
     changeInspectionPeriod() {
       this.days = []
       for (let cycleIndex = 0; cycleIndex < 31; cycleIndex++) {
@@ -77,7 +69,7 @@ export default {
       }
     },
     changeWorkdayInfo(item) {
-      this.$emit('edit-day', item)
+      this.$emit('editDay', item)
     },
     getDaysData() {
       return this.days
@@ -54,6 +54,15 @@ export default {
       this.scheduleCycle = scheduleCycle
       this.changeInspectionPeriodWeek()
     },
+    notify(params) {
+      this.days = params.days;
+      this.scheduleCycle = parseInt(params.scheduleCycle);
+
+      if (params.days && params.days.length > 0) {
+        return;
+      }
+      this.changeInspectionPeriodWeek();
+    },
     changeInspectionPeriodWeek() {
       this.days = []
       for (let weekIndex = 0; weekIndex < this.scheduleCycle; weekIndex++) {
@@ -67,10 +76,10 @@ export default {
           })
         }
       }
-      this.$emit('cycle-change', this.scheduleCycle)
+      this.$emit('cycleChange', this.scheduleCycle)
     },
     changeWorkdayWeekInfo(item) {
-      this.$emit('edit-day', item)
+      this.$emit('editDay', item)
     },
     getWeek(week) {
       return `${week}${this.$t('scheduleClassesWeek.week')}`
@@ -129,16 +129,16 @@
             </el-form-item>
             <el-form-item v-show="payFeeOrderInfo.tempCycles == '-103'" :label="$t('payFeeOrder.endTime')">
-              <el-date-picker v-model="payFeeOrderInfo.custEndTime" type="date"
+              <el-date-picker v-model="payFeeOrderInfo.custEndTime" type="date" value-format="yyyy-MM-dd"
                 :placeholder="$t('payFeeOrder.selectEndTime')" style="width: 100%;">
               </el-date-picker>
             </el-form-item>
             <el-form-item v-show="payFeeOrderInfo.tempCycles == '-105'" :label="$t('payFeeOrder.paymentPeriod')">
-              <el-date-picker v-model="payFeeOrderInfo.customStartTime" type="date"
+              <el-date-picker v-model="payFeeOrderInfo.customStartTime" type="date" value-format="yyyy-MM-dd"
                 :placeholder="$t('payFeeOrder.selectStartTime')" style="width: 100%; margin-bottom: 10px;">
               </el-date-picker>
-              <el-date-picker v-model="payFeeOrderInfo.customEndTime" type="date"
+              <el-date-picker v-model="payFeeOrderInfo.customEndTime" type="date" value-format="yyyy-MM-dd"
                 :placeholder="$t('payFeeOrder.selectEndTime')" style="width: 100%;">
               </el-date-picker>
             </el-form-item>
@@ -23,10 +23,10 @@
               </el-form-item>
               <div v-if="addScheduleClassesInfo.scheduleType === '1001'">
-                <schedule-classes-day ref="scheduleDay" @editDay="editDay" />
+                <schedule-classes-day ref="scheduleDay" @editDay="editDay" @cycleChange="changeScheduleCycle" />
               </div>
               <div v-if="addScheduleClassesInfo.scheduleType === '2002'">
-                <schedule-classes-week ref="scheduleWeek" @editDay="editDay" />
+                <schedule-classes-week ref="scheduleWeek" @editDay="editDay" @cycleChange="changeScheduleCycle" />
               </div>
               <div v-if="addScheduleClassesInfo.scheduleType === '3003'">
                 <schedule-classes-month ref="scheduleMonth" @editDay="editDay" />
@@ -81,11 +81,26 @@ export default {
       this.addScheduleClassesInfo.scheduleCycle = 1
       if (this.addScheduleClassesInfo.scheduleType === '1001') {
-        this.$refs.scheduleDay.initData(this.addScheduleClassesInfo.scheduleCycle)
+        setTimeout(() => {
+          this.$refs.scheduleDay.notify({
+            scheduleCycle: this.addScheduleClassesInfo.scheduleCycle,
+            days: this.addScheduleClassesInfo.days
+          })
+        }, 500)
       } else if (this.addScheduleClassesInfo.scheduleType === '2002') {
-        this.$refs.scheduleWeek.initData(this.addScheduleClassesInfo.scheduleCycle)
+        setTimeout(() => {
+          this.$refs.scheduleWeek.notify({
+            scheduleCycle: this.addScheduleClassesInfo.scheduleCycle,
+            days: this.addScheduleClassesInfo.days
+          })
+        }, 500)
       } else if (this.addScheduleClassesInfo.scheduleType === '3003') {
-        this.$refs.scheduleMonth.initData(this.addScheduleClassesInfo.scheduleCycle)
+        setTimeout(() => {
+          this.$refs.scheduleMonth.notify({
+            scheduleCycle: this.addScheduleClassesInfo.scheduleCycle,
+            days: this.addScheduleClassesInfo.days
+          })
+        }, 500)
       }
     },
     async saveScheduleClassesInfo() {
@@ -120,6 +135,9 @@ export default {
       // 由于 editScheduleClassesDay 组件现在直接修改传入的对象
       // 这里不需要额外的处理，但保留方法以保持代码完整性
       console.log('Day updated:', updatedItem)
+    },
+    changeScheduleCycle(cycle) {
+      this.addScheduleClassesInfo.scheduleCycle = cycle
     }
   }
 }
@@ -32,15 +32,7 @@ export const messages = {
       scheduleInfo: 'Schedule Information',
       rest: 'Rest'
     },
-    editScheduleClassesDay: {
-      editTitle: 'Edit Schedule Day',
-      status: 'Status',
-      startTime: 'Start Time',
-      startTimePlaceholder: 'Required, please enter start time',
-      endTime: 'End Time',
-      endTimePlaceholder: 'Required, please enter end time',
-      rest: 'Rest'
-    }
+ 
   },
   zh: {
     editScheduleClasses: {
@@ -75,14 +67,5 @@ export const messages = {
       scheduleInfo: '排班信息',
       rest: '休息'
     },
-    editScheduleClassesDay: {
-      editTitle: '修改',
-      status: '状态',
-      startTime: '上班时间',
-      startTimePlaceholder: '必填，请填写上班时间',
-      endTime: '下班时间',
-      endTimePlaceholder: '必填，请填写下班时间',
-      rest: '休息'
-    }
   }
 }
 \ No newline at end of file
@@ -24,16 +24,16 @@
               </el-form-item>
               <div v-if="editScheduleClassesInfo.scheduleType === '1001'">
-                <schedule-classes-day ref="dayComponent" :schedule-cycle="editScheduleClassesInfo.scheduleCycle"
-                  :days="editScheduleClassesInfo.days" @editDay="editDay" />
+                <schedule-classes-day ref="dayComponent" 
+                   @editDay="editDay" @cycleChange="changeScheduleCycle" />
               </div>
               <div v-if="editScheduleClassesInfo.scheduleType === '2002'">
-                <schedule-classes-week ref="weekComponent" :schedule-cycle="editScheduleClassesInfo.scheduleCycle"
-                  :days="editScheduleClassesInfo.days" @editDay="editDay" />
+                <schedule-classes-week ref="weekComponent" 
+                   @editDay="editDay" @cycleChange="changeScheduleCycle" />
               </div>
               <div v-if="editScheduleClassesInfo.scheduleType === '3003'">
-                <schedule-classes-month ref="monthComponent" :schedule-cycle="editScheduleClassesInfo.scheduleCycle"
-                  :days="editScheduleClassesInfo.days" @editDay="editDay" />
+                <schedule-classes-month ref="monthComponent"
+                   @editDay="editDay" />
               </div>
               <el-form-item>
@@ -114,7 +114,7 @@ export default {
             scheduleCycle: this.editScheduleClassesInfo.scheduleCycle,
             days: this.editScheduleClassesInfo.days
           })
-        }, 100)
+        }, 500)
       }
     },
     async editScheduleClasses() {
@@ -162,6 +162,9 @@ export default {
     },
     editDay(item) {
       this.$refs.editDayDialog.open(item)
+    },
+    changeScheduleCycle(cycle) {
+      this.editScheduleClassesInfo.scheduleCycle = cycle
     }
   }
 }
@@ -44,8 +44,8 @@ export default {
       logo: '',
       companyName:'',
       loginForm: {
-        username: 'wuxw',
-        passwd: 'admin',
+        username: '',
+        passwd: '',
         validateCode: ''
       },
       captchaUrl: '',