web_dist/src/views/logisticsMaterials/inventoryStatistics/projectInventoryQuery/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="title-area">
                <div class="title-top">
                    物资库存清单
                </div>
            </div>
            <div class="layout_display_flex_y" style="height: 80%">
                <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="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="差额">
                    </el-table-column>
                    <el-table-column prop="name" label="差价率">
                    </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="'调拨接收'"
            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/transfer/transferReceipt/info.vue';

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

const searchData = ref([
    {
        label: '科室名称',
        key: 'vehicleType',
        type: 'select',
        value: '',
        optionsData: [ //（0：轿车，1：面包车，2：越野车，3：吉普车，4：巴士，5：卡车）
            {
                label: '轿车',
                value: '0',
            },
            {
                label: '面包车',
                value: '1',
            },
        ],
    },
    {
        label: '项目名称',
        key: 'vehicleType',
        type: 'input',
        value: '',
    },
])
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'
}

.title-area {
    box-sizing: border-box;
    background-color: #fff;
    padding: 5px 20px;

    .title-top {
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .title-bottom {
        display: flex;
        justify-content: space-between;
    }
}
</style>