cdTestPlant3/cdTMP/src/components/ma-user/index.vue

<!--
 - @Author XXX
 - @Link XXX
-->
<template>
    <div class="ma-content-block">
        <a-space class="flex">
            <a-button type="primary" @click="visible = true">
                <template #icon><icon-select-all /></template>{{ props.text }}
            </a-button>
            <a-tag size="large" color="blue" v-if="props.isEcho"
                >已选择 {{ isArray(selecteds) ? selecteds.length : 0 }} 位</a-tag
            >
            <a-input-tag
                v-model="userList"
                v-if="props.isEcho"
                :style="{ width: '320px' }"
                :placeholder="'请点击前面按钮' + props.text"
                :max-tag-count="3"
                disabled
            />
        </a-space>

        <a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmount-on-close>
            <template #title>{{ props.text }}</template>

            <ma-crud
                ref="crudRef"
                :options="crud"
                :columns="columns"
                v-model:selected-keys="selecteds"
                @selection-change="selectHandler"
            />
        </a-modal>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue"
import commonApi from "@/api/common"
import { Message } from "@arco-design/web-vue"
import { isArray, isEmpty } from "lodash-es"

const props = defineProps({
    modelValue: { type: Array },
    isEcho: { type: Boolean, default: false },
    multiple: { type: Boolean, default: true },
    onlyId: { type: Boolean, default: true },
    text: { type: String, default: "选择用户" }
})

const emit = defineEmits(["update:modelValue", "success"])

const visible = ref(false)
const selecteds = ref([])
const userList = ref([])

onMounted(() => {
    if (props.isEcho && props.onlyId) selecteds.value = props.modelValue
})

watch(
    () => props.modelValue,
    (val) => {
        if (props.isEcho && props.onlyId) selecteds.value = val
    }
)

const selectHandler = (rows) => {
    selecteds.value = rows
}

const close = async (done) => {
    if (isArray(selecteds.value) && selecteds.value.length > 0) {
        const response = await commonApi.getUserInfoByIds({ ids: selecteds.value })
        if (!isEmpty(response) && isArray(response.data)) {
            userList.value = response.data.map((item) => {
                return `${item.username}(${item.id})`
            })
            if (props.onlyId) {
                emit("update:modelValue", selecteds.value)
            } else {
                emit("update:modelValue", response.data)
            }
            emit("success", true)
            Message.success("选择成功")
        }
    } else {
        emit("update:modelValue", [])
        userList.value = []
    }
    done(true)
}

const crud = ref({
    showIndex: false,
    api: commonApi.getUserList,
    rowSelection: props.multiple ? { type: "checkbox", showCheckedAll: true } : { type: "radio" }
})

const columns = ref([
    { title: "账户", dataIndex: "username", search: true },
    { title: "昵称", dataIndex: "nickname", search: true },
    { title: "手机", dataIndex: "phone", search: true },
    { title: "邮箱", dataIndex: "email", search: true },
    {
        title: "部门",
        dataIndex: "dept_id",
        search: true,
        formType: "tree-select",
        hide: true,
        dict: { url: "system/common/getDeptTreeList" }
    },
    {
        title: "角色",
        dataIndex: "role_id",
        search: true,
        formType: "select",
        hide: true,
        dict: { url: "system/common/getRoleList", props: { label: "name", value: "code" } }
    },
    {
        title: "岗位",
        dataIndex: "post_id",
        search: true,
        formType: "select",
        hide: true,
        dict: { url: "system/common/getPostList", props: { label: "name", value: "code" } }
    }
])
</script>

<style scoped>
:deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab) {
    justify-content: flex-start;
}
</style>