1、el-table相关代码，需注意:row-key="(row) => { return row.id }" 以及 :reserve-selection="true"
<div class="boxList">
<div class="search-form">
<!-- 搜索表单 -->
<el-form :inline="true" :model="form" ref="form">
<el-form-item label="名称" prop="name">
<el-input
v-model="form.name"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="专业" prop="major">
<el-input
v-model="form.major"
placeholder="请输入专业"
></el-input>
</el-form-item>
<!-- 操作按钮 -->
<el-form-item>
<el-button type="primary" @click="handleQuery"
>查询</el-button
>
<el-button type="warning" @click="resetForm"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<el-table
ref="table"
:data="newtableData"
border
@selection-change="selectionChangeHandle"
row-class-name="disable-selection"
height="300"
style="width: 100%"
>
<el-table-column
type="selection"
width="50"
fixed
:reserve-selection="true"
align="center"
/>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="major" label="专业"></el-table-column>
<el-table-column prop="deptName" label="部门"></el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
layout="total, sizes, prev, pager, next"
:total="page.total"
:current-page="page.current"
:page-size="page.size"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div
style="
display: flex;
align-items: center;
margin-top: 14px;
font-size: 14px;
margin-left: 3px;
"
>
完成时间：
<!-- <el-date-picker
clearable
v-model="form.date"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:placeholder="请选择日期"
style="width: 36%"
></el-date-picker> -->
<el-input
type="Number"
v-model="form.workTime"
:placeholder="'请输入'"
clearable
style="width: 36%"
>
<template #append>分钟</template>
</el-input>
</div>
<div style="display: flex; justify-content: flex-end">
<el-button type="primary" @click="onYunxing">运行 </el-button>
</div>
</div>
2、获取原数据列表和已选数据，注意// 回显已选中的行，$nextTick那段代码
//获取列表
async getUserDataAllListApi() {
let params = {
size: this.page.size,
current: this.page.current,
name: this.form.name,
major: this.form.major,
};
let { data } = await repairTools.getUserDataAllList(params);
this.page.size = data.size;
this.page.total = data.total;
this.newtableData = data.records;
},
//回填人员
async getGroupUserDataListApi() {
let params = {
taskIds: this.schemeAllData.idList,
taskLruName: this.schemeAllData.taskLruName,
};
let { data } = await repairTools.getGroupUserDataList(params);
this.checkAll = data.data;
// 回显已选中的行
this.$nextTick(() => {
this.newtableData.forEach((row) => {
const isChecked = this.checkAll.some(
(checkRow) => checkRow.id === row.id
);
if (isChecked) {
this.$refs.table.toggleRowSelection(row, true);
}
});
});
},
3、table点击selection-change可以动态获取数据是否有变动
//选中
selectionChangeHandle(selected) {
console.log('99999999999选中',selected)
this.newSelected = selected;
this.newtableData.forEach((row) => {
row.ruleselected = selected.includes(row);
});
},
4、有关分页事件
handleSizeChange(val) {
this.page.size = val;
this.tabClick();
},
handleCurrentChange(val) {
this.page.current = val;
this.tabClick();
},
5、通过异步来定义调用接口的前后顺序
//点击tab
async tabClick() {
if (this.activeName == "type2") {
await this.getUserDataAllListApi();
await this.getGroupUserDataListApi();
}
},
6、搜索和重置
// 查询方法
handleQuery() {
this.tabClick();
},
// 重置表单
resetForm() {
this.$refs.form.resetFields();
this.form.name = "";
this.form.major = "";
this.tabClick();
},
7、完成代码
<!-- 方案优化 -->
<template>
<!-- fullscreen -->
<el-dialog
:show-close="!run_disabled"
:title="schemeOptimization_open.onlyShow ? '维修方案详情' : '待修清单'"
v-model="schemeOptimization_open.open"
append-to-body
center
class="schemeOptimization"
width="55%"
@closed="closed"
@opened="opened"
>
<div>
<div class="WarWoundInfo pad">
<el-tabs
v-model="activeName"
@tab-click="tabClick"
:before-leave="beforeLeave"
stretch
>
<el-tab-pane
:label="
schemeOptimization_open.onlyShow ? '维修方案详情' : '待修清单'
"
name="type1"
>
11
</el-tab-pane>
<el-tab-pane label="人员参数" name="type2">
<div class="boxList">
<div class="search-form">
<!-- 搜索表单 -->
<el-form :inline="true" :model="form" ref="form">
<el-form-item label="名称" prop="name">
<el-input
v-model="form.name"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="专业" prop="major">
<el-input
v-model="form.major"
placeholder="请输入专业"
></el-input>
</el-form-item>
<!-- 操作按钮 -->
<el-form-item>
<el-button type="primary" @click="handleQuery"
>查询</el-button
>
<el-button type="warning" @click="resetForm"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<el-table
ref="table"
:data="newtableData"
border
@selection-change="selectionChangeHandle"
row-class-name="disable-selection"
height="300"
style="width: 100%"
>
<el-table-column
type="selection"
width="50"
fixed
:reserve-selection="true"
align="center"
/>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="major" label="专业"></el-table-column>
<el-table-column prop="deptName" label="部门"></el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
layout="total, sizes, prev, pager, next"
:total="page.total"
:current-page="page.current"
:page-size="page.size"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div
style="
display: flex;
align-items: center;
margin-top: 14px;
font-size: 14px;
margin-left: 3px;
"
>
完成时间：
<!-- <el-date-picker
clearable
v-model="form.date"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:placeholder="请选择日期"
style="width: 36%"
></el-date-picker> -->
<el-input
type="Number"
v-model="form.workTime"
:placeholder="'请输入'"
clearable
style="width: 36%"
>
<template #append>分钟</template>
</el-input>
</div>
<div style="display: flex; justify-content: flex-end">
<el-button type="primary" @click="onYunxing">运行 </el-button>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div
v-show="
schemeOptimization_open.onlyShow &&
this.schemeData.type.sub_type == '人员限制下时间最短'
"
style="display: flex; justify-content: center; height: 50px"
>
<el-button
size="small"
type="primary"
style="height: 30px"
@click="goTo_schemeOptimization"
>方案优化
</el-button>
</div>
<div
v-show="!schemeOptimization_open.onlyShow"
style="width: max-content; margin: 0 auto; height: 50px"
>
<el-button
v-show="activeName === 'type2'"
:disabled="run_disabled"
size="small"
style="margin: 0 20px; padding: 9px 25px; height: 30px"
@click="resave"
>重置
</el-button>
<el-button
:disabled="run_disabled"
size="small"
style="padding: 9px 25px; height: 30px"
type="success"
@click="run"
>运行
</el-button>
<!-- <el-button type="primary" size="small" style="margin-left: 0;padding: 9px 25px">保存
</el-button> -->
</div>
</div>
</template>
<script>
import EchartTreeDialog from "./EchartTreeDialog.vue";
import EchartGanttDialog from "./EchartGanttDialog.vue";
import MaintenanceResourceTable from "./MaintenanceResourceTable.vue";
// { getRepairResources }
import repairTools from "@/api/basicData/repairTools";
export default {
name: "SchemeOptimization",
props: {
},
components: { EchartTreeDialog, EchartGanttDialog, MaintenanceResourceTable },
data() {
return {
newSelected: [],
form: {
name: null,
major: null,
},
page: {
size: 10,
current: 1,
total: null,
},
newtableData: [],
};
},
mounted() {
// this.getUserDataAllListApi();
},
watch: {
schemeAllData: {
deep: true,
immediate: true,
handler(a) {
if (a) {
}
},
},
},
methods: {
//运行
async onYunxing() {
let arr = [];
this.newSelected.forEach((i) => {
arr.push(i.id);
});
let params = {
workTime: this.form.workTime,
userIdList: arr,
taskIds: this.schemeAllData.idList,
taskLruName: this.schemeAllData.taskLruName,
};
let { data } =
await this.$API.repairTask.warWoundReport.getGeneticWorkData(params);
if (data.code != 200) {
this.$message.error(data.msg);
} else {
this.$message.success(data.msg);
// eslint-disable-next-line vue/no-mutating-props
this.schemeOptimization_open.open = false;
}
},
//点击tab
async tabClick() {
if (this.activeName == "type2") {
await this.getUserDataAllListApi();
await this.getGroupUserDataListApi();
}
},
//回填人员
async getGroupUserDataListApi() {
let params = {
taskIds: this.schemeAllData.idList,
taskLruName: this.schemeAllData.taskLruName,
};
let { data } = await repairTools.getGroupUserDataList(params);
this.checkAll = data.data;
// 回显已选中的行
this.$nextTick(() => {
this.newtableData.forEach((row) => {
const isChecked = this.checkAll.some(
(checkRow) => checkRow.id === row.id
);
if (isChecked) {
this.$refs.table.toggleRowSelection(row, true);
}
});
});
},
//获取列表
async getUserDataAllListApi() {
let params = {
size: this.page.size,
current: this.page.current,
name: this.form.name,
major: this.form.major,
};
let { data } = await repairTools.getUserDataAllList(params);
this.page.size = data.size;
this.page.total = data.total;
this.newtableData = data.records;
},
// 查询方法
handleQuery() {
this.tabClick();
},
// 重置表单
resetForm() {
this.$refs.form.resetFields();
this.form.name = "";
this.form.major = "";
this.tabClick();
},
//选中
selectionChangeHandle(selected) {
console.log('99999999999选中',selected)
this.newSelected = selected;
this.newtableData.forEach((row) => {
row.ruleselected = selected.includes(row);
});
},
handleSizeChange(val) {
this.page.size = val;
this.tabClick();
},
handleCurrentChange(val) {
this.page.current = val;
this.tabClick();
},
},
};
</script>
8、效果如下
