feat: 节假日列表

src/api/holidays/holidays.js

+import {axios} from '@/util/axios/request'
+
+const api = {
+  getPage: '/holidays/page',
+  synchronousVacation: '/holidays/synchronousVacation'
+}
+
+export default api
+
+export function getPage(parameter) {
+  return axios({
+    url: api.getPage,
+    method: 'post',
+    data: parameter,
+    useFullLoading: true
+  })
+}
+
+export function synchronousVacation(parameter) {
+  return axios({
+    url: api.synchronousVacation,
+    method: 'post',
+    data: parameter,
+    useFullLoading: true
+  })
+}
\ No newline at end of file

src/util/global.js

@@ -12,9 +12,11 @@ window.SYS_CONST = {
     CODE_TYPE: 'SYS0001',
     SYS_AVAILABLE_STATUS: 'SYS0002',
     TEMPLATE_PARAM_TYPE: 'SYS0003', // 系统模板参数类型 1 整型 2 字符串 3 富文本 4 图片
+    HOLIDAY_TYPE: 'SYS0005', // 假期类型
     APP_TYPE: 'SYS0006', // App类型 1.用户端 2.管理端
     SYS_CLIENT_TYPE: 'SYS0007', // 客户端类型 1.android 2.ios
-    USER_SEX: 'SYS0008'
+    USER_SEX: 'SYS0008',
+
   },
 
   UPLOAD_TYPE: {

src/views/holidays/HolidaysList.vue

 <template>
-  <div>
-    测试
-  </div>
+  <a-card class="cust-list-cart">
+    <div>
+      <a-form layout="horizontal" class="ant-advanced-search-form">
+        <div>
+          <a-row>
+            <a-col :span="6">
+              <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">
+                    {{ year.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :offset="1">
+              <a-form-item>
+                <a-button type="primary" :loading="loading" @click="synchronization">
+                  同步
+                </a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+      </a-form>
+    </div>
+    <a-table
+      size="middle"
+      :columns="columns"
+      :dataSource="dataSource"
+      :row-selection="rowSelection"
+      :loading="tableLoading"
+      :rowKey="rowKey"
+      :pagination="false"
+      bordered
+    >
+      <span slot="dayCode" slot-scope="text">
+        {{findItem(holidayTypes,'valueInt',text)[0]['name']}}
+      </span>
+      <span slot="duration" slot-scope="text">
+        {{text}}天
+      </span>
+      <span slot="action" slot-scope="text, record">
+          <a>编辑</a>
+          <a-divider type="vertical"/>
+          <a style="color: red">删除</a>
+        </span>
+      <span slot="startDate" slot-scope="text">
+        {{timestampToTime(text)}}
+      </span>
+      <span slot="endDate" slot-scope="text">
+        {{timestampToTime(text)}}
+      </span>
+      <div slot="footer" slot-scope="data">
+        {{data.none}}
+        <a-pagination
+          @change="pageChange"
+          :defaultPageSize="defaultPageSize"
+          :pageSizeOptions="$pageSizeOptions"
+          @showSizeChange="sizeChange"
+          class="cust-pagination"
+          size="small"
+          :total="total"
+          showSizeChanger
+          showQuickJumper
+          :showTotal="$showTotal"/>
+      </div>
+    </a-table>
+  </a-card>
 </template>
 <script>
+import {getCommonCode} from "@api/system/sysCode";
+import {getPage,synchronousVacation} from "@api/holidays/holidays";
 
+const columns = [
+  {title: '名称', width: 100,dataIndex: 'name'},
+  {title: '类型', width: 80, dataIndex: 'dayCode',scopedSlots: {customRender: 'dayCode'}},
+  {title: '开始日期', width: 100, dataIndex: 'startDate',scopedSlots: {customRender: 'startDate'}},
+  {title: '结束日期', width: 100, dataIndex: 'endDate',scopedSlots: {customRender: 'startDate'}},
+  {title: '时长', width: 60, dataIndex: 'duration',scopedSlots: {customRender: 'duration'}},
+  {title: '详情',dataIndex: 'vacation'},
+  {title: '操作', key: 'operation', width: 90, scopedSlots: {customRender: 'action'}}
+]
+
+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,
+        page: 1,
+        size: 10
+      },
+      yearList:[
+        {
+          id:2020,
+          name:"2020年"
+        },
+        {
+          id:2021,
+          name:"2021年"
+        }
+      ],
+      loading: false,
+      columns:columns,
+      rowSelection:rowSelection,
+      dataSource:dataSource,
+      holidayTypes:[],
+      tableLoading: false,
+      isFirstLoad: true,
+    }
+  },
+  computed: {
+    defaultPageSize: function () {
+      return this.$defaultPageSize()
     }
   },
   methods: {
-
+    getHolidayType(){
+      getCommonCode([SYS_CONST.CODE.HOLIDAY_TYPE]).then(response => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          this.holidayTypes = response.data.data[SYS_CONST.CODE.HOLIDAY_TYPE];
+        }
+      })
+    },
+    loadData(size){
+      if (size && !isNaN(size)) {
+        this.query.size = size
+      }
+      getPage(this.query).then(response => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          let respData = response.data;
+          this.dataSource = respData.list;
+          this.total = respData.total;
+        }
+      });
+    },
+    findItem(arr,op,value) {
+      return arr.filter(function (item) {
+        return item[op] === value;
+      })
+    },
+    timestampToTime(timestamp) {
+        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+        var Y = date.getFullYear() + '-';
+        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
+        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
+        return Y+M+D;
+    },
+    pageChange(page) {
+      this.query.page = page;
+      this.loadData();
+    },
+    sizeChange(current, size) {
+      this.query.size = size;
+      this.loadData();
+    },
+    search() {
+      this.query.page = 1;
+      this.loadData();
+    },
+    synchronization(){
+      this.loading = true
+      synchronousVacation(this.query).then(response => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          let respData = response.data;
+          this.dataSource = respData.list;
+          this.total = respData.total;
+        }
+        this.loading = false
+      });
+    }
   },
-
+  mounted() {
+    this.getHolidayType()
+    if (this.isFirstLoad == true) {
+      this.loadData(this.defaultPageSize)
+      this.isFirstLoad = false
+    } else {
+      this.loadData()
+    }
+  }
 }
 </script>