banner设置

src/views/baseInfo/bannerSetting.vue

 <template>
 	<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
 		<div class="filter-container" ref="filter-container">
-      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
-                 type="primary" icon="edit">添加
-      </el-button>
+			<el-button
+				class="filter-item"
+				style="margin-left: 10px;"
+				@click="handleCreate"
+				type="primary"
+				icon="edit"
+			>添加</el-button>
 		</div>
-    <el-table :key='tableKey' :data="list" border fit highlight-current-row
-              style="width: 100%">
-      <el-table-column
-        type="index"
-        align="center" label="序号" width="98">
-      </el-table-column>
+
+		<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%">
+			<el-table-column type="index" align="center" label="序号" width="98"></el-table-column>
 			<el-table-column width="160" align="center" label="标题">
 				<template scope="scope">
 					<span>{{scope.row.title}}</span>
@@ -29,7 +30,7 @@
 			</el-table-column>
 			<el-table-column width="250" align="center" label="banner图">
 				<template scope="scope">
-          <img :src="scope.row.cover" style="width:100%;max-height:100px;">
+					<img :src="scope.row.cover" style="width:100%;max-height:100px;" />
 				</template>
 			</el-table-column>
 			<el-table-column align="center" label="安卓跳转">
@@ -49,19 +50,33 @@
 			</el-table-column>
 			<el-table-column align="center" width="150" label="操作">
 				<template scope="scope">
-          <el-button size="small" class="el-button el-button--text el-button--small" @click="handleUpdate(scope.row)">编辑
-          </el-button>
-          <el-button class="el-button el-button--text el-button--small" style="color:red;" size="small" @click="deleteHandler(scope.row)">删除</el-button>
+					<el-button
+						size="small"
+						class="el-button el-button--text el-button--small"
+						@click="handleUpdate(scope.row)"
+					>编辑</el-button>
+					<el-button
+						class="el-button el-button--text el-button--small"
+						style="color:red;"
+						size="small"
+						@click="deleteHandler(scope.row)"
+					>删除</el-button>
 				</template>
 			</el-table-column>
 		</el-table>
 		<div v-show="!listLoading" class="pagination-container">
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                     :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
-                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+			<el-pagination
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				:current-page.sync="listQuery.pageNo"
+				:page-sizes="[10,20,30, 50]"
+				:page-size="listQuery.pageSize"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="total"
+			></el-pagination>
 		</div>
 		<!-- banner modal弹窗 -->
-    <el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible">
+		<el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible" @close="closePop">
 			<el-form :model="form" :rules="rules" ref="form" label-width="90px">
 				<el-form-item label="标题" prop="title">
 					<el-input v-model="form.title" placeholder="请输入标题"></el-input>
@@ -90,21 +105,28 @@
 						:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
 						:show-file-list="false"
 						:headers="getHeaderWithToken"
-            :on-success="handleAvatarSuccess">
-            <img v-if="$utils.isString(form.cover) && !$utils.isEmpty(form.cover)" :src="form.cover" style="width:500px;max-height:300px;">
-            <i v-else class="el-icon-plus avatar-uploader-icon" style="lineHeight:100px;width:500px;height: 100px;"></i>
+						:on-success="handleAvatarSuccess"
+					>
+						<img
+							v-if="$utils.isString(form.cover) && !$utils.isEmpty(form.cover)"
+							:src="form.cover"
+							style="width:500px;max-height:300px;"
+						/>
+						<i
+							v-else
+							class="el-icon-plus avatar-uploader-icon"
+							style="lineHeight:100px;width:500px;height: 100px;"
+						></i>
 					</el-upload>
 				</el-form-item>
-        <el-form-item>
-          建议尺寸：1080*630
-        </el-form-item>
-        <el-form-item label="安卓跳转链接">
+				<el-form-item>建议尺寸：1080*630</el-form-item>
+				<el-form-item label="安卓跳转链接" prop="url">
 					<el-input v-model="form.url" placeholder="请输入跳转链接"></el-input>
 				</el-form-item>
