kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

目录代码整合

Browse Source
This commit is contained in:
aixianling
2022-05-10 20:02:37 +08:00
parent 71049f7f65
commit 036ee91533
324 changed files with 4 additions and 8321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

365
packages/publicity/AppRuralTourism/AppRuralTourism.vue Normal file
View File

@@ -0,0 +1,365 @@
<template>
<ai-list class="AppRuralTourism" v-if="!addShowType">
<template #title>
<ai-title title="乡村旅游" :isShowBottomBorder="false" :instance="instance" :isShowArea="true" v-model="areaId" @change="changeArea"></ai-title>
</template>
<template #tabs>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in paneList" :key="index" :label="item.label" :name="item.name" lazy>
<ruralList
ref="ruralListref"
v-if="activeName"
:instance="instance"
:dict="dict"
@goto="goto"
:type="type"
@showAddRoral="showAddRoral"
:activeName="activeName"
@showEditRoral="showEditRoral" />
</el-tab-pane>
</el-tabs>
</template>
</ai-list>
<addRural
v-else-if="addShowType == 'addRural'"
:instance="instance"
:dict="dict"
:detailId="detailId"
:detailTitle="detailTitle"
:isEdit="isEdit"
:areaId="areaId"
:type="type"
:disabledLevel="disabledLevel"
@goto="goto">
</addRural>
<addProducts
v-else-if="addShowType == 'addProduct'"
:instance="instance"
:dict="dict"
:detailId="detailId"
:detailTitle="detailTitle"
:isEdit="isEdit"
:areaId="areaId"
:disabledLevel="disabledLevel"
@goto="goto">
</addProducts>
</template>
<script>
import {mapState} from 'vuex'
import ruralList from './components/ruralList'
import addRural from './components/addRural'
import addProducts from './components/addProducts'
export default {
name: 'AppRuralTourism',
label: "乡村旅游",
props: {
instance: Function,
dict: Object,
permissions: Function,
openim: Function
},
components: {
ruralList,
addRural,
addProducts
},
provide() {
return {
home: this
}
},
data() {
return {
activeName: 'ruralAddress',
paneList: [
{
label: '地区简介',
name: 'ruralAddress',
type: '0'
},
{
label: '特色农产品',
name: 'ruralProdect',
type: '3'
},
{
label: '旅游故事',
name: 'ruralStory',
type: '1'
},
{
label: '旅游服务',
name: 'ruralWork',
type: '2'
}
],
areaId: '',
addShowType: '', //新增 addRural其他 addProduce //新增农产品
detailTitle: '地区简介', //详情标题
isEdit: false, //详情编辑或查看
detailId: '', //详情内容id
areaType: '',
type: '0', //新增类型
disabledLevel: 0, //新增页面地区冻结层数
};
},
computed: {
...mapState(['user'])
},
methods: {
changeArea() {
let activeName = this.activeName
this.activeName = ''
this.$nextTick(() => {
this.activeName = activeName
});
this.instance.post(`admin/area/queryAreaFullNameByList?ids=` + this.areaId).then(res => {
if (this.areaId) {
this.disabledLevel = res.data[this.areaId].length
console.log(this.disabledLevel)
}
})
},
openIM() {
if (this.openim) this.openim();
},
handleClick(tab) {
this.detailTitle = this.paneList[tab.index].label
this.type = this.paneList[tab.index].type
this.activeName = ''
this.$nextTick(() => {
this.activeName = tab.name;
});
},
goto() {
this.addShowType = ''
this.isEdit = false
},
showAddRoral() {
this.detailId = ''
this.isAddType()
},
showEditRoral(item) {
console.log(item)
this.detailId = item.id
this.isEdit = true
this.isAddType()
},
isAddType() {
if (this.activeName == 'ruralProdect') {
this.addShowType = 'addProduct'
} else {
this.addShowType = 'addRural'
}
}
},
created() {
this.areaId = this.user.info.areaId;
this.areaType = this.user.info.areaMap[this.user.info.areaId].length;
this.disabledLevel = this.areaType
}
}
</script>
<style lang="scss" scoped>
.AppPatientFiles {
height: 100%;
background: #f3f6f9;
.application-header {
width: 100%;
background-color: #fff;
// border-bottom: 1px solid #D8DCE3;
padding: 0 16px;
box-sizing: border-box;
.el-row {
height: 100%;
.el-col {
height: 100%;
line-height: 48px;
text-align: left;
.left-img {
width: 16px;
height: 16px;
margin-right: 8px;
font-size: 16px;
color: #333;
// vertical-align: text-top;
}
.search {
float: right;
.el-input {
width: 280px;
height: 32px;
border-radius: 0 !important;
}
button {
width: 40px;
}
}
}
}
}
.table-content {
width: 100%;
.table-list {
width: 100%;
height: 636px;
background-color: #fff;
padding: 12px 16px 0;
box-sizing: border-box;
position: relative;
.table-title {
padding-bottom: 8px;
border-bottom: 1px solid #eee;
.el-select {
width: 160px;
height: 32px;
background-color: #fff;
margin-right: 8px;
}
.input-title {
display: inline-block;
width: 72px;
height: 32px;
background: rgba(245, 245, 245, 1);
font-size: 14px;
color: #666;
border: 1px solid rgba(208, 212, 220, 1);
box-sizing: border-box;
line-height: 30px;
text-align: center;
border-right: 0;
}
.el-date-editor {
margin-right: 8px;
}
.down {
width: 100%;
padding-top: 12px;
.down-line {
display: inline-block;
width: 534px;
height: 24px;
border-top: 1px solid #eee;
}
.down-content {
display: inline-block;
width: 108px;
height: 24px;
line-height: 24px;
border-radius: 0 0 8px 8px;
border: 1px solid #eee;
border-top: 0;
box-sizing: border-box;
color: #333;
font-size: 12px;
vertical-align: top;
text-align: center;
transition: all 0.3s ease-in-out;
i {
transition: all 0.3s ease-in-out;
}
.icon-down {
transform: rotate(90deg);
}
.icon-top {
transform: rotate(270deg);
}
}
}
.complete-date {
margin-top: 12px;
}
}
.el-table {
width: 100%;
box-sizing: border-box;
.item-status {
display: inline-block;
width: 40px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 12px;
margin: 0 12px 8px 16px;
}
.status-red {
background-color: #ffecef;
color: #ff4466;
}
.status-org {
background-color: #fff3e8;
color: #ff8822;
}
.status-blue {
background-color: #eff6ff;
color: #2266ff;
}
}
.pagination {
position: absolute;
bottom: 32px;
left: 0;
width: 100%;
text-align: center;
}
.el-table::before {
height: 0;
}
}
}
table {
width: 100%;
}
}
</style>
<style lang="scss" scoped>
.AppRuralTourism {
.el-tabs__item {
height: 32px;
line-height: 32px;
font-size: 14px;
background-color: #f5f5f5;
color: #666666;
box-sizing: border-box;
border-bottom: solid 1px #d0d4dc !important;
}
.el-tabs__item.is-active {
color: #5088ff;
background-color: #fff;
border-bottom: solid 1px transparent !important;
}
}
</style>

