<template>
<a-card :bordered="false">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="负责人工号">
<a-input placeholder="请输入负责人工号" v-model="queryParam.chargeCode"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="名称">
<j-input placeholder="请输入名称" v-model="queryParam.name"></j-input>
</a-form-item>
</a-col>
<template v-if="toggleSearchStatus">
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item label="负责人手机号">
<a-input placeholder="请输入负责人手机号" v-model="queryParam.chargePhone"></a-input>
</a-form-item>
</a-col>
</template>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<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>
<a @click="handleToggleSearch" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
</a>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!-- 查询区域-END -->
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<!-- <a-button type="primary" icon="download" @click="handleExportXls('会议表 ')">导出</a-button> -->
<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload> -->
<!-- 高级查询区域 -->
<!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> -->
<a-dropdown v-if="selectedRowKeys.length > 0">
<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>
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
<a style="font-weight: 600">{{ selectedRowKeys.length }}</a
>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<a-table
ref="table"
size="middle"
:scroll="{ x: true }"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
class="j-table-force-nowrap"
@change="handleTableChange"
>
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text, record">
<span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
<img
v-else
:src="getImgView(text)"
:preview="record.id"
height="25px"
alt=""
style="max-width: 80px; font-size: 12px; font-style: italic"
/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
<a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
下载
</a-button>
</template>
<span slot="isOpen" slot-scope="text, record">
<a-switch
v-if="record.isOpen == 1"
default-checked
checked-children="是"
un-checked-children="否"
@change="switchChange($event, record)"
/>
<a-switch
v-if="record.isOpen == 0"
default-unchecked
checked-children="是"
un-checked-children="否"
@change="switchChange($event, record)"
/>
</span>
<span slot="action" slot-scope="text, record">
<a @click="jumpToMeetNodeList(record)">会议节点</a>
<a-divider type="vertical" />
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
</div>
<meet-modal ref="modalForm" @ok="modalFormOk"></meet-modal>
</a-card>
</template>
<script>
import { putAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import MeetModal from './modules/MeetModal'
import Vue from 'vue'
export default {
name: 'MeetList',
mixins: [JeecgListMixin, mixinDevice],
components: {
MeetModal
},
data() {
return {
description: '会议表 管理页面',
// 表头
columns: [
{
title: '#',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function(t, r, index) {
return parseInt(index) + 1
}
},
{
title: '名称',
align: 'center',
dataIndex: 'name',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '简介',
align: 'center',
dataIndex: 'production',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '开始时间',
align: 'center',
dataIndex: 'beginTime',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '结束时间',
align: 'center',
dataIndex: 'endTime',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '是否开启',
align: 'center',
dataIndex: 'isOpen',
scopedSlots: { customRender: 'isOpen' }
},
{
title: '负责人工号',
align: 'center',
dataIndex: 'chargeCode',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '负责人姓名',
align: 'center',
dataIndex: 'chargeName',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '负责人部门',
align: 'center',
dataIndex: 'chargeDept',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '负责人手机号',
align: 'center',
dataIndex: 'chargePhone',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '消息模板',
align: 'center',
dataIndex: 'message',
customRender: function(t, r, index) {
return t || '/'
}
},
{
title: '焦点图',
align: 'center',
dataIndex: 'ioc',
scopedSlots: { customRender: 'imgSlot' }
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
width: 147,
scopedSlots: { customRender: 'action' }
}
],
url: {
list: '/meet/meet/list',
delete: '/meet/meet/delete',
deleteBatch: '/meet/meet/deleteBatch',
exportXlsUrl: '/meet/meet/exportXls',
importExcelUrl: 'meet/meet/importExcel'
},
dictOptions: {},
superFieldList: [],
pageData:{}
}
},
created() {
},
mounted() {
console.log('');
this.pageData=Vue.ls.get('meetToMeetNodes')
},
computed: {
importExcelUrl: function() {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
}
},
methods: {
async switchChange(checked, rec) {
console.log(`a-switch to ${checked}`)
let url = '/meet/meet/edit'
let obj = JSON.parse(JSON.stringify(rec))
obj['isOpen'] = checked ? 1 : 0
try {
const res = await putAction(url, obj)
console.log(res, 'switchChange')
if (res.success) {
this.loadData(1)
}
} catch (error) {
console.log(error, 'error')
}
},
jumpToMeetNodeList(rec) {
Vue.ls.set('meetToMeetNodes',rec)
this.$router.push({name:'meet-meetNodeList',params:{}})
}
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
ant vue2 列表 siwtch 按钮
最新推荐文章于 2023-08-02 14:17:35 发布