cd-work-flow-web/src/views/oa/my-plan/calTable.vue

<template>
  <!-- :bordered="false" -->
  <a-card>
    <!-- 查询 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="标题">
              <a-input placeholder="请输入标题查询" v-model="queryParam.title" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="类型">
              <!-- <a-input placeholder="请选择状态查询" v-model="queryParam.status" /> -->
              <a-select
                v-decorator="['type', { rules: [{ required: false, message: '请选择状态查询' }] }]"
                placeholder="请选择状态查询"
                width="100%"
              >
                <a-select-option value="日常记录">日常记录</a-select-option>
                <a-select-option value="本周工作">本周工作</a-select-option>
                <a-select-option value="下周计划">下周计划</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <!-- <template> </template> -->
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="addPlan" type="primary">新增</a-button>
      <a-button type="primary" @click="myPlanExportXls('我的日程计划')">导出</a-button>
      <!---------------------------------------------------------------------
        :action="importExcelUrl" 上传的地址
        showUploadList 是否展示uploadList ，
                  可设为一个对象，用于单独设定showPreviewIcon和showRemoveIconf
        headers   设置上传的请求头部
        multiple  是否支持多选文件
        name      发达后台的文件参数名
      ----------------------------------------------------------------------->
      <a-upload
        name="planFile"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        @change="myPlanImportExcel"
      >
        <a-button type="primary">导入</a-button>
      </a-upload>
      <!-- v-if="selectedRowKeys.length > 0" -->
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-alert type="info" showIcon style="margin-bottom: 16px;">
        <template slot="message">
          <span>已选择</span>
          <!-- {{ selectedRowKeys.length }} -->
          <a style="font-weight: 600;padding: 0 4px;">3</a>
          <span>项</span>
          <!--  v-if="selectedRowKeys.length > 0" -->
          <template>
            <a-divider type="vertical" />
            <a @click="onClearSelected">清空</a>
          </template>
        </template>
      </a-alert>
      <!-- table   :loading="loading" -->
      <a-row>
        <a-table
          bordered
          :columns="columns"
          :dataSource="planDataList"

          :pagination="pagination"
          :row-key="record => record.id"
          :rowSelection="rowSelection"
          @change="handleTableChange"
        >
          <!-- 操作 -->
          <span slot="operationSlot" slot-scope="text, record">
            <a href="javascript:void(0);" @click="editPlan(record)"> 编辑 </a>

            <a-divider type="vertical" />

            <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否">
              <a href="javascript:void(0);" @click="delPlan(record.id)" class="delRed"> 删除 </a>
            </a-popconfirm>
          </span>
        </a-table>
      </a-row>
    </div>
  </a-card>
</template>

<script>
import JEllipsis from '@/components/jeecg/JEllipsis'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import SysCheckRuleModal from './modules/SysCheckRuleModal'
// import SysCheckRuleTestModal from './modules/SysCheckRuleTestModal'
export default {
    name: 'CalTable',
    // mixins: [JeecgListMixin],
    components: { JEllipsis },
    data () {
        return {
            tokenHeader: {},
            queryParam: {}, // 查询条件对象
            pagination: {}, // 分页
            // 表头
            columns: [
                {
                    title: '标题',
                    dataIndex: 'title',
                    align: 'center'
                },
                {
                    title: '类型',
                    dataIndex: 'type',
                    align: 'center'
                },
                {
                    title: '紧急程度',
                    dataIndex: 'degreeOfUrgency',
                    align: 'center'
                },
                {
                    title: '开始时间',
                    dataIndex: 'startTime',
                    align: 'center'
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operationSlot' },
                    align: 'center',
                    width: '20%'
                }
            ],
            planDataList: [
                {
                    id: '1',
                    title: '11月19日的KPI考核（2）',
                    type: '下周计划',
                    degreeOfUrgency: '紧急',
                    startTime: '2021/11/19',
                    memo: '哈哈哈哈哈哈'
                },
                {
                    id: '2',
                    title: '12月17日的KPI考核（3）',
                    type: '日程记录',
                    degreeOfUrgency: '一般',
                    startTime: '2021/12/17',
                    memo: '呵呵呵呵'
                },
                {
                    id: '3',
                    title: 'AAAAAAA',
                    type: '本周计划',
                    degreeOfUrgency: '重要',
                    startTime: '2022/01/30',
                    memo: '呵呵呵呵'
                }
            ]
        }
    },
    computed: {
    // 选中项
        rowSelection () {
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.title === 'Disabled User',
                        // Column configuration not to be checked
                        title: record.title
                    }
                })
            }
        }
    },
    methods: {
    // 查询按钮
        searchQuery () {
            // this.loading = true
            console.log('点击了查询按钮')
            // 根据
        },
        // 重置 输入的查询条件
        searchReset () {},
        // 新增日程计划   弹框
        addPlan () {},
        // 清空勾选
        onClearSelected () {},
        // 导出我的日程计划
        myPlanExportXls () {},
        // 导入
        myPlanImportExcel () {},
        // 批量删除
        batchDel () {},
        // 分页、排序、筛选变化时触发
        handleTableChange (pagination, filters, sorter) {},
        // 操作 编辑
        editPlan () {},
        // 操作 删除
        delPlan () {}
    }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>