-        <el-form-item label="ios跳转链接">
+				<el-form-item label="ios跳转链接" prop="iosUrl">
 					<el-input v-model="form.iosUrl" placeholder="请输入ios跳转链接"></el-input>
 				</el-form-item>
-         <el-form-item label="小程序跳转链接">
+				<el-form-item label="小程序跳转链接" prop="appletUrl">
 					<el-input v-model="form.appletUrl" placeholder="请输入ios跳转链接"></el-input>
 				</el-form-item>
 			</el-form>
@@ -118,38 +140,30 @@
 </template>
 
 <script>
-  import 'static/css/uploadImg.css';// 引入图片上传组件对话框
+import 'static/css/uploadImg.css' // 引入图片上传组件对话框
 
-  import {
-    formatDate
-  } from 'utils/dateFormattor';
+import { formatDate } from 'utils/dateFormattor'
 
-  import {
+import {
 	toEast8Date,
 	deepCopyDate,
 	newEast8Date,
 	convertDate2Str
-  } from 'utils/dateUtils';
+} from 'utils/dateUtils'
 
-  import {
-    getBannerList,
-    editBanner,
-    addBanner,
-    delBanner
-  } from 'api/tourManage';
+import { getBannerList, editBanner, addBanner, delBanner } from 'api/tourManage'
 
-  import rsCode from '../../utils/rsCode';
+import rsCode from '../../utils/rsCode'
 
-  import {mapGetters} from 'vuex';
-  import {
-    getToken
-  } from '../../utils/auth';
+import { mapGetters } from 'vuex'
+import { getToken } from '../../utils/auth'
 
-  import Element1 from "../admin/menu/components/element";
-  import ElRow from "element-ui/packages/row/src/row";
-  import ElCol from "element-ui/packages/col/src/col";
+import Element1 from '../admin/menu/components/element'
+import ElRow from 'element-ui/packages/row/src/row'
+import ElCol from 'element-ui/packages/col/src/col'
+import {objDeepCopy} from "../../utils"
 