202
packages/publicity/AppRuralTourism/components/addProducts.vue Normal file
View File

@@ -0,0 +1,202 @@
<template>
<ai-detail class="add-products">
<template #title>
<ai-title title="特色农产品" isShowBack :isShowBottomBorder="true" @onBackClick="$emit('goto')"></ai-title>
</template>
<template #content>
<ai-card title="基本信息">
<template #content>
<el-form :model="ruleForm" label-width="120px" ref="ruleForm" :rules="rules" style="padding-top:16px;">
<el-form-item label="产品名称" prop="title">
<el-input size="small" v-model="ruleForm.title" clearable placeholder="请输入..." style="width: 240px;" maxLength="100"></el-input>
</el-form-item>
<el-form-item label="经营单位" prop="businessUnit">
<el-input size="small" v-model="ruleForm.businessUnit" clearable placeholder="请输入..." style="width: 240px;" maxLength="50"></el-input>
</el-form-item>
<el-form-item label="联系人" prop="contactPerson">
<el-input size="small" v-model="ruleForm.contactPerson" clearable placeholder="请输入..." style="width: 240px;" maxLength="50"></el-input>
</el-form-item>
<el-form-item label="联系方式" prop="contactPhone">
<el-input size="small" v-model="ruleForm.contactPhone" clearable placeholder="请输入..." style="width: 240px;" maxLength="11"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input size="small" v-model="ruleForm.address" clearable placeholder="请输入..." style="width: 240px;" maxLength="20"></el-input>
</el-form-item>
<el-form-item label="文字介绍" prop="content">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
maxLength="200"
v-model="ruleForm.content">
</el-input>
</el-form-item>
<el-form-item prop="areaId" label="发布地区">
<ai-area-select clearable always-show :instance="instance"
v-model="ruleForm.areaId"
:disabled-level="disabledLevel">
</ai-area-select>
</el-form-item>
<el-form-item label="图片介绍">
<span class="upload-more" style="left:-70px">(最多5张)</span>
<ai-uploader :instance="instance" v-model="ruleForm.photo" :limit="5"></ai-uploader>
<!-- <el-upload
class="upload-demo upload-list-mini"
ref="upload"
multiple
action
list-type="picture-card"
:file-list="fileList"
:limit="5"
:disabled="fileList.length === 5"
:http-request="uploadFile"
:on-remove="handleRemove"
:on-change="handleChange"
accept=".jpeg,.jpg,.png">
<div class="upload-img-small mar-t16">
<span class="iconfont iconPhoto iconPhoto2"></span>
<div class="upload-text">上传照片</div>
</div>
</el-upload> -->
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
<template #footer>
<template class="bottom-bar" v-if="!isEdit">
<el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '0')">保存</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">保存并发布</el-button>
</template>
<template class="bottom-bar" v-if="isEdit && ruleForm.status != '1'">
<el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '0')">修改</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">修改并发布</el-button>
</template>
<template class="bottom-bar" v-if="isEdit && ruleForm.status == '1'">
<el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">修改</el-button>
</template>
</template>
</ai-detail>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'add-products',
props: {
instance: Function,
dict: Object,
permissions: Function,
detailTitle: String,
isEdit: Boolean,
areaId: String,
detailId: String,
disabledLevel: Number
},
data() {
var transferInAreaIdPass = (rule, value, callback) => {
this.instance.post(`admin/area/queryAreaFullNameByList?ids=` + value).then(res => {
if (value) {
let list = res.data[value]
if (list.length < 5) {
callback(new Error('发布地区需选到村级'));
} else {
callback();
}
}
})
}
return {
ruleForm: {
type: '3',
title: '',
content: '',
areaId: '',
createUnitName: '',
createUserName: '',
status: '',
businessUnit: '',
contactPerson: '',
contactPhone: '',
photo: [],
address: '',
},
rules: {
title: [
{required: true, message: '请输入产品名称', trigger: 'change'}
],
businessUnit: [
{required: true, message: '请输入经营单位', trigger: 'change'}
],
contactPerson: [
{required: true, message: '请输入联系人', trigger: 'change'}
],
contactPhone: [
{required: true, message: '请输入联系方式', trigger: 'change'}
],
address: [
{required: true, message: '请输入地址', trigger: 'change'}
],
content: [
{required: true, message: '请输入文字介绍', trigger: 'change'}
],
areaId: [
// {required: true, validator: transferInAreaIdPass, trigger: 'blur'}
{required: true, message: '请选择发布地区', trigger: 'change'}
],
},
fileList: []
};
},
methods: {
cancel() {
this.$emit('goto');
},
confirm(formName, status) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.status = status
this.confirmAjax();
} else {
return false;
}
});
},
confirmAjax() {
this.instance.post('/app/appcountrysidetourism/addOrUpdate', {
...this.ruleForm,
photo: JSON.stringify(this.ruleForm.photo)
}).then(res => {
if (res && res.code == 0) {
this.detailId ? this.$message.success('编辑成功') : this.$message.success('添加成功');
this.cancel();
}
});
},
getDetail() {
this.instance.post(`/app/appcountrysidetourism/queryDetailById?id=${this.detailId}`).then(res => {
if (res && res.code == 0) {
this.ruleForm = {...res.data}
this.ruleForm.photo = JSON.parse(this.ruleForm.photo)
}
});
}
},
mounted() {
if (this.detailId) { //编辑
this.getDetail()
} else { //新增
this.ruleForm.areaId = this.areaId
this.ruleForm.createUnitName = this.user.info.unitName
this.ruleForm.createUserName = this.user.info.name
}
},
computed: {
...mapState(['user'])
},
};
</script>

