|
@@ -0,0 +1,534 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="five">
|
|
|
+ <div class="main">
|
|
|
+ <div class="row" v-for="(item, index) in data" :key="item.id">
|
|
|
+ <div class="top">
|
|
|
+ <span
|
|
|
+ @click="data[index].flag = !data[index].flag"
|
|
|
+ :class="`${item.flag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}`"
|
|
|
+ > {{ index + 1 }}</span
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="item.name"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ maxlength="25"
|
|
|
+ ></el-input>
|
|
|
+ <i
|
|
|
+ v-if="index !== 0"
|
|
|
+ class="el-icon-close"
|
|
|
+ @click="delMen(index)"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ <div class="txt" v-show="item.flag">
|
|
|
+ <div class="txtBox">
|
|
|
+ <span>产权归属:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="item.txt1"
|
|
|
+ maxlength="25"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="txtBox">
|
|
|
+ <span>占地面积:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="item.txt2"
|
|
|
+ maxlength="25"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="txtBox">
|
|
|
+ <span>建筑面积:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="item.txt3"
|
|
|
+ maxlength="25"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="txtBox">
|
|
|
+ <span>保护级别:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="item.txt4"
|
|
|
+ maxlength="25"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="txtBox">
|
|
|
+ <span>建筑概况:</span>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ v-model="item.txt5"
|
|
|
+ maxlength="3000"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="txtBox">
|
|
|
+ <span class="upImgSpan">上传图片:</span>
|
|
|
+
|
|
|
+ <div class="imgBox">
|
|
|
+ <div
|
|
|
+ @click="lookImg(val)"
|
|
|
+ class="imgdiv"
|
|
|
+ v-for="(val, indSon) in item.imgList"
|
|
|
+ :key="val.id"
|
|
|
+ >
|
|
|
+ <img :src="baseURL + val.filePath" alt="" />
|
|
|
+ <!-- 封面显示 -->
|
|
|
+ <div class="cover" v-if="item.imgActive === val.id">封面</div>
|
|
|
+ <!-- 下面的按钮 -->
|
|
|
+ <div
|
|
|
+ class="handle"
|
|
|
+ v-else
|
|
|
+ @click.stop="goodsImgIndex(item, val.id)"
|
|
|
+ >
|
|
|
+ 设为封面
|
|
|
+ </div>
|
|
|
+ <!-- 删除 -->
|
|
|
+ <div
|
|
|
+ class="delImg el-icon-delete"
|
|
|
+ @click.stop="delGoodsImg(indSon, item, val.id)"
|
|
|
+ v-if="item.imgActive !== val.id"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <el-upload
|
|
|
+ v-if="item.imgList.length < 20"
|
|
|
+ accept=".png,.jpg,.jpeg"
|
|
|
+ :action="baseURL + '/cms/content/upload'"
|
|
|
+ :data="{
|
|
|
+ menuId: menuId,
|
|
|
+ type: 'img',
|
|
|
+ villageId: villageId,
|
|
|
+ }"
|
|
|
+ :show-file-list="true"
|
|
|
+ class="avatar-uploader"
|
|
|
+ :headers="{ token }"
|
|
|
+ :before-upload="beforethumbUploadImg"
|
|
|
+ :on-success="
|
|
|
+ (res) => {
|
|
|
+ return upload_thumb_successImg(res, item);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="upImg">
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <p class="upHint">支持格式:jpg, png,最大支持 20M</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <div class="btnn">
|
|
|
+ <!-- 增加人物 -->
|
|
|
+ <div class="el-icon-plus" @click="addMen">增加内容</div>
|
|
|
+
|
|
|
+ <el-button @click="$router.push('/layout/tab1')">返 回</el-button> 
|
|
|
+ <el-button type="primary" @click="save">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 照片墙的查看照片 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from '@/utils/request'
|
|
|
+import { saveEntity, contentList, delFileApi } from '@/apis/tab1'
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // 服务器前缀地址
|
|
|
+ token: '',
|
|
|
+ baseURL: '',
|
|
|
+
|
|
|
+ // 村落ID
|
|
|
+ villageId: null,
|
|
|
+ // 菜单ID
|
|
|
+ menuId: null,
|
|
|
+ // 本身自己的id
|
|
|
+ id: null,
|
|
|
+ // 查看图片
|
|
|
+ imgListLook: [],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ id: Date.now(),
|
|
|
+ name: '',
|
|
|
+ txt1: '',
|
|
|
+ txt2: '',
|
|
|
+ txt3: '',
|
|
|
+ txt4: '',
|
|
|
+ txt5: '',
|
|
|
+ flag: true,
|
|
|
+ imgActive: 0,
|
|
|
+ imgList: []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 照片墙数据
|
|
|
+ dialogImageUrl: '',
|
|
|
+ dialogVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ // ---------------照片墙
|
|
|
+ beforethumbUploadImg (file) {
|
|
|
+ // console.log(998, file)
|
|
|
+ // 限制图片大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 20
|
|
|
+ const typeOk =
|
|
|
+ file.type === 'image/png' ||
|
|
|
+ (file.type === 'image/jpeg' && !file.name.includes('.jfif'))
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error('图片格式有误!')
|
|
|
+ reject(file)
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error('图片大小超过20M!')
|
|
|
+ reject(file)
|
|
|
+ } else {
|
|
|
+ resolve(file)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ upload_thumb_successImg (data, item) {
|
|
|
+ this.$message.success('上传图片成功')
|
|
|
+ item.imgList.push(data.data)
|
|
|
+ // 如果是第一张上传的图片,把id变成第一张
|
|
|
+ if (item.imgList.length === 1) item.imgActive = data.data.id
|
|
|
+ },
|
|
|
+ // 点击删除图片
|
|
|
+ delGoodsImg (indSon, item, id) {
|
|
|
+ this.$confirm('此操作将永久删除图片', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ item.imgList.splice(indSon, 1)
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ await delFileApi(id)
|
|
|
+ const obj = {
|
|
|
+ menuId: this.menuId,
|
|
|
+ villageId: this.villageId,
|
|
|
+ contentJson: JSON.stringify(this.data),
|
|
|
+ id: this.id
|
|
|
+ }
|
|
|
+ await saveEntity(obj)
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+ },
|
|
|
+ // 点击设为封面
|
|
|
+ goodsImgIndex (item, id) {
|
|
|
+ item.imgActive = id
|
|
|
+ // this.ruleForm.thumb = this.imgList[index].filePath
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ },
|
|
|
+ // 点击图片看大图
|
|
|
+ lookImg (val) {
|
|
|
+ this.dialogImageUrl = this.baseURL + val.filePath
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击删除
|
|
|
+ delMen (index) {
|
|
|
+ this.data.splice(index, 1)
|
|
|
+ },
|
|
|
+ // 点击增加人物
|
|
|
+ addMen () {
|
|
|
+ this.data.push({
|
|
|
+ id: Date.now(),
|
|
|
+ name: '',
|
|
|
+ txt1: '',
|
|
|
+ txt2: '',
|
|
|
+ txt3: '',
|
|
|
+ txt4: '',
|
|
|
+ txt5: '',
|
|
|
+ flag: true,
|
|
|
+ imgActive: 0,
|
|
|
+ imgList: []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击保存
|
|
|
+ async save () {
|
|
|
+ let tempFlag = false
|
|
|
+ this.data.forEach((v) => {
|
|
|
+ v.flag = true
|
|
|
+ if (
|
|
|
+ v.name.trim() === '' ||
|
|
|
+ v.txt1.trim() === '' ||
|
|
|
+ v.txt2.trim() === '' ||
|
|
|
+ v.txt3.trim() === '' ||
|
|
|
+ v.txt4.trim() === '' ||
|
|
|
+ v.imgList.length <= 0
|
|
|
+ ) {
|
|
|
+ tempFlag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (tempFlag) return this.$message.warning('信息或图片不能为空')
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ menuId: this.menuId,
|
|
|
+ villageId: this.villageId,
|
|
|
+ contentJson: JSON.stringify(this.data),
|
|
|
+ id: this.id
|
|
|
+ }
|
|
|
+ const res = await saveEntity(obj)
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.id = res.data.id
|
|
|
+ } else this.$message.warning(res.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ async created () {
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL
|
|
|
+ // 获取用户token
|
|
|
+ this.token = localStorage.getItem('JMYZU_token')
|
|
|
+ this.villageId = Number(this.$route.params.id)
|
|
|
+ this.menuId = Number(this.$route.params.k)
|
|
|
+ const res = await contentList(this.villageId, this.menuId)
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ const temp = res.data[0]
|
|
|
+ this.id = temp.id
|
|
|
+ this.data = JSON.parse(temp.contentJson)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted () {},
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.five {
|
|
|
+ /deep/.avatar-uploader .el-upload-list__item-name {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ /deep/.avatar-uploader
|
|
|
+ .el-upload-list__item.is-success
|
|
|
+ .el-upload-list__item-status-label {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ /deep/.el-upload-list__item .el-progress {
|
|
|
+ width: 500px;
|
|
|
+ position: static;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ /deep/.el-upload-list__item {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .main {
|
|
|
+ padding: 30px 20px;
|
|
|
+ height: calc(100% - 120px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .row {
|
|
|
+ margin-bottom: 50px;
|
|
|
+ .top {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+ .el-icon-close {
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 26px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 24px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ /deep/.el-input {
|
|
|
+ height: 36px;
|
|
|
+ width: 380px;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ color: black;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ /*修改提示文字的颜色*/
|
|
|
+ /deep/input::-webkit-input-placeholder {
|
|
|
+ /* WebKit browsers */
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ /deep/input:-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ /deep/input::-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 19+ */
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ /deep/input:-ms-input-placeholder {
|
|
|
+ /* Internet Explorer 10+ */
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ width: 90%;
|
|
|
+ margin: 20px auto;
|
|
|
+ .txtBox {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ & > span {
|
|
|
+ width: 90px;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 40px;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: -6px;
|
|
|
+ content: "*";
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upImgSpan {
|
|
|
+ width: 84px;
|
|
|
+ &::after {
|
|
|
+ left: -6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /deep/.el-icon-plus {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ background-color: #fbfdff;
|
|
|
+ border: 1px dashed #c0ccda;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ /deep/.el-icon-plus:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+ .imgdiv {
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ height: 148px;
|
|
|
+ & > img {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .handle {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 30px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+ .delImg {
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #a30014;
|
|
|
+ padding: 3px;
|
|
|
+ font-size: 26px;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ }
|
|
|
+ .cover {
|
|
|
+ color: #fff;
|
|
|
+ pointer-events: none;
|
|
|
+ font-size: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 30px;
|
|
|
+ background-color: rgba(163, 0, 20, 0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upHint {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -25px;
|
|
|
+ left: 80px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-textarea .el-input__count {
|
|
|
+ bottom: -20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-textarea__inner {
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnn {
|
|
|
+ border-top: 1px solid #d7d7d7;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 70px;
|
|
|
+ width: 100%;
|
|
|
+ .el-icon-plus {
|
|
|
+ position: absolute;
|
|
|
+ top: -50px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-weight: 700;
|
|
|
+ color: #02aff4;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|