supervision-vue/src/components/police-picker.vue

<template>
    <div class="flex gap">
        <el-tag type="info" effect="plain" closable v-for="(item, index) in modelValue" :key="item" @close="handleRemove(index)">{{ item.name }}</el-tag>
        <el-button size="small" type="primary" plain @click="show = true">
            <template #icon>
                <icon name="el-icon-Plus" />
            </template>
        </el-button>
    </div>
    <el-dialog title="选择警员" v-model="show" width="50vw" top="5vh">
        <div style="min-height: 70vh">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-scrollbar max-height="70vh">
                        <el-tree
                            :data="treeData"
                            :props="{ label: 'shortName', value: 'id' }"
                            :default-expanded-keys="['12630']"
                            node-key="id"
                            @node-click="handleSelectDepart"
                        />
                    </el-scrollbar>
                </el-col>
                <el-col :span="18">
                    <header class="flex between mb-20">
                        <el-form class="flex gap wrap">
                            <el-input
                                placeholder="警员姓名"
                                v-model="query.name"
                                clearable
                                style="width: 190px"
                            />
                            <el-input
                                placeholder="请输入"
                                v-model="query.empNo"
                                clearable
                                style="width: 190px"
                            />
                            <el-input
                                placeholder="身份证号码"
                                v-model="query.idCode"
                                clearable
                                style="width: 190px"
                            />
                        </el-form>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </header>
                    <div class="table-container">
                        <el-table
                            :data="polices"
                            row-key="id"
                            max-height="890px"
                            @selection-change="selectionChange"
                            v-loading="loading"
                        >
                            <el-table-column type="selection" width="55" />
                            <el-table-column
                                label="姓名"
                                prop="name"
                                width="90"
                            />
                            <el-table-column
                                label="警号"
                                prop="empNo"
                                width="100"
                                show-overflow-tooltip
                            />
                            <el-table-column
                                label="人员属性"
                                width="120"
                                align="center"
                            >
                                <template #default="{ row }">
                                    <span>{{
                                        getDictLable(
                                            dict.personType,
                                            row.personType
                                        )
                                    }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="职位"
                                width="120"
                                align="center"
                            >
                                <template #default="{ row }">
                                    <span v-if="row.position">
                                        <span v-if="row.level === 0"
                                            >局领导{{ row.position }}</span
                                        >
                                        <span v-if="row.level === 2"
                                            >二级机构{{ row.position }}</span
                                        >
                                        <span v-if="row.level === 3"
                                            >三机机构{{ row.position }}</span
                                        >
                                        <span v-if="row.level === 4"
                                            >四机机构{{ row.position }}</span
                                        >
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="身份证"
                                prop="idCode"
                                width="200"
                            />
                        </el-table>
                    </div>
                    <div class="flex end mt-8">
                        <el-pagination
                            @size-change="getList"
                            @current-change="getList"
                            :page-sizes="[10, 20]"
                            v-model:page-size="query.size"
                            v-model:current-page="query.current"
                            layout="total, sizes, prev, pager, next"
                            :total="total"
                        >
                        </el-pagination>
                    </div>
                    <div class="flex gap mt-10 wrap v-center">
                        <span>已选警员：</span>
                        <el-tag
                            v-for="(item, index) in checkPolices"
                            :key="item"
                            closable
                            @close="handleRemove(index)"
                            >{{ item.name }}</el-tag
                        >
                    </div>
                </el-col>
            </el-row>
        </div>
        <footer class="flex end">
            <el-button @click="show = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </footer>
    </el-dialog>
</template>
<script setup>
import { departTreeList } from "@/api/system/depart";
import { listPolice } from "@/api/system/police";
import useCatchStore from "@/stores/modules/catch";
import { getDictLable } from "@/utils/util";

const catchSotre = useCatchStore();
const dict = catchSotre.getDicts(["personType"]);

const props = defineProps({
    modelValue: {
        type: Array,
        default: []
    },
    departId: {
        type: String
    }
});

const emit = defineEmits(['update:modelValue'])

const show = ref(false);
const query = ref({
    departBranch: true
});
watch(() => props.departId, (val) => {
    query.value.departId = val;
    getList()
})
const total = ref(0);

const treeData = catchSotre.getDepartsAll();
const polices = ref([]);
const loading = ref(false)
function getList() {
    loading.value = true
    listPolice(query.value).then((data) => {
        polices.value = data.records;
        total.value = data.total;
        loading.value = false
    });
}

const checkPolices = ref([]);

function selectionChange(selectionRows) {
    selectionRows.forEach(item => {
        if (checkPolices.value.findIndex(o => o.empNo === item.empNo) === -1) {
            checkPolices.value.push({
                name: item.name,
                empNo: item.empNo,
                idCode: item.idCode
            })
        } else {

        }
    })
}

function handleSelectDepart(node) {
    query.value.departId = node.id;
    getList();
}

function handleRemove(index) {
    checkPolices.value.splice(index, 1)
    emit('update:modelValue', checkPolices.value)
}

function submit() {
    emit('update:modelValue', checkPolices.value)
    show.value = false
}

onMounted(() => {
    getList();
});
</script>
<style lang="scss">
.el-tree-node.is-current > .el-tree-node__content {
    background-color: #e8e9f3;
}
</style>