web_dist/src/views/dictionary/personnel/DeptDict.vue

<template>
    <page-layer>
        <template #header>
            <el-input v-model="text" class="w-50 m-2" style="width: 160px" placeholder="请输入关键字" clearable />
            <el-button type="primary" icon="Search" @click="qeryDeptDict" style="margin-left: 5px">查询</el-button>
            <el-button type="primary" icon="Plus" @click="addDeptInfo" style="margin-left: 5px">新增科室</el-button>
            <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
        </template>
        <template #main>
            <el-table :data="tableData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
                style="width: 100%" :height="tableHeight" stripe highlight-current-row>
                <el-table-column type="index" label="序号" width="50" fixed />
                <el-table-column prop="delFlag" label="停用" width="50" fixed>
                    <template #default="scope">
                        <span v-if="scope.row.delFlag === '1'" style="color:#d12020;">停用</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="科室编码" width="120" fixed />
                <el-table-column prop="name" label="名称" width="180" fixed />
                <el-table-column prop="className" label="分类" />
                <el-table-column prop="pyCode" label="拼音码" width="120" />
                <el-table-column prop="dcode" label="五笔码" width="120" />
                <el-table-column prop="ncode" label="院内码" />
                <el-table-column prop="mzFlag" label="门诊开放">
                    <template #default="scope">
                        <span v-if="scope.row.mzFlag === '1'" style="color:#007175;">是</span>
                        <span v-else style="color:#d12020;">否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="yjFlag" label="医技上线">
                    <template #default="scope">
                        <span v-if="scope.row.yjFlag === '1'" style="color:#007175;">是</span>
                        <span v-else style="color:#d12020;">否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="xnhDeptCode" label="新农合科室编码" width="100" />
                <el-table-column prop="xnhDeptName" label="新农合科室名称" width="180" />
                <el-table-column prop="parentName" label="父科室" width="180" />
                <el-table-column prop="ghChargeFlag" label="收取挂号费">
                    <template #default="scope">
                        <span v-if="scope.row.ghChargeFlag === '1'" style="color:#007175;">是</span>
                        <span v-else style="color:#d12020;">否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="supplyFlag" label="用药方式执行科室" width="120">
                    <template #default="scope">
                        <span v-if="scope.row.supplyFlag === '1'" style="color:#007175;">是</span>
                        <span v-else style="color:#d12020;">否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ghjzFlag" label="门诊挂号就诊" width="100">
                    <template #default="scope">
                        <span v-if="scope.row.ghjzFlag === '1'" style="color:#007175;">是</span>
                        <span v-else style="color:#d12020;">否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="officePos" label="就诊地点" width="280" />
                <el-table-column label="操作" fixed="right" width="200" align="center" header-align="center">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button :type="scope.row.delFlag === '1' ? 'primary' : 'warning'" size="small"
                            @click="handleStop(scope.row)">
                            <span v-if="scope.row.delFlag === '1'">启用</span>
                            <span v-else>停用</span>
                        </el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
                :total="tableData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </template>
    </page-layer>
    <el-dialog v-model="showDeptEdit" :close-on-click-modal="false" :close-on-press-escape="false" :title="deptTitle"
        width="70%" destroy-on-close>
        <DeptInformation :deptDetail="deptDetail" @closeDeptEditFor="closeDeptEditAdd" />
    </el-dialog>
</template>
<script setup name="DeptDict">
import { ref, onMounted, nextTick } from 'vue'
import PageLayer from '@/layout/PageLayer.vue'
import store from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
import { selectDeptDict, selectDeptDictByCode, updateDeptStopOrUsed, delDeptDictByCode } from '@/api/dictionary/personnel/deptDict.js'
import DeptInformation from '@/views/dictionary/personnel/DeptInformation.vue'
import { Export } from '@/utils/ExportExcel'
import { clone } from '@/utils/clone'

