logistics-fe-iems-winlink/src/views/interface/WorkCalendarList.vue

<template>
  <w-card>
    <div v-if="visible">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" v-has="'WorkCalendar:query'">
        <w-form @keyup.enter.native="searchQuery" layout="inline">
          <w-row :gutter="10">
            <w-col :xl="5" :lg="5" :md="8" :sm="24">
              <w-input v-model="queryParam.year" placeholder="请输入年份" />
            </w-col>
            <w-col :xl="5" :lg="5" :md="8" :sm="24">
              <w-input v-model="queryParam.day" placeholder="请输入日" />
            </w-col>
            <w-col :xl="5" :lg="5" :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <w-button @click="searchQuery" type="primary" icon="search">搜索</w-button>
                <w-button @click="searchReset" type="primary">重置</w-button>
                <j-super-query ref="superQueryModal" :field-list="refColumns" @handleSuperQuery="handleSuperQuery" />
                <!-- <a class="unfold-fold-status" @click="handleToggleSearch">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a> -->
              </span>
            </w-col>
            <div v-has="'WorkCalendar:export'" class="leftArea">
              <div class="filterBox">
                <span @click="exportExcel()" class="iconfont icon-download-2"></span>
              </div>
            </div>
          </w-row>
        </w-form>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <!-- <w-button @click="handleAdd" type="primary" v-has="'WorkCalendar:add'">新增</w-button> -->
        <!-- <a-upload
          name="file"
          :showUploadList="false"
          :multiple="false"
          :headers="tokenHeader"
          :action="importExcelUrl"
          @change="handleImportExcel"
        >
          <a-button type="primary">导入</a-button>
        </a-upload> -->
        <!-- 高级查询区域 -->
        <!-- <w-button @click="batchDel" type="danger" v-has="'WorkCalendar:del'">删除</w-button> -->
      </div>

      <!-- table区域-begin -->
      <div>
        <w-fit-container elementType="grid" :fitSize="185">
          <a-table
            :id="refColumnsKey"
            ref="table"
            size="middle"
            :scroll="getTableScroll(1200)"
            bordered
            rowKey="id"
            :columns="refColumns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :customHeaderRow="customHeaderRow"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            class="j-table-force-nowrap"
            @change="handleTableChange"
            :components="resizableComponents"
            :customRow="selectRow"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)" v-has="'WorkCalendar:edit'">编辑</a>

              <span v-has="'WorkCalendar:del'">
                <w-divider type="vertical" />
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </span>
          </a-table>
        </w-fit-container>
      </div>
    </div>
    <w-table-columns-win @columnsChange="columnsChange" @resetColumns="resetColumns" ref="choose" :columns="columns" />
    <work-calendar-modal ref="modalForm" @ok="modalFormOk" @close="modalFormClose" />
    <excel-export-model ref="excelExport" />
  </w-card>
</template>

<script>

import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin, WGridResizeByCssMixin } from '@/mixins/JeecgListMixin'
import WorkCalendarModal from './modules/WorkCalendarModal'
import ExcelExportModel from '../excel/modules/ExcelExportModel.vue'

export default {
  name: 'WorkCalendarList',
  mixins: [JeecgListMixin, mixinDevice, WGridResizeByCssMixin],
  components: {
    WorkCalendarModal,
    ExcelExportModel,
  },
  data() {
    return {
      description: '美的工作日历管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          ellipsis: true,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '组织ID',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: true,
          dataIndex: 'unitId',
        },
        {
          title: '年份',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: true,
          dataIndex: 'year',
          //  格式：YYYY
        },
        {
          title: '月份',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: true,
          dataIndex: 'month',
          //  格式：MM
        },
        {
          title: '日',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: true,
          dataIndex: 'day',
        },
        {
          title: '日期',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: true,
          dataIndex: 'calendarDate',
          customRender: function (text) {
            return text ? text.slice(0, 10) : ''
          },
        },
        {
          //  字典：1-工作日 2-法假 3-公休日 4-公司假
          title: '日历类型',
          align: 'center',
          width: 100,
          ellipsis: true,
          sorter: true,
          dataIndex: 'calendarType',
        },
        {
          title: '日历类型名称',
          align: 'center',
          width: 140,
          ellipsis: true,
          sorter: true,
          dataIndex: 'calendarTypeName',
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   width: 147,
        //   ellipsis: true,
        //   fixed: 'right',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      url: {
        list: '/interfaces/workCalendar/list',
        delete: '/interfaces/workCalendar/delete',
        deleteBatch: '/interfaces/workCalendar/deleteBatch',
        exportXlsUrl: '/interfaces/workCalendar/exportXls',
        importExcelUrl: 'interfaces/workCalendar/importExcel',
      },
      dictOptions: {},
    }
  },
  created() {},
  methods: {
    initDictConfig() {},
    exportExcel() {
      const para = this.getQueryParams()
      this.$refs.excelExport.show(this.url.exportXlsUrl, para, this.columns, 'WorkCalendar')
    },
  },
}
</script>