vue2-client 1.15.121 → 1.15.122

package/.history/src/base-client/components/his/XShiftSchedule/XShiftSchedule_20250807135349.vue

@@ -0,0 +1,364 @@
+<template>
+  <div v-if="pattern == 'schedule'">
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      :rowSelection="rowSelection"
+      :scroll="{ y: '70vh' }">
+    <span slot="time" class="time-title">
+      <span v-for="(item, index) in configData.timePeriod" :key="index">{{ item }}</span>
+    </span>
+      <div v-for="(item, index) in weekDays" :key="index" :slot="item.key" class="week_last_next_btn">
+        <a-button slot="lastWeek" icon="left" size="large" @click="handleLastWeek" v-if="item.title == '周一'" />
+        <div class="time-title">
+          <span>{{ item.title }}</span>
+          <span>{{ currentWeekDates[index].toLocaleDateString() }}</span>
+        </div>
+        <a-button slot="nextWeek" icon="right" size="large" @click="handleNextWeek" v-if="item.title == '周日'"/>
+      </div>
+      <template :slot="day.key" slot-scope="text, record" v-for="day in shiftTable">
+        <div class="time-title" :key="day.key">
+          <a-button v-for="(item, index) in record[day.key]" :key="index" @click="handleShiftChange(day.key, index, record)">{{ item === 1 || item === '1' ? '坐诊' : '休息' }}</a-button>
+        </div>
+      </template>
+      <template slot="sk_limit" slot-scope="text, record">
+        <a-input-number id="inputNumber" v-model="record.sk_limit" :min="configData.sk_limitMin" :max="configData.sk_limitMax" />
+      </template>
+    </a-table>
+  </div>
+  <div v-else-if="pattern == 'form'">
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      :row-selection="rowSelection"
+      bordered
+    >
+      <!-- 为输入框类型的列添加模板 -->
+      <template v-for="col in inputColumns" :slot="col.dataIndex" slot-scope="text, record">
+        <a-input
+          :key="col.dataIndex"
+          :value="record[col.dataIndex]"
+          :placeholder="`请输入${col.title}`"
+          @input="(val) => handleInputChange(record, col.dataIndex, val)"
+        />
+      </template>
+    </a-table>
+  </div>
+</template>
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  data () {
+    return {
+      // 模式
+      pattern: 'schedule',
+      data: [],
+      // 列配置
+      columns: [],
+      // 列名
+      columnNames: [],
+      // 选中的行键值集合
+      selectedRows: [],
+      // 选中的行信息集合
+      selectedRowKeys: [],
+      // 原始数据备份
+      originalData: [],
+      // 配置参数
+      configData: {},
+      // 当前显示的周次日期
+      currentWeekDates: [],
+      weekDays: [...['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((title, index) => {
+        const key = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][index]
+        return { title, key }
+      })],
+      // 排班时间表
+      shiftTable: [...['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((title, index) => {
+          const key = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][index]
+          return {
+            key, dataIndex: key, scopedSlots: { customRender: key }, slots: { title: key }, align: 'center', width: key === 'Monday' || key === 'Sunday' ? 170 : 120
+          }
+        }),
+        {
+          title: '排班数',
+          key: 'sk_limit',
+          dataIndex: 'sk_limit',
+          scopedSlots: { customRender: 'sk_limit' },
+          align: 'center'
+        }
+      ]
+    }
+  },
+  props: {
+    // 配置名
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    // 服务名
+    serviceName: {
+      type: String,
+      default: 'af-his'
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: (selectedRowKeys, selectedRows) => {
+          this.onSelectChange(selectedRowKeys, selectedRows)
+        }
+      }
+    },
+    inputColumns () {
+      return this.columns.filter(col => col.type === 'input')
+    }
+  },
+  mounted () {
+    this.initWeekDates()
+  },
+  methods: {
+    handleShiftChange (day, index, record) {
+      // 找到当前记录在data中的索引
+      const dataIndex = this.data.findIndex(item => item.id === record.id)
+      if (dataIndex === -1) return
+      // 获取当前状态
+      const currentValue = record[day][index]
+      const newValue = currentValue === 1 || currentValue === '1' ? 0 : 1
+      // 更新按钮显示
+      this.$set(record[day], index, newValue)
+      // 同步更新data中的数据
+      this.$set(this.data[dataIndex][day], index, newValue)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    // 获取选中的行数据
+    getSelectedRowData () {
+      return this.selectedRows
+    },
+    // 获取全部数据
+    getAllTable () {
+      return this.data
+    },
+    // 初始化数据
+    async init (queryParamsName) {
+      getConfigByName(queryParamsName, this.serviceName, result => {
+        this.configData = result
+        runLogic(result.dataSource, {}, this.serviceName).then(res => {
+          this.columns = []
+          this.columns = JSON.parse(JSON.stringify(this.configData.columns))
+                     // 为有row属性的列添加自定义渲染函数
+           this.columns.forEach(col => {
+             if (col.row && col.row > 1) {
+               col.customRender = (value, row, index) => {
+                 return this.renderRowSpanContent(value, row, index, col)
+               }
+             }
+             // 为有type属性的列添加输入框渲染
+             if (col.type === 'input') {
+               col.scopedSlots = { customRender: col.dataIndex }
+             }
+           })
+          this.pattern = result.pattern
+          if (this.pattern == 'schedule') {
+            for (let i = 0; i < this.shiftTable.length; i++) {
+              this.columns.push(this.shiftTable[i])
+            }
+            if (res && Array.isArray(res)) {
+              const weekDays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
+              const shifts = ['am', 'pm', 'evening']
+              let key = 0
+              this.data = res.map(item => {
+                const scheduleData = {
+                  key: key++
+                }
+                this.configData.columnsName.forEach(columnName => { scheduleData[columnName] = item[columnName] })
+                weekDays.forEach(day => {
+                  scheduleData[day.charAt(0).toUpperCase() + day.slice(1)] = shifts.map(shift => item[`f_${day}_${shift}`] === '1' ? 1 : 0)
+                })
+                return scheduleData
+              })
+              // 保存原始数据
+              this.originalData = JSON.parse(JSON.stringify(this.data))
+            }
+          } else if (this.pattern == 'form') {
+            // 处理form模式下的行复制逻辑
+            this.processFormData(res)
+          }
+        })
+      })
+    },
+    // 查询数据函数
+    filterTableData (filters) {
+      if (!filters || Object.keys(filters).length === 0) {
+        // 如果没有过滤条件，恢复原始数据
+        this.data = JSON.parse(JSON.stringify(this.originalData))
+        return
+      }
+      // 从原始数据开始过滤
+      this.data = this.originalData.filter(item => {
+        // 检查每一项是否满足所有过滤条件
+        return Object.entries(filters).every(([key, value]) => {
+          // 如果过滤值是字符串，进行模糊匹配
+          if (typeof value === 'string') {
+            return item[key] && item[key].toString().toLowerCase().includes(value.toLowerCase())
+          }
+          // 如果过滤值是数字，进行精确匹配
+          return item[key] === value
+        })
+      })
+    },
+    // 初始化周次日期
+    initWeekDates () {
+      const today = new Date()
+      const currentDay = today.getDay() || 7 // 将周日的0转换为7
+      const monday = new Date(today)
+      monday.setDate(today.getDate() - currentDay + 1) // 设置为本周一
+
+      this.currentWeekDates = Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(monday)
+        date.setDate(monday.getDate() + index)
+        return date
+      })
+    },
+    // 切换到上一周
+    handleLastWeek () {
+      const monday = new Date(this.currentWeekDates[0])
+      monday.setDate(monday.getDate() - 7)
+      this.updateWeekDates(monday)
+    },
+    // 切换到下一周
+    handleNextWeek () {
+      const monday = new Date(this.currentWeekDates[0])
+      monday.setDate(monday.getDate() + 7)
+      this.updateWeekDates(monday)
+    },
+    // 更新周次日期
+    updateWeekDates (monday) {
+      this.currentWeekDates = Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(monday)
+        date.setDate(monday.getDate() + index)
+        return date
+      })
+    },
+    onSelect (record, selected, selectedRows, nativeEvent) {
+      console.log('选择的行:', record)
+      console.log('是否选中:', selected)
+      console.log('所有选中的行:', selectedRows)
+    },
+    onSelectAll (selected, selectedRows, changeRows) {
+      console.log('全选状态:', selected)
+      console.log('所有选中的行:', selectedRows)
+      console.log('变化的行:', changeRows)
+    },
+    // 处理form模式下的数据，处理row属性和行复制
+    processFormData (originalData) {
+      if (!originalData || !Array.isArray(originalData)) {
+        this.data = []
+        return
+      }
+      // 查找有row属性的列
+      const rowColumns = this.columns.filter(col => col.row && col.row > 1)
+
+      if (rowColumns.length === 0) {
+        // 没有需要处理的列，直接使用原始数据
+        this.data = originalData
+        return
+      }
+      // 处理数据，为每个有row属性的列复制行
+      const processedData = []
+      originalData.forEach((item, originalIndex) => {
+        // 找到当前行对应的row值（取第一个有row属性的列）
+        const firstRowColumn = rowColumns.find(col => col.dataIndex === item[col.indexCol])
+        const rowCount = firstRowColumn ? firstRowColumn.row : 1
+
+        // 复制行
+        for (let i = 0; i < rowCount; i++) {
+          const newRow = {
+            ...item,
+            key: `${originalIndex}_${i}`,
+            _originalIndex: originalIndex,
+            _rowIndex: i
+          }
+          processedData.push(newRow)
+        }
+      })
+      this.data = processedData
+    },
+    // 渲染行合并内容
+    renderRowSpanContent (value, row, index, column) {
+      // 如果是第一行，显示内容并设置rowSpan
+      if (row._rowIndex === 0) {
+        return {
+          children: value,
+          attrs: {
+            rowSpan: column.row
+          }
+        }
+      }
+      // 其他行隐藏单元格
+      return {
+        children: value,
+        attrs: {
+          rowSpan: 0
+        }
+      }
+    },
+    // 渲染输入框内容
+    renderInputContent (value, row, index, column) {
+      return {
+        children: h => {
+          return h('a-input', {
+            props: {
+              value: value,
+              placeholder: `请输入${column.title}`
+            },
+            on: {
+              input: (val) => {
+                this.handleInputChange(row, column.dataIndex, val)
+              }
+            }
+          })
+        }
+      }
+    },
+    // 处理输入框值变化
+    handleInputChange (row, dataIndex, value) {
+      // 更新数据
+      this.$set(row, dataIndex, value)
+      console.log('输入框值变化:', { row, dataIndex, value })
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        this.init(newValue)
+      },
+      deep: true,
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time-title {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+}
+.week_last_next_btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+::v-deep .ant-table-thead > tr > th,
+::v-deep .ant-table-tbody > tr > td {
+  padding: 8px 16px !important;
+  overflow-wrap: break-word;
+}
+</style>