日期班次增加锁定，修复编辑和详情页面报错

src/views/business/​scheduleManage/components/adjust-edit.vue

@@ -76,7 +76,7 @@
                     class="adjust-table"
                     @selection-change="selection => handleSelectionChange(selection)"
                 >
-                    <el-table-column type="selection" width="45" header-align="center" align="center" />
+                    <el-table-column type="selection" width="45" v-if=!readonly header-align="center" align="center" />
                     <el-table-column type="index" label="序号" width="50" header-align="center" align="center" />
                     <el-table-column
                         prop="beforeDate"
@@ -86,15 +86,21 @@
                         align="center"
                     >
                         <template slot-scope="scope">
-                            <el-date-picker
+                            <el-select
                                 v-model="scope.row.beforeDate"
-                                type="date"
-                                :placeholder=" readonly ? '' : '请选择'"
-                                value-format="yyyy-MM-dd"
-                                :picker-options="pickerOptions"
                                 :disabled="readonly"
+                                :placeholder=" readonly ? '' : '请选择调班日期'"
                                 @change="handleDateChange($event, scope.$index, 'beforeShiftList')"
-                            />
+                            >
+                                <el-option
+                                    v-for="item in beforeDateList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                    :disabled="item.disabled"
+                                />
+                            </el-select>
+
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -134,7 +140,7 @@
                                 :disabled="readonly"
                                 filterable
                                 :placeholder=" readonly ? '' : '请选择目标人员'"
-                                @change="handlePartyChange($event, scope.row, scope.$index)"
+                                @change="handlePartyChange($event, scope.row, scope.$index, 'change')"
                             >
                                 <el-option
                                     v-for="item in scheduleInfo.scheduleStaff"
@@ -153,15 +159,20 @@
                         align="center"
                     >
                         <template slot-scope="scope">
-                            <el-date-picker
+                            <el-select
                                 v-model="scope.row.afterDate"
-                                type="date"
-                                :placeholder=" readonly ? '' : '请选择'"
-                                value-format="yyyy-MM-dd"
-                                :picker-options="pickerOptions"
                                 :disabled="readonly"
+                                :placeholder=" readonly ? '' : '请选择目标日期'"
                                 @change="handleDateChange($event, scope.$index, 'afterShiftList')"
-                            />
+                            >
+                                <el-option
+                                    v-for="item in afterDateList"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                    :disabled="item.disabled"
+                                />
+                            </el-select>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -200,6 +211,7 @@
 <script>
 // import {  } from '@/views/constants/schedule'
 import { getAdjustment, saveAdjustment, queryStaffSchedule, getStaffSchedule, sendMessage } from '@/api/business/schedule'
