270 lines
6.7 KiB
Vue
270 lines
6.7 KiB
Vue
<template>
|
||
<el-dialog
|
||
:title="titleValue"
|
||
width="1400px"
|
||
:model-value="modelValue"
|
||
append-to-body
|
||
@close="closed"
|
||
>
|
||
<div>
|
||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||
<el-form-item label="标签名称">
|
||
<el-input
|
||
placeholder="请输入标签名称"
|
||
v-model="listQuery.bqMc"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="success" @click="handleFilter">查询</el-button>
|
||
<el-button type="info" @click="reset"> 重置 </el-button>
|
||
|
||
</el-form-item>
|
||
</el-form>
|
||
<div
|
||
class="tabBox"
|
||
:class="props.Single ? 'tabBoxRadio' : ''"
|
||
:key="keyVal"
|
||
style="margin-top: 0px"
|
||
>
|
||
<el-table
|
||
ref="multipleUserRef"
|
||
@selection-change="handleSelectionChange"
|
||
:data="tableData"
|
||
v-loading="loading"
|
||
border
|
||
:row-key="keyid"
|
||
style="width: 100%"
|
||
height="450"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="55"
|
||
:reserve-selection="true"
|
||
/>
|
||
<el-table-column prop="bqMc" align="center" label="标签名称" />
|
||
<el-table-column prop="bqDm" align="center" label="标签代码" />
|
||
<el-table-column prop="bqDj" align="center" label="标签等级">
|
||
<template #default="{ row }">
|
||
<DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="bqYs" align="center" label="标签颜色">
|
||
<template #default="{ row }">
|
||
<DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||
<el-pagination
|
||
class="pagination"
|
||
@pageSize-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="listQuery.pageCurrent"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-pageSize="listQuery.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="closed">取消</el-button>
|
||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import { qcckGet } from "@/api/qcckApi.js";
|
||
import { defineProps, ref, getCurrentInstance, watch } from "vue";
|
||
const { proxy } = getCurrentInstance();
|
||
const {
|
||
D_GS_BQ_DJ,
|
||
// D_GS_SSYJ,
|
||
D_GS_BQ_LB,
|
||
D_GS_BQ_LX
|
||
} = proxy.$dict(
|
||
"D_GS_BQ_DJ",
|
||
// "D_GS_SSYJ",
|
||
"D_GS_BQ_LB",
|
||
"D_GS_BQ_LX"
|
||
); //获取字典数据
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
titleValue: {
|
||
type: String,
|
||
default: "身份标签"
|
||
},
|
||
LeaderType: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
//是否单选
|
||
Single: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
roleIds: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
});
|
||
const loading = ref(false);
|
||
const total = ref(0);
|
||
const listQuery = ref({
|
||
pageCurrent: 1,
|
||
pageSize: 20
|
||
});
|
||
|
||
const keyVal = ref(0);
|
||
const multipleUserRef = ref(null);
|
||
const multipleSelectionUser = ref([]);
|
||
const tableData = ref([]);
|
||
const emits = defineEmits(["update:modelValue", "choosed"]);
|
||
const keyid = (row) => {
|
||
return row.id;
|
||
};
|
||
|
||
const closed = () => {
|
||
emits("update:modelValue", false);
|
||
};
|
||
const reset = () => {
|
||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||
getListData();
|
||
};
|
||
|
||
// 为用户分配角色
|
||
const onComfirm = () => {
|
||
const userList = multipleSelectionUser.value;
|
||
let list = [];
|
||
let listId = [];
|
||
userList.forEach((val) => {
|
||
if (listId.indexOf(val.id) == -1) {
|
||
list.push(val);
|
||
listId.push(val.id);
|
||
}
|
||
});
|
||
emits("choosed", list);
|
||
closed();
|
||
};
|
||
/**
|
||
* pageSize 改变触发
|
||
*/
|
||
const handleSizeChange = (currentSize) => {
|
||
listQuery.value.pageSize = currentSize;
|
||
getListData();
|
||
};
|
||
/**
|
||
* 页码改变触发
|
||
*/
|
||
const handleCurrentChange = (currentPage) => {
|
||
listQuery.value.pageCurrent = currentPage;
|
||
getListData();
|
||
};
|
||
const bqLb=ref('01')
|
||
const getListData = () => {
|
||
keyVal.value++;
|
||
loading.value = true;
|
||
const params = { ...listQuery.value, bqLb:bqLb.value,bqLx: "01" };
|
||
qcckGet(params, "/mosty-gsxt/tbGsxtBqgl/selectPage")
|
||
.then((res) => {
|
||
loading.value = false;
|
||
tableData.value = res.records || [];
|
||
total.value = res.total;
|
||
// 直接调用，multipleUser 内部已处理延迟
|
||
multipleUser();
|
||
})
|
||
.catch(() => {
|
||
loading.value = false;
|
||
});
|
||
};
|
||
|
||
//列表回显 - 优化版，确保已选择数据正确回显
|
||
function multipleUser() {
|
||
// 确保表格引用和数据都存在
|
||
if (!multipleUserRef.value || !tableData.value || tableData.value.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// 等待下一帧确保DOM更新完成
|
||
setTimeout(() => {
|
||
// 再次检查表格引用是否存在
|
||
if (!multipleUserRef.value) return;
|
||
|
||
// 先清除所有选中状态
|
||
multipleUserRef.value.clearSelection();
|
||
|
||
// 再根据roleIds重新设置选中状态
|
||
if (props.roleIds && Array.isArray(props.roleIds) && props.roleIds.length > 0) {
|
||
tableData.value.forEach((item) => {
|
||
// 使用严格比较，确保ID类型匹配
|
||
if (props.roleIds.some((id) => String(id) === String(item.id))) {
|
||
multipleUserRef.value.toggleRowSelection(item, true);
|
||
}
|
||
});
|
||
}
|
||
}, 0);
|
||
}
|
||
|
||
const handleFilter = () => {
|
||
listQuery.value.pageCurrent = 1;
|
||
getListData();
|
||
};
|
||
|
||
const handleSelectionChange = (val) => {
|
||
if (props.Single) {
|
||
if (val.length > 1) {
|
||
let del_row = val.shift();
|
||
multipleUserRef.value.toggleRowSelection(del_row, false);
|
||
}
|
||
multipleSelectionUser.value = val;
|
||
} else {
|
||
multipleSelectionUser.value = val;
|
||
}
|
||
};
|
||
|
||
// 监听弹窗打开状态，打开时重新加载数据
|
||
watch(
|
||
() => props.modelValue,
|
||
(val) => {
|
||
if (val) {
|
||
handleFilter();
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
// 监听roleIds变化，确保数据回显正确
|
||
watch(
|
||
() => props.roleIds,
|
||
(newRoleIds) => {
|
||
// 使用setTimeout确保在表格数据加载完成后再进行选择
|
||
setTimeout(() => {
|
||
multipleUser();
|
||
}, 100);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/layout.scss";
|
||
@import "@/assets/css/element-plus.scss";
|
||
</style>
|
||
<style>
|
||
.tabBoxRadio .el-checkbox__inner {
|
||
border-radius: 50% !important;
|
||
}
|
||
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
|
||
display: none;
|
||
}
|
||
</style>
|