web_dist/src/views/logisticsMaterials/inventoryManagement/inventoryAlert/index.vue

<template>
    <div class="layout_display_flex_y">
        <div class="obviousBox" style="margin-bottom: 6px;">
            <searchArea :searchData="searchData" @submit="searchByForm"></searchArea>
        </div>

        <div class="layout_display_flex_y" style="height: 85%">
            <div style="background-color: #fff;padding: 8px">
                <!-- <el-button type="primary" icon="Search" @click="queryItem" style="margin-left: 5px">查询</el-button> -->
                <!-- <el-button type="primary" icon="Plus" @click="onAddItem" style="margin-left: 5px">新增</el-button> -->
                <el-checkbox v-model="checked1" label="超出上下限项目" size="small" />
            </div>
            <el-table
                :data="ypClassData.slice(pageSizeClass * (currentPageClass - 1), pageSizeClass * currentPageClass)"
                border style="width: 100%" height="100%" stripe highlight-current-row class="ypClassTable normal-size">
                <el-table-column type="index" label="序号">
                </el-table-column>
                <el-table-column prop="code" label="项目编码">
                </el-table-column>
                <el-table-column prop="name" label="项目类型">
                </el-table-column>
                <el-table-column prop="name" label="规格">
                </el-table-column>
                <el-table-column prop="name" label="单位">
                </el-table-column>
                <el-table-column prop="name" label="库存上限">
                    <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="库存下限">
                    <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="当前库存">
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="180" width="180" center>
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="editYpClass(scope.row)">删除</el-button>
                        <el-button type="primary" size="small" @click="editYpClass(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination :current-page="currentPageClass" :page-size="pageSizeClass" :page-sizes="[10, 15, 20, 25]"
                :total="ypClassData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
                @size-change="handleSizeChangeClass" @current-change="handleCurrentChangeClass">
            </el-pagination>
        </div>
    </div>
    <el-dialog v-model="showDialog" :close-on-click-modal="false" :close-on-press-escape="false"
        :title="(currentEditCode ? '编辑' : '新增') + '退货申请'" width="100%" destroy-on-close fullscreen>
        <!-- <YpPrintName :ypPrintNameDetail="ypPrintNameDetail" @closeYpPrintNameEditFor="closeYpPrintName" /> -->
        <info :currentEditCode="currentEditCode"></info>
    </el-dialog>
</template>
<script setup name="YpDict">
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    selectYpClass, saveYpClass, delYpClassByCode,
    selectDrugKind,
    selectYpDosage,
    selectYpUnit,
    selectYpChargeGroup,
    selectYpVisibleFlag,
    selectYpSupply,
    selectYpManuFactory,
} from '@/api/yp-dict/yp-dict-base.js'
import searchArea from '@/components/searchArea/index.vue';
import info from '@/views/logisticsMaterials/inventoryManagement/warehouseReturn/info.vue';

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

const searchData = ref([
    {
        label: '项目编码',
        key: 'vehicleName',
        type: 'input',
        value: '',
        clearable: true,
    },
    {
        label: '项目名称',
        key: 'vehicleName',
        type: 'input',
        value: '',
        clearable: true,
    },
])
const pageSizeClass = ref(20)
const currentPageClass = ref(1)
const handleSizeChangeClass = (val) => {
    pageSizeClass.value = val
}
const handleCurrentChangeClass = (val) => {
    currentPageClass.value = val
}

const pageSizeKind = ref(20)
const currentPageKind = ref(1)

const pageSizeDosage = ref(20)
const currentPageDosage = ref(1)

const pageSizeUnit = ref(20)
const currentPageUnit = ref(1)

const pageSizeSupply = ref(20)
const currentPageSupply = ref(1)

const pageSizeManuFactory = ref(20)
const currentPageManuFactory = ref(1)

const ypClassData = ref([])
const drugKindData = ref([])
const ypDosageData = ref([])
const ypUnitData = ref([])
const ypChargeGroupData = ref([])
const visibleFlagData = ref([])
const ypSupplyData = ref([])
const ypManuFactoryData = ref([])

let showDialog = ref(false)

const text = ref('')
onMounted(() => {
    nextTick(() => {
        queryYpClass()
    })
})

//搜索表单方法
const searchByForm = (form) => {
    console.log("search", form)
}

// 查询药品字典-药性字典
const queryYpClass = () => {
    selectYpClass(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            ypClassData.value = res
        })
        .catch(() => {
            ypClassData.value = []
        })
}

// 查询药品字典-药品分类字典
const queryDrugKind = () => {
    selectDrugKind(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            drugKindData.value = res
        })
        .catch(() => {
            drugKindData.value = []
        })
}

// 查询药品字典-药品剂型字典
const queryYpDosage = () => {
    selectYpDosage(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            ypDosageData.value = res
        })
        .catch(() => {
            ypDosageData.value = []
        })
}

// 查询药品字典-药品单位字典
const queryYpUnit = () => {
    selectYpUnit(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            ypUnitData.value = res
        })
        .catch(() => {
            ypUnitData.value = []
        })
}

