<template>
<!-- 新增或编辑（抽屉) -->
<a-drawer
:width="720"
placement="right"
:
destroyOnClose="true"
v-bind="$attrs"
@confirm-drawer="confirmDrawerClick"
@close-drawer="closeDrawerClick"
>
<template #footer>
<div class="drawer-footer-area">
<a-button class="drawer-btn" @click="closeDrawerClick">取消</a-button>
<a-button
class="drawer-btn"
type="primary"
:loading="tableLoading"
@click="confirmDrawerClick"
>提交</a-button
>
</div>
</template>
<a-
form ref="drawer
Form" :
model="childrenEditItem" layout="vertical">
<a-row :gutter="[16, 0]">
<a-col :span="12">
<a-
form-item
name="company"
label="快递公司编码"
:rules="[{ required: true, message: '请输入' }]"
>
<a-input
v-
model:value="childrenEditItem.company"
inputType="autoComplete"
title="参数2"
:disabled="!!childrenEditItem.id"
/>
</a-
form-item>
</a-col>
<a-col :span="12">
<a-
form-item
label="快递公司名称"
name="companyName"
:rules="[{ required: true, message: '请输入' }]"
>
<a-input
v-
model:value="childrenEditItem.companyName"
inputType="autoComplete"
title="参数2"
:disabled="showEditCheck"
/>
</a-
form-item>
</a-col>
<a-col :span="12">
<a-
form-item
name="monthlyAccount"
label="月结账号"
:rules="[{ required: true, message: '请输入' }]"
>
<a-input
v-
model:value="childrenEditItem.monthlyAccount"
:disabled="showEditCheck"
title="参数1"
/>
</a-
form-item>
</a-col>
</a-row>
<div class="drawer-sub-title">快递类型</div>
<a-table
:scroll="{ x: 'max-content', y: 'flex' }"
:dataSource="dataSource"
:columns="columnAdd"
>
<template #bodyCell="{ column, record, index }">
<!-- <template v-if="column.dataIndex === 'indexId'">
<span>{{ scoped.index }}</span>
</template> -->
<template v-if="column.dataIndex === 'expName'">
<a-
form-item
:name="[ index, 'expName']"
:rules="[{ required: true, message: '请输入' }]"
>
<a-input v-
model:value="record.expName" title="参数1" />
</a-
form-item>
</template>
<template v-if="column.dataIndex === 'expType'">
<a-
form-item
:name="['dataSource', 'childrenEditItem', index, 'expType']"
:rules="[{ required: true, message: '请输入' }]"
>
<a-input v-
model:value="record.expType" title="参数1" />
</a-
form-item>
</template>
<template v-if="column.dataIndex === 'expressDiscount'">
<a-
form-item
:name="[ index, 'expressDiscount']"
:rules="[{ required: true, message: '请输入' }]"
>
<a-input
v-
model:value="record.expressDiscount"
:disabled="showEditCheck"
title="参数1"
/>
</a-
form-item>
</template>
<template v-if="column.dataIndex === 'operation'">
<a-popconfirm
placement="topLeft"
title="是否删除当前
数据？"
ok-text="确定"
cancel-text="取消"
@confirm="deleteClick(record)"
>
<a-button type="inline" danger>删除</a-button>
</a-popconfirm>
</template>
</template>
<template v-if="showFooter" #footer
><a-button size="small" @click="addData">
<template #icon>
<h-icon-plus />
</template>
添加一条
数据
</a-button></template
>
</a-table>
</a-
form>
</a-drawer>
</template>
<script lang="ts" setup>
import { ValidateErrorEntity } from '@hwork/
ant-design-vue/es/
form/interface'
import { message } from '@hwork/
ant-design-vue'
import { ref, Ref, watch,
reactive, onMounted, computed, toRaw } from 'vue'
import { addTableColumn } from '../common'
import { DropDownItem } from '@/types/public-types'
import { GetUpdateOrInsertListParams, getBatchInsertList } from '@/api/expressage'
import type { recordParams, tableParams } from '@/api/expressage'
const props = defineProps({
editItem: {
type: Array,
default: () => []
},
showEditCheck: {
type: Boolean,
default: false
}
})
// console.log( '88888888888000')
// =============== 表头配置 ================ start
const columnAdd: any = ref(addTableColumn)
const showFooter = ref(true) //显示表格底部
// 详情带过来的表格
数据
// console.log(dataSource.value,'这个位置的dataSource1111111111')
// const searchParams: Ref<param> = ref({
// select: undefined,
// cascader: undefined,
// tree: undefined,
// input: '',
// date: '',
// dateRange: ['', '']
// })
// 表格-------------
// const pagination =
reactive({
// total: 1,
// current: 1,
// pageSize: 10,
// pageSizeOptions: ['10', '20', '50', '100'],
// showSizeChanger: true,
// showQuickJumper: true,
// showTotal: (total: number) => `共${total}条`
// })
/**
* 获取表格
数据
*/
// const tableLoading: Ref<boolean> = ref(false)
// 模拟
数据 实际项目建议远程搜索
// const allSearchList = AllSearchList
// const searchList: Ref<DropDownItem[]> = ref([])
// const handleSearch = (val: string) => {
// if (!val) return
// // 模拟查询
// searchList.value = allSearchList.filter(item => {
// return item.label.includes(val) || item.value.includes(val)
// })
// 远程搜索
// kpiTargetQueryList(val).then((res: any) => {
// if(res.code === '1') {
// searchList.value = res.data?.map((value: string) => {
// return {
// label: value,
// value: value
// }
// })
// }
// })
// }
/**
* 下拉框筛选
*/
// function filterOption(input: string, option: any) {
// return (
// option.value.toLowerCase().includes(input.toLowerCase()) ||
// option.label.toLowerCase().includes(input.toLowerCase())
// )
// }
const emits = defineEmits(['confirmDrawer', 'closeDrawer'])
console.log('3333333333')
const default
Form = (): recordParams => {
return {
companyName: '',
company: '',
monthlyAccount: '',
updateList: [],
insertList: []
}
}
const childrenEditItem = ref<recordParams>(default
Form())
const dataSource = computed<tableParams[]>(() => [
...(childrenEditItem.value?.updateList || []),
...(childrenEditItem.value?.insertList || [])
])
console.log(dataSource, 'dataSource-------')
const addKey = () =>
'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9)
function addData() {
// console.log(dataSource.value, '新增的
数据---------')
const newRow: tableParams = {
key: addKey(),
expName: '',
expType: '',
expressDiscount: '',
flag: 0,
status: 1
}
childrenEditItem.value.insertList.push(newRow)
}
watch(
() => props.editItem,
(newVal: any) => {
if (
JSON.stringify(newVal) !== '{}') {
console.log(newVal)
const { company, companyName, monthlyAccount, status, id, dataInfo } = newVal
childrenEditItem.value = {
company,
companyName,
monthlyAccount,
id,
updateList: dataInfo.map((item: any) => {
return {
...item,
flag: 1,
key: addKey(),
status
}
}),
insertList: []
}
}
// childrenEditItem.value = newVal
},
{ deep: true, immediate: true }
)
const drawer
Form: Ref<any> = ref(null)
const tableLoading = ref(false)
/**
* 确认
*/
function confirmDrawerClick() {
drawer
Form.value
.validate()
.then(() => {
const { updateList, insertList, companyName, company, monthlyAccount, id } = toRaw(
childrenEditItem.value
)
const list = [...updateList, ...insertList, ...delList.value].map(
({ key, flag, ...rest }) => {
return {
...rest,
companyName,
company,
monthlyAccount,
id
}
}
)
tableLoading.value = true
console.log('表格请求参数', childrenEditItem)
getBatchInsertList(list)
.then((res: any) => {
console.log('表格请求
数据11111111', res)
// pagination.total = res.total
// tableLoading.value = false
closeDrawerClick()
emits('confirmDrawer')
})
.finally(() => {
tableLoading.value = false
})
})
.catch((error: ValidateErrorEntity) => {
console.log('校验失败', error)
})
}
/**
* 关闭
*/
function closeDrawerClick() {
childrenEditItem.value = default
Form()
emits('closeDrawer')
}
const delList = ref<tableParams[]>([])
/**
* 删除
* @param record
*/
function deleteClick(record: any) {
const list = !record.flag ? childrenEditItem.value.insertList : childrenEditItem.value.updateList
const index = list.findIndex((item: tableParams) => item.key === record.key)
if (index > -1) {
record.flag == 1 &&
delList.value.push({
...record,
delflag: 1
})
list.splice(index, 1)
}
}
onMounted(() => {
// getTableList()
})
</script>
<style scoped lang="less">
::v-deep .css-dev-only-do-not-override-qbff1j.
ant-table-wrapper .
ant-table-footer {
background: #ffffff !import
ant;
}
.drawer-footer-area {
.drawer-btn {
min-width: 80px;
}
.drawer-btn + .drawer-btn {
margin-left: 12px;
}
}
</style>
根据上面整个页面的代码中，现在需要在a-table下的每一个<a-
form-item>中绑定必填校验，在不动代码中的逻辑和字段的情况下，不要任何拓展，请问校验怎么添加通过，请给出简单易懂的代码结果
本文介绍了Modal组件中destroyOnClose属性的作用及其使用注意事项。当设置此属性后，Modal关闭时会销毁内部元素，确保每次打开都能展示全新内容。此外，文中还提到了在与Form组件配合使用时的一些特殊行为及解决办法。
扫一扫
1485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