const windowSize = store.state.app.windowSize;
const tableHeight = windowSize.h / 1.07;
const pageSize = ref(30)
const currentPage = ref(1)
const handleSizeChange = (val) => {
    pageSize.value = val
}
const handleCurrentChange = (val) => {
    currentPage.value = val
}
const text = ref('')
const tableData = ref([])
const deptTitle = ref('')
const showDeptEdit = ref(false)
const deptDetail = ref({})

onMounted(() => {
    nextTick(() => {
        qeryDeptDict()
    })
})

// 查询科室字典
const qeryDeptDict = () => {
    selectDeptDict(text.value)
        .then((res) => {
            tableData.value = res
        });
}

// 新增科室字典
const addDeptInfo = () => {
    deptDetail.value = {}
    showDeptEdit.value = true
}

const handleEdit = (row) => {
    selectDeptDictByCode(row.code).then((res) => {
        deptTitle.value = '编辑科室信息'
        deptDetail.value = res
        showDeptEdit.value = true
    })
}

const handleDelete = (row) => {
    let title = '请确认是否删除<span style="color:#d12020;">' + row.name + '</span>?'
    ElMessageBox.confirm(title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        delDeptDictByCode(row.code).then((res) => {
            ElMessage({
                type: "warning",
                message: res.cg,
                duration: 2500,
                showClose: true,
            });
            qeryDeptDict()
            return
        })
    }).catch((action) => {
        if (action === 'cancel') {

        }
    })

}

const handleStop = (row) => {
    let delFlag
    let title
    if ('1' === row.delFlag) {
        delFlag = '0'
        title = '请确认是否启用<span style="color:#d12020;">' + row.name + '</span>?'
    } else {
        delFlag = '1'
        title = '请确认是否停用<span style="color:#d12020;">' + row.name + '</span>?'
    }

    ElMessageBox.confirm(title, {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        updateDeptStopOrUsed(row.code, delFlag).then((res) => {
            ElMessage({
                type: "warning",
                message: res.cg,
                duration: 2500,
                showClose: true,
            });
            qeryDeptDict()
            return
        })
    }).catch((action) => {
        if (action === 'cancel') {

        }
    })
}

const closeDeptEditAdd = () => {
    showDeptEdit.value = false

    qeryDeptDict()
}

// 导出科室
const exportData = () => {
    if (tableData.value.length === 0) {
        ElMessage({
            message: "没有可以导出的数据！",
            type: "warning",
            duration: 2500,
            showClose: true,
        });
    } else {
        const title = {
            delFlag: "停用",
            code: "科室编码",
            name: "名称",
            className: "分类",
            pyCode: "拼音码",
            dcode: "五笔码",
            ncode: "院内码",
            mzFlag: "门诊开放",
            yjFlag: "医技上线",
            xnhDeptCode: "新农合科室编码",
            xnhDeptName: "新农合科室名称",
            parentName: "父科室",
            ghChargeFlag: "收取挂号费",
            supplyFlag: "用药方式执行科室",
            ghjzFlag: "门诊挂号就诊",
            officePos: "就诊地点",
        };

        let d = clone(tableData.value)
        d.forEach(val => {
            if(val.delFlag === '1'){
                val.delFlag = '停用'
            } else {
                val.delFlag = ''
            }
            if(val.mzFlag === '1'){
                val.mzFlag = '是'
            } else {
                val.mzFlag = '否'
            }
            if(val.yjFlag === '1'){
                val.yjFlag = '是'
            } else {
                val.yjFlag = '否'
            }
            if(val.ghChargeFlag === '1'){
                val.ghChargeFlag = '是'
            } else {
                val.ghChargeFlag = '否'
            }
            if(val.supplyFlag === '1'){
                val.supplyFlag = '是'
            } else {
                val.supplyFlag = '否'
            }
            if(val.ghjzFlag === '1'){
                val.ghjzFlag = '是'
            } else {
                val.ghjzFlag = '否'
            }
        });

        Export(d, title, "科室字典信息");

    }
}
</script>