<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>