修改数据

src/views/contract/division/index.vue

@@ -3,17 +3,17 @@
     <el-tabs type="border-card" @tab-change="handleTabChange">
       <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label">
         <el-card shadow="always">
-          <el-form :model="form" :inline="true" ref="queryFormRef">
+          <el-form :model="queryForm" :inline="true" ref="queryFormRef">
             <el-form-item label="名称" prop="versions">
-              <el-input v-model="form.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
+              <el-input v-model="queryForm.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="内容" prop="sheet">
-              <el-input v-model="form.content" placeholder="请输入内容" clearable @keyup.enter="handleQuery" />
+              <el-input v-model="queryForm.content" placeholder="请输入内容" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              <el-button type="primary" plain :icon="Plus">新增</el-button>
+              <el-button type="primary" plain :icon="Plus" @click="openDialog">新增</el-button>
             </el-form-item>
           </el-form>
         </el-card>
@@ -28,12 +28,27 @@
         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
       </el-tab-pane>
     </el-tabs>
+    <el-dialog title="新增" v-model="dialogVisible" width="50%" draggable>
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" clearable />
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <el-input v-model="form.content" placeholder="请输入内容" type="textarea" clearable :rows="4" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { getDicts } from '@/api/system/dict/data';
 import { Plus } from '@element-plus/icons-vue';
+import { FormInstance } from 'element-plus';
 
 const tabList = ref<any[]>([]);
 const tableData = ref<any[]>([]);
@@ -44,10 +59,20 @@ const queryParams = ref({
   pageSize: 10
 });
 const total = ref(0);
+const queryForm = ref({
+  name: '',
+  content: ''
+});
+const dialogVisible = ref(false);
 const form = ref({
   name: '',
   content: ''
 });
+const rules = ref({
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
+});
+
 //字典获取数据
 const getTabsList = async () => {
   const res = await getDicts('subcontracting_type');
@@ -74,6 +99,31 @@ const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
 };
+const formRef = ref();
+
+const openDialog = () => {
+  dialogVisible.value = true;
+};
+const closeDialog = () => {
+  dialogVisible.value = false;
+  form.value = {
+    name: '',
+    content: ''
+  };
+  formRef.value?.resetFields();
+};
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+
 onMounted(() => {
   getTabsList();
 });