|
|
|
@ -40,13 +40,25 @@ |
|
|
|
> |
|
|
|
<el-table-column type="selection" align="center" width="55" /> |
|
|
|
<el-table-column prop="name" label="名称" width="150" /> |
|
|
|
<el-table-column prop="libCode" label="馆代码" width="100" /> |
|
|
|
<el-table-column prop="province" label="坐标" width="200" /> |
|
|
|
<el-table-column prop="number" label="宣传图片" width="80" /> |
|
|
|
<el-table-column prop="libcode" label="馆代码" width="100"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="scope.row.branchType === 1|| scope.row.branchType === '1'">{{ scope.row.libcode }}</span> |
|
|
|
<span v-else>{{ scope.row.tcId }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="mapX" label="坐标" width="200"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ scope.row.mapX }},{{ scope.row.mapY }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="promotions" label="宣传图片" width="80"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
{{ scope.row.promotions.length }} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" width="100"> |
|
|
|
<template> |
|
|
|
<!-- slot-scope="scope" --> |
|
|
|
<el-button style="padding: 5px 6px !important;"><i class="iconfont icon-bianji" />编辑</el-button> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button style="padding: 5px 6px !important;" @click="initForm('edit',scope.row)"><i class="iconfont icon-bianji" />编辑</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -64,7 +76,7 @@ |
|
|
|
</el-card> |
|
|
|
<!-- @click="toDelete(crud.selections)" --> |
|
|
|
<div style="display: flex; flex-direction: column; justify-content: flex-start; margin-left: 15px;"> |
|
|
|
<el-button size="mini" @click="libDialogVisible=true"> |
|
|
|
<el-button size="mini" @click="initForm('add')"> |
|
|
|
<i class="iconfont icon-xinzeng" /> |
|
|
|
新增 |
|
|
|
</el-button> |
|
|
|
@ -106,58 +118,61 @@ |
|
|
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
|
|
|
<div style="width: 696px;"> |
|
|
|
<div> |
|
|
|
<el-form-item label="名称" prop="title"> |
|
|
|
<el-input v-model="form.title" placeholder="请输入" style="width: 586px;" /> |
|
|
|
<el-form-item label="名称" prop="name"> |
|
|
|
<el-input v-model="form.name" placeholder="请输入" style="width: 586px;" /> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<el-form-item label="类型" prop="type"> |
|
|
|
<el-radio-group v-model="form.type" aria-hidden="false"> |
|
|
|
<el-radio :label="1">总馆</el-radio> |
|
|
|
<el-radio :label="2">分馆</el-radio> |
|
|
|
<el-form-item label="类型" prop="branchType"> |
|
|
|
<el-radio-group v-model="form.branchType" aria-hidden="false" @change="changeBranchType"> |
|
|
|
<el-radio label="1">总馆</el-radio> |
|
|
|
<el-radio label="2">分馆</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="馆代码" prop="libCode" style="margin-left: 30px; margin-right: 0 !important;"> |
|
|
|
<el-input v-model="form.libCode" placeholder="请输入" /> |
|
|
|
<el-form-item v-if="form.branchType === '1'" label="馆代码" prop="libcode" style="margin-left: 30px; margin-right: 0 !important;"> |
|
|
|
<el-input v-model="form.libcode" placeholder="请输入" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-else label="馆代码" prop="tcId" style="margin-left: 30px; margin-right: 0 !important;"> |
|
|
|
<el-input v-model="form.tcId" placeholder="请输入" /> |
|
|
|
</el-form-item> |
|
|
|
<div> |
|
|
|
<el-form-item label="面积" prop="areaNum"> |
|
|
|
<el-input v-model="form.areaNum" placeholder="请输入" style="width: 586px;"> |
|
|
|
<el-form-item label="面积" prop="occupationArea"> |
|
|
|
<el-input v-model="form.occupationArea" placeholder="请输入" style="width: 586px;"> |
|
|
|
<template slot="append">平方米</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-form-item label="地址" prop="place"> |
|
|
|
<el-input v-model="form.place" placeholder="请输入" style="width: 586px;" /> |
|
|
|
<el-form-item label="地址" prop="address"> |
|
|
|
<el-input v-model="form.address" placeholder="请输入" style="width: 586px;" /> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div class="location-item"> |
|
|
|
<el-form-item label="坐标" prop="location"> |
|
|
|
<el-input v-model="form.location.x" placeholder="请输入"> |
|
|
|
<el-input v-model="form.mapX" placeholder="请输入"> |
|
|
|
<template slot="prepend">X</template> |
|
|
|
</el-input> |
|
|
|
<el-input v-model="form.location.y" placeholder="请输入"> |
|
|
|
<el-input v-model="form.mapY" placeholder="请输入"> |
|
|
|
<template slot="prepend">Y</template> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-form-item label="简介" prop="remarks"> |
|
|
|
<el-input v-model="form.remarks" type="textarea" rows="4" placeholder="请输入" style="width: 586px;" /> |
|
|
|
<el-form-item label="简介" prop="explains"> |
|
|
|
<el-input v-model="form.explains" type="textarea" rows="4" placeholder="请输入" style="width: 586px;" /> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-form-item label="宣传图片" prop="remarks"> |
|
|
|
<div style="display: flex; justify-content: flex-start;"> |
|
|
|
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap;"> |
|
|
|
<div class="libImg-list"> |
|
|
|
<img v-for="(item,index) in libImgList" :key="index" :src="item.url" alt=""> |
|
|
|
</div> |
|
|
|
<div class="upload-img-input"> |
|
|
|
<!-- @change="changeAiFile" --> |
|
|
|
<input ref="fileInput" type="file" multiple> |
|
|
|
<div class="upload-libImg"><i class="iconfont icon-shangchuan2" /><span>点击上传</span></div> |
|
|
|
<div v-for="(item,index) in libImgList" :key="index" class="libImg-item"> |
|
|
|
<img :src="item.imgPath" alt=""> |
|
|
|
<i class="iconfont icon-shanchu" @click="handleDelete(index)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<UploadCover upload-type="other-digital" :limit-num="libImgList.length" @childCover="handleCover" /> |
|
|
|
</div> |
|
|
|
<div style="font-size: 12px; color: #9098a4;">点击上传图片，最多可上传 3 张</div> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -173,12 +188,13 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchEditScreenSetting, FetchInitScreenBranch } from '@/api/digitalScreen/index' |
|
|
|
import { FetchEditScreenSetting, FetchInitScreenBranch, FetchEditScreenBranch } from '@/api/digitalScreen/index' |
|
|
|
import UploadCover from '@/views/components/upload.vue' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'AreaSetting', |
|
|
|
components: { }, |
|
|
|
components: { UploadCover }, |
|
|
|
props: { |
|
|
|
mapData: { |
|
|
|
type: String, |
|
|
|
@ -203,32 +219,36 @@ export default { |
|
|
|
link: 'https://datav.aliyun.com/portal/school/atlas/area_selector', |
|
|
|
copied: false, |
|
|
|
tableData: [ |
|
|
|
// { name: '总管', libCode: 'lib001', province: '114.133561,30.641408', number: '3' }, |
|
|
|
// { name: '分管1', libCode: 'lib001', province: '114.133561,30.641408', number: '3' } |
|
|
|
// { name: '总管', libcode: 'lib001', province: '114.133561,30.641408', number: '3' }, |
|
|
|
// { name: '分管1', libcode: 'lib001', province: '114.133561,30.641408', number: '3' } |
|
|
|
], |
|
|
|
page: { |
|
|
|
page: 1, |
|
|
|
page: 0, |
|
|
|
size: 10, |
|
|
|
total: 0 |
|
|
|
}, |
|
|
|
libDialogVisible: false, |
|
|
|
form: { |
|
|
|
title: '', |
|
|
|
type: 1, |
|
|
|
libCode: '', |
|
|
|
areaNum: '', |
|
|
|
place: '', |
|
|
|
location: { x: '', y: '' }, |
|
|
|
remarks: '' |
|
|
|
name: '', |
|
|
|
branchType: '1', |
|
|
|
libcode: '', |
|
|
|
occupationArea: '', |
|
|
|
address: '', |
|
|
|
mapX: '', |
|
|
|
mapY: '', |
|
|
|
explains: '' |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
title: [ |
|
|
|
name: [ |
|
|
|
{ required: true, message: '名称不可为空', trigger: 'blur' } |
|
|
|
], |
|
|
|
type: [ |
|
|
|
branchType: [ |
|
|
|
{ required: true, message: '请选择类型', trigger: 'change' } |
|
|
|
], |
|
|
|
libCode: [ |
|
|
|
tcId: [ |
|
|
|
{ required: true, message: '馆代码不可为空', trigger: 'blur' } |
|
|
|
], |
|
|
|
libcode: [ |
|
|
|
{ required: true, message: '馆代码不可为空', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
@ -241,7 +261,8 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'baseApi' |
|
|
|
'baseApi', |
|
|
|
'user' |
|
|
|
]) |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -260,8 +281,20 @@ export default { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initScreenBranch() { |
|
|
|
FetchInitScreenBranch().then((res) => { |
|
|
|
console.log('initScreenBranch', res) |
|
|
|
const params = { |
|
|
|
'libcode': this.user.fonds.fondsNo, |
|
|
|
'page': this.page.page, |
|
|
|
'size': this.page.size |
|
|
|
} |
|
|
|
FetchInitScreenBranch(params).then((res) => { |
|
|
|
console.log('initScreenBranch', res.content) |
|
|
|
if (res.content.length !== 0) { |
|
|
|
this.tableData = res.content |
|
|
|
this.page.total = res.totalElements |
|
|
|
} else { |
|
|
|
this.tableData = [] |
|
|
|
this.page.total = 0 |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
@ -307,13 +340,94 @@ export default { |
|
|
|
this.$message.error('GeoJSON更新失败') |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleCover(value) { |
|
|
|
if (value) { |
|
|
|
const imgUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + value |
|
|
|
this.libImgList.push({ imgPath: imgUrl }) |
|
|
|
} else { |
|
|
|
this.libImgList = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
initForm(type, branchData) { |
|
|
|
if (type === 'add') { |
|
|
|
if (this.form.branchType === '1') { |
|
|
|
this.form.name = this.user.fonds.fondsName |
|
|
|
this.form.libcode = this.user.fonds.fondsNo |
|
|
|
} else { |
|
|
|
this.form.name = '' |
|
|
|
this.form.libcode = '' |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.log('branchData', branchData) |
|
|
|
this.form = branchData |
|
|
|
this.form.branchType = branchData.branchType === 1 || branchData.branchType === '1' ? '1' : '2' |
|
|
|
this.libImgList = branchData.promotions |
|
|
|
console.log(this.form) |
|
|
|
} |
|
|
|
this.libDialogVisible = true |
|
|
|
}, |
|
|
|
changeBranchType(val) { |
|
|
|
if (val === '1') { |
|
|
|
this.form.name = this.user.fonds.fondsName |
|
|
|
this.form.libcode = this.user.fonds.fondsNo |
|
|
|
} else { |
|
|
|
this.form.name = '' |
|
|
|
this.form.libcode = '' |
|
|
|
} |
|
|
|
}, |
|
|
|
handleDelete(index) { |
|
|
|
this.libImgList.splice(index, 1) |
|
|
|
}, |
|
|
|
handleComfired() { |
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
if (this.libImgList.length !== 0) { |
|
|
|
this.form.promotions = this.libImgList |
|
|
|
} |
|
|
|
if (this.form.branchType === '2') { |
|
|
|
this.form.libcode = this.user.fonds.fondsNo |
|
|
|
} |
|
|
|
console.log('FetchEditScreenBranch', this.form) |
|
|
|
FetchEditScreenBranch(this.form).then((res) => { |
|
|
|
console.log('res', res) |
|
|
|
if (res.code !== 500) { |
|
|
|
this.$message({ message: '新增成功', type: 'success', offset: 8 }) |
|
|
|
this.initScreenBranch() |
|
|
|
} else { |
|
|
|
this.$message({ message: res.message, type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
this.handleClose() |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
this.addBookDialogVisible = false |
|
|
|
}) |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleClose() { |
|
|
|
this.geoJsonVisible = false |
|
|
|
this.libDialogVisible = false |
|
|
|
this.$refs['form'].resetFields() |
|
|
|
this.$refs['form'].clearValidate() |
|
|
|
this.form = { |
|
|
|
name: '', branchType: '1', libcode: '', occupationArea: '', address: '', mapX: '', mapY: '', explains: '' |
|
|
|
} |
|
|
|
this.libImgList = [] |
|
|
|
}, |
|
|
|
handleSizeChange(size) { |
|
|
|
this.page.size = size |
|
|
|
this.page.page = 1 |
|
|
|
this.initScreenBranch() |
|
|
|
}, |
|
|
|
handleCurrentPage(val) { |
|
|
|
this.page.page = val |
|
|
|
this.initScreenBranch() |
|
|
|
}, |
|
|
|
copyLink() { |
|
|
|
// 复制链接到剪贴板 |
|
|
|
navigator.clipboard.writeText(this.link) |
|
|
|
.then(() => { |
|
|
|
this.copied = true |
|
|
|
@ -324,11 +438,9 @@ export default { |
|
|
|
}) |
|
|
|
.catch(err => { |
|
|
|
console.error('无法复制内容: ', err) |
|
|
|
// 兼容不支持clipboard API的浏览器 |
|
|
|
this.fallbackCopyText() |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 浏览器不支持Clipboard API时的备用方法 |
|
|
|
fallbackCopyText() { |
|
|
|
const textArea = document.createElement('textarea') |
|
|
|
textArea.value = this.link |
|
|
|
@ -350,16 +462,6 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
document.body.removeChild(textArea) |
|
|
|
}, |
|
|
|
handleSizeChange(size) { |
|
|
|
this.page.size = size |
|
|
|
this.page.page = 1 |
|
|
|
}, |
|
|
|
handleCurrentPage(val) { |
|
|
|
this.page.page = val |
|
|
|
}, |
|
|
|
handleComfired() { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -435,10 +537,23 @@ export default { |
|
|
|
.libImg-list{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
img{ |
|
|
|
display: block; |
|
|
|
width: 600px; |
|
|
|
margin-bottom: 10px; |
|
|
|
.libImg-item{ |
|
|
|
position: relative; |
|
|
|
height: 120px; |
|
|
|
margin-right: 10px; |
|
|
|
img{ |
|
|
|
display: block; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
i{ |
|
|
|
position: absolute; |
|
|
|
left: 4px; |
|
|
|
top: 0; |
|
|
|
color: red; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
