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