CREATE TABLE `t_pdm_nest_profile_process_config` ( `id` int(11) NOT NULL COMMENT '主键', `tenant_id` varchar(8) NOT NULL, `material_category` varchar(125) NOT NULL COMMENT '物料类别', `material_subcategory` varchar(125) NOT NULL COMMENT '物料子类别', `values` varchar(50) NOT NULL COMMENT '锯切类型值通过，分隔', `is_deleted` tinyint(4) NOT NULL, `version` bigint(20) NOT NULL, `type` tinyint(3) NOT NULL COMMENT '是否可以成对套（1：可以，0：不可以）', `create_by` varchar(50) NOT NULL, `create_time` datetime NOT NULL, `last_modified_by` varchar(50) NOT NULL, `last_modified_date` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; 根据这个表写一个vue 增删改查

<think>我们有一个MySQL表结构，现在需要为这个表实现一个Vue的增删改查（CRUD）界面。由于Vue本身是一个前端框架，我们需要考虑前后端分离的架构。这里我们将使用Vue.js（假设使用Vue3）和Axios进行HTTP请求，与后端API交互。后端API需要提供对t_pdm_nest_profile_process_config表的CRUD操作。但问题只要求前端部分，所以我们将重点放在前端。步骤：1.创建一个Vue组件，用于展示数据列表（包括分页、搜索等）。2.提供表单用于添加和编辑记录。3.使用Axios调用后端API（这里假设后端API已经存在，我们定义API的URL）。假设后端API接口如下：-获取列表（带分页和条件）：GET/api/nest-profile-process-config-添加：POST/api/nest-profile-process-config-更新：PUT/api/nest-profile-process-config/{id}-删除：DELETE/api/nest-profile-process-config/{id}注意：表中有很多字段，我们在前端表单中需要处理这些字段。由于表字段较多，我们不会在示例中展示所有字段，但会给出关键字段的示例，其他字段类似。我们将使用Vue3的组合式API（CompositionAPI）和ElementPlus（一个基于Vue3的UI框架）来构建界面。如果你没有使用ElementPlus，可以自行替换为其他UI框架或原生HTML，但这里为了快速开发，我们选择ElementPlus。首先，确保已经安装ElementPlus和Axios。安装命令：npminstallelement-plusaxios然后，我们创建一个名为NestProfileProcessConfig.vue的组件。组件结构：-数据表格：显示数据，并带有操作列（编辑、删除）-添加/编辑表单：对话框形式，包含表单字段-搜索条件（可选）由于代码较长，我们将分部分展示。注意：在实际项目中，你可能需要处理分页、验证、错误提示等。这里为了简洁，我们只实现基本功能。以下是组件的代码：</think>以下是一个基于 Vue 3 + Element Plus 的完整增删改查实现，使用 Vue Composition API 风格： ```vue <template> <div class="container"> <!-- 搜索和操作区域 --> <div class="header"> <el-input v-model="searchKey" placeholder="输入物料类别/子类别搜索" clearable style="width: 300px" @change="fetchData" /> <el-button type="primary" @click="handleCreate">新增配置</el-button> </div> <!-- 数据表格 --> <el-table :data="tableData" border style="width: 100%" v-loading="loading"> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="tenant_id" label="租户ID" width="120" /> <el-table-column prop="material_category" label="物料类别" width="180" /> <el-table-column prop="material_subcategory" label="物料子类别" width="180" /> <el-table-column prop="values" label="锯切类型值" show-overflow-tooltip /> <el-table-column prop="type" label="成对套类型" width="120"> <template #default="{ row }"> {{ row.type === 1 ? '可以' : '不可以' }} </template> </el-table-column> <el-table-column label="操作" width="200" fixed="right"> <template #default="{ row }"> <el-button size="small" @click="handleEdit(row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(row.id)" >删除</el-button > </template> </el-table-column> </el-table> <!-- 分页控件 --> <el-pagination class="pagination" v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" @size-change="fetchData" @current-change="fetchData" /> <!-- 新增/编辑弹窗 --> <el-dialog v-model="dialogVisible" :title="formTitle" width="600px" @closed="resetForm" > <el-form :model="formData" ref="formRef" label-width="160px" :rules="formRules" > <el-form-item label="租户ID" prop="tenant_id"> <el-input v-model="formData.tenant_id" maxlength="8" /> </el-form-item> <el-form-item label="物料类别" prop="material_category"> <el-input v-model="formData.material_category" maxlength="125" /> </el-form-item> <el-form-item label="物料子类别" prop="material_subcategory"> <el-input v-model="formData.material_subcategory" maxlength="125" /> </el-form-item> <el-form-item label="锯切类型值(逗号分隔)" prop="values"> <el-input v-model="formData.values" maxlength="50" /> </el-form-item> <el-form-item label="成对套类型" prop="type"> <el-radio-group v-model="formData.type"> <el-radio :label="1">可以</el-radio> <el-radio :label="0">不可以</el-radio> </el-radio-group> </el-form-item> <el-form-item label="是否删除" prop="is_deleted"> <el-switch v-model="formData.is_deleted" :active-value="1" :inactive-value="0" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue' import axios from 'axios' // API 基础路径 const API_BASE = '/api/pdm' // 表格数据 const tableData = ref([]) const loading = ref(false) const searchKey = ref('') const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) // 对话框控制 const dialogVisible = ref(false) const formTitle = ref('新增配置') const formRef = ref(null) // 表单数据 const formData = reactive({ id: null, tenant_id: '', material_category: '', material_subcategory: '', values: '', is_deleted: 0, version: 0, type: 1, create_by: 'admin', // 实际项目中应从登录信息获取 last_modified_by: 'admin' }) // 表单验证规则 const formRules = reactive({ tenant_id: [ { required: true, message: '租户ID不能为空', trigger: 'blur' }, { max: 8, message: '长度不能超过8个字符', trigger: 'blur' } ], material_category: [ { required: true, message: '物料类别不能为空', trigger: 'blur' }, { max: 125, message: '长度不能超过125个字符', trigger: 'blur' } ], material_subcategory: [ { required: true, message: '物料子类别不能为空', trigger: 'blur' }, { max: 125, message: '长度不能超过125个字符', trigger: 'blur' } ], values: [ { required: true, message: '锯切类型值不能为空', trigger: 'blur' }, { max: 50, message: '长度不能超过50个字符', trigger: 'blur' } ] }) // 获取数据 const fetchData = async () => { try { loading.value = true const response = await axios.get(API_BASE, { params: { page: currentPage.value, size: pageSize.value, search: searchKey.value } }) tableData.value = response.data.records total.value = response.data.total } catch (error) { console.error('获取数据失败:', error) ElMessage.error('获取数据失败') } finally { loading.value = false } } // 处理新增 const handleCreate = () => { formTitle.value = '新增配置' dialogVisible.value = true } // 处理编辑 const handleEdit = (row) => { formTitle.value = '编辑配置' Object.assign(formData, row) dialogVisible.value = true } // 处理删除 const handleDelete = async (id) => { try { await ElMessageBox.confirm('确定要删除该配置吗？', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) await axios.delete(`${API_BASE}/${id}`) ElMessage.success('删除成功') fetchData() } catch (error) { if (error !== 'cancel') { ElMessage.error('删除失败') } } } // 提交表单 const submitForm = async () => { try { // 验证表单 await formRef.value.validate() if (formData.id) { // 更新操作 await axios.put(`${API_BASE}/${formData.id}`, formData) ElMessage.success('更新成功') } else { // 新增操作 await axios.post(API_BASE, formData) ElMessage.success('新增成功') } dialogVisible.value = false fetchData() } catch (error) { if (error.response) { ElMessage.error(`操作失败: ${error.response.data.message}`) } else { console.error('表单验证失败或API错误:', error) } } } // 重置表单 const resetForm = () => { formRef.value?.resetFields() Object.keys(formData).forEach(key => { if (key !== 'is_deleted') { formData[key] = key === 'type' ? 1 : key === 'version' ? 0 : '' } else { formData[key] = 0 } }) formData.create_by = 'admin' formData.last_modified_by = 'admin' } // 初始化加载数据 onMounted(fetchData) </script> <style scoped> .container { padding: 20px; } .header { display: flex; justify-content: space-between; margin-bottom: 20px; } .pagination { margin-top: 20px; justify-content: flex-end; } </style> ``` ### 代码说明： 1. **数据表格展示**： - 使用 Element Plus 的 `el-table` 展示数据 - 包含分页、加载状态和搜索功能 - 对 `type` 字段进行了格式化显示（1->可以，0->不可以） 2. **表单验证**： - 使用 Element Plus 的表单验证规则 - 对关键字段如租户ID、物料类别等设置必填和长度限制 3. **API 交互**： - 使用 axios 进行 HTTP 请求 - 实现了完整的 CRUD 操作： - GET `/api/pdm` - 获取分页数据 - POST `/api/pdm` - 创建新记录 - PUT `/api/pdm/{id}` - 更新记录 - DELETE `/api/pdm/{id}` - 删除记录 4. **状态管理**： - 使用 Vue 3 的 Composition API 管理状态 - 表单数据使用 reactive 对象 - 表格数据使用 ref 包装 5. **用户体验优化**： - 操作确认对话框 - 加载状态提示 - 表单重置功能 - 操作成功/失败提示 ### 后端接口建议（Spring Boot 示例）： ```java @RestController @RequestMapping("/api/pdm") public class PdmConfigController { @Autowired private PdmConfigService configService; @GetMapping public PageResult<PdmConfig> getConfigs( @RequestParam(defaultValue = "1") int page, @RequestParam(defaultValue = "10") int size, @RequestParam(required = false) String search) { return configService.getConfigs(page, size, search); } @PostMapping public PdmConfig createConfig(@RequestBody PdmConfig config) { return configService.createConfig(config); } @PutMapping("/{id}") public PdmConfig updateConfig(@PathVariable int id, @RequestBody PdmConfig config) { return configService.updateConfig(id, config); } @DeleteMapping("/{id}") public void deleteConfig(@PathVariable int id) { configService.deleteConfig(id); } } ``` ### 注意事项： 1. 实际项目中需要处理用户认证（JWT等） 2. 创建/更新时应自动设置操作者信息（从登录用户获取） 3. 版本号（version）字段应在更新时自动递增 4. 日期字段（create_time/last_modified_date）应由后端自动生成