推送

src/views/appManagement/pushManagement/index.vue

@@ -9,23 +9,29 @@
 						</el-form-item>
 					</el-col>
 					<el-col :span="4">
-              <el-select class="filter-item" v-model="listQuery.type" placeholder="请选择推送方式" @change="handleTypeChange">
+						<el-select
+							class="filter-item"
+							v-model="listQuery.type"
+							placeholder="请选择推送方式"
+							@change="handleTypeChange"
+						>
 							<el-option :key="null" label="全部" :value="null"></el-option>
 							<el-option :key="1" label="手动推送" :value="1"></el-option>
 							<el-option :key="2" label="系统自动推送" :value="2"></el-option>
 						</el-select>
 					</el-col>
 					<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
-          <el-button class="filter-item" type="primary" style="float: right;" @click="handleCreate">+ 添加通知</el-button>
+					<el-button
+						class="filter-item"
+						type="primary"
+						style="float: right;"
+						@click="handleCreate"
+					>+ 添加通知</el-button>
 				</el-row>
 			</el-form>
 		</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="200" align="center" label="标题">
 				<template scope="scope">
 					<span>{{scope.row.title}}</span>
@@ -49,52 +55,97 @@
 			</el-table-column>
 			<el-table-column align="center" width="150" label="操作" fixed="right">
 				<template scope="scope">
-          <el-button size="small" class="el-button el-button--text el-button--small" @click="handleDown(scope.row)" v-show="scope.row.type==1">立即推送</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" size="small" @click="deleteHandler(scope.row)" style="color:red;">删除</el-button>
+					<el-button
+						size="small"
+						class="el-button el-button--text el-button--small"
+						@click="handleDown(scope.row)"
+						v-show="scope.row.type==1"
+					>立即推送</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"
+						size="small"
+						@click="deleteHandler(scope.row)"
+						style="color:red;"
+					>删除</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.page" :page-sizes="[10,20,30,40,50]" :page-size="listQuery.limit"
-                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+			<el-pagination
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				:current-page.sync="listQuery.page"
+				:page-sizes="[10,20,30,40,50]"
+				:page-size="listQuery.limit"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="total"
+			></el-pagination>
 		</div>
 		<!-- banner modal弹窗 -->
 		<el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible">
 			<el-form :model="form" :rules="rules" ref="form" label-width="90px">
-        <el-form-item label="推送方式" >
+				<el-form-item label="推送方式">
 					<!--<el-radio-group size="large" v-model="form.type">-->
 					<!--<el-radio-button style="margin-bottom: 10px;" label="0">安卓</el-radio-button>-->
 					<!--<el-radio-button style="margin-bottom: 10px;" label="1">iOS</el-radio-button>-->
 					<!--</el-radio-group>-->
 					<el-radio-group v-model="form.type" size="medium">
-            <el-radio-button label="1" >手工推送</el-radio-button>
+						<el-radio-button label="1">手工推送</el-radio-button>
 						<el-radio-button label="2">系统自动推送</el-radio-button>
 					</el-radio-group>
 				</el-form-item>
-        <el-form-item label="发送类型">
-          <el-select class="filter-item" v-model="form.sendType" placeholder="请选择发送类型" @change="handleSendType">
-            <el-option v-for="(val, key, index)   in sendList " :key="val.code"  :label="val.value" :value="val.code"
+				<el-form-item label="发送类型" v-show="form.type == 2">
+					<el-select
+						class="filter-item"
+						v-model="form.sendType"
+						placeholder="请选择发送类型"
+						@change="handleSendType"
+					>
+						<el-option
+							v-for="(val, key, index)   in sendList "
+							:key="val.code"
+							:label="val.value"
+							:value="val.code"
 						></el-option>
 					</el-select>
 				</el-form-item>
 				<el-form-item label="跳转页面">
-            <el-select class="filter-item" v-model="form.jumpType" placeholder="请选择跳转类型" @change="handleJumpType">
-              <el-option v-for="(val, key, index)   in jumpList " :key="val.code"  :label="val.value" :value="val.code"
+					<el-select
+						class="filter-item"
+						v-model="form.jumpType"
+						placeholder="请选择跳转类型"
+						@change="handleJumpType"
+					>
+						<el-option
+							v-for="(val, key, index)   in jumpList "
+							:key="val.code"
+							:label="val.value"
+							:value="val.code"
 						></el-option>
 					</el-select>
 				</el-form-item>
