vue3 table+form增删改查

<script setup lang='ts'>
import { productApi,toolReturnrApi } from '@/api/devices';
import service from '@/axios';
import { toRefs, ref, watch } from 'vue';
import { useRequest } from 'vue-hooks-plus';

import CustomStockSelect from '@/components/CustomStockSelect/index.vue'
import { message } from 'ant-design-vue';
const columns = [
    {
        title: '工具编号',
        dataIndex: 'code',
        key: 'code',
        width: 250,
    },
    {
        title: '工具名称',
        dataIndex: 'name',
        key: 'name',
        width: 200,
        ellipsis: true
    },
    {
        title: '工具品牌',
        dataIndex: 'barnd',
        width: 120,
        ellipsis: true
    },
    {
        title: '工具特性',
        dataIndex: 'peculiarity',
        width: 120,
        ellipsis: true
    },
    {
        title: '工具型号',
        dataIndex: 'description',
        width: 120,
        ellipsis: true
    },
    {
        title: '供应厂商',
        dataIndex: 'manufacturer',
        width: 150,
        ellipsis: true
    },
    {
        title: '领用数量',
        dataIndex: 'transferNum',
        key: 'transferNum',
        width: 200,
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: 80,
    },


];
interface Props {
    select: IDeviceProducePage
}
const props = withDefaults(defineProps<Props>(), {
    select: Object,
})
const { select } = toRefs(props);
const selectRow = ref();
const modalref = ref();
const formRef = ref();
const data = ref<{ records: IAddTool[] }>({
    records: []
})

const { run, loading: saveLoading } = useRequest(async (params: any) => {

    const result: IResult<any> = await service.post(productApi.addIndustrial, params);
    message.warning(result.msg);
    if (result.code === 200) {
        data.value.records = [];
    }



    return result;

}, { manual: true })

const add = () => {

    const obj: any = {
        id: "",
        code: "",
        toolId: '',
        name: "",
        barnd: "",
        peculiarity: "",
        description: "",
        manufacturer: "",
        transferNum: '',


    }
    data.value.records.unshift(obj)

}
const save = () => {
    if (!data.value.records.length) {
        message.warning('请添加数据!');
        return;
    }
    formRef.value.validateFields().then(async (res: any) => {
        run({
            proProcessId: select.value.proProcessId,
            mesToolTransferDetailList: data.value.records.map(item => {
                item.toolId = item.id
                item.id = ''
                return {
                    ...item,
                    // toolId: item.id,
                }
            })
        })

    })
}
const selectHadnle = (index: number) => {
    selectRow.value = index;
    const current = data.value.records[selectRow.value];
    let select = current.code ? [current] : []
    modalref.value.open(select);
}
const modalSubmit = (arr: any[]) => {
    const [select] = arr;
    data.value.records[selectRow.value] = select;
    selectRow.value = ''
}
const deleteHandle = (index: number) => {
    data.value.records.splice(index, 1);
}
</script>
<template>
    <div class="suit-table">
        <a-form ref="formRef" name="dynamic_form_item" :model="data">
            <div className="custom-table">
                <a-table :dataSource="data?.records" :columns="columns" :scroll="{ x: 1200 }">
                    <template #title>
                        <a-space>
                            <a-button type="primary" class="suit-btn" @click="add">添加</a-button>
                            <a-button type="primary" class="suit-btn" @click="save" :loading="saveLoading">保存</a-button>
                        </a-space>
                    </template>
                    <template #bodyCell="{ column, text, record, index }">
   
   
                        <template v-if="column.dataIndex === 'status'">
                            {{ record.status == '0' ? '待领用' : '领用' }}
                        </template>
                        <template v-if="column.dataIndex === 'code'">
   
                            <a-form-item :name="['records', index, 'code']" :rules="[{ required: true, message: '请选择工具' }]">
                                <a-input v-model:value="record.code" placeholder="请选择工具" disabled>
                                    <template #addonAfter>
                                        <a-button type="primary" class="suit-btn" @click="selectHadnle(index)">选择</a-button>
                                    </template>
                                </a-input>
   
                            </a-form-item>
                        </template>
                        <template v-if="column.dataIndex === 'transferNum'">
                            <a-form-item :name="['records', index, 'transferNum']"
                                :rules="[{ required: true, message: '请输入领用数量' }]">
                                <a-input v-model:value="record.transferNum" placeholder="请输入领用数量" />
                            </a-form-item>
                        </template>
                        <template v-if="column.dataIndex === 'action'">
                            <a-button class="suit-btn" type="link" @click="deleteHandle(index)">删除</a-button>
                        </template>
                    </template>
                </a-table>
            </div>
        </a-form>

    </div>
    <CustomStockSelect ref="modalref" :list="productApi.toolStockPage" :orgUrl="toolReturnrApi.toolTypeTree" @submit="modalSubmit" title="工具选择" />
</template>
<style  scoped  lang="less">
@import url(./index.less);
</style>