在宜搭中搭建了一个自定义页面,开始通过表格组件中的操作列实现了单行数据的更新操作。现在的需求是希望通过复选表格中的多行,点击我在顶部操作中添加的批量分配按钮,点击按钮后打开对话框,在对话框中选择好姓名后,再点击分配,最后对选择的数据进行批量更新操作,更新包括该条数据数据分配后的负责人姓名以及时间等。
现在的问题是选择多行数据后,点击批量分配按钮,在对话框后选择好姓名后就无法进行下一步。个人感觉是未获取表格中的数据。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
在用户选择姓名后,遍历选中的行数据,更新每行数据的负责人姓名和时间等信息。
将更新后的数据保存到表格中。
import { getFieldValue } from '@/utils';
export async function onBatchDistribution() {
let loading;
try {
// 获取字段值(传统空值检查)
const employeeValue = this.$('employeeField_13o2lib').getValue();
const deptValue = this.$('departmentSelectField_13o2lib').getValue();
const userId = getFieldValue(employeeValue);
const deptId = getFieldValue(deptValue);
// 空值校验
if (!userId || !deptId) {
this.utils.toast({
title: '请选择' + (userId ? '负责人' : '') + (!deptId ? '所属部门' : ''),
type: 'error'
});
return;
}
// 获取表格选中行
const table = this.$('tablePC_13nts64v');
const tableDataRows = table.dataGrid('getSelections');
const selectedRows = table.dataGrid('getSelections').map(function (item) {
return item;
});
if (selectedRows.length === 0) {
this.utils.toast({ title: '请先勾选客户', type: 'error' });
return;
}
// 弹出对话框选择姓名
const dialog = this.$('dialog');
dialog.show();
dialog.setTitle('批量分配');
dialog.setContent(`
<div>
<label>选择姓名:</label>
<select id="usernameSelect">
<!-- 动态填充姓名选项 -->
</select>
</div>
`);
// 填充姓名选项
const usernames = ['张三', '李四', '王五']; // 示例姓名列表
const usernameSelect = document.getElementById('usernameSelect');
usernames.forEach(username => {
const option = document.createElement('option');
option.value = username;
option.textContent = username;
usernameSelect.appendChild(option);
});
// 绑定对话框确认按钮事件
dialog.getFooterDom().querySelector('button.confirm').addEventListener('click', async () => {
const selectedUsername = usernameSelect.value;
if (!selectedUsername) {
this.utils.toast({ title: '请选择姓名', type: 'error' });
return;
}
// 更新选中行数据
selectedRows.forEach(row => {
row.负责人姓名 = selectedUsername; // 更新负责人姓名
row.分配时间 = new Date().toISOString(); // 更新分配时间
});
// 保存更新后的数据到表格
table.dataGrid('updateRows', selectedRows);
// 关闭对话框
dialog.hide();
});
} catch (error) {
console.error('批量分配失败:', error);
} finally {
if (loading) {
loading.hide();
}
}
}
由于不太清楚完整业务场景,只能提供下实现思路供您参考下。
比如表格单选选择回调时,把勾选的那一行的值records,存到变量里。后续方便可以取变量的值,组装好参数再调接口