176 lines
3.5 KiB
Vue
176 lines
3.5 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2025-10-11 14:27:37
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-10-29 17:12:04
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div class="app-container">
|
||
<search-bar
|
||
:formConfigs="formConfig"
|
||
ref="searchBarForm"
|
||
@headBtnClick="buttonClick" />
|
||
<base-table
|
||
ref="groupTableRef"
|
||
:id="'groupTableSelectRef'"
|
||
row-key="id"
|
||
:selectWidth="55"
|
||
@selection-change="selectChange"
|
||
:table-props="tableProps"
|
||
:page="1"
|
||
:limit="999"
|
||
:table-data="tableData"></base-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listByDeptId } from '@/api/group/Schedule';
|
||
|
||
const tableProps = [
|
||
{
|
||
prop: 'code',
|
||
label: '班组编号',
|
||
width: 140,
|
||
},
|
||
{
|
||
prop: 'name',
|
||
label: '班组名称',
|
||
width: 100,
|
||
},
|
||
{
|
||
prop: 'deptId',
|
||
label: '所属部门',
|
||
},
|
||
{
|
||
prop: 'leaderName',
|
||
label: '组长',
|
||
},
|
||
{
|
||
prop: 'remark',
|
||
label: '备注',
|
||
showOverflowtooltip: true,
|
||
},
|
||
];
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
urlOptions: {
|
||
getDataListURL: listByDeptId,
|
||
},
|
||
tableProps,
|
||
tableData: [],
|
||
formConfig: [
|
||
{
|
||
type: 'input',
|
||
label: '班组编号',
|
||
placeholder: '班组编号',
|
||
param: 'code',
|
||
},
|
||
{
|
||
type: 'input',
|
||
label: '班组名称',
|
||
placeholder: '班组名称',
|
||
param: 'name',
|
||
},
|
||
{
|
||
type: 'button',
|
||
btnName: '查询',
|
||
name: 'search',
|
||
color: 'primary',
|
||
},
|
||
],
|
||
formInline: {
|
||
pageNo: 1,
|
||
pageSize: 100,
|
||
code: '',
|
||
name: '',
|
||
},
|
||
selectedList: [],
|
||
selectedArr: [], //已选的班组，从父组件传过来的
|
||
deptId: undefined,
|
||
};
|
||
},
|
||
created() {},
|
||
methods: {
|
||
init(id, tableData) {
|
||
this.deptId = id;
|
||
this.selectedArr = tableData || [];
|
||
this.$nextTick(() => {
|
||
this.getDataList();
|
||
});
|
||
},
|
||
// 获取数据列表
|
||
getDataList() {
|
||
this.urlOptions.getDataListURL(this.deptId).then((response) => {
|
||
this.tableData = response.data;
|
||
this.$nextTick(() => {
|
||
if (this.selectedArr.length > 0) {
|
||
this.setSelectedRows();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
setSelectedRows() {
|
||
const table = this.$refs.groupTableRef.$children[0];
|
||
|
||
// 先清空选择
|
||
table.clearSelection();
|
||
|
||
this.selectedArr.forEach((item) => {
|
||
const rowInTable = this.tableData.find((i) => i.id === item.id);
|
||
if (rowInTable) {
|
||
//这里一定要用table.tableData，这样才是指向同一个数组
|
||
this.$set(table.store.states, 'selection', [
|
||
...table.store.states.selection,
|
||
table.tableData.find((i) => i.id === item.id),
|
||
]);
|
||
}
|
||
});
|
||
|
||
// 强制更新视图
|
||
this.$nextTick(() => {
|
||
table.$forceUpdate();
|
||
this.$forceUpdate();
|
||
});
|
||
},
|
||
buttonClick(val) {
|
||
switch (val.btnName) {
|
||
case 'search':
|
||
this.formInline.name = val.name;
|
||
this.formInline.code = val.code;
|
||
this.getDataList();
|
||
break;
|
||
default:
|
||
console.log(val);
|
||
}
|
||
},
|
||
selectChange(val) {
|
||
this.selectedList = val;
|
||
},
|
||
// 判断两个数组是否有重复的 id
|
||
hasDuplicateIds(arr1, arr2) {
|
||
const idSet = new Set(arr1.map((item) => item.id));
|
||
return arr2.some((item) => idSet.has(item.id));
|
||
},
|
||
|
||
dataFormSubmit() {
|
||
if (this.selectedList && this.selectedList.length > 0) {
|
||
const haveData = this.hasDuplicateIds(
|
||
this.selectedArr,
|
||
this.selectedList
|
||
);
|
||
if (haveData) {
|
||
this.$message('请不要重复添加数组');
|
||
return;
|
||
}
|
||
this.$emit('refreshTableData', this.selectedList);
|
||
} else if (this.selectedArr.length > 0) {
|
||
this.$message('请不要重复添加数组');
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|