表单预览和修改

src/views/flowable/category/index.vue

@@ -145,7 +145,7 @@
 
     <!-- 添加或修改【请填写功能名称】对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="分类名称" prop="categoryName">
           <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
         </el-form-item>
@@ -172,12 +172,13 @@
 
 <script setup>
 import {
-  listCategory,
+  listAllCategory,
   // getCategory,
-  // delCategory,
-  // addCategory,
+  delCategory,
+  addCategory,
   // updateCategory,
 } from "@/api/flowable/category";
+import { ElMessage, ElMessageBox } from "element-plus";
 import { ref } from "vue";
 // 按钮loading
 const buttonLoading = ref(false);
@@ -199,6 +200,8 @@ const categoryList = ref([]);
 const title = ref("");
 // 是否显示弹出层
 const open = ref(false);
+
+const formRef = ref();
 const data = reactive({
   // 查询参数
   queryParams: {
@@ -226,7 +229,7 @@ const { queryParams, form, rules } = toRefs(data);
 /** 查询【请填写功能名称】列表 */
 function getList() {
   loading.value = true;
-  listCategory(queryParams.value).then((response) => {
+  listAllCategory(queryParams.value).then((response) => {
     categoryList.value = response.rows;
     total.value = response.total;
     loading.value = false;
@@ -234,12 +237,12 @@ function getList() {
 }
 // 取消按钮
 function cancel() {
-  this.open = false;
-  this.reset();
+  open.value = false;
+  reset();
 }
 // 表单重置
 function reset() {
-  this.form = {
+  form.value = {
     categoryId: undefined,
     categoryName: undefined,
     code: undefined,
@@ -250,7 +253,9 @@ function reset() {
     remark: undefined,
     delFlag: undefined,
   };
-  this.resetForm("form");
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
 }
 /** 搜索按钮操作 */
 function handleQuery() {
@@ -270,9 +275,9 @@ function handleSelectionChange(selection) {
 }
 /** 新增按钮操作 */
 function handleAdd() {
-  this.reset();
-  this.open = true;
-  this.title = "添加流程分类";
+  reset();
+  open.value = true;
+  title.value = "添加流程分类";
 }
 /** 修改按钮操作 */
 function handleUpdate(row) {
@@ -288,28 +293,28 @@ function handleUpdate(row) {
 }
 /** 提交按钮 */
 function submitForm() {
-  this.$refs["form"].validate((valid) => {
+  formRef.value.validate((valid) => {
     if (valid) {
-      this.buttonLoading = true;
-      if (this.form.categoryId != null) {
-        updateCategory(this.form)
+      buttonLoading.value = true;
+      if (form.value.categoryId != null) {
+        updateCategory(form.value)
           .then((response) => {
-            this.$modal.msgSuccess("修改成功");
-            this.open = false;
-            this.getList();
+            ElMessage.success("修改成功");
+            open.value = false;
+            getList();
           })
           .finally(() => {
-            this.buttonLoading = false;
+            buttonLoading.value = false;
           });
       } else {
-        addCategory(this.form)
+        addCategory(form.value)
           .then((response) => {
-            this.$modal.msgSuccess("新增成功");
-            this.open = false;
-            this.getList();
+            ElMessage.success("新增成功");
+            open.value = false;
+            getList();
           })
           .finally(() => {
-            this.buttonLoading = false;
+            buttonLoading.value = false;
           });
       }
     }
@@ -317,22 +322,21 @@ function submitForm() {
 }
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const categoryIds = row.categoryId || this.ids;
-  this.$modal
-    .confirm(
-      '是否确认删除【请填写功能名称】编号为"' + categoryIds + '"的数据项？'
-    )
+  const categoryIds = [{ id: row.categoryId, uuid: row.uuid }] || ids.value;
+  ElMessageBox.confirm(
+    '是否确认删除【请填写功能名称】编号为"' + categoryIds + '"的数据项？'
+  )
     .then(() => {
-      this.loading = true;
+      loading.value = true;
       return delCategory(categoryIds);
     })
     .then(() => {
-      this.loading = false;
-      this.getList();
-      this.$modal.msgSuccess("删除成功");
+      loading.value = false;
+      getList();
+      ElMessage.success("删除成功");
     })
     .finally(() => {
-      this.loading = false;
+      loading.value = false;
     });
 }
 /** 导出按钮操作 */