添加列表页标题组件

This commit is contained in:
fengachen
2021-09-01 19:24:15 +08:00
parent 541197c12f
commit 3da0bc2c6b
4 changed files with 227 additions and 199 deletions
@@ -1,94 +1,97 @@
<template> <template>
<a-card :bordered="false"> <div>
<!-- 查询区域 --> <page-header-title :img-for-icon="IconImg"></page-header-title>
<div class="table-page-search-wrapper"> <a-card :bordered="false">
<a-form layout="inline" @keyup.enter.native="searchQuery"> <!-- 查询区域 -->
<a-row :gutter="24"> <div class="table-page-search-wrapper">
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-form-item label="会议名称"> <a-row :gutter="24">
<a-input placeholder="请输入会议名称" v-model="queryParam.projectName"></a-input> <a-col :xl="6" :lg="7" :md="8" :sm="24">
</a-form-item> <a-form-item label="会议名称">
</a-col> <a-input placeholder="请输入会议名称" v-model="queryParam.projectName"></a-input>
<a-col :xl="6" :lg="7" :md="8" :sm="24"> </a-form-item>
<a-form-item label="会议时间"> </a-col>
<a-range-picker <a-col :xl="6" :lg="7" :md="8" :sm="24">
format="YYYY-MM-DD HH:mm:00" <a-form-item label="会议时间">
:show-time="{ format: 'HH:mm' }" <a-range-picker
:trigger-change="true" format="YYYY-MM-DD HH:mm:00"
style="width: 100%"/> :show-time="{ format: 'HH:mm' }"
</a-form-item> :trigger-change="true"
</a-col> style="width: 100%"/>
<a-col :xl="6" :lg="7" :md="8" :sm="24"> </a-form-item>
<a-form-item label="创建时间"> </a-col>
<a-range-picker <a-col :xl="6" :lg="7" :md="8" :sm="24">
format="YYYY-MM-DD HH:mm:00" <a-form-item label="创建时间">
:show-time="{ format: 'HH:mm' }" <a-range-picker
:trigger-change="true" format="YYYY-MM-DD HH:mm:00"
style="width: 100%"/> :show-time="{ format: 'HH:mm' }"
</a-form-item> :trigger-change="true"
</a-col> style="width: 100%"/>
<a-col :xl="6" :lg="7" :md="8" :sm="24"> </a-form-item>
<a-form-item label="年份"> </a-col>
<j-year-date placeholder="请选择年份" v-model="queryParam.particularYear"></j-year-date> <a-col :xl="6" :lg="7" :md="8" :sm="24">
</a-form-item> <a-form-item label="年份">
</a-col> <j-year-date placeholder="请选择年份" v-model="queryParam.particularYear"></j-year-date>
<a-col :xl="6" :lg="7" :md="8" :sm="24"> </a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <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="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<!-- 查询区域-END --> <!-- 查询区域-END -->
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div class="table-operator"> <div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">添加</a-button> <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('会员项目')">导出</a-button> <a-button type="primary" icon="download" @click="handleExportXls('会员项目')">导出</a-button>
<a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button> <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"--> <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
<!-- @change="handleImportExcel">--> <!-- @change="handleImportExcel">-->
<!-- <a-button type="primary" icon="import">导入</a-button>--> <!-- <a-button type="primary" icon="import">导入</a-button>-->
<!-- </a-upload>--> <!-- </a-upload>-->
</div> </div>
<!-- table区域-begin --> <!-- table区域-begin -->
<div> <div>
<a-table <a-table
ref="table" ref="table"
size="middle" size="middle"
bordered bordered
rowKey="id" rowKey="id"
:columns="columns" :columns="columns"
:dataSource="dataSource" :dataSource="dataSource"
:pagination="ipagination" :pagination="ipagination"
:loading="loading" :loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap" class="j-table-force-nowrap"
@change="handleTableChange"> @change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record"> <template slot="htmlSlot" slot-scope="text,record">
<div class="primary-color">会议名称</div> <div class="primary-color">会议名称</div>
</template> </template>
<template slot="text" slot-scope="text"> <template slot="text" slot-scope="text">
<j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis> <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
<span v-else></span> <span v-else></span>
</template> </template>
<span slot="action" slot-scope="text, record" class="action-span-cell"> <span slot="action" slot-scope="text, record" class="action-span-cell">
<a @click="handleUploadFile(record)">上传文件</a> <a @click="handleUploadFile(record)">上传文件</a>
<a @click="handleSignup(record)">报名信息</a> <a @click="handleSignup(record)">报名信息</a>
<a @click="handleEdit(record)">编辑</a> <a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a> <a @click="handleDelete(record.id)">删除</a>
</span> </span>
</a-table> </a-table>
</div> </div>
<!-- <meet-modal ref="modalForm" @ok="modalFormOk"></meet-modal>--> <!-- <meet-modal ref="modalForm" @ok="modalFormOk"></meet-modal>-->
<upload-meet-file-modal ref="modalForm" @ok="modalFormOk"></upload-meet-file-modal> <upload-meet-file-modal ref="modalForm" @ok="modalFormOk"></upload-meet-file-modal>
</a-card> </a-card>
</div>
</template> </template>
<script> <script>
@@ -96,6 +99,8 @@ import {mixinDevice} from '@/utils/mixin'
import {JeroListMixin} from '@/mixins/JeroListMixin' import {JeroListMixin} from '@/mixins/JeroListMixin'
import JYearDate from "@comp/jero/JYearDate"; import JYearDate from "@comp/jero/JYearDate";
import UploadMeetFileModal from "@views/incomePayments/meetManage/modules/UploadMeetFileModal"; import UploadMeetFileModal from "@views/incomePayments/meetManage/modules/UploadMeetFileModal";
import PageHeaderTitle from "@comp/layouts/PageHeaderTitle";
import IconImg from '@/assets/imgs/icon/icon_company_management.png'
// import MeetModal from "@views/incomePayments/meetManage/modules/MeetModal"; // import MeetModal from "@views/incomePayments/meetManage/modules/MeetModal";
export default { export default {
@@ -103,12 +108,14 @@ export default {
mixins: [JeroListMixin, mixinDevice], mixins: [JeroListMixin, mixinDevice],
components: { components: {
JYearDate, JYearDate,
UploadMeetFileModal UploadMeetFileModal,
PageHeaderTitle
// MeetModal // MeetModal
}, },
data() { data() {
return { return {
description: '会员项目管理页面', description: '会员项目管理页面',
IconImg,
columns: [ columns: [
{ {
title: '序号', title: '序号',
@@ -194,17 +201,17 @@ export default {
* 编辑 * 编辑
* /incomePayments/meetManage/AddOrDetailMeet * /incomePayments/meetManage/AddOrDetailMeet
* */ * */
handleEdit(record){ handleEdit(record) {
this.$router.push({ this.$router.push({
path:'/incomePayments/meetManage/AddOrDetailMeet', path: '/incomePayments/meetManage/AddOrDetailMeet',
}) })
}, },
/* /*
* 新增 * 新增
* */ * */
handleAdd(){ handleAdd() {
this.$router.push({ this.$router.push({
path:'/incomePayments/meetManage/AddOrDetailMeet', path: '/incomePayments/meetManage/AddOrDetailMeet',
}) })
} }
@@ -214,6 +221,7 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
@import '~@assets/less/common.less'; @import '~@assets/less/common.less';
.primary-color { .primary-color {
color: #069f99; color: #069f99;
cursor: pointer; cursor: pointer;
@@ -1,74 +1,78 @@
<template> <template>
<a-card :bordered="false"> <div>
<!-- 查询区域 --> <page-header-title :img-for-icon="IconImg"></page-header-title>
<div class="table-page-search-wrapper"> <a-card :bordered="false">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24"> <!-- 查询区域 -->
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <div class="table-page-search-wrapper">
<a-form-item label="会员项目名称"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-input placeholder="请输入会员项目名称" v-model="queryParam.projectName"></a-input> <a-row :gutter="24">
</a-form-item> <a-col :xl="6" :lg="7" :md="8" :sm="24">
</a-col> <a-form-item label="会员项目名称">
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-input placeholder="请输入会员项目名称" v-model="queryParam.projectName"></a-input>
<a-form-item label="运行年份"> </a-form-item>
<j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.particularYear"></j-year-date> </a-col>
</a-form-item> <a-col :xl="6" :lg="7" :md="8" :sm="24">
</a-col> <a-form-item label="运行年份">
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <j-year-date style="width:100%" placeholder="请选择运行年份" v-model="queryParam.particularYear"></j-year-date>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <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="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<!-- 查询区域-END --> <!-- 查询区域-END -->
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div class="table-operator"> <div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">添加</a-button> <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('会员项目')">导出</a-button> <a-button type="primary" icon="download" @click="handleExportXls('会员项目')">导出</a-button>
<a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button> <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>
<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"--> <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
<!-- @change="handleImportExcel">--> <!-- @change="handleImportExcel">-->
<!-- <a-button type="primary" icon="import">导入</a-button>--> <!-- <a-button type="primary" icon="import">导入</a-button>-->
<!-- </a-upload>--> <!-- </a-upload>-->
</div> </div>
<!-- table区域-begin --> <!-- table区域-begin -->
<div> <div>
<a-table <a-table
ref="table" ref="table"
size="middle" size="middle"
bordered bordered
rowKey="id" rowKey="id"
:columns="columns" :columns="columns"
:dataSource="dataSource" :dataSource="dataSource"
:pagination="ipagination" :pagination="ipagination"
:loading="loading" :loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap" class="j-table-force-nowrap"
@change="handleTableChange"> @change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record"> <template slot="htmlSlot" slot-scope="text,record">
<div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div> <div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div>
</template> </template>
<template slot="text" slot-scope="text"> <template slot="text" slot-scope="text">
<j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis> <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
<span v-else></span> <span v-else></span>
</template> </template>
<span slot="action" slot-scope="text, record" class="action-span-cell"> <span slot="action" slot-scope="text, record" class="action-span-cell">
<a @click="handleEdit(record)">编辑</a> <a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a> <a @click="handleDelete(record.id)">删除</a>
</span> </span>
</a-table> </a-table>
</div> </div>
<member-project-modal ref="modalForm" @ok="modalFormOk"></member-project-modal> <member-project-modal ref="modalForm" @ok="modalFormOk"></member-project-modal>
</a-card> </a-card>
</div>
</template> </template>
<script> <script>
@@ -76,17 +80,21 @@ import {mixinDevice} from '@/utils/mixin'
import {JeroListMixin} from '@/mixins/JeroListMixin' import {JeroListMixin} from '@/mixins/JeroListMixin'
import JYearDate from "@comp/jero/JYearDate"; import JYearDate from "@comp/jero/JYearDate";
import MemberProjectModal from "@views/incomePayments/memberManage/modules/MemberProjectModal"; import MemberProjectModal from "@views/incomePayments/memberManage/modules/MemberProjectModal";
import PageHeaderTitle from "@comp/layouts/PageHeaderTitle";
import IconImg from '@/assets/imgs/icon/icon_company_management.png'
export default { export default {
mixins: [JeroListMixin, mixinDevice], mixins: [JeroListMixin, mixinDevice],
name: "MemberProjectList", name: "MemberProjectList",
components:{ components: {
JYearDate, JYearDate,
MemberProjectModal MemberProjectModal,
PageHeaderTitle
}, },
data() { data() {
return { return {
description: '会员项目管理页面', description: '会员项目管理页面',
IconImg,
columns: [ columns: [
{ {
title: '序号', title: '序号',
@@ -139,12 +147,12 @@ export default {
/* /*
* 会员项目成员维护 * 会员项目成员维护
* */ * */
handleSafeguardMember(record){ handleSafeguardMember(record) {
console.log(1) console.log(1)
this.$router.push({ this.$router.push({
path: '/incomePayments/memberManage/SafeguardMemberList', path: '/incomePayments/memberManage/SafeguardMemberList',
query: { query: {
record:JSON.stringify(record) record: JSON.stringify(record)
} }
}) })
}, },
@@ -154,6 +162,7 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
@import '~@assets/less/common.less'; @import '~@assets/less/common.less';
.primary-color { .primary-color {
color: #069f99; color: #069f99;
cursor: pointer; cursor: pointer;
@@ -120,6 +120,9 @@ import JYearDate from "@comp/jero/JYearDate";
import SafeguardMemberModal from "@views/incomePayments/memberManage/modules/SafeguardMemberModal"; import SafeguardMemberModal from "@views/incomePayments/memberManage/modules/SafeguardMemberModal";
import ProjectDetailModal from "@comp/ProjectDetailModal"; import ProjectDetailModal from "@comp/ProjectDetailModal";
import StatusSlot from "@comp/tools/StatusSlot"; import StatusSlot from "@comp/tools/StatusSlot";
import PageHeaderTitle from "@comp/layouts/PageHeaderTitle";
import IconImg from '@/assets/imgs/icon/icon_company_management.png'
import {getAction} from "@api/manage"; import {getAction} from "@api/manage";
import {getFileInfo} from "@api/api"; import {getFileInfo} from "@api/api";
@@ -130,11 +133,13 @@ export default {
JYearDate, JYearDate,
SafeguardMemberModal, SafeguardMemberModal,
ProjectDetailModal, ProjectDetailModal,
StatusSlot StatusSlot,
PageHeaderTitle
}, },
data() { data() {
return { return {
description: '会员项目成员维护页面', description: '会员项目成员维护页面',
IconImg,
columns: [ columns: [
{ {
title: '序号', title: '序号',
@@ -1,68 +1,71 @@
<template> <template>
<a-card :bordered="false"> <div>
<!-- 查询区域 --> <page-header-title :img-for-icon="IconImg"></page-header-title>
<div class="table-page-search-wrapper"> <a-card :bordered="false">
<a-form layout="inline" @keyup.enter.native="searchQuery"> <!-- 查询区域 -->
<a-row :gutter="24"> <div class="table-page-search-wrapper">
<a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-form-item label="标协会员项目名称"> <a-row :gutter="24">
<a-input placeholder="请输入会员项目名称" v-model="queryParam.tableName"></a-input> <a-col :xl="6" :lg="7" :md="8" :sm="24">
</a-form-item> <a-form-item label="标协会员项目名称">
</a-col> <a-input placeholder="请输入会员项目名称" v-model="queryParam.tableName"></a-input>
<a-col :xl="6" :lg="7" :md="8" :sm="24"> </a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <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="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<!-- 查询区域-END --> <!-- 查询区域-END -->
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div class="table-operator"> <div class="table-operator">
<!-- <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>--> <!-- <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>-->
<!-- <a-button type="primary" icon="download" @click="handleExportXls('混淆表')">导出</a-button>--> <!-- <a-button type="primary" icon="download" @click="handleExportXls('混淆表')">导出</a-button>-->
<!-- <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>--> <!-- <a-button type="danger" icon="delete" @click="batchDel">批量删除</a-button>-->
<!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"--> <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
<!-- @change="handleImportExcel">--> <!-- @change="handleImportExcel">-->
<!-- <a-button type="primary" icon="import">导入</a-button>--> <!-- <a-button type="primary" icon="import">导入</a-button>-->
<!-- </a-upload>--> <!-- </a-upload>-->
</div> </div>
<!-- table区域-begin --> <!-- table区域-begin -->
<div> <div>
<a-table <a-table
ref="table" ref="table"
size="middle" size="middle"
bordered bordered
rowKey="id" rowKey="id"
:columns="columns" :columns="columns"
:dataSource="dataSource" :dataSource="dataSource"
:pagination="ipagination" :pagination="ipagination"
:loading="loading" :loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap" class="j-table-force-nowrap"
@change="handleTableChange"> @change="handleTableChange">
<template slot="htmlSlot" slot-scope="text,record"> <template slot="htmlSlot" slot-scope="text,record">
<div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div> <div class="primary-color" @click="handleSafeguardMember(record)" v-html="text"></div>
</template> </template>
<template slot="text" slot-scope="text"> <template slot="text" slot-scope="text">
<j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis> <j-ellipsis v-if="text" :value="text" :length="20"></j-ellipsis>
<span v-else></span> <span v-else></span>
</template> </template>
<span slot="action" slot-scope="text, record" class="action-span-cell"> <span slot="action" slot-scope="text, record" class="action-span-cell">
<a @click="handleEdit(record)">编辑</a> <a @click="handleEdit(record)">编辑</a>
<a @click="handleDelete(record.id)">删除</a> <a @click="handleDelete(record.id)">删除</a>
</span> </span>
</a-table> </a-table>
</div> </div>
</a-card> </a-card>
</div>
</template> </template>
<script> <script>
@@ -72,9 +75,13 @@ import {JeroListMixin} from '@/mixins/JeroListMixin'
export default { export default {
name: "StardsMemberProject", name: "StardsMemberProject",
mixins: [JeroListMixin, mixinDevice], mixins: [JeroListMixin, mixinDevice],
components: {
PageHeaderTitle
},
data() { data() {
return { return {
description: '会员项目管理页面', description: '会员项目管理页面',
IconImg,
columns: [ columns: [
{ {
title: '序号', title: '序号',
@@ -90,7 +97,7 @@ export default {
title: '标协会员项目名称', title: '标协会员项目名称',
align: "center", align: "center",
dataIndex: 'projectName', dataIndex: 'projectName',
scopedSlots:{customRender:'htmlSlot'} scopedSlots: {customRender: 'htmlSlot'}
} }
], ],
url: { url: {
@@ -98,16 +105,15 @@ export default {
}, },
} }
}, },
methods:{ methods: {
/* /*
* 标协成员维护 * 标协成员维护
* */ * */
handleSafeguardMember(record){ handleSafeguardMember(record) {
console.log(1) console.log(1)
this.$router.push({ this.$router.push({
path: '/incomePayments/memberManage/SafeguardStardsMemberList', path: '/incomePayments/memberManage/SafeguardStardsMemberList',
query: { query: {}
}
}) })
} }
} }