web_dist/src/views/dictionary/serviceNumber/HealthEducation.vue

<template>
    <page-layer>
        <template #header>
            <el-button type="primary" icon="Plus" @click="onAddItem" style="margin-left: 5px">新增</el-button>
        </template>
        <template #main>
            <el-tabs v-model="editableTabsValue" type="border-card" @tab-click="handleClick">
                <el-tab-pane key="healthEducation" label="健康教育字典" name="healthEducation">
                    <el-table :data="healthEducationData" border style="width: 100%" stripe highlight-current-row
                        :key="healthEducationKey">
                        <el-table-column type="index" label="序号" width="100" />
                        <el-table-column prop="code" label="编码" width="100"></el-table-column>
                        <el-table-column prop="name" label="名称" width="280">
                            <template v-slot="scope">
                                <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.name"></el-input>
                                <span v-else>{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sortNo" label="排序" width="80">
                            <template v-slot="scope">
                                <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.sortNo"></el-input>
                                <span v-else>{{ scope.row.sortNo }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="url" label="路径" width="320">
                            <template v-slot="scope">
                                <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.url"></el-input>
                                <span v-else>{{ scope.row.url }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型" width="180">
                            <template v-slot="scope">
                                <div v-if="scope.row.isEdit">
                                    <el-select v-model="scope.row.type" clearable placeholder="请选择类型">
                                        <el-option v-for="option in HETypeOptions" :key="option.code" :label="option.name"
                                            :value="option.code"></el-option>
                                    </el-select>
                                </div>
                                <div v-else>
                                    <el-select v-model="scope.row.type" disabled placeholder="请选择类型">
                                        <el-option v-for="option in HETypeOptions" :key="option.code" :label="option.name"
                                            :value="option.code"></el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                            <template #default="scope">
                                <el-button type="primary" size="small" v-if="!scope.row.isEdit"
                                    @click="editHealthEducation(scope.row)">编辑</el-button>
                                <el-button type="primary" size="small" v-if="scope.row.isEdit"
                                    @click="updateHealthEducation(scope.row)">保存</el-button>
                                <el-button type="primary" size="small" v-if="scope.row.isEdit"
                                    @click="cancelHealthEducation(scope.row, scope.$index)">取消
                                </el-button>
                                <el-button type="danger" size="small"
                                    @click.prevent="deleteHealthEducation(scope.$index, scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane key="heType" label="健康教育类型" name="heType">
                    <el-table :data="heTypeData" border style="width: 100%" stripe highlight-current-row
                        :key="heTypeKey">
                        <el-table-column type="index" label="序号" width="100" />
                        <el-table-column prop="code" label="类型编码" width="100">
                            <template v-slot="scope">
                                <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.code"></el-input>
                                <span v-else>{{ scope.row.code }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="360">
                            <template v-slot="scope">
                                <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.name"></el-input>
                                <span v-else>{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序" width="100">
                            <template v-slot="scope">
                                <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.sort"></el-input>
                                <span v-else>{{ scope.row.sort }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="delFlag" label="是否有效" width="150">
                            <template v-slot="scope">
                                <div v-if="scope.row.isEdit">
                                    <el-select v-model="scope.row.delFlag" clearable placeholder="请选择是否有效">
                                        <el-option v-for="option in delFlagOptions" :key="option.code" :label="option.name"
                                            :value="option.code"></el-option>
                                    </el-select>
                                </div>
                                <div v-else>
                                    <el-select v-model="scope.row.delFlag" disabled placeholder="请选择是否有效">
                                        <el-option v-for="option in delFlagOptions" :key="option.code" :label="option.name"
                                            :value="option.code"></el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                            <template #default="scope">
                                <el-button type="primary" size="small" v-if="!scope.row.isEdit"
                                    @click="editHeType(scope.row)">编辑</el-button>
                                <el-button type="primary" size="small" v-if="scope.row.isEdit"
                                    @click="updateHeType(scope.row)">保存</el-button>
                                <el-button type="primary" size="small" v-if="scope.row.isEdit"
                                    @click="cancelHeType(scope.row, scope.$index)">取消
                                </el-button>
                                <el-button type="danger" size="small"
                                    @click.prevent="deleteHeType(scope.$index, scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </template>
    </page-layer>
</template>
<script setup name="HealthEducation">
import { ref, onMounted, nextTick } from 'vue'
import PageLayer from '@/layout/PageLayer.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
    selectServiceNumberDict, selectHealthEducation, saveHealthEducation, delHealthEducationByCode,
    selectHeType, saveHeType, delHeTypeByCode
 } from '@/api/dictionary/serviceNumber/health-education.js'

const editableTabsValue = ref('healthEducation')
const megTip = '编码(code)有变更,原始字典记录存在关联,请谨慎做更改，是否确认！！！'
const delFlagOptions = [{ code: '0', name: '有效' }, { code: '1', name: '无效' }]

let healthEducationKey = ref(1)
const HETypeOptions = ref([])
const healthEducationData = ref([])

let heTypeKey = ref(1)
const heTypeData = ref([])

onMounted(() => {
    nextTick(() => {
        queryServiceNumberDict()
        queryHealthEducation()
    })
})

const queryServiceNumberDict = () => {
    selectServiceNumberDict()
        .then((res) => {
            HETypeOptions.value = res.HEType
        })
        .catch(() => {
            HETypeOptions.value = []
        })
}

// 查询服务号字典中健康教育字典
const queryHealthEducation = () => {
    selectHealthEducation()
        .then(res => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            healthEducationData.value = res
        })
        .catch(() => {
            healthEducationData.value = []
        })
}

// 查询服务号字典中健康教育类型字典
const queryHeType = () => {
    selectHeType()
        .then(res => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            heTypeData.value = res
        })
        .catch(() => {
            heTypeData.value = []
        })
}

// 新增行
const onAddItem = () => {
    if (editableTabsValue.value === 'healthEducation') {
        healthEducationData.value.push({
            code: '',
            name: '',
            sortNo: '',
            url: '',
            type: '',
            isEdit: true,
            isAdd: true,
        })
    } else if(editableTabsValue.value === 'heType'){
        heTypeData.value.push({
            code: '',
            name: '',
            sort: '',
            delFlag: '',
            isEdit: true,
            isAdd: true,
        })
    }
} 

// 服务号字典中健康教育字典增删改存开始
// 编辑
const editHealthEducation = (row) => {
    // 备份原始数据
    row['oldRow'] = JSON.parse(JSON.stringify(row))
    row.isEdit = true
}
// 取消
const cancelHealthEducation = (row, index) => {
    // 如果是新增的数据
    if (row.isAdd) {
        healthEducationData.value.splice(index, 1)
    } else {
        // 不是新增的数据  还原数据
        for (const i in row.oldRow) {
            row[i] = row.oldRow[i]
        }
    }
    healthEducationKey.value = Math.random()
}
// 保存
const updateHealthEducation = (row) => {
    if (row.isAdd) {
        let fe = 0
        for (let num in healthEducationData.value) {
            if (healthEducationData.value[num].code === row.code) {
                fe++
            }
        }
        if (fe == 2) {
            ElMessage({
                type: "warning",
                message: "存在重复的健康教育，请核对!",
                duration: 2500,
                showClose: true,
            });
        } else {
            callSaveHealthEducation(row, null)
        }

    } else {
        if (!row.code || !row.name) {
            ElMessage({
                type: "warning",
                message: "健康教育编码或名称不存在，请检查!",
                duration: 2500,
                showClose: true,
            });
            return
        }

        let oldCode = row.oldRow.code
        if (oldCode !== row.code) {
            ElMessageBox.confirm(megTip, {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning',
                distinguishCancelAndClose: true,
                dangerouslyUseHTMLString: true
            }).then(() => {
                callSaveHealthEducation(row, oldCode)
            }).catch((action) => {
                if (action === 'cancel') {
                    queryHealthEducation()
                }
            })
        } else {
            callSaveHealthEducation(row, oldCode)
        }
    }
}

const callSaveHealthEducation = (row, oldCode) => {
    let title = '请确认是否保存<span style="color:#d12020;">' + row.name + '</span>?'
    ElMessageBox.confirm(title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        saveHealthEducation(row).then((res) => {
            ElMessage({
                type: "success",
                message: res.cg,
                duration: 2500,
                showClose: true,
            });
            if (oldCode !== null && oldCode !== row.code) {
                // 删除原始数据
                delHealthEducationByCode(oldCode).then((res) => {
                    queryHealthEducation()
                })
                return
            } else {
                queryHealthEducation()
            }
        })
    }).catch((action) => {
        if (action === 'cancel') {
            queryHealthEducation()
        }
    })
}

const deleteHealthEducation = (index, row) => {
    let title = '请确认是否删除<span style="color:#d12020;">' + row.name + '</span>?'
    ElMessageBox.confirm(title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        delHealthEducationByCode(row.code).then((res) => {
            ElMessage({
                type: "success",
                message: res.cg,
                duration: 2500,
                showClose: true,
            });
            queryHealthEducation()
            return
        })
    }).catch((action) => {
        if (action === 'cancel') {
            queryHealthEducation()
        }
    })
}
// 服务号字典中健康教育字典增删改存结束

// 服务号字典中健康教育类型字典增删改存开始
// 编辑
const editHeType = (row) => {
    // 备份原始数据
    row['oldRow'] = JSON.parse(JSON.stringify(row))
    row.isEdit = true
}
// 取消
const cancelHeType = (row, index) => {
    // 如果是新增的数据
    if (row.isAdd) {
        heTypeData.value.splice(index, 1)
    } else {
        // 不是新增的数据  还原数据
        for (const i in row.oldRow) {
            row[i] = row.oldRow[i]
        }
    }
    heTypeKey.value = Math.random()
}
// 保存
const updateHeType = (row) => {
    if (!row.code || !row.name) {
        ElMessage({
            type: "warning",
            message: "健康教育类型编码或名称不存在，请检查!",
            duration: 2500,
            showClose: true,
        });
        return
    }
    
    if (row.isAdd) {
        let fe = 0
        for (let num in heTypeData.value) {
            if (heTypeData.value[num].code === row.code) {
                fe++
            }
        }
        if (fe == 2) {
            ElMessage({
                type: "warning",
                message: "存在重复的健康教育类型，请核对!",
                duration: 2500,
                showClose: true,
            });
            return
        } else {
            callSaveHeType(row, null)
        }

    } else {
        let oldCode = row.oldRow.code
        if (oldCode !== row.code) {
            ElMessageBox.confirm(megTip, {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning',
                distinguishCancelAndClose: true,
                dangerouslyUseHTMLString: true
            }).then(() => {
                callSaveHeType(row, oldCode)
            }).catch((action) => {
                if (action === 'cancel') {
                    queryHeType()
                    return
                }
            })
        } else {
            callSaveHeType(row, oldCode)
        }
    }
}

const callSaveHeType = (row, oldCode) => {
    let title = '请确认是否保存<span style="color:#d12020;">' + row.name + '</span>?'
    ElMessageBox.confirm(title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        saveHeType(row).then((res) => {
            ElMessage({
                type: "success",
                message: res.cg,
                duration: 2500,
                showClose: true,
            });
            if (oldCode !== null && oldCode !== row.code) {
                // 删除原始数据
                delHeTypeByCode(oldCode).then((res) => {
                    queryHeType()
                })
                return
            } else {
                queryHeType()
            }
        })
    }).catch((action) => {
        if (action === 'cancel') {
            queryHeType()
        }
    })
}

const deleteHeType = (index, row) => {
    let title = '请确认是否删除<span style="color:#d12020;">' + row.name + '</span>?'
    ElMessageBox.confirm(title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        delHeTypeByCode(row.code).then((res) => {
            ElMessage({
                type: "success",
                message: res.cg,
                duration: 2500,
                showClose: true,
            });
            queryHeType()
            return
        })
    }).catch((action) => {
        if (action === 'cancel') {
            queryHeType()
        }
    })
}
// 服务号字典中健康教育类型字典增删改存结束

const handleClick = (tab, event) => {
    // 查询哪个tab页面
    editableTabsValue.value = tab.props.name

    if (editableTabsValue.value === 'healthEducation') {
        queryHealthEducation()
    } else if(editableTabsValue.value === 'heType'){
        queryHeType()
    }
}
</script>
<style lang="scss" deep>
.el-dialog__body {
    padding: 0 16px;
    height: calc(100% - 25px);
}

.el-tabs {
    height: calc(100% - 27px);

    .el-tabs__content {
        padding: 5px;
        height: calc(100% - 27px);
    }

    .el-tab-pane {
        height: calc(100% - 27px);
        overflow: auto;
    }
}
</style>