374
packages/publicity/AppRuralTourism/components/addRural.vue Normal file
View File

@@ -0,0 +1,374 @@
<template>
<ai-detail class="addRural">
<template slot="title">
<ai-title :title="detailTitle" isShowBack :isShowBottomBorder="true" @onBackClick="$emit('goto')"></ai-title>
</template>
<template #content>
<ai-card title="基本信息">
<template #content>
<el-form :model="ruleForm" label-width="120px" ref="ruleForm" :rules="rules" style="padding-top:16px;">
<el-form-item label="标题" prop="title">
<el-input type="textarea" :rows="2" v-model="ruleForm.title" clearable placeholder="请输入..." maxlength="30"
show-word-limit></el-input>
</el-form-item>
<el-form-item prop="areaId" label="发布地区">
<ai-area-select clearable always-show :instance="instance"
v-model="ruleForm.areaId"
:disabled-level="disabledLevel">
</ai-area-select>
</el-form-item>
<el-form-item label="正文" prop="content">
<!-- <vue-ueditor-wrap v-model="ruleForm.content" :config="$ueditor_config" maxLength="3000"></vue-ueditor-wrap> -->
<ai-editor v-model="ruleForm.content" :instance="instance"/>
</el-form-item>
<el-form-item label="缩略图" prop="thumbUrl">
<ai-uploader
:instance="instance"
isShowTip
v-model="ruleForm.thumbUrl"
:limit="1"
:cropOps="cropOps"
is-crop>
<template slot="tips">
<p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
<p>图片比例：1.6：1</p>
</template>
</ai-uploader>
</el-form-item>
<el-form-item label="图片信息" v-if="detailTitle == '旅游服务'">
<span class="upload-more" style="left:-70px">(最多9张)</span>
<ai-uploader
:instance="instance"
v-model="fileList"
:limit="9">
</ai-uploader>
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
<template #footer>
<template v-if="!isEdit">
<el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '0')">保存</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">保存并发布</el-button>
</template>
<template v-if="isEdit && ruleForm.status != '1'">
<el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '0')">修改</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">修改并发布</el-button>
</template>
<template v-if="isEdit && ruleForm.status == '1'">
<el-button size="small" style="width: 92px;" @click="$emit('goto')">取消</el-button>
<el-button type="primary" size="small" style="width: 92px;" @click="confirm('ruleForm', '1')">修改</el-button>
</template>
</template>
</ai-detail>
<!-- <div class="addRural detail-content details-page no-content-border">
<el-row type="flex" style="position: relative;height: calc(100% - 112px);">
<div class="right-content">
<div :style=" isEdit ? 'width: 790px;margin: 0 auto;position:relative;' : 'width: 790px;margin: 0 auto;position:relative;padding-bottom: 80px;' ">
<el-form :model="ruleForm" label-width="120px" ref="ruleForm" :rules="rules" style="padding-top:16px;">
<el-form-item label="标题" prop="title">
<el-input size="small" v-model="ruleForm.title" clearable placeholder="请输入..." style="width: 240px;" maxLength="20"></el-input>
</el-form-item>
<el-form-item prop="areaId" label="发布地区">
<ai-area-select clearable always-show :instance="instance"
v-model="ruleForm.areaId"
:disabled-level="disabledLevel">
</ai-area-select>
</el-form-item>
<el-form-item label="正文" prop="content">
<ai-editor v-model="ruleForm.content" :instance="instance" />
</el-form-item>
<el-form-item label="缩略图" prop="thumbUrl">
<ai-uploader
:instance="instance"
v-model="ruleForm.thumbUrl"
:limit="1"
:cropOps="cropOps"
is-crop>
<template slot="tips">图片比例：1.6：1</template>
</ai-uploader>
</el-form-item>
<el-form-item label="图片信息" v-if="detailTitle == '旅游服务'">
<span class="upload-more" style="left:-70px">(最多9张)</span>
<el-upload
class="upload-demo upload-list"
ref="upload"
multiple
action
list-type="picture-card"
:file-list="fileList"
:http-request="uploadFile"
:on-remove="handleRemoveFile"
:on-change="fileChange"
accept=".jpeg,.jpg,.png">
<div class="upload-img">
<div class="iconfont iconPhoto"></div>
<div class="upload-text">上传照片</div>
</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</div>
</el-row>
</div> -->
</template>
<script>
import {mapState} from 'vuex';
export default {
name: 'add-rural',
props: {
instance: Function,
dict: Object,
permissions: Function,
detailTitle: String,
isEdit: Boolean,
areaId: String,
type: String,
detailId: String,
disabledLevel: Number
},
data() {
return {
ruleForm: {
title: '',
content: '',
areaId: '',
createUnitName: '',
createUserName: '',
status: '',
thumbUrl: []
},
cropOps: {
width: "336px",
height: "210px"
},
rules: {
title: [
{required: true, message: '请输入标题', trigger: 'change'}
],
content: [
{required: true, message: '请输入内容', trigger: 'change'}
],
areaId: [
// {required: true, validator: transferInAreaIdPass, trigger: 'change'}
{required: true, message: '请选择发布地区', trigger: 'change'}
],
photo: [
{required: true, message: '请上传图片', trigger: 'blur'}
],
},
fileList: []
};
},
filters: {
timeVal(val) {
if (val) {
return val.substring(0, 10);
}
}
},
methods: {
// 上传照片
uploadFile(file) {
var isPng = true
isPng = file.file.type == 'image/jpeg' || file.file.type == 'image/png' || file.file.type == 'image/jpg';
if (!isPng) {
this.$message.warning('上传图片信息必须是jpeg/png/jpg格式!');
for (let i = 0; i < this.fileList.length; i++) {
if (this.fileList[i].uid == file.file.uid) {
this.fileList.splice(i, 1);
}
}
return
}
const isLt10M = file.file.size / 1024 / 1024 < 10;
if (!isLt10M) {
this.$message.warning("图片大小不能超过 10MB!");
for (let i = 0; i < this.fileList.length; i++) {
if (this.fileList[i].uid == file.file.uid) {
this.fileList.splice(i, 1);
}
}
return;
}
if (this.fileList.length > 9) {
this.$message.error('图片信息不能超过9张')
this.fileList.map((item, index) => {
if (item.uid == file.file.uid) {
this.fileList.splice(index, 1)
}
return this.fileList
})
return
}
let formData = new FormData();
formData.append("file", file.file);
this.instance.post(`/admin/file/add`, formData).then(res => {
if (res.msg == "success") {
this.$message({message: '图片上传成功', type: 'success'})
let imgInfo = res.data[0].split(';');
let img = {
'fileId': imgInfo[1],
'accessUrl': imgInfo[0]
}
this.fileList.map((item, index) => {
if (item.uid == file.file.uid) {
this.fileList[index].fileId = img.fileId
this.fileList[index].accessUrl = img.accessUrl
this.fileList[index].url = img.accessUrl
}
return this.fileList
})
}
})
},
handleRemoveFile(file, fileList) {
this.fileList = fileList
},
fileChange(file, fileList) {
if (fileList.lenth == 9) {
this.$message.error('图片信息不能超过9张')
return
}
this.fileList = fileList
},
cancel() {
this.$emit('goto');
},
confirm(formName, status) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.status = status
this.confirmAjax();
} else {
return false;
}
});
},
confirmAjax() {
this.ruleForm.photo = JSON.stringify(this.fileList)
this.instance.post('/app/appcountrysidetourism/addOrUpdate', {
...this.ruleForm,
thumbUrl: this.ruleForm.thumbUrl.length ? JSON.stringify([{
url: this.ruleForm.thumbUrl[0].url
}]) : ''
}).then(res => {
if (res && res.code == 0) {
this.detailId ? this.$message.success('修改成功') : this.$message.success('添加成功');
this.cancel();
}
});
},
getDetail() {
this.instance.post(`/app/appcountrysidetourism/queryDetailById?id=${this.detailId}`).then(res => {
if (res && res.code == 0) {
this.ruleForm = {...res.data}
this.ruleForm.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
if (this.ruleForm.photo) {
this.fileList = JSON.parse(this.ruleForm.photo)
}
}
});
},
contentInput() {
this.$refs.ruleForm.validateField('content')
}
},
mounted() {
if (this.detailId) { //编辑
this.getDetail()
} else { //新增
this.ruleForm.areaId = this.areaId
this.ruleForm.type = this.type
this.ruleForm.createUnitName = this.user.info.unitName
this.ruleForm.createUserName = this.user.info.name
}
},
computed: {
...mapState(['user'])
},
};
</script>
<style scoped lang="scss">
.cover {
display: block;
width: 300px;
height: 140px;
margin: 20px auto;
}
.addRural {
::v-deep .upload-list .el-upload-list--picture-card {
.el-upload-list__item-actions {
width: 84px !important;
height: 84px !important;
}
}
::v-deep .upload-list .el-upload-list__item {
margin-right: 16px;
}
::v-deep .upload-list .el-upload-list__item, .el-upload-list__item {
img {
width: 84px !important;
height: 84px !important;
border-radius: 2px !important;
}
}
.upload-list {
padding-bottom: 100px;
::v-deep .el-upload-list__item {
width: 84px !important;
height: 84px !important;
border-radius: 2px !important;
}
}
.upload-img {
width: 84px;
height: 84px;
background: rgba(245, 245, 245, 1);
border-radius: 2px;
border: 1px solid rgba(208, 212, 220, 1);
.iconPhoto {
margin-top: 20px;
font-size: 32px;
color: #8B9CB6;
}
}
.upload-demo {
// padding: 0 15px;
}
.upload-text {
color: rgba(102, 102, 102, 1);
font-size: 12px;
height: 16px;
line-height: 16px;
}
::v-deep .upload-list .el-upload--picture-card {
width: 84px !important;
height: 84px !important;
line-height: 30px !important;
background: rgba(245, 245, 245, 1) !important;
border-radius: 2px !important;
border: none !important;
}
}
</style>

