|
|
|
|
@ -0,0 +1,269 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="moral-club-img-list-content-style">
|
|
|
|
|
<template v-if="pageType === 0">
|
|
|
|
|
<div class="search-and-add-style">
|
|
|
|
|
<a-select :value="clubId" @change="clubChange">
|
|
|
|
|
<a-select-option v-for="item in clubList" :key="item.club_id" :value="item.club_id">
|
|
|
|
|
{{ item.club_name }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-button type="primary" @click="toAdd" class="add-button-style">新增</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
<a-table :columns="tableColumn" :data-source="dataList" :loading="loading" :pagination="false">
|
|
|
|
|
<div slot="photo" slot-scope="text, record" class="idPhotoContent">
|
|
|
|
|
<Upload :type="2" :multiple="false" :option="{}" :canDownload="false"
|
|
|
|
|
:fileData="record.fileList"
|
|
|
|
|
:canUpload="false"
|
|
|
|
|
ref="fileUpload"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<span slot="action" slot-scope="text, record">
|
|
|
|
|
<a @click="toDelete(record)">删除</a>
|
|
|
|
|
</span>
|
|
|
|
|
</a-table>
|
|
|
|
|
<a-pagination v-if="totalPage > 1" v-model="pageNumber" :pageSize="pageSize" :total="totalNum"
|
|
|
|
|
@change="onPageChange"/>
|
|
|
|
|
</template>
|
|
|
|
|
<a-modal title="提示"
|
|
|
|
|
:visible="visible"
|
|
|
|
|
centered
|
|
|
|
|
cancelText="取消"
|
|
|
|
|
okText="确定"
|
|
|
|
|
@ok="handleOk"
|
|
|
|
|
@cancel="handleCancel">
|
|
|
|
|
是否确定删除此条信息？
|
|
|
|
|
</a-modal>
|
|
|
|
|
<template v-if="pageType === 1">
|
|
|
|
|
<ClubImgInfo :clubId="clubId" @cancel="cancel"/>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import InterConfig from '../interConfig';
|
|
|
|
|
import {Table, Button, Select, Modal, Divider, Cascader, Icon, Input,Pagination,DatePicker} from 'ant-design-vue';
|
|
|
|
|
import Upload from '../../../../../../components/common/uploader/Upload.vue';
|
|
|
|
|
import ClubImgInfo from './clubImgInfo';
|
|
|
|
|
const tableColumn = [
|
|
|
|
|
{
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
key: 'index',
|
|
|
|
|
title: '序号',
|
|
|
|
|
width: "80px",
|
|
|
|
|
align: "center"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
dataIndex: 'picture_name',
|
|
|
|
|
key: 'pictureName',
|
|
|
|
|
title: '图片名称',
|
|
|
|
|
align: "center"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
dataIndex: 'picture_format',
|
|
|
|
|
key: 'pictureFormat',
|
|
|
|
|
title: '图片格式',
|
|
|
|
|
align: "center"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
dataIndex: 'photo',
|
|
|
|
|
key: 'photo',
|
|
|
|
|
title: '图片',
|
|
|
|
|
align: "center",
|
|
|
|
|
scopedSlots: {customRender: 'photo'},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
key: 'action',
|
|
|
|
|
align: "center",
|
|
|
|
|
scopedSlots: {customRender: 'action'},
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
export default{
|
|
|
|
|
props: ["menuId"],
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
pageType: 0,//0 列表页面 1 新增页面
|
|
|
|
|
clubName: "",//社团名称
|
|
|
|
|
tableColumn: tableColumn,
|
|
|
|
|
dataList: [],
|
|
|
|
|
loading: false,
|
|
|
|
|
pictureId:"",//图片ID
|
|
|
|
|
clubId: "",
|
|
|
|
|
clubList:[],
|
|
|
|
|
visible: false,
|
|
|
|
|
pageNumber: 1,
|
|
|
|
|
pageSize: 3,
|
|
|
|
|
totalPage: 0,
|
|
|
|
|
totalNum: 0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created(){
|
|
|
|
|
this.getClubList();
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getClubList:function(){
|
|
|
|
|
let param = {
|
|
|
|
|
bureau_id: this.BaseConfig.person_info_my.bureau_id,
|
|
|
|
|
club_name: "",
|
|
|
|
|
page_number: 1,
|
|
|
|
|
page_size: 1000000,
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: InterConfig.getClublist.url,
|
|
|
|
|
params: param,
|
|
|
|
|
method: InterConfig.getClublist.method,
|
|
|
|
|
isTestLogin: InterConfig.getClublist.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
let resData = result[0].data;
|
|
|
|
|
if (resData.code === 2000) {
|
|
|
|
|
let dataList = resData.data.list;
|
|
|
|
|
if(dataList && dataList.length > 0){
|
|
|
|
|
this.clubList = dataList;
|
|
|
|
|
this.clubId = dataList[0].club_id;
|
|
|
|
|
this.getClubImgList();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
search:function () {
|
|
|
|
|
this.getClubImgList();
|
|
|
|
|
},
|
|
|
|
|
clubChange:function(value){
|
|
|
|
|
this.clubId = value;
|
|
|
|
|
this.getClubImgList();
|
|
|
|
|
},
|
|
|
|
|
getClubImgList: function () {
|
|
|
|
|
let param = {
|
|
|
|
|
bureau_id: this.BaseConfig.person_info_my.bureau_id,
|
|
|
|
|
club_id: this.clubId,
|
|
|
|
|
page_number: this.pageNumber,
|
|
|
|
|
page_size: this.pageSize,
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: InterConfig.getClubPictureList.url,
|
|
|
|
|
params: param,
|
|
|
|
|
method: InterConfig.getClubPictureList.method,
|
|
|
|
|
isTestLogin: InterConfig.getClubPictureList.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
let resData = result[0].data;
|
|
|
|
|
if (resData.code === 2000) {
|
|
|
|
|
let dataList = resData.data.list;
|
|
|
|
|
if (dataList && dataList.length > 0) {
|
|
|
|
|
for (let i = 0, len = dataList.length; i < len; i++) {
|
|
|
|
|
dataList[i]['index'] = i + 1;
|
|
|
|
|
let fileList = [];
|
|
|
|
|
let fileJson = dataList[i]['attachment_json'];
|
|
|
|
|
if (fileJson && fileJson !== "") {
|
|
|
|
|
fileList.push(fileJson);
|
|
|
|
|
}
|
|
|
|
|
dataList[i]['fileList'] = fileList;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.dataList = dataList;
|
|
|
|
|
this.totalNum = resData.data.total_row;
|
|
|
|
|
this.totalPage = resData.data.total_page;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onPageChange: function (page) {
|
|
|
|
|
this.pageNumber = page;
|
|
|
|
|
this.getClubImgList();
|
|
|
|
|
},
|
|
|
|
|
toAdd: function () {
|
|
|
|
|
this.pictureId = "";
|
|
|
|
|
this.pageType = 1;
|
|
|
|
|
},
|
|
|
|
|
toDelete: function (record) {
|
|
|
|
|
this.pictureId = record.picture_id + "";
|
|
|
|
|
this.visible = true;
|
|
|
|
|
},
|
|
|
|
|
cancel: function () {
|
|
|
|
|
this.pageType = 0;
|
|
|
|
|
this.getClubList();
|
|
|
|
|
},
|
|
|
|
|
//确定删除
|
|
|
|
|
handleOk: function () {
|
|
|
|
|
let param = {
|
|
|
|
|
picture_ids: this.pictureId,
|
|
|
|
|
club_id:this.clubId,
|
|
|
|
|
bureau_id: this.BaseConfig.person_info_my.bureau_id,
|
|
|
|
|
}
|
|
|
|
|
this.InterfaceConfig.callInterface([{
|
|
|
|
|
url: InterConfig.deleteClubPicture.url,
|
|
|
|
|
params: param,
|
|
|
|
|
method: InterConfig.deleteClubPicture.method,
|
|
|
|
|
isTestLogin: InterConfig.deleteClubPicture.isTestLogin,
|
|
|
|
|
}], (result) => {
|
|
|
|
|
let resData = result[0].data;
|
|
|
|
|
if (resData.code === 2000) {
|
|
|
|
|
Modal.success({
|
|
|
|
|
title: "操作成功",
|
|
|
|
|
content: "",
|
|
|
|
|
centered: true
|
|
|
|
|
});
|
|
|
|
|
this.handleCancel();
|
|
|
|
|
this.getClubImgList();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
//取消
|
|
|
|
|
handleCancel: function () {
|
|
|
|
|
this.pictureId = "";
|
|
|
|
|
this.visible = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
ATable: Table,
|
|
|
|
|
AButton: Button,
|
|
|
|
|
AModal: Modal,
|
|
|
|
|
ADivider: Divider,
|
|
|
|
|
AIcon: Icon,
|
|
|
|
|
AInput: Input,
|
|
|
|
|
APagination:Pagination,
|
|
|
|
|
AInputSearch: Input.Search,
|
|
|
|
|
ASelect: Select,
|
|
|
|
|
ASelectOption: Select.Option,
|
|
|
|
|
Upload,
|
|
|
|
|
ClubImgInfo
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.moral-club-img-list-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
.search-and-add-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3.5rem;
|
|
|
|
|
background-color: white;
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0 0.5rem;
|
|
|
|
|
.ant-select {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
.ant-input {
|
|
|
|
|
width: 150px;
|
|
|
|
|
}
|
|
|
|
|
.add-button-style {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-table-wrapper {
|
|
|
|
|
/deep/ .upload-container-style {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-pagination {
|
|
|
|
|
margin-top: 0.5rem;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
