arco-design 自定义table和for循环自定义form-item并添加自定义校验

代码

<template><div class="list-container"><Breadcrumb:items="['menu.generateRecords', 'menu.generateRecordsDetail']":needBack="true"/><a-card class="general-card"><PageQueryref="pageQuery":show-add="true":provider-list="state.providerList":telecom-status-list="state.telecomStatusList":telecom-list="state.telecomList":sim-status-list="state.simStatusList"@fetch-list-query="fetchListQuery"@fetch-list-reset="fetchListReset"@add-data="addData"@upload="handleUpload"@import="handleImport"></PageQuery></a-card><a-card class="general-card" style="margin-top: 20px"><a-table:loading="state.tableLoading":columns="state.columnsList":data="state.tableData":pagination="state.basePagination":bordered="{ cell: true }"@page-change="onPageChange($event)"@page-size-change="onPageSizeChange($event)"><template #imei="{ rowIndex, record }"><a-inputv-model="state.tableData[rowIndex].imei"@blur="imeiBlur(record)"/></template><template #iotCardNo="{ rowIndex, record }"><a-inputv-model="state.tableData[rowIndex].iotCardNo"@blur="iotCardBlur(record)"/></template><templatev-for="(TabItem, index) in state.addColumnsList"v-slot:[TabItem.slotName]="{ rowIndex, record }":key="index"><a-inputv-model="state.tableData[rowIndex][TabItem.slotName]"@blur="otherBlur(record, TabItem.slotName)"/></template><template #optional="{ record }"><a-button type="text" @click="handleClickDetail(record)">详情</a-button><a-button type="text" @click="handleClickDetail(record)">导出</a-button></template></a-table></a-card><!-- 详情组件 --><DetailModalref="DetailModalRef":current-detail="state.currentDetail"></DetailModal><!-- 新增弹窗 --><a-modalv-model:visible="insertVisible":footer="false"@cancel="closeAddModal"><template #title><div class="modal-title">新增桩码</div></template><a-formref="formRef":model="state.form":style="{ width: '100%' }"auto-label-width@submit="handleAddSubmit"><a-form-itemv-for="(labelItem, indexs) in state.form.formList":key="indexs":field="labelItem.dataIndex":label="labelItem.title":rules="[{required: true,message: `${labelItem.title}不能为空`,},{validator:labelItem.dataIndex === 'iotCardNo' ? customValidator : '',},]":validate-trigger="['blur', 'change']"><a-inputv-model="state.form[labelItem.dataIndex]":disabled="labelItem.dataIndex === 'orderNo'":placeholder="`请输入${labelItem.title}`"/></a-form-item><a-form-item><a-space><a-button @click="closeAddModal">取 消</a-button><a-button type="primary" html-type="submit">确 定</a-button></a-space></a-form-item></a-form></a-modal><!-- 导入 --><inputref="fileInput"type="file"style="display: none"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"@change="handleFileChange"/></div>
</template><script lang="ts" setup>// @ts-nocheckimport { ref, reactive, onMounted, getCurrentInstance } from 'vue';import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';import { Message } from '@arco-design/web-vue';import {generateEquipmentEncodeQuery,updateEquipmentEncodeRecordDetailBySortNum,addEquipmentEncodeRecordDetail,template,importImei,} from '@/api/purchasing';import { useRouter } from 'vue-router';import AddModal from '@/views/iotcard/all-card/components/add-modal.vue';import PageQuery from './components/PageQuery.vue';import DetailModal from './components/detail-modal.vue';import { pagination, columnsList } from './config';const proxy = getCurrentInstance()?.proxy as any;const { currentRoute } = useRouter();const route = currentRoute.value;const DetailModalRef = ref();const fileInput = ref(); // 导入const insertVisible = ref(false);const state = reactive({formQuery: {},tableLoading: false,tableData: [],currentDetail: {},basePagination: {...pagination,},telecomList: [], // 运营商字典providerList: [], // 供应商字典telecomStatusList: [], // 卡状态(运营商)simStatusList: [], // 管理状态isFirst: true,columnsList: [],imei: 'imei',addColumnsList: [],form: {formList: [],},});const fetchData = async (params = {accessType: 'Web',data: {...state.formQuery,encodeRecordId: route.query.encodeRecordId,},page: {pageIndex: state.basePagination.current,pageSize: state.basePagination.pageSize,},}) => {state.tableLoading = true;try {const resData = await generateEquipmentEncodeQuery(params);state.columnsList = resData.data.ruleNames.map((item) => {return {title: item.ruleName,dataIndex: item.ruleCode,slotName: item.ruleCode,};});state.addColumnsList = resData.data.ruleNames.map((item) => {return {title: item.ruleName,dataIndex: item.ruleCode,slotName: item.ruleCode,};});state.columnsList.unshift({ title: '订单号', dataIndex: 'orderNo' },{title: 'imei',dataIndex: 'imei',slotName: 'imei',},{title: '物联网卡编号',dataIndex: 'iotCardNo',slotName: 'iotCardNo',});// 表单item数组state.form.formList = [];state.columnsList.forEach((item) => {state.form.formList.push(item);});// 表单对象state.columnsList.forEach((item) => {if (item.dataIndex === 'orderNo') {state.form[item.dataIndex] = route.query.orderNo;} else {state.form[item.dataIndex] = '';}});console.log(state.form);state.tableData = resData.data.ruleCodes;state.basePagination.current = params.page.pageIndex;state.basePagination.total = resData.page.total;} catch (err) {// you can report use errorHandler or other} finally {state.tableLoading = false;state.isFirst = false;}};// imei修改// eslint-disable-next-line consistent-returnconst imeiBlur = async (e) => {console.log('保存了imei号');console.log(e);if (e.imei === '' || e.imei === null) {return false;}e.recordId = route.query.encodeRecordId;const params = {accessType: 'Web',data: {sortNum: e.sortNum,recordId: e.recordId,imei: e.imei,},};try {const res = await updateEquipmentEncodeRecordDetailBySortNum(params);proxy.$message.success('imei修改成功');} catch (err) {// you can report use errorHandler or otherconsole.log(err);console.log('请求失败');} finally {state.tableLoading = false;}};// 物联网卡号修改// eslint-disable-next-line consistent-returnconst iotCardBlur = async (e) => {console.log('保存了物联网卡号');console.log(e);if (e.iotCardNo === '' || e.iotCardNo === null) {return false;}const flag: boolean = /^\d{13}$/.test(e.iotCardNo);if (!flag) {proxy.$message.error('请输入13位纯数字物联卡号');return false;}e.recordId = route.query.encodeRecordId;const params = {accessType: 'Web',data: {sortNum: e.sortNum,recordId: e.recordId,iotCardNo: e.iotCardNo,},};try {const res = await updateEquipmentEncodeRecordDetailBySortNum(params);proxy.$message.success('物联网卡编号修改成功');} catch (err) {// you can report use errorHandler or otherconsole.log(err);console.log('请求失败');} finally {state.tableLoading = false;}};// 其他字段修改// eslint-disable-next-line consistent-returnconst otherBlur = async (e, className) => {console.log('修改了其他字段');console.log(e);console.log(className);const key = className;console.log(e[className]);e.recordId = route.query.encodeRecordId;const datas = {sortNum: e.sortNum,recordId: e.recordId,productCode: e[className],ruleCode: className,};const params = {accessType: 'Web',data: datas,};try {const res = await updateEquipmentEncodeRecordDetailBySortNum(params);proxy.$message.success('物联网卡编号修改成功');} catch (err) {// you can report use errorHandler or otherconsole.log(err);console.log('请求失败');} finally {state.tableLoading = false;}};// 新增数据const addData = () => {console.log('点击了增加');console.log(state.form);insertVisible.value = true;};// 取消新增const closeAddModal = () => {insertVisible.value = false;state.form.formList.forEach((item) => {item.value = '';});proxy.$refs.formRef.resetFields();};// 新增const handleAddSubmit = async ({ errors, values }) => {if (errors !== undefined) {return;}const list = [];console.log(state.form);console.log(state.addColumnsList);state.addColumnsList.forEach((item) => {const obj = {imei: state.form.imei,iotCardNo: state.form.iotCardNo,productCode: '', // valuerecordId: route.query.encodeRecordId,ruleCode: '', // key};obj.ruleCode = item.dataIndex;obj.productCode = state.form[item.dataIndex];list.push(obj);});console.log(list);const params = {accessType: 'Web',data: list,};console.log(params);try {const resData = await addEquipmentEncodeRecordDetail(params);console.log('resData', resData);if (resData.code === '0000') {Message.success('新增成功');closeAddModal();}fetchData();} catch (err) {// you can report use errorHandler or other} finally {state.tableLoading = false;}};// 物联网卡号校验const customValidator = (value, callback) => {// Your custom validation logic hereconst isValid = /^\d{13}$/.test(value);// Call the callback with an error message if validation failsif (!isValid) {callback('请输入13位纯数字物联卡号');} else {// Call the callback with no error if validation passescallback();}};// 查询const fetchListQuery = (e: any) => {state.formQuery = e;state.basePagination.current = 1;fetchData();};// 重置const fetchListReset = (e: any) => {state.formQuery = e;state.basePagination.current = 1;fetchData();};// 下载const handleClickDownload = async () => {state.tableLoading = true;try {const params = {accessType: 'Web',data: {...state.formQuery,pageIndex: state.basePagination.current,pageSize: state.basePagination.pageSize,},};const res: any = await exportInstallCard(params);if (res.code === '0000') {proxy.$message.success('下载成功,请点击传输管理按钮查看下载记录!');}} catch (err) {// you can report use errorHandler or other} finally {state.tableLoading = false;}};// 模板下载const handleUpload = async () => {console.log('模板下载');state.tableLoading = true;try {const params = {accessType: 'Web',data: {},};const res: any = await template(params);const elink = document.createElement('a');const blob = new Blob([res], { type: 'application/vnd.ms-excel' });elink.style.display = 'none';elink.download = `生成记录下载文件.xlsx`;elink.href = window.URL.createObjectURL(blob);document.body.appendChild(elink);elink.click();document.body.removeChild(elink);proxy.$message.success('下载成功!');} catch (err) {// you can report use errorHandler or other} finally {state.tableLoading = false;}};// 导入const handleImport = () => {console.log('导入');fileInput.value.click();};// 批量导入 - 文件上传const handleFileChange = async (event: any) => {const file = event.target.files[0];if (!file) {return;}if (file.name.split('.')[1] !== 'xlsx') {proxy.$message.error('请上传格式为 .xlsx 的文件');// 上传完成后重置inputfileInput.value = document.createElement('input');fileInput.value.type = 'file';fileInput.value.accept ='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';fileInput.value.onchange = handleFileChange;return;}const fd = new FormData();fd.append('file', file);fd.append('recordId', route.query.encodeRecordId);const res: any = await importImei(fd);// 上传完成后重置inputfileInput.value = document.createElement('input');fileInput.value.type = 'file';fileInput.value.accept ='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';fileInput.value.onchange = handleFileChange;if (res.code === '0000') {proxy.$message.success('导入成功');}};// 页码切换const onPageChange = (current: number) => {state.basePagination.current = current;fetchData();};// 条数切换const onPageSizeChange = (pageSize: number) => {state.basePagination.pageSize = pageSize;fetchData();};// 详情const handleClickDetail = async (e: any) => {state.tableLoading = true;try {const params = {accessType: 'Web',data: {msisdn: e.msisdn,deviceNo: e.deviceNo,},};const res: any = await getInstallCardDetail(params);state.currentDetail = res.data || {};DetailModalRef.value.showModel(true, e.msisdn);} catch (err) {// you can report use errorHandler or other} finally {state.tableLoading = false;}};// 获取字典const fetchDict = async () => {try {const telecomRes: any = await getDict('telecom'); // 运营商state.telecomList = telecomRes.data || [];const providerRes: any = await getDict('provider'); // 供应商state.providerList = providerRes.data || [];const telecomStatusRes: any = await getDict('telecom_status'); // 卡状态(运营商状态)state.telecomStatusList = telecomStatusRes.data || [];const simStatusRes: any = await getDict('sim_status'); // 卡状态(sim卡状态)state.simStatusList = simStatusRes.data || [];} catch (err) {// you can report use errorHandler or other}};const pageQuery = ref(null);// 页面初始化信息onMounted(() => {fetchData();// fetchListQuery(pageQuery.value.formQuery);// fetchDict();});
</script><script lang="ts">export default {name: 'Recording',};
</script><style lang="less" scoped>.btn {text-align: center;color: white;line-height: 24px;width: 68px;border-radius: 4px;margin: auto;}
</style>

展示效果

后台返回的数据