人员考核子表自定义组件

src/views/business/personAssessment/assessment.vue

@@ -0,0 +1,283 @@
+<template>
+    <div class="main">
+        <el-table
+            ref="statTable"
+            :data="initData"
+            border
+            stripe
+            highlight-current-row
+            style="width: 100%"
+            class="stat-table"
+            :max-height="maxHeight"
+            :header-cell-style="{ textAlign: 'center' }"
+            :cell-style="{ textAlign: 'center' }"
+            :span-method="objectSpanMethod"
+        >
+            <!-- :summary-method="getSummaries" -->
+            <!-- <el-table-column type="index" label="序号" width="50" /> -->
+            <el-table-column label="岗位" prop="gangWei">
+                <template slot-scope="scope">
+                    <span>{{ gangWeiMap[scope.row.gangWei] || scope.row.gangWei }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="科目" prop="kaoHeLeiMu" />
+            <el-table-column label="考核说明" prop="kaoHeLeiXing" width="300" />
+            <el-table-column label="要点" prop="kaoHeNeiRong" width="200" />
+            <el-table-column label="考核标准" prop="kaoHeBiaoZhun" />
+            <el-table-column label="评分" prop="kaoHePingFen" width="120">
+                <template slot-scope="scope">
+                    <el-input v-if="!readonly" v-model="scope.row.kaoHePingFen" placeholder="请输入评分" @input="handleInput(scope.$index, scope.column.property)" />
+                    <span v-else>{{ scope.row.kaoHePingFen }}</span>
+                </template>
+            </el-table-column>
+            <!-- <el-table-column label="考核情况" prop="shiFouGuoShen" /> -->
+            <el-table-column label="是否合格" prop="shiFouHeGe" width="130">
+                <template slot-scope="scope">
+                    <el-radio-group v-if="!readonly" v-model="scope.row.shiFouHeGe" @change="handleRadioChange(scope.$index)">
+                        <el-radio label="是">是</el-radio>
+                        <el-radio label="否">否</el-radio>
+                    </el-radio-group>
+                    <span v-else>{{ scope.row.shiFouHeGe }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        formData: {
+            type: Object,
+            default: () => ({})
+        },
+        params: {
+            type: Object,
+            default: () => ({})
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            maxHeight: '600px',
+            initData: [],
+            gangWeiMap: {} // 用于存储 gangWei ID 到名称的映射
+        }
+    },
+    computed: {
+        initDataWatcher () {
+            return this.formData.jyrykhjlzb
+        },
+        objectSpanMethod () {
+            return this.func1
+        },
+        transformedData () {
+            return this.initData.map(row => ({
+                ...row,
+                gangWei: this.gangWeiMap[row.gangWei] || row.gangWei
+            }))
+        }
+    },
+    watch: {
+        initDataWatcher: {
+            handler (val) {
+                this.initData = this.$utils.isEmpty(val) ? [] : val
+                const temp = JSON.parse(JSON.stringify(this.initData))
+                temp.sort((a, b) => {
+                    if (typeof a.gangWei === 'string' && typeof b.gangWei === 'string') {
+                        return a.gangWei.localeCompare(b.gangWei) // 如果 id 是字符串，则使用 localeCompare 比较
+                    } else {
+                        return a.gangWei - b.gangWei // 如果 id 是数字，则直接相减比较
+                    }
+                })
+                if (val !== temp) {
+                    this.initData = temp
+                }
+                // this.spanMap = {} // 重置 spanMap
+                // this.sortTableDataById()
+                this.fetchGangWeiNames()
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    created () {
+        console.log('formData', this.formData)
+        console.log('params', this.params)
+        // this.sortTableDataById()
+    },
+    methods: {
+        fetchGangWeiNames () {
+            // 获取所有唯一的 gangWei ID
+            const uniqueIds = [...new Set(this.initData.map(row => row.gangWei).filter(id => id))]
+            const idsString = uniqueIds.join(',')
+
+            // 调用 postChange 方法获取名称
+            this.postChange(idsString).then(names => {
+                // 更新映射表
+                names.split(', ').forEach((name, index) => {
+                    this.$set(this.gangWeiMap, uniqueIds[index], name)
+                })
+            }).catch(error => {
+                console.error('Error fetching gangWei names:', error)
+            })
+        },
+        // 岗位ID转name
+        postChange (ids) {
+            const sql = `select * from t_dyzzb where find_in_set(id_,'${ids}')`
+            return this.$common.request('sql', sql).then(res => {
+                const { data = [] } = res.variables || {} // 接收查询数据库得到的数据
+                const names = data.map(el => el.gang_wei_ming_che).join(', ')
+                console.log('Fetched names:', names) // 添加日志以便调试
+                return names
+            }).catch(error => {
+                console.error('Error fetching data:', error)
+                throw error // 重新抛出错误以便调用者处理
+            })
+        },
+        // 更新子表数据
+        emitChange () {
+            const dataZi = this.initData.map(item => ({
+                'shiFouGuoShen': item.shiFouGuoShen,
+                'kaoHeLeiXing': item.kaoHeLeiXing,
+                'kaoHeLeiMu': item.kaoHeLeiMu,
+                'kaoHeNeiRong': item.kaoHeNeiRong,
+                'kaoHePingFen': item.kaoHePingFen,
+                'gangWei': item.gangWei,
+                'kaoHeBiaoZhun': item.kaoHeBiaoZhun,
+                'shiFouHeGe': item.shiFouHeGe
+            }))
+            this.$emit('change-data', 'jyrykhjlzb', dataZi)
+        },
+        getSummaries () {
+            console.log('111')
+        },
+        // 数据排序
+        sortTableDataById () {
+            this.initData.sort((a, b) => {
+                if (typeof a.gangWei === 'string' && typeof b.gangWei === 'string') {
+                    return a.gangWei.localeCompare(b.gangWei) // 如果 id 是字符串，则使用 localeCompare 比较
+                } else {
+                    return a.gangWei - b.gangWei // 如果 id 是数字，则直接相减比较
+                }
+            })
+        },
+        // 合并单元格
+        func1 ({ row, column, rowIndex, columnIndex }) {
+            const culIdTotal = () => {
+                let p = rowIndex
+                while (p < this.initData.length && row.gangWei === this.initData[p].gangWei) {
+                    p++
+                }
+                return p - rowIndex
+            }
+
+            const culIdAndNameTotal = () => {
+                let p = rowIndex
+                while (
+                    p < this.initData.length &&
+                    row.gangWei === this.initData[p].gangWei &&
+                    row.kaoHeLeiMu === this.initData[p].kaoHeLeiMu
+                ) {
+                    p++
+                }
+                return p - rowIndex
+            }
+            const culIdAndMount3Total = () => {
+                let p = rowIndex
+                while (
+                    p < this.initData.length &&
+                    row.gangWei === this.initData[p].gangWei &&
+                    row.shiFouHeGe === this.initData[p].shiFouHeGe
+                ) {
+                    p++
+                }
+                return p - rowIndex
+            }
+
+            switch (columnIndex) {
+                case 0: // 第一列
+                    if (rowIndex > 0 && row.gangWei === this.initData[rowIndex - 1].gangWei) {
+                        return { rowspan: 0, colspan: 0 }
+                    } else {
+                        return { rowspan: culIdTotal(), colspan: 1 }
+                    }
+
+                case 1: // 第二列
+                    if (
+                        rowIndex > 0 &&
+                        row.gangWei === this.initData[rowIndex - 1].gangWei &&
+                        row.kaoHeLeiMu === this.initData[rowIndex - 1].kaoHeLeiMu
+                    ) {
+                        return { rowspan: 0, colspan: 0 }
+                    } else {
+                        return { rowspan: culIdAndNameTotal(), colspan: 1 }
+                    }
+                case 6:
+                    if (
+                        rowIndex > 0 &&
+                            row.gangWei === this.initData[rowIndex - 1].gangWei &&
+                            row.shiFouHeGe === this.initData[rowIndex - 1].shiFouHeGe
+                    ) {
+                        return { rowspan: 0, colspan: 0 }
+                    } else {
+                        return { rowspan: culIdAndMount3Total(), colspan: 1 }
+                    }
+
+                default:
+                    return { rowspan: 1, colspan: 1 } // 其他列不合并
+            }
+        },
+        // 评分输入框
+        handleInput (index, property) {
+            const row = this.initData[index]
+            const spanInfo = this.getSpanInfo(row, property)
+
+            spanInfo.indices.forEach(i => {
+                this.$set(this.initData[i], property, row[property])
+            })
+            this.emitChange()
+        },
+        // 是否合格单选框
+        handleRadioChange (index) {
+            const row = this.initData[index]
+            console.log('row', row)
+            const spanInfo = this.getSpanInfo(row, 'shiFouHeGe')
+            console.log('spanInfo', spanInfo)
+            // 同步更新所有相关行的 shiFouHeGe 值
+            this.initData.forEach((item, i) => {
+                if (item.gangWei === row.gangWei) {
+                    this.$set(item, 'shiFouHeGe', row.shiFouHeGe)
+                }
+            })
+            // 强制刷新表格以应用新的合并规则
+            this.$nextTick(() => {
+                this.$refs.statTable.doLayout()
+            })
+            this.emitChange()
+        },
+        getSpanInfo (row, property) {
+            const indices = []
+            const start = this.initData.indexOf(row)
+
+            for (let i = start; i < this.initData.length; i++) {
+                // 确保只在同一 gangWei 内进行合并
+                if (this.initData[i].gangWei === row.gangWei && this.initData[i][property] === row[property]) {
+                    indices.push(i)
+                } else {
+                    break
+                }
+            }
+
+            return { indices, count: indices.length }
+        }
+    }
+}
+</script>
+
+<style>
+/* 样式 */
+</style>