manager 升级到vue3

manager/src/views/goods-unit/index.vue

@@ -1,52 +1,67 @@
 <template>
   <div class="search">
-    <Card>
-      <Row class="operation">
-        <Button @click="add" type="primary">添加</Button>
-        <Button @click="delAll">批量删除</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>
+        <el-button @click="delAll">批量删除</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="180" />
+        <el-table-column prop="updateTime" label="更新时间" width="180" />
+        <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="edit(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>
 
@@ -55,156 +70,64 @@ import {
   addGoodsUnit,
   getGoodsUnitPage,
   updateGoodsUnit,
-  delGoodsUnit
+  delGoodsUnit,
 } from "@/api/index";
-
-import {regular} from "@/utils";
+import { regular } from "@/utils";
 
 export default {
   name: "goods-unit",
   data() {
     return {
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
-      modalTitle: "", // 添加或编辑标题
+      loading: true,
+      modalVisible: false,
+      modalTitle: "",
       searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
+        pageNumber: 1,
+        pageSize: 20,
+        sort: "createTime",
+        order: "desc",
         name: "",
       },
       form: {
-        // 添加或编辑表单对象初始化数据
         name: "",
       },
-      // 表单验证规则
       formValidate: {
-        name: [
-          regular.REQUIRED,
-          regular.VARCHAR5
-        ]
+        name: [regular.REQUIRED, regular.VARCHAR5],
       },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "计量单位",
-          key: "name",
-          minWidth: 120
-        },
-
-        {
-          title: "创建时间",
-          key: "createTime",
-          width: 180
-        },
-        {
-          title: "更新时间",
-          key: "updateTime",
-          width: 180
-        },
-        {
-          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.edit(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: {
-    // 初始化数据
     init() {
       this.getDataList();
     },
-    // 分页 改变页码
     changePage(v) {
       this.searchForm.pageNumber = v;
       this.getDataList();
       this.clearSelectAll();
     },
-    // 分页 改变页数
     changePageSize(v) {
       this.searchForm.pageSize = v;
       this.getDataList();
     },
-    // 搜索
     handleSearch() {
       this.searchForm.pageNumber = 1;
       this.searchForm.pageSize = 20;
       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;
-
       getGoodsUnitPage(this.searchForm).then((res) => {
         this.loading = false;
         if (res.success) {
@@ -215,20 +138,16 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    // 修改后提交
     handleSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
           this.submitLoading = true;
-
           if (this.modalTitle == "添加") {
-
-            if(this.data.find(item=>item.name == this.form.name)){
-              this.$Message.error('请勿添加重复计量单位!')
-              this.submitLoading = false
-              return
+            if (this.data.find((item) => item.name == this.form.name)) {
+              this.$Message.error("请勿添加重复计量单位!");
+              this.submitLoading = false;
+              return;
             }
-            // 添加 避免编辑后传入id等数据 记得删除
             delete this.form.id;
             addGoodsUnit(this.form).then((res) => {
               this.submitLoading = false;
@@ -239,7 +158,6 @@ export default {
               }
             });
           } else {
-            // 编辑
             updateGoodsUnit(this.id, this.form).then((res) => {
               this.submitLoading = false;
               if (res.success) {
@@ -252,30 +170,24 @@ export default {
         }
       });
     },
-    // 添加
     add() {
       this.modalTitle = "添加";
       this.form = {};
-      this.$refs.form.resetFields();
-
+      this.$refs.form?.resetFields();
       this.modalVisible = true;
     },
-    // 编辑
     edit(v) {
       this.id = v.id;
       this.modalTitle = "修改";
       this.modalVisible = true;
       this.form.name = v.name;
     },
-    // 删除
     remove(v) {
       this.$Modal.confirm({
         title: "确认删除",
-        // 记得确认修改此处
         content: "您确认要删除 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          // 删除
           delGoodsUnit(v.id).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -286,8 +198,6 @@ export default {
         },
       });
     },
-
-    // 全部删除
     delAll() {
       if (this.selectCount <= 0) {
         this.$Message.warning("您还未选择要删除的数据");
@@ -303,7 +213,6 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          // 批量删除
           delGoodsUnit(ids).then((res) => {
             this.$Modal.remove();
             if (res.success) {
@@ -312,9 +221,9 @@ export default {
               this.getDataList();
             }
           });
-        }
+        },
       });
-    }
+    },
   },
   mounted() {
     this.init();