+				<el-form-item label="外链地址" :prop="isUrl == true ? 'url' : ''" v-show="isUrl">
+					<el-input v-model="form.url" placeholder="请输入标题"></el-input>
+				</el-form-item>
+				<el-form-item label="外链描述" :prop="isUrl==true ? 'info' : ''" v-show="isUrl">
+					<el-input v-model="form.info" placeholder="请输入标题"></el-input>
+				</el-form-item>
 				<el-form-item label="标题" prop="title">
 					<el-input v-model="form.title" placeholder="请输入标题"></el-input>
 				</el-form-item>
+
 				<el-form-item label="描述" prop="alert">
 					<el-input v-model="form.alert" placeholder="请输入描述"></el-input>
 				</el-form-item>
-        <el-form-item label="样式" >
+				<el-form-item label="样式">
 					<el-radio-group v-model="form.style" size="medium" @change="handleRadio">
 						<el-radio-button label="1">标准样式</el-radio-button>
-            <el-radio-button label="3" >大图</el-radio-button>
+						<el-radio-button label="3">大图</el-radio-button>
 						<el-radio-button label="2">自定义样式</el-radio-button>
 					</el-radio-group>
 				</el-form-item>
@@ -104,9 +155,18 @@
 						: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.bigPicPath) && !$utils.isEmpty(form.bigPicPath)" :src="form.bigPicPath" style="width:200px;max-height:200px;">
-            <i v-else class="el-icon-plus avatar-uploader-icon" style="lineHeight:100px;width:100px;height: 100px;vertical-align: middle;"></i>
+						:on-success="handleAvatarSuccess"
+					>
+						<img
+							v-if="$utils.isString(form.bigPicPath) && !$utils.isEmpty(form.bigPicPath)"
+							:src="form.bigPicPath"
+							style="width:200px;max-height:200px;"
+						/>
+						<i
+							v-else
+							class="el-icon-plus avatar-uploader-icon"
+							style="lineHeight:100px;width:100px;height: 100px;vertical-align: middle;"
+						></i>
 					</el-upload>
 				</el-form-item>
 			</el-form>
@@ -120,22 +180,20 @@
 </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,
 	timestamp2Date,
 	getYMD_hm
-  } from 'utils/dateUtils';
+} from 'utils/dateUtils'
 
-  import {
+import {
 	getPushList,
 	getSendTypeList,
 	getJumpTypeList,
@@ -144,20 +202,18 @@
 	editObj,
 	delObj,
 	pushStype
-  } from 'src/api/appManagement/pushManagement';
+} from 'src/api/appManagement/pushManagement'
 
-  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'
 
