270 lines
7.3 KiB
Vue
270 lines
7.3 KiB
Vue
<template>
|
|
<section class="event">
|
|
<ai-list>
|
|
<ai-title slot="title" title="村务公开" isShowBottomBorder></ai-title>
|
|
<template slot="content">
|
|
<ai-search-bar>
|
|
<template slot="left">
|
|
<el-button icon="iconfont iconAdd" type="primary" size="small" @click="toAdd">添加</el-button>
|
|
</template>
|
|
<template slot="right">
|
|
<el-input
|
|
placeholder="请输入标题"
|
|
size="small"
|
|
clearable
|
|
v-model="search.title"
|
|
v-throttle="() => {search.current = 1, getList()}"
|
|
@clear="search.current = 1, search.title = '', getList()"
|
|
suffix-icon="iconfont iconSearch"/>
|
|
</template>
|
|
</ai-search-bar>
|
|
<div class="ai-table">
|
|
<ai-table
|
|
:tableData="tableData"
|
|
:col-configs="colConfigs"
|
|
:total="total"
|
|
:current.sync="search.current"
|
|
:size.sync="search.size"
|
|
@getList="getList">
|
|
<el-table-column slot="options" label="操作" align="center" width="250" fixed="right">
|
|
<template slot-scope="{ row }" class="fs-14">
|
|
<div class="table-options">
|
|
<el-button
|
|
type="text"
|
|
@click="publish(row)"
|
|
title="发布">
|
|
发布
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
title="详情"
|
|
@click="toDetail(row.id)">
|
|
详情
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
title="编辑"
|
|
@click="toEdit(row.id)">
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
@click="remove(row.id)"
|
|
type="text"
|
|
title="删除">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</div>
|
|
</template>
|
|
</ai-list>
|
|
<ai-dialog title="请选择发布平台企业" :visible.sync="dialog" width="600px" @onConfirm="saveSaas">
|
|
<el-form ref="saasForm" :model="dialogForm" size="small" label-width="120px">
|
|
<el-form-item required label="saas平台" prop="saasId" :rules="[{required: true, message: '请选择saas平台'}]">
|
|
<el-select v-model="dialogForm.saasId" placeholder="请选择saas平台" style="width:100%;" @change="getCompanyList">
|
|
<el-option
|
|
v-for="item in saasList"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item required label="saas企业" prop="corpId" :rules="[{required: true, message: '请选择saas企业'}]">
|
|
<el-select v-model="dialogForm.corpId" placeholder="请选择saas企业" style="width:100%;" @change="selectCompany">
|
|
<el-option
|
|
v-for="item in companyList"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item required label="地区" prop="areaId" :rules="[{required: true, message: '请选择发布地区'}]">
|
|
<ai-area-get :instance="instance" v-model="dialogForm.areaId" :root="rootId"
|
|
:name.sync="dialogForm.areaName"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
name: 'event',
|
|
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['user']),
|
|
colConfigs() {
|
|
return [
|
|
{prop: 'type', label: '类型', formart: v => this.dict.getLabel('villInfoType', v)},
|
|
{prop: 'title', label: '标题', align: 'left'},
|
|
{prop: 'createDate', label: '创建时间', dateFormat: 'YYYY-MM-DD', align: 'center'},
|
|
{prop: 'createUser', label: '发布人', align: 'center'},
|
|
{slot: 'options', label: '操作'}
|
|
]
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
search: {
|
|
current: 1,
|
|
size: 10,
|
|
title: ''
|
|
},
|
|
total: 0,
|
|
ids: [],
|
|
tableData: [],
|
|
dialog: false,
|
|
dialogForm: {},
|
|
saasList: [],
|
|
companyList: [],
|
|
rootId: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dict.load('villInfoType').then(() => {
|
|
this.getList()
|
|
this.getsaasList()
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
getsaasList() {
|
|
this.instance.post("/appSaas/page", null, {
|
|
params: {size: 10000}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.saasList = res.data?.records
|
|
}
|
|
})
|
|
},
|
|
|
|
getCompanyList() {
|
|
this.instance.post("/appCorp/page", null, {
|
|
params: {saasId: this.dialogForm.saasId, size: 10000}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.companyList = res.data.records
|
|
this.rootId = ''
|
|
this.dialogForm.areaId = ''
|
|
this.corpId = ''
|
|
}
|
|
})
|
|
},
|
|
|
|
selectCompany() {
|
|
this.companyList.map(item => {
|
|
if (item.id == this.dialogForm.corpId) {
|
|
this.rootId = item.areaId
|
|
this.dialogForm.areaId = item.areaId
|
|
}
|
|
})
|
|
},
|
|
|
|
getList() {
|
|
this.instance.post(`/appvillageinfo/list`, null, {
|
|
params: {
|
|
...this.search,
|
|
areaId: this.areaId
|
|
}
|
|
}).then(res => {
|
|
if (res.data) {
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
|
|
publish(params) {
|
|
this.dialogForm.id = params.id
|
|
this.dialog = true
|
|
},
|
|
|
|
toAdd() {
|
|
this.$router.push({hash: "#add"})
|
|
},
|
|
toEdit(id) {
|
|
this.$router.push({hash: "#add", query: {id}})
|
|
},
|
|
|
|
toDetail(id) {
|
|
this.$router.push({query: {id}})
|
|
},
|
|
|
|
remove(id) {
|
|
this.$confirm('确定删除该数据？').then(() => {
|
|
this.instance.post(`/app/appvillageinfo/delete?ids=${id}`).then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('删除成功！')
|
|
this.getList()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
saveSaas() {
|
|
this.$refs.saasForm.validate(v => {
|
|
if (v) {
|
|
this.instance.post(`/appvillageinfo/sync?corpId=${this.dialogForm.corpId}&id=${this.dialogForm.id}&areaId=${this.dialogForm.areaId}`).then(res => {
|
|
if (res?.code == 0) {
|
|
this.dialog = false;
|
|
this.$message.success("发布成功")
|
|
this.dialogForm = {}
|
|
} else {
|
|
this.$message.error(res?.msg)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.event {
|
|
height: 100%;
|
|
|
|
::v-deep th {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
::v-deep .table-options {
|
|
span {
|
|
font-size: 14px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-btn {
|
|
margin-right: 16px;
|
|
font-size: 14px;
|
|
color: #2266FF;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:last-child:hover {
|
|
color: #f46;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|