perf: 优化节假日管理

base-manager-ui/admin/src/pages/basicset/holiday/components/addfestivals.vue

@@ -65,7 +65,7 @@ export default {
         year: "", // 年份
         startTime: "", // 开始时间
         endTime: "", // 结束时间
-        workorholiday: "", // 是否工作日
+        workorholiday: 0, // 是否工作日
       },
       rules: {
         name: [

base-manager-ui/admin/src/pages/basicset/holiday/festival.vue

@@ -34,57 +34,44 @@
       </div>
       <div class="table-content">
         <!-- 表格 -->
-        <a-table
-          bordered
+        <y-table
           :columns="columns"
+          :data="list"
+          :pageSize.sync="size"
+          :page.sync="page"
+          :total="total"
           :loading="loading"
-          :data-source="list"
-          :pagination="{
-            showTotal: (total) => `共 ${total} 条`,
-            current: page,
-            total: total,
-            pageSize: size,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: pageSizeOptions,
-            onChange: changePagination,
-            onShowSizeChange: showSizeChange,
-          }"
           :scroll="{ y: 600 }"
-          :rowKey="(record) => record.id"
+          @changePagination="getHolidayData"
         >
-          <a slot="name" slot-scope="text">{{ text }}</a>
-          <span slot="number" slot-scope="text, record, index">{{
+          <span slot="index" slot-scope="{ index }">{{
             (page - 1) * size + index + 1
           }}</span>
+
           <!-- 年 -->
-          <template slot="year" slot-scope="text">
-            <span>{{ text.startTime | year }}</span>
+          <template slot="year" slot-scope="{ record }">
+            <span>{{ record.startTime | year }}</span>
           </template>
           <!-- 日期 -->
-          <template slot="days" slot-scope="text">
-            <span>{{ text.startTime | days }}</span>
-            <span v-if="text.startTime !== text.endTime">~</span>
-            <span v-if="text.startTime !== text.endTime">{{
-              text.endTime | days
+          <template slot="days" slot-scope="{ record }">
+            <span>{{ record.startTime | days }}</span>
+            <span v-if="record.startTime !== record.endTime">~</span>
+            <span v-if="record.startTime !== record.endTime">{{
+              record.endTime | days
             }}</span>
           </template>
           <!-- 类型 -->
-          <template slot="type" slot-scope="text">
-            <span>{{ text.workorholiday === 0 ? "节假日" : "工作日" }}</span>
-          </template>
-          <!-- 备注 -->
-          <template slot="summary" slot-scope="text">
-            <span>{{ text.summary ? text.summary : "--" }}</span>
+          <template slot="type" slot-scope="{ record }">
+            <span>{{ record.workorholiday === 0 ? "节假日" : "工作日" }}</span>
           </template>
           <!-- 操作 -->
-          <template slot="action" slot-scope="text">
+          <template slot="action" slot-scope="{ record }">
             <a-space size="middle">
-              <a @click="handleEdit(text)" class="primary">编辑</a>
-              <a class="delet" @click="handleDel(text.id)">删除</a>
+              <a @click="handleEdit(record)" class="primary">编辑</a>
+              <a class="delete" @click="handleDel(record.id)">删除</a>
             </a-space>
           </template>
-        </a-table>
+        </y-table>
       </div>
     </div>
     <!-- 弹窗 -->
@@ -97,17 +84,16 @@
 
 <script>
 import { getHolidayList, DelHoliday } from "@/services/festival";
-import { pageSizeOptions } from "@/config/pageConfig.js";
 import addfestivals from "./components/addfestivals.vue";
 import local from "@/utils/local";
 import TabHeader from "@/components/TabHeader";
+import YTable from "@/components/YTable.vue";
 const columns = [
   {
     title: "序号",
-    dataIndex: "number",
     width: "6%",
     scopedSlots: {
-      customRender: "number",
+      customRender: "index",
     },
   },
   {
@@ -138,9 +124,7 @@ const columns = [
   },
   {
     title: "备注",
-    scopedSlots: {
-      customRender: "summary",
-    },
+    dataIndex: "summary",
   },
   {
     title: "操作",
@@ -157,6 +141,7 @@ export default {
     addfestivals,
     // sitetree,
     TabHeader,
+    YTable,
   },
   data() {
     return {
@@ -167,7 +152,6 @@ export default {
       page: 1,
       size: 10,
       total: 0,
-      pageSizeOptions,
       year: "",
       siteId: local.getLocal("siteId"),
       yearData: [], // 年份搜索数据
@@ -196,17 +180,6 @@ export default {
       this.list = data;
       this.loading = false;
     },
-    // 分页
-    changePagination(num) {
-      this.page = num;
-      this.getHolidayData();
-    },
-    // 改变每页显示大小
-    showSizeChange(current, size) {
-      this.page = current;
-      this.size = size;
-      this.getHolidayData();
-    },
     // 新增
     showModal() {
       if (!this.siteId) {
@@ -227,7 +200,7 @@ export default {
       this.getHolidayData();
     },
     // 删除
-    handleDel(num) {
+    handleDel(id) {
       let _this = this;
       this.$confirm({
         title: "系统提示",
@@ -239,7 +212,7 @@ export default {
         maskClosable: true,
         icon: "exclamation-circle",
         async onOk() {
-          let res = await DelHoliday({ id: num });
+          let res = await DelHoliday({ id });
           let { code, msg } = res.data;
           if (code === 1) {
             _this.$message.success(msg);
@@ -267,61 +240,10 @@ export default {
   width: 100%;
   height: 100%;
 }
-.skins_btn_1 {
-  width: 115px;
-  height: 36px;
-  background-color: rgba(5, 149, 253, 1);
-  border-color: rgba(5, 149, 253, 1);
-}
-.skins_btn_2 {
-  float: left;
-  outline: none;
-  margin-right: 20px;
-  width: 72px;
-  height: 36px;
-  background: inherit;
-  background-color: rgba(5, 149, 253, 1);
-  border: none;
-  border-radius: 5px;
-  box-shadow: none;
-  font-family: "PingFang-SC-ExtraLight", "PingFang SC ExtraLight", "PingFang SC",
-    sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  margin-top: -65px;
-  margin-left: 1500px;
-}
-.skins_btn_2:focus {
-  outline: none;
-}
-.skins_sou_1 {
-  position: relative;
-  // float: left;
-  margin-left: 1320px;
-  margin-top: -45px;
-  width: 278px;
-  height: 36px;
-  padding: 2px 2px 2px 25px;
-  font-family: "Arial Normal", "Arial", sans-serif;
-  font-weight: 400;
-  font-style: normal;
-  font-size: 13px;
-  letter-spacing: normal;
-}
-.edit {
-  color: #03d76f;
-}
-.delet {
-  color: red;
-}
-.leixing,
-.beizhu {
-  margin-left: 30px;
-}
 
 .btn-box {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
 }
-</style>
\ No newline at end of file
+</style>