133 lines
4.2 KiB
Vue
133 lines
4.2 KiB
Vue
<template>
|
||
<div style="padding: 30px; background: #fff; min-height: 500px">
|
||
<a-card title="自定义组件测试页面" :bordered="false">
|
||
<a-form layout="vertical">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="已选择的用户ID">
|
||
<a-input v-model:value="formData.userIds" readonly placeholder="选择后自动填充" />
|
||
</a-form-item>
|
||
</a-col>
|
||
|
||
<a-col :span="12">
|
||
<a-form-item label="选择用户">
|
||
<a-input-search v-model:value="formData.userNames" placeholder="请选择用户" enter-button="选择" readonly @search="openUserModal" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<div style="margin-top: 20px">
|
||
<p><strong>当前选中详情（JSON格式）：</strong></p>
|
||
<pre>{{ JSON.stringify(selectedRows, null, 2) }}</pre>
|
||
</div>
|
||
</a-form>
|
||
</a-card>
|
||
|
||
<SzUserSelectByDeptRoleSecurityModal :open="modalVisible" @confirm="handleConfirm" @cancel="handleCancel" />
|
||
<a-card title="根据部门，角色选满足对应条件用户组件" :bordered="false">
|
||
<a-form layout="vertical">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="已选择的用户">
|
||
<ApiSelect
|
||
placeholder="请选择用户（可多选）"
|
||
mode="multiple"
|
||
:api="getUserListApi"
|
||
:params="queryParam"
|
||
labelField="username"
|
||
valueField="id"
|
||
v-model:value="selectedUsers"
|
||
@change="handleUserChange"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-card>
|
||
|
||
<a-card title="改造后的选部门组件，根据部门类别返回二级部门" :bordered="false">
|
||
<a-form layout="vertical">
|
||
<a-row :gutter="16">
|
||
<a-col :span="12">
|
||
<a-form-item label="已选择的部门">
|
||
<SzSelectDept v-model:value="formDeptData.deptIds" labelKey="departName" rowKey="id" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
import SzUserSelectByDeptRoleSecurityModal from '../../components/semri/userComponent/modal/SzUserSelectByDeptRoleSecurityModal.vue';
|
||
import { ApiSelect } from '@/components/Form';
|
||
import { defHttp } from '@/utils/http/axios';
|
||
import SzSelectDept from '@/components/semri/deptComponent/SzSelectDept.vue';
|
||
|
||
const selectedUsers = ref([]);
|
||
const modalVisible = ref(false);
|
||
const selectedRows = ref([]);
|
||
const formData = reactive({ userIds: '', userNames: '' });
|
||
const formDeptData = reactive({
|
||
deptIds: '', // 如果是字符串，send函数会自动join成 "id1,id2"
|
||
});
|
||
|
||
const queryParam = reactive({
|
||
deptId: '1582683631414632450',
|
||
roleId: '2039894374372970498',
|
||
secretLevel: 3,
|
||
});
|
||
|
||
// 3. 定义 API 请求函数（对接你刚才写的 Controller 接口）
|
||
const getUserListApi = (params) => {
|
||
return defHttp.get({
|
||
url: '/sys/user/queryUserByDeptAndROle', // 替换为你真实的接口路径
|
||
params,
|
||
});
|
||
};
|
||
|
||
function handleUserChange(val) {
|
||
console.log('当前选中的值:', val);
|
||
}
|
||
|
||
function openUserModal() {
|
||
modalVisible.value = true;
|
||
}
|
||
|
||
// 【关键改进点 2】确认后关闭弹窗
|
||
function handleConfirm(rows) {
|
||
console.log('测试页面接收到数据:', rows);
|
||
selectedRows.value = rows;
|
||
|
||
if (rows && rows.length > 0) {
|
||
formData.userIds = rows.map((item) => item.id).join(',');
|
||
formData.userNames = rows.map((item) => item.realname).join(',');
|
||
} else {
|
||
formData.userIds = '';
|
||
formData.userNames = '';
|
||
}
|
||
// 成功接收数据后关闭窗口
|
||
modalVisible.value = false;
|
||
}
|
||
|
||
// 【关键改进点 3】处理取消按钮逻辑
|
||
function handleCancel() {
|
||
console.log('用户取消了选择');
|
||
modalVisible.value = false;
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
pre {
|
||
background: #f5f5f5;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
max-height: 200px;
|
||
overflow: auto;
|
||
}
|
||
</style>
|