更换组合式API写法

src/views/system/post/index.vue

@@ -31,7 +31,7 @@
       <el-col :span="1.5">
         <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['system:post:export']">导出</el-button>
       </el-col>
-      <right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
@@ -62,7 +62,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="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称" />
         </el-form-item>
@@ -87,193 +87,161 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
-
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup name="post">
-import {
+import { listPost, getPost, delPost, addPost, updatePost, exportPost } from '@/api/system/post'
-  listPost,
-  getPost,
-  delPost,
-  addPost,
-  updatePost,
-  exportPost,
-} from "@/api/system/post";
 
-export default {
+const { proxy } = getCurrentInstance()
-  name: "post",
+const loading = ref(true)
-  data() {
+const ids = ref([])
-    return {
+const single = ref(true)
-      // 遮罩层
+const multiple = ref(true)
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
 // 显示搜索条件
-      showSearch: true,
+const showSearch = ref(true)
 // 总条数
-      total: 0,
+const total = ref(0)
 // 岗位表格数据
-      postList: [],
+const postList = ref([])
 // 弹出层标题
-      title: "",
+const title = ref('')
 // 是否显示弹出层
-      open: false,
+const open = ref(false)
 // 状态数据字典
-      statusOptions: [],
+const statusOptions = ref([])
 // 查询参数
-      queryParams: {
+let queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
   postCode: undefined,
   postName: undefined,
   status: undefined,
-      },
+})
-      // 表单参数
-      form: {},
 // 表单校验
+
+const state = reactive({
+  form: {},
   rules: {
-        postName: [
+    postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
-          { required: true, message: "岗位名称不能为空", trigger: "blur" },
+    postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
-        ],
+    postSort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }],
-        postCode: [
-          { required: true, message: "岗位编码不能为空", trigger: "blur" },
-        ],
-        postSort: [
-          { required: true, message: "岗位顺序不能为空", trigger: "blur" },
-        ],
   },
-    };
+})
-  },
+const formRef = ref(null)
-  created() {
+const { form, rules } = toRefs(state)
-    this.getList();
-    this.getDicts("sys_normal_disable").then((response) => {
-      this.statusOptions = response.data;
-    });
-  },
-  methods: {
 /** 查询岗位列表 */
-    getList() {
+function getList() {
-      this.loading = true;
+  loading.value = true
-      listPost(this.queryParams).then((response) => {
+  listPost(queryParams).then((response) => {
-        this.postList = response.data.result;
+    postList.value = response.data.result
-        this.total = response.data.totalNum;
+    total.value = response.data.totalNum
-        this.loading = false;
+    loading.value = false
-      });
+  })
-    },
+}
-    // 岗位状态字典翻译
+
-    // statusFormat(row, column) {
+function cancel() {
-    //   return this.selectDictLabel(this.statusOptions, row.status);
+  open.value = false
-    // },
+  reset()
-    // 取消按钮
+}
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
 // 表单重置
-    reset() {
+function reset() {
-      this.form = {
+  form.value = {
     postId: undefined,
     postCode: undefined,
     postName: undefined,
     postSort: 0,
-        status: "0",
+    status: '0',
     remark: undefined,
-      };
+  }
-      this.resetForm("form");
+  proxy.resetForm('formRef')
-    },
+}
+proxy.getDicts('sys_normal_disable').then((response) => {
+  statusOptions.value = response.data
+})
 /** 搜索按钮操作 */
-    handleQuery() {
+function handleQuery() {
-      this.queryParams.pageNum = 1;
+  queryParams.pageNum = 1
-      this.getList();
+  getList()
-    },
+}
 /** 重置按钮操作 */
-    resetQuery() {
+function resetQuery() {
-      this.resetForm("queryForm");
+  proxy.resetForm('queryForm')
-      this.handleQuery();
+  handleQuery()
-    },
+}
 // 多选框选中数据
-    handleSelectionChange(selection) {
+function handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.postId);
+  ids.value = selection.map((item) => item.postId)
-      this.single = selection.length != 1;
+  single.value = selection.length != 1
-      this.multiple = !selection.length;
+  multiple.value = !selection.length
-    },
+}
 /** 新增按钮操作 */
-    handleAdd() {
+function handleAdd() {
-      this.reset();
+  reset()
-      this.open = true;
+  open.value = true
-      this.title = "添加岗位";
+  title.value = '添加岗位'
-    },
+}
 /** 修改按钮操作 */
-    handleUpdate(row) {
+function handleUpdate(row) {
-      this.reset();
+  reset()
-      const postId = row.postId || this.ids;
+  const postId = row.postId || ids.value
   getPost(postId).then((response) => {
-        this.form = response.data;
+    form.value = response.data
-        this.open = true;
+    open.value = true
-        this.title = "修改岗位";
+    title.value = '修改岗位'
-      });
+  })
-    },
+}
 /** 提交按钮 */
-    submitForm: function () {
+function submitForm() {
-      this.$refs["form"].validate((valid) => {
+  proxy.$refs['formRef'].validate((valid) => {
     if (valid) {
-          if (this.form.postId != undefined) {
+      if (form.value.postId != undefined) {
-            updatePost(this.form).then((response) => {
+        updatePost(form.value).then((response) => {
-              this.$modal.msgSuccess("修改成功");
+          proxy.$modal.msgSuccess('修改成功')
-              this.open = false;
+          open.value = false
-              this.getList();
+          getList()
-            });
+        })
       } else {
-            addPost(this.form).then((response) => {
+        addPost(form.value).then((response) => {
-              this.$modal.msgSuccess("新增成功");
+          proxy.$modal.msgSuccess('新增成功')
-              this.open = false;
+          open.value = false
-              this.getList();
+          getList()
-            });
+        })
       }
     }
-      });
+  })
-    },
+}
 /** 删除按钮操作 */
-    handleDelete(row) {
+function handleDelete(row) {
-      const postIds = row.postId || this.ids;
+  const postIds = row.postId || ids.value
-      this.$confirm(
+  proxy
-        '是否确认删除岗位编号为"' + postIds + '"的数据项?',
+    .$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', '警告', {
-        "警告",
+      confirmButtonText: '确定',
-        {
+      cancelButtonText: '取消',
-          confirmButtonText: "确定",
+      type: 'warning',
-          cancelButtonText: "取消",
+    })
-          type: "warning",
-        }
-      )
     .then(function () {
-          return delPost(postIds);
+      return delPost(postIds)
     })
     .then(() => {
-          this.getList();
+      getList()
-          this.msgSuccess("删除成功");
+      proxy.$modal.msgSuccess('删除成功')
-        });
+    })
-    },
+}
 /** 导出按钮操作 */
-    handleExport() {
+function handleExport() {
-      const queryParams = this.queryParams;
+  this.$confirm('是否确认导出所有岗位数据项?', '警告', {
-      this.$confirm("是否确认导出所有岗位数据项?", "警告", {
+    confirmButtonText: '确定',
-        confirmButtonText: "确定",
+    cancelButtonText: '取消',
-        cancelButtonText: "取消",
+    type: 'warning',
-        type: "warning",
   })
     .then(function () {
-          return exportPost(queryParams);
+      return exportPost(queryParams)
     })
     .then((response) => {
-          this.download(response.data.path);
+      proxy.download(response.data.path)
-        });
+    })
-    },
+}
-  },
+handleQuery()
-};
 </script>