更换组合式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">
@@ -58,11 +58,11 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改岗位对话框 -->
     <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>
@@ -74,7 +74,7 @@
         </el-form-item>
         <el-form-item label="岗位状态" prop="status">
           <el-radio-group v-model="form.status">
-            <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+            <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -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,
+// 显示搜索条件
-      // 选中数组
+const showSearch = ref(true)
-      ids: [],
+// 总条数
-      // 非单个禁用
+const total = ref(0)
-      single: true,
+// 岗位表格数据
-      // 非多个禁用
+const postList = ref([])
-      multiple: true,
+// 弹出层标题
-      // 显示搜索条件
+const title = ref('')
-      showSearch: true,
+// 是否显示弹出层
-      // 总条数
+const open = ref(false)
-      total: 0,
+// 状态数据字典
-      // 岗位表格数据
+const statusOptions = ref([])
-      postList: [],
+// 查询参数
-      // 弹出层标题
+let queryParams = reactive({
-      title: "",
+  pageNum: 1,
-      // 是否显示弹出层
+  pageSize: 10,
-      open: false,
+  postCode: undefined,
-      // 状态数据字典
+  postName: undefined,
-      statusOptions: [],
+  status: undefined,
-      // 查询参数
+})
-      queryParams: {
+// 表单校验
-        pageNum: 1,
+
-        pageSize: 10,
+const state = reactive({
-        postCode: undefined,
+  form: {},
-        postName: undefined,
+  rules: {
-        status: undefined,
+    postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
-      },
+    postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
-      // 表单参数
+    postSort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }],
-      form: {},
-      // 表单校验
-      rules: {
-        postName: [
-          { required: true, message: "岗位名称不能为空", trigger: "blur" },
-        ],
-        postCode: [
-          { required: true, message: "岗位编码不能为空", trigger: "blur" },
-        ],
-        postSort: [
-          { required: true, message: "岗位顺序不能为空", trigger: "blur" },
-        ],
-      },
-    };
   },
-  created() {
+})
-    this.getList();
+const formRef = ref(null)
-    this.getDicts("sys_normal_disable").then((response) => {
+const { form, rules } = toRefs(state)
-      this.statusOptions = response.data;
+/** 查询岗位列表 */
-    });
+function getList() {
-  },
+  loading.value = true
-  methods: {
+  listPost(queryParams).then((response) => {
-    /** 查询岗位列表 */
+    postList.value = response.data.result
-    getList() {
+    total.value = response.data.totalNum
-      this.loading = true;
+    loading.value = false
-      listPost(this.queryParams).then((response) => {
+  })
-        this.postList = response.data.result;
+}
-        this.total = response.data.totalNum;
+
-        this.loading = false;
+function cancel() {
-      });
+  open.value = false
-    },
+  reset()
-    // 岗位状态字典翻译
+}
-    // statusFormat(row, column) {
+// 表单重置
-    //   return this.selectDictLabel(this.statusOptions, row.status);
+function reset() {
-    // },
+  form.value = {
-    // 取消按钮
+    postId: undefined,
-    cancel() {
+    postCode: undefined,
-      this.open = false;
+    postName: undefined,
-      this.reset();
+    postSort: 0,
-    },
+    status: '0',
-    // 表单重置
+    remark: undefined,
-    reset() {
+  }
-      this.form = {
+  proxy.resetForm('formRef')
-        postId: undefined,
+}
-        postCode: undefined,
+proxy.getDicts('sys_normal_disable').then((response) => {
-        postName: undefined,
+  statusOptions.value = response.data
-        postSort: 0,
+})
-        status: "0",
+/** 搜索按钮操作 */
-        remark: undefined,
+function handleQuery() {
-      };
+  queryParams.pageNum = 1
-      this.resetForm("form");
+  getList()
-    },
+}
-    /** 搜索按钮操作 */
+/** 重置按钮操作 */
-    handleQuery() {
+function resetQuery() {
-      this.queryParams.pageNum = 1;
+  proxy.resetForm('queryForm')
-      this.getList();
+  handleQuery()
-    },
+}
-    /** 重置按钮操作 */
+// 多选框选中数据
-    resetQuery() {
+function handleSelectionChange(selection) {
-      this.resetForm("queryForm");
+  ids.value = selection.map((item) => item.postId)
-      this.handleQuery();
+  single.value = selection.length != 1
-    },
+  multiple.value = !selection.length
-    // 多选框选中数据
+}
-    handleSelectionChange(selection) {
+/** 新增按钮操作 */
-      this.ids = selection.map((item) => item.postId);
+function handleAdd() {
-      this.single = selection.length != 1;
+  reset()
-      this.multiple = !selection.length;
+  open.value = true
-    },
+  title.value = '添加岗位'
-    /** 新增按钮操作 */
+}
-    handleAdd() {
+/** 修改按钮操作 */
-      this.reset();
+function handleUpdate(row) {
-      this.open = true;
+  reset()
-      this.title = "添加岗位";
+  const postId = row.postId || ids.value
-    },
+  getPost(postId).then((response) => {
-    /** 修改按钮操作 */
+    form.value = response.data
-    handleUpdate(row) {
+    open.value = true
-      this.reset();
+    title.value = '修改岗位'
-      const postId = row.postId || this.ids;
+  })
-      getPost(postId).then((response) => {
+}
-        this.form = response.data;
+/** 提交按钮 */
-        this.open = true;
+function submitForm() {
-        this.title = "修改岗位";
+  proxy.$refs['formRef'].validate((valid) => {
-      });
+    if (valid) {
-    },
+      if (form.value.postId != undefined) {
-    /** 提交按钮 */
+        updatePost(form.value).then((response) => {
-    submitForm: function () {
+          proxy.$modal.msgSuccess('修改成功')
-      this.$refs["form"].validate((valid) => {
+          open.value = false
-        if (valid) {
+          getList()
-          if (this.form.postId != undefined) {
-            updatePost(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPost(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const postIds = row.postId || this.ids;
-      this.$confirm(
-        '是否确认删除岗位编号为"' + postIds + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(function () {
-          return delPost(postIds);
         })
-        .then(() => {
+      } else {
-          this.getList();
+        addPost(form.value).then((response) => {
-          this.msgSuccess("删除成功");
+          proxy.$modal.msgSuccess('新增成功')
-        });
+          open.value = false
-    },
+          getList()
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有岗位数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportPost(queryParams);
         })
-        .then((response) => {
+      }
-          this.download(response.data.path);
+    }
-        });
+  })
-    },
+}
-  },
+/** 删除按钮操作 */
-};
+function handleDelete(row) {
+  const postIds = row.postId || ids.value
+  proxy
+    .$confirm('是否确认删除岗位编号为"' + postIds + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return delPost(postIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+/** 导出按钮操作 */
+function handleExport() {
+  this.$confirm('是否确认导出所有岗位数据项?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(function () {
+      return exportPost(queryParams)
+    })
+    .then((response) => {
+      proxy.download(response.data.path)
+    })
+}
+handleQuery()
 </script>