// 查询药品字典-药品费别字典
const queryYpChargeGroup = () => {
    selectYpChargeGroup(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            ypChargeGroupData.value = res
        })
        .catch(() => {
            ypChargeGroupData.value = []
        })
}

// 查询药房药品停用情况
const flagFilter = ref('')
const queryVisibleFlag = () => {
    selectYpVisibleFlag(text.value, flagFilter.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            visibleFlagData.value = res
        })
        .catch(() => {
            visibleFlagData.value = []
        })
}

// 查询药品字典-药品厂家字典
const queryYpSupply = () => {
    selectYpSupply(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            ypSupplyData.value = res
        })
        .catch(() => {
            ypSupplyData.value = []
        })
}

// 查询药品字典-药品供应商字典
const queryYpManuFactory = () => {
    selectYpManuFactory(text.value)
        .then((res) => {
            res.forEach(row => {
                // 是否标记
                row['isEdit'] = false
                // 是否新增
                row['isAdd'] = false
            })
            ypManuFactoryData.value = res
        })
        .catch(() => {
            ypManuFactoryData.value = []
        })
}

// 查询
const queryItem = () => {
    if (editableTabsValue.value === 'ypClass') {
        queryYpClass()
    } else if (editableTabsValue.value === 'drugKind') {
        queryDrugKind()
    } else if (editableTabsValue.value === 'ypDosage') {
        queryYpDosage()
    } else if (editableTabsValue.value === 'ypUnit') {
        queryYpUnit()
    } else if (editableTabsValue.value === 'ypChargeGroup') {
        queryYpChargeGroup()
    } else if (editableTabsValue.value === 'visibleFlag') {
        queryVisibleFlag()
    } else if (editableTabsValue.value === 'ypSupply') {
        queryYpSupply()
    } else if (editableTabsValue.value === 'ypManuFactory') {
        queryYpManuFactory()
    }
}