-  export default {
+export default {
 	name: 'pushManagement',
 	components: {
 		ElCol,
@@ -166,32 +222,36 @@
 	},
 	data() {
 		return {
-        showPic:false,
-        tableKey:0,
-        jumpList:undefined,
-        sendList:undefined,
-        modalTitle: "创建",
+			showPic: false,
+			tableKey: 0,
+			jumpList: undefined,
+			sendList: undefined,
+			modalTitle: '创建',
 			BASE_API: process.env.BASE_API,
-        bannerDialogVisible: false,//添加、编辑弹框
+			bannerDialogVisible: false, //添加、编辑弹框
 			showLoadingBody: false,
+			isUrl: false,
 			form: {
-          type:1,
-          title:'',
-          alert:'',
-          style:1,
-          bigPicPath:'',
-          sendType:0,
-          jumpType:0,
+				type: 1,
+				title: '',
+				alert: '',
+				style: 1,
+				bigPicPath: '',
+				sendType: 0,
+				jumpType: 0,
+				url: '',
+				info: '',
+				urlJson: {}
 			},
 			listQuery: {
 				page: 1,
 				limit: 10,
-          title: '',//标题
-          type:undefined
+				title: '', //标题
+				type: undefined
 			},
 			pushQuery: {
 				id: 0,
-          userIds: '',
+				userIds: ''
 			},
 			rules: {
 				title: {
@@ -203,17 +263,29 @@
 				alert: {
 					type: 'string',
 					required: true,
-            message: '请输入描述',
+					message: '请输入描述'
 				},
+				url: {
+					type: 'string',
+					required: true,
+					message: '请输入外链地址'
+				},
+				info: {
+					type: 'string',
+					required: true,
+					message: '请输入外链描述'
+				}
 			},
 			pickerOptionsStart: {
 				disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
+					return time.getTime() < Date.now() - 8.64e7
 				}
 			},
 			pickerOptionsEnd: {
 				disabledDate: time => {
-                const beginDateVal = new Date(this.form.starTimeStr).getTime()
+					const beginDateVal = new Date(
+						this.form.starTimeStr
+					).getTime()
 					if (beginDateVal) {
 						return time.getTime() < beginDateVal - 8.64e7
 					}
@@ -222,208 +294,238 @@
 			list: null,
 			total: null,
 			listLoading: true,
-        inline: true,
+			inline: true
 		}
 	},
 	created() {
-      this.getList();
-      this.getSendTypeList();
-      this.getJumpTypeList();
+		this.getList()
+		this.getSendTypeList()
+		this.getJumpTypeList()
 	},
 	computed: {
-      ...mapGetters([
-        'elements',
-        'belong2Type'
-      ]),
+		...mapGetters(['elements', 'belong2Type']),
 		getHeaderWithToken() {
-        return {Authorization: getToken()};
-      },
+			return { Authorization: getToken() }
+		}
 	},
 	methods: {
 		handleFilter() {
-        this.listQuery.page = 1;
+			this.listQuery.page = 1
 			this.$refs.queryForm.validate(valid => {
 				if (valid) {
-            this.getList();
+					this.getList()
 				} else {
-            return false;
+					return false
 				}
-        });
+			})
 		},
-      getSendTypeList(){
+		getSendTypeList() {
 			getSendTypeList().then(response => {
 				this.sendList = response.data
-        });
+			})
 		},
-      getJumpTypeList(){
+		getJumpTypeList() {
 			getJumpTypeList().then(response => {
 				this.jumpList = response.data
-        });
+			})
 		},
 		handleSendType(item) {
-        this.form.sendType = item;
+			this.form.sendType = item
 		},
 		handleJumpType(item) {
-        this.form.jumpType = item;
+			this.form.jumpType = item
+			this.isUrl = item == 6 ? true : false
 		},
 		handleRadio(item) {
-        if(item == 3) {
-          this.showPic = true;
+			if (item == 3) {
+				this.showPic = true
 			} else {
-          this.showPic = false;
+				this.showPic = false
 			}
 		},
 		handleTypeChange(item) {
-        this.listQuery.type = item;
+			this.listQuery.type = item
 		},
 		handleSizeChange(val) {
-        this.listQuery.limit = val;
-        this.getList();
+			this.listQuery.limit = val
+			this.getList()
 		},
 		handleCurrentChange(val) {
-        this.listQuery.page = val;
-        this.getList();
+			this.listQuery.page = val
+			this.getList()
 		},
 		/**
 		 * 添加
 		 * */
 		handleCreate() {
-        this.cleanForm();
-        this.modalTitle = '创建';
-        this.bannerDialogVisible = true;
+			this.cleanForm()
+			this.modalTitle = '创建'
+			this.bannerDialogVisible = true
 		},
 		/**
 		 * 操作-编辑
 		 * */
 		handleUpdate(row) {
-        this.modalTitle = '编辑';
-        this.cleanForm();
+			this.modalTitle = '编辑'
+			this.cleanForm()
 			getObj(row.id).then(response => {
-          var item = response.data;
-          item.up_name = item.timeType==0?'不限':item.timeType==1?'自定义':'';
-          if(item.startTime>0&&item.timeType==1){
-            item.starTimeStr = getYMD_hm(item.startTime);
-          }else{
-            item.starTimeStr = '';
+				var item = response.data
+				item.up_name =
+					item.timeType == 0
+						? '不限'
+						: item.timeType == 1
+						? '自定义'
+						: ''
+				if (item.startTime > 0 && item.timeType == 1) {
+					item.starTimeStr = getYMD_hm(item.startTime)
+				} else {
+					item.starTimeStr = ''
 				}
-          if(item.endTime>0&&item.timeType==1){
-            item.endTimeStr = getYMD_hm(item.endTime);
+				if (item.endTime > 0 && item.timeType == 1) {
+					item.endTimeStr = getYMD_hm(item.endTime)
+				} else {
+					item.endTimeStr = ''
+				}
+        this.form = item
+        if(item.jumpType == 6){
+          this.isUrl = true
         }else{
-            item.endTimeStr = '';
+           this.isUrl = false
+        }
+				if (!!item.urlJson) {
+					this.form.url = JSON.parse(item.urlJson).url
+					this.form.info = JSON.parse(item.urlJson).title
 				}
-          this.form = item;
-          this.bannerDialogVisible = true;
-        })
 
+				this.bannerDialogVisible = true
+			})
 		},
 		/**
 		 * 弹框-取消
 		 * */
-      cancelHandel(){
-        this.cleanForm();
-        this.bannerDialogVisible = false;
+		cancelHandel() {
+			this.cleanForm()
+			this.bannerDialogVisible = false
 		},
 		/**
 		 * 清空表单
 		 * */
 		cleanForm() {
 			this.form = {
-          type:1,
-          title:'',
-          alert:'',
-          style:1,
-          bigPicPath:'',
-          sendType:0,
-          jumpType:0,
+				type: 1,
+				title: '',
+				alert: '',
+				style: 1,
+				bigPicPath: '',
+				sendType: 0,
+				jumpType: 0,
+				url: '',
+				info: '',
+				urlJson: {}
 			}
 		},
 		/**
 		 * 获取banner列表数据
 		 * */
 		getList() {
-        this.listLoading = true;
+			this.listLoading = true
 			getPushList(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.crtTimeStr = timestamp2Date(item.crtTime);
-              item.alerts = item.alert;
-              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.crtTimeStr = timestamp2Date(item.crtTime)
+						item.alerts = item.alert
+						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) {
-        let that = this;
-        const set = this.$refs;
+			let that = this
+			const set = this.$refs
 			set[formName].validate(valid => {
 				if (valid) {
+					this.form.urlJson = {
+						url: this.form.url,
+						title: this.form.title
+					}
+					this.form.urlJson = JSON.stringify(this.form.urlJson)
 					addObj(this.form).then(response => {
 						if (response.status === 200) {
-                  this.bannerDialogVisible = false;
+							this.bannerDialogVisible = false
 							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
 				}
-        });
+			})
 		},
 		/**
 		 * 编辑-更新
 		 * */
 		update(formName) {
-        let that = this;
-        const set = this.$refs;
+			let that = this
+			const set = this.$refs
 			set[formName].validate(valid => {
 				if (valid) {
-            console.log(this.form);
-            
+					this.form.urlJson = {
+						url: this.form.url,
+						title: this.form.title
+          }
+          	this.form.urlJson = JSON.stringify(this.form.urlJson)
 					editObj(this.form).then(response => {
 						if (response.status === 200) {
-                this.bannerDialogVisible = false;
+							this.bannerDialogVisible = false
 							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
 				}
-        });
+			})
 		},
 		/**
 		 * 上传图片
@@ -431,21 +533,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.bigPicPath = res.data;
-        this.showLoadingBody = false;
+			this.form.bigPicPath = res.data
+			this.showLoadingBody = false
 		},
 		/**
 		 * 操作-删除
@@ -463,19 +566,20 @@
 							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
-              });
+						})
 					}
-          });
 				})
-
+			})
 		},
 		/**
 		 * 操作-推送
@@ -486,7 +590,7 @@
 				cancelButtonText: '取消',
 				type: 'warning'
 			}).then(() => {
-           this.pushQuery.id=row.id
+				this.pushQuery.id = row.id
 				pushStype(this.pushQuery).then(response => {
 					if (response.status === 200) {
 						this.$notify({
@@ -494,20 +598,21 @@
 							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
-              });
+						})
 					}
-          });
 				})
-
-      },
+			})
 		}
 	}
+}
 </script>