+import { queryDataById } from '@/api/platform/data/dataTemplate'
 
 export default {
     props: {
@@ -238,6 +250,9 @@ export default {
             scheduleInfo: {},
             currentShift: {},
             targetShift: {},
+            beforeDateList: [], // 调班日期下拉数据
+            afterDateList: [], // 目标日期下拉数据
+            blockList: [], // 被锁定数据
             scheduleOptions: [],
             selectionIndex: [],
             toolbars: [
@@ -268,51 +283,49 @@ export default {
         }
     },
     mounted () {
-        this.loadData()
+        this.loadData(this)
     },
     methods: {
         // 获取数据
-        async loadData () {
-            const { id, scheduleId } = this.params || {}
-            this.formData.scheduleId = scheduleId
-            if (this.$utils.isEmpty(scheduleId)) {
-                await this.getScheduleList()
+        async loadData (self) {
+            const { id, scheduleId } = self.params || {}
+            self.formData.scheduleId = scheduleId
+            if (self.$utils.isEmpty(scheduleId)) {
+                await self.getScheduleList(self)
             } else {
-                await this.getScheduleInfo(scheduleId)
+                await self.getScheduleInfo(scheduleId, self)
             }
-            if (this.$utils.isEmpty(id)) {
+            if (self.$utils.isEmpty(id)) {
                 return
             }
             // 初始化表单数据的方法
             const initializeFormData = (data) => {
                 const { scheduleId, reason, executor, executeDate, adjustmentDetailPoList } = data || {}
-                this.formData = {
+                self.formData = {
                     scheduleId,
                     reason,
                     adjustList: adjustmentDetailPoList.map((i, index) => ({
                         ...i,
                         beforeAdjust: i.beforeAdjust ? i.beforeAdjust.split(',') : [],
                         afterAdjust: i.afterAdjust ? i.afterAdjust.split(',') : [],
-                        beforeShiftList: this.handleDateChange(i.beforeDate, index, 'beforeShiftList'),
-                        afterShiftList: this.handleDateChange(i.afterDate, index, 'afterShiftList')
+                        beforeShiftList: self.handleDateInit(i.beforeDate, index, 'beforeShiftList', i.createBy, i.beforeAdjust),
+                        afterShiftList: self.handleDateInit(i.afterDate, index, 'afterShiftList', i.party, i.afterAdjust)
                     }))
                 }
-                console.log(this.formData)
             }
-            this.loading = true
+            self.loading = true
             try {
-                const res = await getAdjustment({ id: this.params.id })
-                console.log(res)
+                const res = await getAdjustment({ id: self.params.id })
                 if (res.data) {
                     initializeFormData(res.data)
                 }
             } catch (error) {
                 console.error('加载排班配置失败', error)
             } finally {
-                this.loading = false
+                self.loading = false
             }
         },
-        getScheduleList () {
+        getScheduleList (self) { // 获取排班下拉的列表
             const params = {
                 parameters: [],
                 requestPage: {
@@ -321,57 +334,79 @@ export default {
                 },
                 sorts: []
             }
-            queryStaffSchedule(params).then(res => {
-                this.scheduleList = res.data.dataResult
-                this.scheduleOptions = this.scheduleList.map(s => ({
+            queryStaffSchedule(params).then((res) => {
+                self.scheduleList = res.data.dataResult
+                self.scheduleOptions = self.scheduleList.map(s => ({
                     label: s.title,
                     value: s.id
                 }))
             })
         },
-        getScheduleInfo (id) {
-            getStaffSchedule({ id }).then(res => {
+        async getScheduleInfo (id, self) { // 获取排班下拉的列表
+            await getStaffSchedule({ id }).then(async (res) => {
                 const { data } = res
-                this.scheduleList = [data]
+                self.scheduleList = [data]
                 const config = data.config ? JSON.parse(data.config) : {}
-                this.scheduleInfo = {
+                self.scheduleInfo = {
                     startDate: data.startDate,
                     scheduleShift: config.scheduleShift,
-                    scheduleStaff: this.userList.filter(u => config.scheduleStaff.includes(u.userId) && u.userId !== this.userId),
+                    scheduleStaff: self.userList.filter(u => config.scheduleStaff.includes(u.userId) && u.userId !== this.userId),
                     shiftList: data.staffScheduleDetailPoList
                 }
-                this.scheduleOptions = this.scheduleList.map(s => ({
+                self.scheduleOptions = self.scheduleList.map(s => ({
                     label: s.title,
                     value: s.id
                 }))
-                console.log(this.scheduleInfo)
-                this.handleScheduleChange(id)
+                await self.handleScheduleChange(id)
             })
         },
-        handleScheduleChange (val) {
-            const schedule = this.scheduleList.find(i => i.id === val)
-            if (this.$utils.isEmpty(schedule)) {
-                return this.$message.error('数据有误！所选排班不存在！')
-            }
-            const config = schedule.config ? JSON.parse(schedule.config) : {}
-            this.scheduleInfo = {
-                startDate: schedule.startDate,
-                scheduleShift: config.scheduleShift,
-                scheduleStaff: this.userList.filter(u => config.scheduleStaff.includes(u.userId) && u.userId !== this.userId),
-                shiftList: schedule.staffScheduleDetailPoList
-            }
-            this.currentShift = this.scheduleInfo.shiftList.find(s => s.userId === this.userId)
-            if (!this.currentShift) {
-                return this.$message.warning('所选排班中未含有您的信息，请重新选择！')
-            }
-            this.$set(this, 'pickerOptions', {
-                disableDate: (time) => {
-                    const startDate = new Date(schedule.startDate)
-                    const endDate = new Date(schedule.endDate)
-                    return time < startDate || time > endDate
+        async getBlockAdjustRequest (self) { // 获取锁定班次
+            const scheduleId = self.scheduleInfo.id
+            const sql = 'select * from t_adjustment_detail where status_ in ( "待审核", "审核中", "待审批") and parent_id_ in (select id_ from t_adjustment where schedule_id_ = ' + scheduleId + ' )'
+            const res = await self.$common.request('sql', sql) // 获取当前审核状态中的申请单数据
+            self.blockList = self.getBlockResult(res.variables.data || [])
+        },
+        async handleScheduleChange (val) { // 排班改变刷新数据
+            const self = this
+            await getStaffSchedule({ id: val }).then((res) => {
+                const schedule = res.data
+                if (self.$utils.isEmpty(schedule)) {
+                    return self.$message.error('数据有误！所选排班不存在！')
                 }
+                const config = schedule.config ? JSON.parse(schedule.config) : {}
+                self.scheduleInfo = {
+                    id: schedule.id,
+                    startDate: schedule.startDate,
+                    endDate: schedule.endDate,
+                    scheduleShift: config.scheduleShift,
+                    scheduleStaff: self.userList.filter(u => config.scheduleStaff.includes(u.userId) && u.userId !== self.userId),
+                    shiftList: schedule.staffScheduleDetailPoList
+                }
+                self.currentShift = self.scheduleInfo.shiftList.find(s => s.userId === self.userId) // 当前排班中我的排版表
+                if (!self.currentShift) {
+                    return self.$message.warning('所选排班中未含有您的信息，请重新选择！')
+                }
+                self.$set(self, 'pickerOptions', {
+                    disableDate: (time) => {
+                        const startDate = new Date(schedule.startDate)
+                        const endDate = new Date(schedule.endDate)
+                        return time < startDate || time > endDate
+                    }
+                })
+                if (self.formData.adjustList.length < 1) { // 编辑新增状态初始化
+                    self.formData.adjustList = []
+                }
+                self.getBlockAdjustRequest(self).then(() => { // 获取被锁定的班次
+                    self.beforeDateList = self.initDateOptions(schedule.startDate, self.currentShift)
+                    const filterid = self.$store.getters.userId || ''
+                    if (self.beforeDateList.length > 0 && Object.keys(self.blockList).length > 0) {
+                        // 过滤当前自己被占用的日期和班次
+                        self.beforeDateList = self.filterBlockList(self.blockList, self.beforeDateList, filterid)
+                    }
+                })
             })
-            this.formData.adjustList = []
+
+            // this.scheduleList.find(i => i.id === val)
             // this.pickerOptions = {
             //     disableDate: (time) => {
             //         const startDate = new Date(schedule.startDate)
@@ -381,40 +416,169 @@ export default {
             //     }
             // }
         },
-        getDays (start, end) {
+        initDateOptions (startDateStr, obj) { // 初始化日期下拉数据
+            const result = []
+            const startDate = new Date(startDateStr)
+            // 筛选出以'd'开头且后面跟数字的键组成数组
+            const dKeysArray = Object.keys(obj).filter(key => /^d\d+$/.test(key))
+            dKeysArray.forEach(key => {
+                const banci = obj[key]
+                const date = new Date(startDate)
+                const daysToAdd = parseInt(key.slice(1))
+                date.setDate(startDate.getDate() + (daysToAdd - 1))
+                if (banci) {
+                    result.push({
+                        key,
+                        banci,
+                        // date: date.toISOString().split('T')[0],
+                        value: date.toISOString().split('T')[0],
+                        label: date.toISOString().split('T')[0]
+                    })
+                } else { // 没有班次的日期禁用
+                    result.push({
+                        key,
+                        banci,
+                        // date: date.toISOString().split('T')[0],
+                        value: date.toISOString().split('T')[0],
+                        label: date.toISOString().split('T')[0],
+                        disabled: true
+                    })
+                }
+            })
+            return result
+        },
+        filterBlockList (bList, dateList, filterid) { // 根据锁定数据，过滤当前列表
+            const filterBList = bList[filterid] || []
+            const { startDate } = this.scheduleInfo
+            filterBList.forEach((el) => {
+                const index = this.getDays(startDate, el.value)
+                if (dateList[index].value === el.value) {
+                    if (dateList[index].banci.includes(el.banci)) {
+                        dateList[index].banci = dateList[index].banci.replace(el.banci, '')
+                        if (dateList[index].banci === '') {
+                            dateList[index].disabled = true
+                        }
+                    }
+                }
+            })
+            console.log('已过滤日期班次：', dateList)
+            return dateList
+        },
+        getBlockResult (data) {
+            if (data.length < 1) {
+                return {}
+            }
+            const blockResult = []
+            const tempMap = {}
+            data.forEach(item => {
+                const { create_by_, before_date_, before_adjust_ } = item
+                const key = `${create_by_}-${before_date_}`
+                if (!tempMap[key]) {
+                    tempMap[key] = {
+                        userid: create_by_,
+                        value: before_date_,
+                        banci: before_adjust_
+                    }
+                    blockResult.push(tempMap[key])
+                } else {
+                    tempMap[key].banci += `,${before_adjust_}`
+                }
+            })
+            data.forEach(item => {
+                const { party_, after_date_, after_adjust_ } = item
+                const key2 = `${party_}-${after_date_}`
+                if (!tempMap[key2]) {
+                    tempMap[key2] = {
+                        userid: party_,
+                        value: after_date_,
+                        banci: after_adjust_
+                    }
+                    blockResult.push(tempMap[key2])
+                } else {
+                    tempMap[key2].banci += `,${after_adjust_}`
+                }
+            })
+            // 按userid分组
+            const blockGrouped = {}
+            blockResult.forEach((item) => {
+                const userid = item.userid
+                if (!blockGrouped[userid]) {
+                    blockGrouped[userid] = []
+                }
+                blockGrouped[userid].push(item)
+            })
+            return blockGrouped
+        },
+        getDays (start, end) { // 根据日期获取排序 d1、d2、d3...
             if (!start || !end) {
                 return 0
             }
             return Math.ceil((new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24))
         },
+        handleDateInit (val, index, type, userid, Adjust) { // 编辑、详情状态时给行初始化
+            const shiftMap = {
+                beforeShiftList: 'beforeAdjust',
+                afterShiftList: 'afterAdjust'
+            }
+            // 更新日期时，同步清除班次及option
+            // this.formData.adjustList[index][type] = []
+            if (!this.formData.adjustList[index]) { // 页面初始化时
+                this.formData.adjustList[index] = {}
+                this.formData.adjustList[index][type] = []
+            }
+            if (!this.formData.adjustList[index][shiftMap[type]]) { // 页面初始化时
+                this.formData.adjustList[index][shiftMap[type]] = Adjust ? Adjust.split(',') : []
+            }
+            const { scheduleShift } = this.scheduleInfo
+            // 获取所选日期对应数据
+            let selectObj = this.beforeDateList.filter(item => item.value === val) // 调班人自己的数据
+            if (type === 'afterShiftList') {
+                this.handlePartyChange(userid, this.formData.adjustList[index], index, 'init')
+                selectObj = this.afterDateList.filter(item => item.value === val) // 目标人员数据
+            }
+            const shifts = selectObj[0]?.banci?.split(',') || []
+            const temp = scheduleShift.filter(i => shifts.includes(i.alias))
+            this.formData.adjustList[index].recordId = this.currentShift.id
+            this.formData.adjustList[index][type] = temp
+            return temp
+        },
         handleDateChange (val, index, type) {
             console.log(val, index, type)
-            const typeMap = {
-                beforeShiftList: this.currentShift,
-                afterShiftList: this.targetShift
-            }
             const shiftMap = {
                 beforeShiftList: 'beforeAdjust',
                 afterShiftList: 'afterAdjust'
             }
+            // 更新日期时，同步清除班次及option
+            // this.formData.adjustList[index][type] = []
+            this.formData.adjustList[index][type] = []
+            this.formData.adjustList[index][shiftMap[type]] = []
             if (!val) {
-                // 清除日期时，同步清除班次及option
-                this.formData.adjustList[index][type] = []
-                this.formData.adjustList[index][shiftMap[type]] = []
+            // 第一次选目标人/切换目标人，目标日期班次清空，不用再往下走了
                 return
             }
             const { startDate, scheduleShift } = this.scheduleInfo
             // 获取所选日期对应数据
-            const dayIndex = this.getDays(startDate, val)
-            const shifts = typeMap[type][`d${dayIndex}`] ? typeMap[type][`d${dayIndex}`].split(',') : []
+            let selectObj = this.afterDateList.filter(item => item.value === val) // 目标人员数据
+            if (type === 'beforeShiftList') {
+                selectObj = this.beforeDateList.filter(item => item.value === val) // 调班人自己的数据
+            }
+            const shifts = selectObj[0].banci.split(',')
             const temp = scheduleShift.filter(i => shifts.includes(i.alias))
-            console.log(this.formData.adjustList)
             this.formData.adjustList[index].recordId = this.currentShift.id
             this.formData.adjustList[index][type] = temp
         },
-        handlePartyChange (val, row, index) {
-            this.targetShift = this.scheduleInfo.shiftList.find(i => i.userId === val)
-            this.handleDateChange(row.startDate, index, 'afterShiftList')
+        handlePartyChange (val, row, index, type) {
+            this.targetShift = this.scheduleInfo.shiftList.find(i => i.userId === val) // 获取目标人班次
+            this.afterDateList = this.initDateOptions(this.scheduleInfo.startDate, this.targetShift) // 转换目标人能选择的日期
+            this.formData.adjustList[index]['afterDate'] = '' // 更换目标人时刷新目标日期
+            const filterid = val || ''
+            if (this.afterDateList.length > 0 && Object.keys(this.blockList).length > 0) {
+                // 过滤当前目标人被占用的日期和班次
+                this.afterDateList = this.filterBlockList(this.blockList, this.afterDateList, filterid)
+            }
+            if (type === 'change') {
+                this.handleDateChange(row.afterDate, index, 'afterShiftList')
+            }
         },
         handleFormAction ({ key }) {
             switch (key) {
@@ -496,7 +660,6 @@ export default {
                         afterAdjust: i.afterAdjust ? i.afterAdjust.join(',') : ''
                     }))
                 }
-                console.log('this.params.id', this.params.id)
                 this.submitForm(submitData)
                 // sendMessage(submitData, '1169304256906264576')
                 // 提交后通知审核人、审批人
@@ -532,8 +695,7 @@ export default {
             })
         },
         handleSelectionChange (v) {
-            console.log(v)
-            // this.selectionIndex = v.map(item => this.formData.indexOf(item))
+            this.selectionIndex = v.map(item => this.formData.adjustList.indexOf(item))
         },
         handleRemove (removeIndex, type) {
             let indexList = []
@@ -549,7 +711,7 @@ export default {
                 type: 'warning'
             }).then(() => {
                 indexList.forEach(i => {
-                    this.formData.splice(i, 1)
+                    this.formData.adjustList.splice(i, 1)
                 })
             }).catch(() => {})
         },