web_dist/src/views/logisticsMaterials/procurement/purchaseOrderPreparation/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="Download" @click="onAddItem"
                    style="margin-left: 5px">导入物资申报表</el-button>
                <el-input v-model="searchName" style="width: 200px;margin-left: 5px" placeholder="输入物资名称">
                    <template #prepend>
                        <el-icon icon="Search" @click="handleSearch" style="cursor: pointer;">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
                <el-button type="success" @click="onAddItem"
                    style="margin-left: 5px;">保 存</el-button>
            </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 fixed="left" label="操作" width="80">
                    <template #default>
                        <el-button type="danger" size="small" @click="handleClick">
                            删 除
                        </el-button>
                        <!-- <el-button link type="primary" size="small">Edit</el-button> -->
                    </template>
                </el-table-column>
                <el-table-column type="index" prop="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="计划数量">
                </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" prop="delFlag" label="总金额">
                </el-table-column>
            </el-table>
        </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,
} from '@/api/yp-dict/yp-dict-base.js'
import searchArea from '@/components/searchArea/index.vue';
import info from '@/views/logisticsMaterials/procurement/departmentProcurementPlanReview/info.vue';

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

const searchData = ref([
    {
        label: '请领月份',
        key: 'vehicleType',
        type: 'monthDataPicker',
        value: '',
    },
])
const searchName = ref("")
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 queryItem = () => {
    if (editableTabsValue.value === 'ypClass') {
        queryYpClass()
    } else if (editableTabsValue.value === 'drugKind') {
        queryDrugKind()
    }
}

const handleSearch = () => {
    showDialog.value = true
}

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

// 药品字典-药性字典增删改存开始
// 编辑
const editYpClass = (row) => {
    // 备份原始数据
    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% - 27px);

    .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>