manager 升级到vue3

manager/src/views/custom-words/index.vue

@@ -1,51 +1,66 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add" type="primary">添加</Button>
-      </Row>
-        <Table
-          :loading="loading"
-          border
-          :columns="columns"
-          :data="data"
-          ref="table"
-          sortable="custom"
-          @on-selection-change="changeSelect"
-        ></Table>
-      <Row type="flex" justify="end" class="mt_10">
-        <Page
-          :current="searchForm.pageNumber"
-          :total="total"
-          :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
-          :page-size-opts="[20, 50, 100]"
-          size="small"
-          show-total
-          show-elevator
-          show-sizer
-        ></Page>
-      </Row>
-    </Card>
-    <Modal
-      :title="modalTitle"
-      v-model="modalVisible"
-      :mask-closable="false"
-      :width="500"
-    >
-      <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
-        <FormItem label="自定义分词" prop="name">
-          <Input v-model="form.name" clearable style="width: 100%" />
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="modalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
-          >提交</Button
-        >
+    <el-card>
+      <div class="operation">
+        <el-button type="primary" @click="add">添加</el-button>
       </div>
-    </Modal>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+        row-key="id"
+        @selection-change="changeSelect"
+      >
+        <el-table-column type="selection" width="60" align="center" />
+        <el-table-column prop="name" label="自定义分词" min-width="120" />
+        <el-table-column prop="createTime" label="创建时间" width="200" />
+        <el-table-column prop="updateTime" label="更新时间" width="200" />
+        <el-table-column prop="createBy" label="操作人" min-width="150" />
+        <el-table-column label="操作" width="200" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="detail(row)">修改</a>
+              <span class="op-split">|</span>
+              <a class="link-text" @click="remove(row)">删除</a>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="mt_10" style="display: flex; justify-content: flex-end">
+        <el-pagination
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
+          :page-sizes="[20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          size="small"
+          @current-change="changePage"
+          @size-change="changePageSize"
+        />
+      </div>
+    </el-card>
+
+    <el-dialog
+      v-model="modalVisible"
+      :title="modalTitle"
+      width="500px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+        <el-form-item label="自定义分词" prop="name">
+          <el-input v-model="form.name" clearable style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modalVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -54,118 +69,36 @@ import {
   getCustomWordsPage,
   delCustom,
   insertCustomWords,
-  updateCustomWords
+  updateCustomWords,
 } from "@/api/index";
-
 import { regular } from "@/utils";
+
 export default {
   name: "custom-words",
   data() {
     return {
-      loading: true, // 表单加载状态
-      modalType: 0, // 添加或编辑标识
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
+      loading: true,
+      modalType: 0,
+      modalVisible: false,
+      modalTitle: "",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         words: "",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         name: "",
       },
-      // 表单验证规则
       formValidate: {
-        name: [
-          regular.REQUIRED,
-          regular.VARCHAR20
-        ],
+        name: [regular.REQUIRED, regular.VARCHAR20],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "自定义分词",
-          key: "name",
-          minWidth: 120
-        },
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 200
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 200
-        },
-        {
-          title: "操作人",
-          key: "createBy",
-          minWidth: 150
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 200,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.detail(params.row);
-                    },
-                  },
-                },
-                "修改"
-              ),
-              h(
-                "span",
-                { style: { margin: "0 8px", color: "#dcdee2" } },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
+      submitLoading: false,
+      selectList: [],
+      selectCount: 0,
+      data: [],
+      total: 0,
     };
   },
   methods: {
@@ -187,17 +120,14 @@ export default {
       this.getDataList();
     },
     clearSelectAll() {
-      this.$refs.table.selectAll(false);
+      this.$refs.table?.clearSelection();
     },
-    // 选中状态变更
     changeSelect(e) {
       this.selectList = e;
       this.selectCount = e.length;
     },
-    // 获取列表数据
     getDataList() {
       this.loading = true;
-
       getCustomWordsPage(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -208,12 +138,10 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    // 提交数据
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-
           if (this.modalType == 0) {
             delete this.form.id;
             insertCustomWords(this.form).then((res) => {
@@ -226,7 +154,6 @@ export default {
             });
           } else {
             this.form.id = this.id;
-            // 编辑
             updateCustomWords(this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -239,16 +166,13 @@ export default {
         }
       });
     },
-    // 添加
     add() {
       this.modalType = 0;
       this.modalTitle = "添加";
-      this.form = {}
-      this.$refs.form.resetFields();
-
+      this.form = {};
+      this.$refs.form?.resetFields();
       this.modalVisible = true;
     },
-    // 修改
     detail(v) {
       this.modalType = 1;
       this.id = v.id;
@@ -256,15 +180,12 @@ export default {
       this.modalVisible = true;
       this.form.name = v.name;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delCustom(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -275,7 +196,6 @@ export default {
         },
       });
     },
-    // 批量删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -291,8 +211,7 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          // 批量删除
-          delSensitive(ids).then((res) => {
+          delCustom(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("操作成功");