新增健康教育字典

src/api/dictionary/serviceNumber/health-education.js

@@ -0,0 +1,50 @@
+import request from '../../../utils/request'
+
+/**
+ * 查询健康教育相关字典
+ * @returns 
+ */
+export function selectServiceNumberDict() {
+    return request({
+        url: '/serviceNumber/selectServiceNumberDict',
+        method: 'get',
+        params: {},
+    })
+}
+
+/**
+ * 查询健康教育内容
+ * @returns 
+ */
+export function selectHealthEducation() {
+    return request({
+        url: '/serviceNumber/selectHealthEducation',
+        method: 'get',
+        params: {},
+    })
+}
+
+/**
+ * 保存更新健康教育字典
+ * @returns 
+ */
+export function saveHealthEducation(data) {
+    return request({
+        url: '/serviceNumber/saveHealthEducation',
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 根据编码删除健康教育字典信息
+ * @param {*} code 编码
+ * @returns 
+ */
+export function delHealthEducationByCode(code) {
+    return request({
+        url: '/serviceNumber/delHealthEducationByCode',
+        method: 'get',
+        params: { code },
+    })
+}

src/router/modules/dashboard.js

@@ -371,6 +371,11 @@ const route = [
                 component: createNameComponent(() => import('@/views/dictionary/personnel/EmployeeMi.vue')),
                 meta: {title: '职工字典'},
             },
+            {
+                path: 'serviceNumber/healthEducation',
+                component: createNameComponent(() => import('@/views/dictionary/serviceNumber/HealthEducation.vue')),
+                meta: {title: '健康教育字典'},
+            },
         ],
     },
     {

src/views/dictionary/serviceNumber/HealthEducation.vue

@@ -0,0 +1,292 @@
+<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-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 } from '@/api/dictionary/serviceNumber/health-education.js'
+
+const editableTabsValue = ref('healthEducation')
+const megTip = '编码(code)有变更,原始字典记录存在关联,请谨慎做更改，是否确认！！！'
+
+let healthEducationKey = ref(1)
+const HETypeOptions = ref([])
+const healthEducationData = 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 onAddItem = () => {
+    if (editableTabsValue.value === 'healthEducation') {
+        healthEducationData.value.push({
+            code: '',
+            name: '',
+            pyCode: '',
+            dcode: '',
+            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,
+            });
+            return
+        } 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()
+                    return
+                }
+            })
+        } 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 handleClick = (tab, event) => {
+    // 查询哪个tab页面
+    editableTabsValue.value = tab.props.name
+
+    if (editableTabsValue.value === 'healthEducation') {
+        queryHealthEducation()
+    } 
+}
+</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>