// 新增行
const onAddItem = () => {
    showDialog.value = true
    return

    if (editableTabsValue.value === 'ypClass') {
        let count
        if (ypClassData.value.length % pageSizeClass.value === 0) {
            count = Math.ceil(ypClassData.value.length / pageSizeClass.value) + 1
        } else {
            count = Math.ceil(ypClassData.value.length / pageSizeClass.value)
        }
        currentPageClass.value = count
        ypClassData.value.push({
            code: '',
            name: '',
            pyCode: '',
            dcode: '',
            delFlag: '',
            isEdit: true,
            isAdd: true,
        })
        const el = document.querySelector('.ypClassTable .el-scrollbar__wrap')
        const el2 = document.querySelector('.ypClassTable .el-table__body tbody')
        setTimeout(() => {
            const height = el2.clientHeight - el.clientHeight
            if (height > 0) {
                el.scrollTop = height
            }
        }, 100)
    } else if (editableTabsValue.value === 'drugKind') {
        let count
        if (drugKindData.value.length % pageSizeKind.value === 0) {
            count = Math.ceil(drugKindData.value.length / pageSizeKind.value) + 1
        } else {
            count = Math.ceil(drugKindData.value.length / pageSizeKind.value)
        }
        currentPageKind.value = count
        drugKindData.value.push({
            code: '',
            name: '',
            pyCode: '',
            dcode: '',
            ypType: '',
            mzBillCode: '',
            zyBillCode: '',
            isEdit: true,
            isAdd: true,
        })
        const el = document.querySelector('.drugKindTable .el-scrollbar__wrap')
        const el2 = document.querySelector('.drugKindTable .el-table__body tbody')
        setTimeout(() => {
            const height = el2.clientHeight - el.clientHeight
            if (height > 0) {
                el.scrollTop = height
            }
        }, 100)
    } else if (editableTabsValue.value === 'ypDosage') {
        let count
        if (ypDosageData.value.length % pageSizeDosage.value === 0) {
            count = Math.ceil(ypDosageData.value.length / pageSizeDosage.value) + 1
        } else {
            count = Math.ceil(ypDosageData.value.length / pageSizeDosage.value)
        }
        currentPageDosage.value = count
        ypDosageData.value.push({
            code: '',
            name: '',
            pyCode: '',
            dcode: '',
            dosaType: '',
            dosaRemark: '',
            orderNo: '',
            delFlag: '',
            ybCode: '',
            hnsybCode: '',
            isEdit: true,
            isAdd: true,
        })
        const el = document.querySelector('.ypDosageTable .el-scrollbar__wrap')
        const el2 = document.querySelector('.ypDosageTable .el-table__body tbody')
        setTimeout(() => {
            const height = el2.clientHeight - el.clientHeight
            if (height > 0) {
                el.scrollTop = height
            }
        }, 100)
    } else if (editableTabsValue.value === 'ypUnit') {
        let count
        if (ypUnitData.value.length % pageSizeUnit.value === 0) {
            count = Math.ceil(ypUnitData.value.length / pageSizeUnit.value) + 1
        } else {
            count = Math.ceil(ypUnitData.value.length / pageSizeUnit.value)
        }
        currentPageUnit.value = count
        ypUnitData.value.push({
            code: '',
            name: '',
            pyCode: '',
            dcode: '',
            orderNo: '',
            delFlag: '',
            refundableFees: '',
            isEdit: true,
            isAdd: true,
        })
        const el = document.querySelector('.ypUnitTable .el-scrollbar__wrap')
        const el2 = document.querySelector('.ypUnitTable .el-table__body tbody')
        setTimeout(() => {
            const height = el2.clientHeight - el.clientHeight
            if (height > 0) {
                el.scrollTop = height
            }
        }, 100)
    } else if (editableTabsValue.value === 'ypChargeGroup') {
        ypChargeGroupData.value.push({
            code: '',
            name: '',
            pyCode: '',
            dcode: '',
            delFlag: '',
            isEdit: true,
            isAdd: true,
        })
    } else if (editableTabsValue.value === 'visibleFlag') {
        ElMessage({
            type: "warning",
            message: "不能新增药房药品停用，需先维护药品信息!",
            duration: 2500,
            showClose: true,
        });
    } else if (editableTabsValue.value === 'ypSupply') {
        let count
        if (ypSupplyData.value.length % pageSizeSupply.value === 0) {
            count = Math.ceil(ypSupplyData.value.length / pageSizeSupply.value) + 1
        } else {
            count = Math.ceil(ypSupplyData.value.length / pageSizeSupply.value)
        }
        currentPageSupply.value = count
        ypSupplyData.value.push({
            code: '',
            name: '',
            abbrName: '',
            address: '',
            zipCode: '',
            telNo: '',
            relName: '',
            busiRange: '',
            comment: '',
            useFlag: '',
            pyCode: '',
            dcode: '',
            delFlag: '',
            isEdit: true,
            isAdd: true,
        })
        const el = document.querySelector('.ypSupplyTable .el-scrollbar__wrap')
        const el2 = document.querySelector('.ypSupplyTable .el-table__body tbody')
        setTimeout(() => {
            const height = el2.clientHeight - el.clientHeight
            if (height > 0) {
                el.scrollTop = height
            }
        }, 100)
    } else if (editableTabsValue.value === 'ypManuFactory') {
        let count
        if (ypManuFactoryData.value.length % pageSizeManuFactory.value === 0) {
            count = Math.ceil(ypManuFactoryData.value.length / pageSizeManuFactory.value) + 1
        } else {
            count = Math.ceil(ypManuFactoryData.value.length / pageSizeManuFactory.value)
        }
        currentPageManuFactory.value = count
        ypManuFactoryData.value.push({
            code: '',
            name: '',
            abbrName: '',
            address: '',
            zipCode: '',
            telNo: '',
            relName: '',
            productRange: '',
            comment: '',
            useFlag: '',
            pyCode: '',
            dcode: '',
            delFlag: '',
            isEdit: true,
            isAdd: true,
        })
        const el = document.querySelector('.ypManuFactoryTable .el-scrollbar__wrap')
        const el2 = document.querySelector('.ypManuFactoryTable .el-table__body tbody')
        setTimeout(() => {
            const height = el2.clientHeight - el.clientHeight
            if (height > 0) {
                el.scrollTop = height
            }
        }, 100)
    }
}

// 药品字典-药性字典增删改存开始
// 编辑
const editYpClass = (row) => {
    showDialog.value = true
    return
    // 备份原始数据
    row['oldRow'] = JSON.parse(JSON.stringify(row))
    row.isEdit = true
}
// 取消
const cancelYpClass = (row) => {
    // 如果是新增的数据
    if (row.isAdd) {
        ypClassData.value.splice(ypClassData.value.length - 1, 1)
    } else {
        // 不是新增的数据  还原数据
        for (const i in row.oldRow) {
            row[i] = row.oldRow[i]
        }
    }
}
// 保存
const updateYpClass = (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 ypClassData.value) {
            if (ypClassData.value[num].code === row.code) {
                fe++
            }
        }
        if (fe === 2) {
            ElMessage({
                type: "warning",
                message: "存在重复的药性字典，请核对!",
                duration: 2500,
                showClose: true,
            });
        } else {
            callSaveYpClass(row, null)
        }

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

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

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

const currentEditCode = ref('')

const tableEdit = (row) => {
    currentEditCode.value = row.code
}




</script>
<style lang="scss" deep>
.el-dialog__body {
    // padding: 0 16px;
    // height: calc(100% - 25px);
}

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

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

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

    .el-table__inner-wrapper {
        height: calc(100% - 10px) !important;
    }

}

.el-table .warning-row {
    --el-table-tr-bg-color: #dd7694;
}

.search-select-pre {
    padding: 0 12px;
    color: var(--el-text-color-regular);
    background: var(--el-fill-color-light);
    border-right: 1px solid var(--el-border-color);
    --el-select-input-padding-left: '0'
}
</style>