-  export default {
+export default {
 	name: 'tourManage',
 	components: {
 		ElCol,
@@ -158,19 +172,19 @@
 	},
 	data() {
 		return {
-        tableKey:0,
-        modalTitle: "创建",
+			tableKey: 0,
+			modalTitle: '创建',
 			BASE_API: process.env.BASE_API,
-        bannerDialogVisible: false,//添加、编辑弹框
+			bannerDialogVisible: false, //添加、编辑弹框
 			showLoadingBody: false,
 			form: {
-          title: "",
-          url: "",
-          cover:"",
-          type: "0",
-          location: "0",
-          iosUrl:'',
-          appletUrl:''
+				title: '',
+				url: '',
+				cover: '',
+				type: '0',
+				location: '0',
+				iosUrl: '',
+				appletUrl: null
 			},
 			listQuery: {
 				pageNo: 1,
@@ -183,14 +197,14 @@
 					message: '请输入标题',
 					trigger: 'blur'
 				},
-          type:{
+				type: {
 					type: 'string',
 					required: true,
 					message: '请选择banner类型',
 					trigger: 'blur'
 				},
-          location:{
-            type: "string",
+				location: {
+					type: 'string',
 					required: true,
 					message: '请选择位置类型',
 					trigger: 'blur'
@@ -198,167 +212,176 @@
 				cover: {
 					type: 'string',
 					required: true,
-            message: '请上传图片',
-          },
+					message: '请上传图片'
+				}
 			},
+			isRead: false,
 			list: null,
 			total: null,
 			listLoading: true,
 			inline: true,
-        banner_btn_edit: false,//编辑
-        banner_btn_add: false,//添加
+      banner_btn_edit: false, //编辑
+      tableInfo:{},
+			banner_btn_add: false //添加
 		}
 	},
 	created() {
-      this.getList();
-      this.banner_btn_edit = true;//this.elements['tourManage:btn_edit'];
-      this.banner_btn_add = true;//this.elements['tourManage:btn_add'];
+		this.getList()
+		this.banner_btn_edit = true //this.elements['tourManage:btn_edit'];
+		this.banner_btn_add = true //this.elements['tourManage:btn_add'];
 	},
 	computed: {
-      ...mapGetters([
-        'elements',
-        'belong2Type'
-      ]),
+		...mapGetters(['elements', 'belong2Type']),
 		getHeaderWithToken() {
-        return {Authorization: getToken()};
-      },
+			return { Authorization: getToken() }
+		}
 	},
 	methods: {
 		handleSizeChange(val) {
-        this.listQuery.pageSize = val;
-        this.getList();
+			this.listQuery.pageSize = val
+			this.getList()
 		},
 		handleCurrentChange(val) {
-        this.listQuery.pageNo = val;
-        this.getList();
+			this.listQuery.pageNo = val
+			this.getList()
 		},
 		/**
 		 * 添加
 		 * */
 		handleCreate() {
-        this.cleanForm();
-        this.modalTitle = '创建';
-        this.bannerDialogVisible = true;
+			this.cleanForm()
+			this.modalTitle = '创建'
+			this.bannerDialogVisible = true
+		},
+		closePop() {
+			this.cleanForm()
 		},
 		/**
 		 * 操作-编辑
 		 * */
 		handleUpdate(row) {
-        this.modalTitle = '编辑';
-        this.cleanForm();
-        this.form = row;
-        this.bannerDialogVisible = true;
+      console.log(objDeepCopy);
+      
+      this.modalTitle = '编辑'
+			this.form = objDeepCopy(row)
+			this.bannerDialogVisible = true
 		},
 		/**
 		 * 弹框-取消
 		 * */
-      cancelHandel(){
-        this.cleanForm();
-        this.bannerDialogVisible = false;
+		cancelHandel() {
+			this.cleanForm()
+			this.bannerDialogVisible = false
 		},
 		/**
 		 * 清空表单
 		 * */
 		cleanForm() {
 			this.form = {
-          title: "",
-          cover: "",
-          url:"",
-          type: "0",
-          location: "0",
-          iosUrl:'',
-          appletUrl:''
+				title: '',
+				cover: '',
+				url: '',
+				type: '0',
+				location: '0',
+				iosUrl: '',
+				appletUrl: null
 			}
 		},
 		showImgDialog(drivingLicensePath) {
-        this.licenceSrcUrl = this.getDrivingLicenseUrl(drivingLicensePath);
-        this.dialogForm4LicenceVisible = true;
+			this.licenceSrcUrl = this.getDrivingLicenseUrl(drivingLicensePath)
+			this.dialogForm4LicenceVisible = true
 		},
 		/**
 		 * 获取banner列表数据
 		 * */
 		getList() {
-        this.listLoading = true;
+			this.listLoading = true
 			getBannerList(this.listQuery).then(response => {
-          let totalCountRs = undefined;
-          let listRs = undefined;
-          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
-            listRs = response.data.data;
-            response.data.data.map(function(item){
-              item.type = item.type+"";
-              item.location = item.location?item.location+"": "0";
-              item.visible2 = false;
-            });
-            totalCountRs = response.data.totalCount;
+				let totalCountRs = undefined
+				let listRs = undefined
+				if (
+					!this.$utils.isEmpty(response.data.data) &&
+					this.$utils.isInteger(response.data.totalCount)
+				) {
+					listRs = response.data.data
+					response.data.data.map(function(item) {
+						item.type = item.type + ''
+						item.location = item.location ? item.location + '' : '0'
+						item.visible2 = false
+					})
+					totalCountRs = response.data.totalCount
 				}
-          this.listLoading = false;
-          this.list = listRs;
-          this.total = totalCountRs;
-        });
+				this.listLoading = false
+				this.list = listRs
+				this.total = totalCountRs
+			})
 		},
 		/**
 		 * 创建
 		 * */
 		create(formName) {
-        const set = this.$refs;
+			const set = this.$refs
 			set[formName].validate(valid => {
 				if (valid) {
-            addBanner(this.form)
-              .then(response => {
+					addBanner(this.form).then(response => {
 						if (response.status === 200) {
-                  this.bannerDialogVisible = false;
-                  this.getList();
+							this.bannerDialogVisible = false
+							this.getList()
 							this.$notify({
 								title: '成功',
 								message: '创建成功',
 								type: 'success',
 								duration: 2000
-                  });
+							})
 						} else {
 							this.$notify({
 								title: '失败',
-                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+								message: rsCode.msg[response.code]
+									? rsCode.msg[response.code]
+									: '操作失败！',
 								type: 'error',
 								duration: 2000
-                  });
+							})
 						}
-              });
+					})
 				} else {
-            return false;
+					return false
 				}
-        });
+			})
 		},
 		/**
 		 * 编辑-更新
 		 * */
 		update(formName) {
-        const set = this.$refs;
+			const set = this.$refs
 			set[formName].validate(valid => {
 				if (valid) {
 					editBanner(this.form).then(response => {
 						if (response.status === 200) {
-                this.bannerDialogVisible = false;
-                this.getList();
+							this.bannerDialogVisible = false
+							this.getList()
 							this.$notify({
 								title: '成功',
 								message: '编辑成功',
 								type: 'success',
 								duration: 2000
-                });
-                this.getList();
+							})
+							this.getList()
 						} else {
 							this.$notify({
 								title: '失败',
-                  message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+								message: rsCode.msg[response.code]
+									? rsCode.msg[response.code]
+									: '操作失败！',
 								type: 'error',
 								duration: 2000
-                });
+							})
 						}
-            });
+					})
 				} else {
-            return false;
+					return false
 				}