314
packages/publicity/AppRuralTourism/components/ruralList.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<ai-list isTabs class="appCountrysideTourism bg369">
<template #content>
<ai-search-bar>
<template slot="left">
<el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="toAdd()" v-if="$permissions('app_appcountrysidetourism_edit')">添加
</el-button>
<el-button icon="el-icon-delete-solid" size="small" class="del-btn-list" @click="deleteList()" v-if="$permissions('app_appcountrysidetourism_del')" :disabled="!multipleSelection.length">删除
</el-button>
</template>
<template #right>
<el-input
v-model="search.title"
class="search-input"
size="small"
@keyup.enter.native="search.current = 1, search.title, getAppCountrysideTourism()"
placeholder="请输入标题"
clearable
@clear="search.current = 1, search.title = '', getAppCountrysideTourism()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
ref="aitableex"
:current.sync="page.current"
@selection-change="handleSelectionChange"
:size.sync="page.size"
@getList="getAppCountrysideTourism">
<el-table-column width="160" slot="options" label="操作" align="center" fixed="right">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" :title="row.status == 1 ? '取消发布' : '发布'" @click="changeStatus(row)">{{ row.status == 1 ? '取消发布' : '发布' }}</el-button>
<el-button type="text" title="编辑" @click="viewDetail(row)" :disabled="!$permissions('app_appcountrysidetourism_edit')">编辑</el-button>
<el-button type="text" title="删除" @click="deleteItem(row)" :disabled="!$permissions('app_appcountrysidetourism_del')">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<!-- <el-table ref="multipleTable" :data="tableData" style="margin-top:8px;" header-cell-class-name="table-header"
tooltip-effect="light" row-class-name="table-row" cell-class-name="table-cell"
@selection-change="handleSelectionChange">
<el-table-column prop="title" label="产品名称" v-if="activeName == 'ruralProdect'" align="center"
show-overflow-tooltip>
<div slot-scope="{row}">
{{ row.title || "-" }}
</div>
</el-table-column>
<el-table-column prop="status" label="发布状态" align="center">
<div slot-scope="{row}" v-if="row.status == 1"> 已发布</div>
<div slot-scope="{row}" v-else> 未发布</div>
</el-table-column>
<el-table-column slot="operate" label="操作" align="center">
<div slot-scope="{row}">
<span class="iconfont iconChange icon-color89B mar-r8" :title="row.status==1?'取消发布':'发布'"
style="cursor: pointer;" @click="changeStatus(row)"/>
<span class="iconfont iconEdit icon-color89B mar-r8" title="编辑" style="cursor: pointer;"
@click="viewDetail(row)" v-if="$permissions('app_appcountrysidetourism_edit')"/>
<span class="iconfont iconDelete icon-color89B" title="删除" style="cursor: pointer;" @click="deleteItem(row)"
v-if="$permissions('app_appcountrysidetourism_del')"/>
</div>
</el-table-column>
</el-table> -->
</template>
</ai-list>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'appCountrysideTourism',
props: {
instance: Function,
dict: Object,
permissions: Function,
activeName: String,
type: String,
areaId: String
},
inject: ['home'],
data() {
return {
tableData: [],
columns: [
{
label: '标题',
prop: 'title',
type: '',
dict: ''
},
{
label: '地区',
prop: 'areaName',
type: '',
dict: ''
},
{
label: '发布状态',
prop: 'status',
type: '',
dict: ''
},
{
label: '发布时间',
prop: 'createDate',
type: 'time',
dict: ''
},
// {
// label: '发布单位',
// prop: 'createUnitName',
// type: '',
// dict: ''
// },
{
label: '发布人',
prop: 'createUserName',
type: '',
dict: ''
},
{
label: '操作',
prop: 'operate',
type: '',
dict: ''
}
],
search: {
style: {},
title: ''
},
page: {
current: 1,
size: 10,
},
total: 0,
multipleSelection: [],
ids: []
}
},
computed: {
...mapState(['user']),
colConfigs () {
return [
{ type: 'selection', align: 'center'},
{ prop: 'title', label: this.activeName == 'ruralProdect' ? '产品名称' : '标题', align: 'left', width: '200px' },
{ prop: 'areaName', label: '地区', align: 'center' },
{ prop: 'status', label: '发布状态', align: 'center', formart: v => v === '1' ? '已发布' : '未发布' },
{ prop: 'createDate', label: '发布时间', align: 'center' },
{ prop: 'createUnitName', label: '发布单位', align: 'center' },
{ prop: 'createUserName', label: '发布人', align: 'center' },
{ slot: 'options', label: '操作', align: 'center' }
]
}
},
mounted() {
if (this.dict) this.dict.load(this.columns.map(e => (e.type == 'select' ? e.dict : '')))
this.resetSearch()
},
methods: {
isPermit(params) {
return this.permissions ? this.permissions(params) : false;
},
handleSelectionChange(val) {
this.multipleSelection = val;
this.ids = []
this.multipleSelection.forEach(e => {
this.ids.push(e.id);
});
},
deleteItem(item) {
this.ids = []
this.ids.push(item.id);
this.deleteList();
},
deleteList() {
this.$confirm('是否要删除这些信息?', {type: 'warning'})
.then(() => {
this.instance.post('/app/appcountrysidetourism/delete?ids=' + this.ids, null, {}).then(() => {
this.getAppCountrysideTourism();
this.ids = [];
this.$message.success('删除成功!');
});
})
.catch(() => {
});
},
viewDetail(item) {
this.$emit('showEditRoral', item);
},
handleSizeChange(val) {
this.page.size = val
this.getAppCountrysideTourism()
},
resetSearch() {
this.page.current = 1;
this.page.size = 10;
this.columns.map(c => {
if (c.type) this.search[c.prop] = null;
});
Object.keys(this.search).forEach(e => {
this.search[e] = null;
});
this.getAppCountrysideTourism();
},
getAppCountrysideTourism() {
this.instance.post(`/app/appcountrysidetourism/list?type=${this.type}&areaId=${this.home.areaId}`, null, {
params: {
...this.search,
...this.page
}
})
.then(res => {
if (res && res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
});
},
addOrUpdateAppCountrysideTourism() {
this.instance.post('/app/appcountrysidetourism/addOrUpdate', this.dialog.add).then(() => {
this.getAppCountrysideTourism();
this.$message.success('添加或修改成功!');
});
},
deleteAppCountrysideTourism(ids) {
this.$confirm('是否要删除这些账号?', {
type: 'warning'
})
.then(() => {
this.instance
.post('/app/appcountrysidetourism/delete', null, {
params: {
ids: ids
}
})
.then(() => {
this.getAppCountrysideTourism();
this.$message.success('删除成功!');
});
})
.catch(() => {
});
},
handleCurrentChange(val) {
this.page.current = val;
this.getAppCountrysideTourism();
},
toAdd() {
this.$emit('showAddRoral');
},
changeStatus(item) {
let title = item.status == '1' ? '是否要取消发布?' : '是否要发布?';
this.$confirm(title, {type: 'warning'})
.then(() => {
item.status = item.status == '1' ? '0' : '1';
this.instance.post('/app/appcountrysidetourism/addOrUpdate', item).then(res => {
if (res && res.code == 0) {
title == '是否要发布?' ? this.$message.success('发布成功') : this.$message.success('取消发布成功');
this.getAppCountrysideTourism();
}
});
})
.catch(() => {
});
}
}
}
</script>
<style lang="scss" scoped>
.appVillageCadres {
background-color: #f3f6f9;
width: 100%;
height: 100%;
.header {
padding: 0 16px;
width: 100%;
background-color: #ffffff;
height: 48px;
line-height: 48px;
box-shadow: inset 0px -1px 0px 0px #d8dce3;
}
.main-content {
margin: 16px;
background-color: white;
border: 1px solid #eee;
padding: 12px 16px;
.searchBar {
border-bottom: 1px solid #eee;
.el-col {
margin-bottom: 12px;
height: 32px;
}
}
.row-btn {
margin: 16px 0;
}
}
}
</style>