digital-medicine-front/src/views/cdt/items/index.vue

<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mb-20">检测项查询</div>
                <searchTabs v-model="tabActive" :list="[{ label: '按检测项目', value: '1' }, { label: '按执行标准', value: '2' }]"
                    :is-num="false"></searchTabs>
            </div>
            <div class="pd-16">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
                    <el-form-item label="检测项名称：" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入检测项名称关键字" clearable style="width: 180px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex1 ov-hd d-flex content-border">
                <div class="tree-wrap">
                    <div v-show="tabActive === '1'">
                        <el-tree ref="treeItemsRef" class="base-tree-tabs" auto-expand-parent default-expand-all
                            node-key="id" :data="itemsData" :props="{ label: 'name' }" highlight-current
                            @node-click="itemsClick" accordion>
                            <template #default="{ node, data }">
                                <span>
                                    {{ node.label }}
                                    <template v-if="!data?.children">（{{ data?.itemCount || '0' }}）</template>
                                </span>
                            </template>
                        </el-tree>
                    </div>
                    <div v-show="tabActive === '2'">
                        <el-tree ref="treeStandardsRef" class="base-tree-tabs" auto-expand-parent :data="standards"
                            node-key="id" :props="{ label: 'name' }" highlight-current @node-click="standardsClick"
                            accordion>
                            <template #default="{ node, data }">
                                <span>
                                    {{ node.label }}
                                    <template v-if="!data?.children">（{{ data?.itemCount || '0' }}）</template>
                                </span>
                            </template>
                        </el-tree>
                    </div>
                </div>
                <div class="flex1 ov-hd d-flex flex-cln">
                    <div class="flex1 ov-hd">
                        <vxe-table :loading="loading" border :data="list" min-height="0" max-height="100%">
                            <!-- 序号 -->
                            <vxe-column type="seq" width="60" title="序号" align="center" />
                            <vxe-column title="检测项目" align="center" field="name" min-width="100" :formatter="colNoData" />
                            <vxe-column title="单价（元、批次）" align="center" field="price" min-width="100"
                                :formatter="colNoData" />
                            <vxe-column title="备注" align="center" field="description" min-width="100"
                                :formatter="colNoData" />
                        </vxe-table>
                    </div>
                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                        v-model:limit="queryParams.pageSize" @pagination="getList" />
                    <div class="pd-5"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="Items" lang="ts">
import { itemsList, itemsListByTree, itemsStandardList } from '@/api/cdt/items';
import { colNoData } from '@/utils/noData';
import { searchTabs } from '@/views/models/index';

// 树组件
const treeItemsRef = ref<any>();
const treeStandardsRef = ref<any>();
const tabActive = ref('1');
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    name: '',
    itemTypeId: '',
    packageId: ''
});
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const itemsData = ref<any>([]);
const getList = async () => {
    loading.value = true;
    const res = await itemsList(queryParams.value);
    if (!res || res.code !== 200) return;
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
};
const resetQuery = () => {
    queryParams.value = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        itemTypeId: '',
        packageId: ''
    };
    // 重置树高亮
    treeItemsRef.value?.setCurrentKey(null, true);
    treeStandardsRef.value?.setCurrentKey(null, false);
    handleQuery()
};
const getTabsTree = async () => {
    const res = await itemsListByTree();
    if (!res || res.code !== 200) return;
    itemsData.value = res.data;
};
const itemsClick = (data: any) => {
    if (!data.children) {
        queryParams.value.itemTypeId = data.id;
        queryParams.value.packageId = '';
    }
    handleQuery()
};
const standardsClick = (data: any) => {
    if (!data.children) {
        queryParams.value.packageId = data.id;
        queryParams.value.itemTypeId = '';
    }
    handleQuery()
};
// 查询执行标准列表
const standards = ref<any>([]);
const getStandardList = async () => {
    const res = await itemsStandardList({ pageNum: 1, pageSize: 10000 });
    if (!res || res.code !== 200) return;
    standards.value = res.rows;
};
onMounted(() => {
    getTabsTree();
    getStandardList();
    getList();
});
</script>
<style lang="scss" scoped>
.tree-wrap {
    width: 310px;
    box-sizing: border-box;
    border-right: 1px solid #ebeef5;
    padding: 16px;
}

.content-border {
    border: 1px solid var(--border-color);
}</style>