-        });
+			})
 		},
 		/**
 		 * 上传图片
@@ -366,21 +389,22 @@
 		 * @returns {boolean}
 		 */
 		beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif';
-        const isLt2M = file.size / 1024 / 1024 < 10;
+			const isJPG =
+				file.type === 'image/jpeg' || file.type === 'image/gif'
+			const isLt2M = file.size / 1024 / 1024 < 10
 
 			if (!isJPG) {
-          this.$message.error('上传图片只能是 JPG/GIF 格式!');
+				this.$message.error('上传图片只能是 JPG/GIF 格式!')
 			}
 			if (!isLt2M) {
-          this.$message.error('上传图片大小不能超过 10MB!');
+				this.$message.error('上传图片大小不能超过 10MB!')
 			}
-        this.showLoadingBody = true;
-        return isJPG && isLt2M;
+			this.showLoadingBody = true
+			return isJPG && isLt2M
 		},
 		handleAvatarSuccess(res, file) {
-        this.form.cover = res.data;
-        this.showLoadingBody = false;
+			this.form.cover = res.data
+			this.showLoadingBody = false
 		},
 		/**
 		 * 操作-删除
@@ -398,23 +422,28 @@
 							message: '删除成功',
 							type: 'success',
 							duration: 2000
-              });
-              this.getList();
+						})
+						this.getList()
 					} else {
 						this.$notify({
 							title: '删除失败',
-                message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+							message: rsCode.msg[response.code]
+								? rsCode.msg[response.code]
+								: '操作失败！',
 							type: 'error',
 							duration: 2000
-              });
+						})
 					}
-          });
+				})
 			})
 		},
 		getUrl(drivingLicensePath) {
-        return process.env.BASE_API +
-          '/vehicle/vehicleInfo/download/drivingLicense?realFileRelPath=' + encodeURI(drivingLicensePath);
-      },
+			return (
+				process.env.BASE_API +
+				'/vehicle/vehicleInfo/download/drivingLicense?realFileRelPath=' +
+				encodeURI(drivingLicensePath)
+			)
 		}
 	}
+}
 </script>