triggers
This commit is contained in:
132
src/components/TableSelect/index.vue
Normal file
132
src/components/TableSelect/index.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<el-dialog :model-value="modelValue" @close="cancel" @open="handleOpen">
|
||||
<el-row>
|
||||
<el-table ref="tableRef" :data="dataList" @select="handleSelect">
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column prop="deviceId" />
|
||||
<el-table-column label="设备名称" prop="deviceName" />
|
||||
</el-table>
|
||||
<pagination v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList" />
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-button type="primary" @click="confirmSelect">确认</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref, toRefs, watchEffect } from "vue";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import Pagination from "@/components/Pagination/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: [{
|
||||
deviceId: 40
|
||||
}, {
|
||||
deviceId: 38
|
||||
}]
|
||||
},
|
||||
requestMethod: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
selectKey: {
|
||||
required: true
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean
|
||||
}
|
||||
});
|
||||
const { list } = toRefs(props);
|
||||
|
||||
const emit = defineEmits(["select-add", "select-remove", "update:modelValue"]);
|
||||
|
||||
const loading = ref(false);
|
||||
const dataList = ref([]);
|
||||
const total = ref(0);
|
||||
const open = ref(false);
|
||||
const selectedProperties = ref([]);
|
||||
const ids = ref([]);
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams } = toRefs(data);
|
||||
const tableRef = ref();
|
||||
const handleOpen = () => {
|
||||
selectedProperties.value = cloneDeep(list.value);
|
||||
};
|
||||
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
props.requestMethod(queryParams.value).then((response) => {
|
||||
dataList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
setRowSelected();
|
||||
});
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
ids.value = selectedProperties.value.map((el) => el[props.selectKey]);
|
||||
});
|
||||
|
||||
const cancel = () => {
|
||||
selectedProperties.value = [];
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
|
||||
const handleSelect = (selection, row) => {
|
||||
const isCheck =
|
||||
selection.findIndex((el) => el[props.selectKey] === row[props.selectKey]) > -1;
|
||||
if (isCheck) {
|
||||
/*添加选中*/
|
||||
const isIdNotExist =
|
||||
list.value.findIndex((el) => el[props.selectKey] === row[props.selectKey]) === -1;
|
||||
if (isIdNotExist) {
|
||||
selectedProperties.value.push(row);
|
||||
}
|
||||
} else {
|
||||
/*移除选中*/
|
||||
selectedProperties.value = selectedProperties.value.filter(
|
||||
(el) => el[props.selectKey] !== row[props.selectKey]
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/*选择模式下, 将选过的设为选中状态*/
|
||||
const setRowSelected = () => {
|
||||
nextTick(() => {
|
||||
for (const id of ids.value) {
|
||||
dataList.value.forEach((el) => {
|
||||
if (el[props.selectKey] === id) {
|
||||
if (tableRef.value) {
|
||||
tableRef.value.toggleRowSelection(el, true);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirmSelect = () => {
|
||||
console.log(selectedProperties.value);
|
||||
};
|
||||
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
204
src/components/UserTreeSelect/index.vue
Normal file
204
src/components/UserTreeSelect/index.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<!-- 候选用户弹窗 -->
|
||||
<el-dialog
|
||||
:model-value="userOpen"
|
||||
append-to-body
|
||||
title="选择负责人"
|
||||
width="70%"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-row :gutter="20" type="flex">
|
||||
<!--部门数据-->
|
||||
<el-col :span="7">
|
||||
<el-card shadow="never" style="height: 100%">
|
||||
<div slot="header">
|
||||
<span>部门列表</span>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<!-- TODO: -->
|
||||
<el-input
|
||||
v-model="selectDeptOpts.deptName"
|
||||
clearable
|
||||
placeholder="请输入部门名称"
|
||||
prefix-icon="search"
|
||||
size="small"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="selectDeptOpts.deptOptions"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:props="selectDeptOpts.deptProps"
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- TODO: -->
|
||||
<el-col :span="17">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="selectDeptOpts.userTableList"
|
||||
border
|
||||
height="600"
|
||||
highlight-current-row
|
||||
@row-click="handleCurrentChange"
|
||||
>
|
||||
<!-- @selection-change="handleSelectionChange" -->
|
||||
<!-- <el-table-column type="selection" width="50" align="center" /> -->
|
||||
<el-table-column align="center" label="用户名" prop="nickName" />
|
||||
<el-table-column align="center" label="部门" prop="dept.deptName" />
|
||||
</el-table>
|
||||
<pagination
|
||||
v-model:limit="selectDeptOpts.queryParams.pageSize"
|
||||
v-model:page="selectDeptOpts.queryParams.pageNum"
|
||||
:total="selectDeptOpts.userTotal"
|
||||
@pagination="getUserList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- TODO: -->
|
||||
<!-- <div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleTaskUserComplete"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button @click="userOpen = false">取 消</el-button>
|
||||
</div> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, toRefs, watch } from "vue";
|
||||
import { listUser } from "@/api/system/user";
|
||||
import { addDateRange } from "@/utils/ruoyi";
|
||||
import { deptTreeSelect } from "@/api/system/dept";
|
||||
|
||||
const props = defineProps({
|
||||
userOpen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
// field: {
|
||||
// type: String,
|
||||
// required: true
|
||||
// }
|
||||
});
|
||||
const { userOpen } = toRefs(props);
|
||||
|
||||
const emits = defineEmits(["user-selected", "close"]);
|
||||
|
||||
const data = reactive({
|
||||
selectDeptOpts: {
|
||||
queryParams: {
|
||||
deptId: undefined,
|
||||
},
|
||||
deptName: "",
|
||||
deptTreeData: [],
|
||||
deptOptions: [],
|
||||
deptTempOptions: [],
|
||||
userTableList: [],
|
||||
userTotal: 0,
|
||||
deptProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
},
|
||||
});
|
||||
const { selectDeptOpts } = toRefs(data);
|
||||
|
||||
function getDeptOptions() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (
|
||||
!selectDeptOpts.value.deptOptions ||
|
||||
selectDeptOpts.value.deptOptions.length <= 0
|
||||
) {
|
||||
deptTreeSelect().then((response) => {
|
||||
selectDeptOpts.value.deptTempOptions = response.data;
|
||||
selectDeptOpts.value.deptOptions = response.data;
|
||||
resolve();
|
||||
});
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
}
|
||||
|
||||
function handleNodeClick(data) {
|
||||
selectDeptOpts.value.queryParams.deptId = data.id;
|
||||
getUserList();
|
||||
}
|
||||
|
||||
function getDeptTreeData() {
|
||||
function refactorTree(data) {
|
||||
return data.map((node) => {
|
||||
let treeData = {
|
||||
id: `DEPT${node.id}`,
|
||||
label: node.label,
|
||||
parentId: node.parentId,
|
||||
weight: node.weight,
|
||||
};
|
||||
if (node.children && node.children.length > 0) {
|
||||
treeData.children = refactorTree(node.children);
|
||||
}
|
||||
return treeData;
|
||||
});
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (
|
||||
!selectDeptOpts.value.deptTreeData ||
|
||||
selectDeptOpts.value.deptTreeData.length <= 0
|
||||
) {
|
||||
getDeptOptions()
|
||||
.then(() => {
|
||||
selectDeptOpts.value.deptTreeData = refactorTree(
|
||||
selectDeptOpts.value.deptOptions
|
||||
);
|
||||
resolve();
|
||||
})
|
||||
.catch(() => {
|
||||
reject();
|
||||
});
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// let dateRange;
|
||||
/** 查询用户列表 */
|
||||
function getUserList() {
|
||||
listUser(addDateRange(selectDeptOpts.value.queryParams, null)).then(
|
||||
(response) => {
|
||||
selectDeptOpts.value.userTableList = response.rows;
|
||||
selectDeptOpts.value.userTotal = response.total;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function handleCurrentChange(currentRow) {
|
||||
// form.value.leaderId = currentRow.userId;
|
||||
// form.value.leaderName = currentRow.nickName;
|
||||
// userOpen.value = false;
|
||||
emits("user-selected", currentRow);
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
emits("close");
|
||||
}
|
||||
|
||||
watch(userOpen, (val) => {
|
||||
if (val) {
|
||||
getDeptTreeData();
|
||||
getUserList();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user