digital-medicine-front/src/views/authority/models/ChooseExpert.vue

<template>
    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width">
        <template #default>
            <div class="d-flex flex-cln" style="height: 60vh;">
                <div class="pd-16">
                    <el-form ref="queryFormRef" :model="queryParams" inline>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="queryParams.name" placeholder="搜姓名" clearable style="width: 160px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="单位" prop="workUnit">
                            <el-input v-model="queryParams.variety" placeholder="搜单位关键字" clearable style="width: 160px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="专业品种" prop="variety">
                            <el-input v-model="queryParams.variety" placeholder="搜专业品种" clearable style="width: 160px" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleQuery">查询</el-button>
                            <el-button @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="flex1 ov-hd d-flex">
                    <div v-if="currentNodeKey" class="tree-wrap over-auto">
                        <template v-for="(item, index) in itemsData" :key="index">
                            <div class="pd2-10-30 border-bottom c-s-p" @click="itemsClick(item)" :class="{ 'check-node-key': currentNodeKey === item.type }">{{ selectDictLabel(dm_person_type, item.type) }}（{{ item.num }}）</div>
                        </template>
                    </div>
                    <div class="flex1 ov-hd">
                        <vxe-table ref="tableRef" :loading="loading" border :data="list" height="auto" :checkbox-config="{ checkRowKeys: checkRowKeys,  highlight: true, range: true, trigger: 'row', reserve: true }" :row-config="{ keyField: 'id', isCurrent: true, isHover: true }">
                            <vxe-column type="checkbox" width="60"></vxe-column>
                            <vxe-column type="seq" width="60" title="序号" align="center" />
                            <!-- 企业名称 -->
                            <vxe-column title="姓名" align="center" field="name" :formatter="colNoData" />
                            <vxe-column title="性别" width="70" align="center">
                                <template #default="{ row }">
                                    {{ selectDictLabel(sys_sex_type, row?.sex) }}
                                </template>
                            </vxe-column>
                            <vxe-column title="单位" field="workUnit" :formatter="colNoData" />
                            <vxe-column title="职称/职务" field="post" :formatter="colNoData" />
                            <vxe-column title="专业品种" field="variety" :formatter="colNoData" />
                            <vxe-column title="所在地区" field="adcodeName" :formatter="colNoData" />
                            <vxe-column title="岗位状态" width="90">
                                <template #default="{ row }">
                                    <DictTag :options="dm_position_status" :value="row?.status"></DictTag>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </div>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            </div>
        </template>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">确认提交</el-button>
        </template>
    </vxe-modal>
</template>
<script setup name="ChooseExpert" lang="ts">
import { expertGroupCount, expertList } from '@/api/authority';
import { addOriginCpy, listByPage } from '@/api/price/station';
import { colNoData } from '@/utils/noData';
import { propTypes } from '@/utils/propTypes';
const emit = defineEmits(['update:show', 'close', 'success', 'update:info']);
const props = defineProps({
    title: propTypes.string.def('选择专家'),
    width: propTypes.number.def(1200),
    show: propTypes.bool.def(false),
    info: propTypes.any.def(null),
    dict: propTypes.any.def(null)
});
const { dm_person_type, dm_position_status, sys_sex_type } = toRefs<any>(props.dict);
const dialogVisible = ref(false);
const { query }: any = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const list = ref<any[]>([]);
const loading = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive<any>({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        queryPersonType: props.info?.personType || null,
    }
});
const formRef = ref<ElFormInstance>();
const itemsData = ref<any[]>([]); // 树数据
const treeItemsRef = ref<any>();
const { queryParams, form, rules } = toRefs(data);
/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await expertList({ ...queryParams.value });
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = (level?: any) => {
    queryParams.value.pageNum = 1;
    getList();
};
const itemsClick = (node: any) => {
    queryParams.value.queryPersonType = node.type;
    currentNodeKey.value = node.type;
    handleQuery();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = '';
    queryParams.value.endDate = '';
    handleQuery();
};
const currentNodeKey = ref<any>(null); // 当前选中节点
const close = () => {
    // formRef.value?.resetFields();
    emit('update:show', false);
    emit('close', false);
};

const tableRef = ref<any>();
const submitForm = async () => {
    const records = tableRef.value?.getCheckboxReserveRecords(true).concat(tableRef.value?.getCheckboxRecords());
    if (!records.length) {
        proxy?.$modal.msgWarning('请选择专家');
        return;
    }
    if (records.length > props.info?.personCount) {
        proxy?.$modal.msgWarning(`最多只能选择${props.info?.personCount}个专家`);
        return;
    }
    emit('update:info', {
        ...props.info,
        personInfos: [...records]
    })
    emit('success', records);
    close();
};
// 获取专家统计数据
const getExpertGroupCount = async () => {
    const res = await expertGroupCount();
    if (res?.code === 200) {
        itemsData.value = res.data;
    }
};
const checkRowKeys = ref<any>([]);

watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
        if (val) {
            checkRowKeys.value = props.info?.personInfos.map((item: any) => item.id) || [];
            currentNodeKey.value = props.info?.personType || null;
            getExpertGroupCount();
            getList();
        }
    },
    { immediate: true }
);
</script>
<style lang="scss" scoped>
.tree-wrap {
    width: 310px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
    padding: 16px;
}
.check-node-key {
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
}
</style>