mailbox-lan-vue/src/views/work/components/templates/CoHandlingPoliceEdit.vue

<template>
    <el-dialog
        v-model="visible"
        title="协办民警"
        width="600px"
    >
        <h2>协办民警</h2>
        <div
            class="flex gap-16 mb-20"
            v-for="(item, index) in polices"
            :key="index"
        >
            <el-select @change="(empNo) => handleChange(empNo, index) " v-model="polices[index].empNo">
                <el-option v-for="item in allPolices" :key="item.empNo" :value="item.empNo" :label="item.name" :disabled="polices.some(p => p.empNo === item.empNo)">{{ item.name + ' ' + item.empNo }}</el-option>
            </el-select>
            <el-button type="danger" plain @click="remove(index)"
                >删除</el-button
            >
        </div>
        <el-button type="primary" plain @click="add">添加民警</el-button>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="submit">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { listByCoHanding } from '@/api/perms/admin'

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Array,
        default: () => [],
    },
});
const emit = defineEmits(["update:show", "update:data"]);

const visible = ref(props.show);
watch(visible, (val) => {
    emit("update:show", val);
});
watch(
    () => props.show,
    (val) => {
        visible.value = val;
        if (val) {
            getCoHandings()
            polices.value = [...props.data];
        }
    }
);
const allPolices = ref([])

function getCoHandings() {
    listByCoHanding().then((data) => {
        allPolices.value = data
    });
}

const polices = ref([]);

function add() {
    polices.value.push({});
}

function remove(index) {
    polices.value.splice(index, 1);
}

function handleChange(empNo, index) {
    polices.value[index] = allPolices.value.find(item => item.empNo === empNo)
}

function submit() {
    const data = polices.value
        .filter((item) => item.empNo)
        .map((item) => {
            return {
                empNo: item.empNo,
                name: item.name,
                mobile: item.mobile,
            };
        });
    emit("update:data", data);
    visible.value = false;
}
</script>
<style lang="scss" scoped>
h2 {
    font-size: 20px;
    margin-top: 0;
    color: #333;
}
</style>