vue更新3.5，以及mime打更新
This commit is contained in:
@@ -1,133 +1,128 @@
|
||||
<!--
|
||||
- @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>
|
||||
<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" unmountOnClose>
|
||||
<template #title>{{ props.text }}</template>
|
||||
<a-modal v-model:visible="visible" width="1000px" draggable :on-before-ok="close" unmountOnClose>
|
||||
<template #title>{{ props.text }}</template>
|
||||
|
||||
<ma-crud
|
||||
ref="crudRef"
|
||||
:options="crud"
|
||||
:columns="columns"
|
||||
v-model:selected-keys="selecteds"
|
||||
@selection-change="selectHandler"
|
||||
/>
|
||||
</a-modal>
|
||||
</div>
|
||||
<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"
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import commonApi from '@/api/common'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { isArray, isEmpty } from 'lodash'
|
||||
|
||||
const props = defineProps({
|
||||
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: "选择用户" }
|
||||
})
|
||||
text: { type: String, default: '选择用户' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "success"])
|
||||
const emit = defineEmits(['update:modelValue', 'success'])
|
||||
|
||||
const visible = ref(false)
|
||||
const selecteds = ref([])
|
||||
const userList = ref([])
|
||||
const visible = ref(false)
|
||||
const selecteds = ref([])
|
||||
const userList = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
if (props.isEcho && props.onlyId) selecteds.value = props.modelValue
|
||||
})
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (props.isEcho && props.onlyId) selecteds.value = val
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
val => {
|
||||
if (props.isEcho && props.onlyId) selecteds.value = val
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
const selectHandler = (rows) => {
|
||||
const selectHandler = (rows) => {
|
||||
selecteds.value = rows
|
||||
}
|
||||
}
|
||||
|
||||
const close = async (done) => {
|
||||
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("选择成功")
|
||||
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 = []
|
||||
emit('update:modelValue', [])
|
||||
userList.value = []
|
||||
}
|
||||
done(true)
|
||||
}
|
||||
}
|
||||
|
||||
const crud = ref({
|
||||
const crud = ref({
|
||||
showIndex: false,
|
||||
api: commonApi.getUserList,
|
||||
rowSelection: props.multiple ? { type: "checkbox", showCheckedAll: true } : { type: "radio" }
|
||||
})
|
||||
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 },
|
||||
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: '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: '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" } }
|
||||
}
|
||||
])
|
||||
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;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user