feat: 年度列表

src/api/holidays/holidays.js

@@ -2,7 +2,9 @@ import {axios} from '@/util/axios/request'
 
 const api = {
   getPage: '/holidays/page',
-  synchronousVacation: '/holidays/synchronousVacation'
+  synchronousVacation: '/holidays/synchronousVacation',
+  deleteHoliday: '/holidays/',
+  batchDeleteHoliday: '/holidays/batchDelete'
 }
 
 export default api
@@ -23,4 +25,21 @@ export function synchronousVacation(parameter) {
     data: parameter,
     useFullLoading: true
   })
+}
+
+export function deleteHoliday(parameter) {
+  return axios({
+    url: api.deleteHoliday + parameter,
+    method: 'delete',
+    useFullLoading: true
+  })
+}
+
+export function batchDeleteHoliday(parameter) {
+  return axios({
+    url: api.batchDeleteHoliday,
+    method: 'post',
+    data: parameter,
+    useFullLoading: true
+  })
 }
\ No newline at end of file

src/util/global.js

@@ -49,6 +49,10 @@ window.SYS_CONST = {
     MALE: 1,
     FEMALE: 2,
     OTHER: 3
+  },
+  HOLIDAY_TYPE: { //假期类型 1.节假日 2.双休日
+    HOLIDAY:1,
+    WEEKEND: 2
   }
 }
 

src/views/holidays/HolidaysList.vue

@@ -4,7 +4,7 @@
       <a-form layout="horizontal" class="ant-advanced-search-form">
         <div>
           <a-row>
-            <a-col :span="6">
+            <a-col :span="4">
               <a-form-item label="年度" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
                 <a-select placeholder="请选择年度" v-model="query.year" :allowClear="true" @change="search">
                   <a-select-option v-for="year in yearList" v-bind:value="year.id" v-bind:key="year.id">
@@ -28,14 +28,25 @@
       size="middle"
       :columns="columns"
       :dataSource="dataSource"
-      :row-selection="rowSelection"
+      :row-selection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
       :loading="tableLoading"
       :rowKey="rowKey"
       :pagination="false"
       bordered
     >
+      <div slot="title" slot-scope="data">
+          <span class="cust-title">
+            <a-icon type="hdd"/>假期管理列表{{data.none}}
+          </span>
+        <div class="cust-table-operator">
+          <a-button-group>
+            <a-button type="primary">新建</a-button>
+            <a-button @click="onBatchDelete" type="danger">批量删除</a-button>
+          </a-button-group>
+        </div>
+      </div>
       <span slot="dayCode" slot-scope="text">
-        {{findItem(holidayTypes,'valueInt',text)[0]['name']}}
+        {{(findItem(holidayTypes,'valueInt',text)[0]||{}).name}}
       </span>
       <span slot="duration" slot-scope="text">
         {{text}}天
@@ -43,7 +54,13 @@
       <span slot="action" slot-scope="text, record">
           <a>编辑</a>
           <a-divider type="vertical"/>
-          <a style="color: red">删除</a>
+          <a-popconfirm
+            v-if="dataSource.length"
+            title="确定删除?"
+            @confirm="() => onDelete(record.id)"
+          >
+            <a style="color: red">删除</a>
+          </a-popconfirm>
         </span>
       <span slot="startDate" slot-scope="text">
         {{timestampToTime(text)}}
@@ -70,7 +87,7 @@
 </template>
 <script>
 import {getCommonCode} from "@api/system/sysCode";
-import {getPage,synchronousVacation} from "@api/holidays/holidays";
+import {getPage,synchronousVacation,deleteHoliday,batchDeleteHoliday} from "@api/holidays/holidays";
 
 const columns = [
   {title: '名称', width: 100,dataIndex: 'name'},
@@ -83,44 +100,25 @@ const columns = [
 ]
 
 const dataSource = []
-
-const rowSelection = {
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-  },
-  onSelect: (record, selected, selectedRows) => {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: (selected, selectedRows, changeRows) => {
-    console.log(selected, selectedRows, changeRows);
-  }
-}
 export default {
   name: 'HolidaysList',
   data() {
     return {
       query: {
-        year: 2020,
+        year: 0,
         page: 1,
         size: 10
       },
-      yearList:[
-        {
-          id:2020,
-          name:"2020年"
-        },
-        {
-          id:2021,
-          name:"2021年"
-        }
-      ],
+      yearList:[],
       loading: false,
       columns:columns,
-      rowSelection:rowSelection,
+      selectedRowKeys:[],
       dataSource:dataSource,
       holidayTypes:[],
       tableLoading: false,
       isFirstLoad: true,
+      rowKey: "id",
+      total: 0
     }
   },
   computed: {
@@ -182,9 +180,52 @@ export default {
         }
         this.loading = false
       });
+    },
+    onDelete(id){
+      deleteHoliday(id).then(response => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED){
+          this.loadData()
+        }
+      })
+    },
+    updateSelect(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
+    },
+    onBatchDelete(){
+      if (this.selectedRowKeys.length == 0) {
+        return;
+      }
+      let _this =this
+      this.$confirm({
+        title: '提示',
+        content: '确定删除选中的记录吗？',
+        onOk() {
+          batchDeleteHoliday(_this.selectedRowKeys).then(response => {
+            if (response && response.code == SYS_CONST.REQUEST.SUCCEED){
+              _this.loadData()
+            }
+          })
+        },
+        onCancel() {
+        },
+      });
+    },
+    initYears(){
+      let date = new Date();
+      let baseyear = 2020;
+      let current = date.getFullYear(); //获取完整的年份(4位)
+      console.log(current)
+      for(let i = baseyear;i < (current+2); i++){
+        this.yearList.push({
+          id: i,
+          name: i + '年'
+        })
+      }
+      this.query.year = current
     }
   },
   mounted() {
+    this.initYears()
     this.getHolidayType()
     if (this.isFirstLoad == true) {
       this.loadData(this.defaultPageSize)