sadjv3_admin/src/views/bl/shipinquan/shipinquan.vue

<template>
	<div>
		<!-- 列表 -->
		<div style="display: inline-block">
			<span>状态：</span>
			<el-select clearable v-model="status" style="width: 150px;">
				<el-option value="" label="全部"></el-option>
				<el-option value="0" label="待审批"></el-option>
				<el-option value="1" label="已通过"></el-option>
				<el-option value="2" label="已拒绝"></el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<div style="margin-left:10px;display: inline-block">
			<span>姓名：</span>
			<el-input style="width: 200px" placeholder="请输入技师姓名" v-model="name">
			</el-input>
		</div>
		<div style="display: inline-block">
			<span>置顶：</span>
			<el-select clearable v-model="isTop" style="width: 150px;">
				<el-option value="" label="全部"></el-option>
				<el-option value="1" label="已置顶"></el-option>
				<el-option value="0" label="未置顶"></el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<el-button style="margin-left: 10px" size="mini" type="primary" icon="document" @click="handleSelect">查询
		</el-button>
		<el-button style="margin-left: 10px" size="mini" type="primary" icon="document" @click="handleClear">重置
		</el-button>
		<el-table v-loading="tableDataLoading" :data="tableData.list">
			<el-table-column prop="id" label="编号" width="80">
			</el-table-column>
			<el-table-column prop="artificerImg" label="头像" width="80">
				<template slot-scope="scope">
					<img v-if="scope.row.artificerImg && scope.row.artificerImg != ''" :src="scope.row.artificerImg"
						width="40" height="40" />
					<span v-else>暂无图片</span>
				</template>
			</el-table-column>
			<el-table-column prop="artificerName" label="姓名" width="120">
			</el-table-column>
			<el-table-column prop="picPath" label="视频" width="120">
				<template slot-scope="scope">
					<img v-if="scope.row.picPath && scope.row.picPath != ''" :src="scope.row.picPath" width="120"
						height="120" @click="showVideo(scope.row)" />
					<span v-else>暂无视频</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="申请时间" width="150">
			</el-table-column>
			<el-table-column prop="content" label="内容" width="220">
			</el-table-column>
			<el-table-column prop="dzs" label="点赞数" width="120">
				<template slot-scope="scope">
					<el-button type="text" @click="setDzs(scope.row)">{{ scope.row.dzs }}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="pls" label="评论数" width="120">
				<template slot-scope="scope">
					<el-button type="text" @click="handlePl(scope.row)">{{ scope.row.pls }}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.status == 0">待审批</span>
					<span v-if="scope.row.status == 1">已通过</span>
					<span v-if="scope.row.status == 2">已拒绝</span>
				</template>
			</el-table-column>
			<el-table-column prop="opinion" label="意见" width="150">
			</el-table-column>
			<el-table-column prop="topSort" label="置顶" >
				<template slot-scope="scope">
					<span v-if="scope.row.topSort == 0" style="color:#909399">未置顶</span>
					<span v-else style="color:#67C23A">已置顶（{{scope.row.topSort}}）</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" prop="id" width="230" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="scope.row.status == 0" size="mini" type="primary" style="margin: 5px"
						@click="handleDelete(scope.row)">删除
					</el-button>
					<el-button v-if="scope.row.status == 0" size="mini" type="primary" style="margin: 5px"
						@click="handleApply(scope.row)">审批
					</el-button>
					<el-button size="mini" type="primary"
						style="margin: 5px" @click="handleToTop(scope.row,true)">
						{{ scope.row.topSort == 0 ? '置顶' : '置顶顺序'}}
					</el-button>
					<el-button v-if="scope.row.topSort > 0 " size="mini" type="primary"
						style="margin: 5px" @click="handleToTop(scope.row,false)">取消置顶
					</el-button>
					<el-button v-if="scope.row.status == 1 || scope.row.status == 2" size="mini" type="primary"
						style="margin: 5px" @click="handleCancelApply(scope.row)">取消审批
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center; margin-top: 10px">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
			</el-pagination>
		</div>
		<!-- 审批 -->
		<el-dialog :title="titles" :visible.sync="dialogApproveFormVisible" center @close="closeApply">
			<div style="margin-bottom: 10px; display: flex">
				<span style="width: 200px; display: inline-block; text-align: right">头像：</span>
				<div style="
		              width: 148px;
		              height: 148px;
		              border: 1px dashed #c0ccda;
		              border-radius: 6px;
		              text-align: center;
		              line-height: 148px;
		            ">
					<img :src="artificerImg" class="avatar" style="border-radius: 6px; width: 148px; height: 148px" />
				</div>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">姓名：</span>
				<el-input style="width: 50%" v-model="artificerName" :disabled="true"></el-input>
			</div>

			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">内容：</span>
				<el-input style="width: 50%" v-model="content" type="textarea" :rows="4" :disabled="true">
				</el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">状态：</span>
				<el-radio-group v-model="status">
					<el-radio :label="1">通过</el-radio>
					<el-radio :label="2">拒绝</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">审批意见：</span>
				<el-input style="width: 50%" v-model="opinion" type="textarea" :rows="4" placeholder="请输入审批意见">
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogApproveFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleApprove()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 视频 -->
		<el-dialog :title="titles" :visible.sync="dialogVideoFormVisible" center @close="closeVideo">
			<div style="margin-bottom: 10px; display: flex;justify-content: center;">
				<video ref="videoRef" height="500" controls></video>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVideoFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>
		<!-- 评论管理 -->
		<el-dialog :title="'评论管理'" :visible.sync="plDialogVisible" @close="changePlDialog(false)">
			<el-table height="500" :data="plTableData" border style="width: 100%;" >
				<el-table-column prop="userPhoto" label="头像" width="80">
					<template slot-scope="scope">
						<img v-if="scope.row.userPhoto && scope.row.userPhoto != ''" :src="scope.row.userPhoto"
							width="40" height="40" />
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="userName" label="姓名" width="120">
				</el-table-column>
				<el-table-column prop="createTime" label="日期" width="170">
				</el-table-column>
				<el-table-column prop="content" label="内容" >
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="deletePl(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px">
				<el-row>
					<el-col :span="22">
						<el-input type="textarea" placeholder="请输入评价..." v-model="plContent"></el-input>
					</el-col>
					<el-col :span="1">
						<el-button type="primary" @click="releasePl">发 布</el-button>
					</el-col>
				</el-row>
			</div>
		</el-dialog>
	</div>
</template>

<script>

export default {
	data() {
		return {
			statusData:[{id:0,value:'待授权'},{id:1,value:'已授权'},{id:2,value:'已驳回'}],
			apiUrl: "",
			titles: "",
			tableDataLoading: false,
			tableData: {},
			id: "",
			name: "",
			status: "",
			isTop:"",
			artificerImg: "",
			artificerName: "",
			content: "",
			opinion: "",
			page: 1,
			limit: 10,
			dialogApproveFormVisible: false,
			videoUrl: "",
			dialogVideoFormVisible: false,
			videoPlayer: null,
			plDialogVisible:false,//评论管理开关
			plTableData: [],//评论管理列表数据
			plContent:'',//评论内容，只在评论管理弹窗中使用
			pl_shipinquanId:'',//当前操作的视频的id
		};
	},
	methods: {
		//发布评论
		releasePl(){
			this.$http({
				url: this.$http.adornUrl("/app/shipinquan/addContent"),
				method: "post",
				params: {
					createBy: null,
					content: this.plContent,
					shipinquanId: this.pl_shipinquanId,
				}
			}).then(({ data }) => {
				if (data.code == 0) {
					this.handlePl({ id: this.pl_shipinquanId })
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			}).catch(() => {
				this.$message({
					message: data.msg,
					type: "warning",
					duration: 1500,
					onClose: () => {
					},
				});
			});
		},
		//关闭评论管理
		changePlDialog(sign){
			this.plDialogVisible = sign
			if(!sign){
				//刷新列表
				this.handleSelect();
			}
		},
		//删除评论
		deletePl(row){
			this.$http({
				url: this.$http.adornUrl("/bl/shipinquanPinglun/delete"),
				method: "post",
				params: {
					id: row.id,
					shipinquanId:this.pl_shipinquanId
				}
			}).then(({ data }) => {
				this.handlePl({ id: this.pl_shipinquanId })
			}).catch(() => {
				this.$message({
					message: data.msg,
					type: "warning",
					duration: 1500,
					onClose: () => {
					},
				});
			});
		},
		//打开评论
		handlePl(row) {
			this.plContent = ''
			this.pl_shipinquanId = ''
			this.$http({
				url: this.$http.adornUrl("/app/shipinquan/contentlist"),
				method: "get",
				params: {
					page: 1,
					limit: 310,
					shipinquanId: row.id
				}
			}).then(({ data }) => {
				if(data.code == 0) this.plTableData = data.data.records
				this.pl_shipinquanId = row.id
				this.changePlDialog(true)
			}).catch(() => {

			});
		},
		//设置点赞数
		setDzs(row) {
			this.$prompt('当前为：' + row.dzs, '设置点赞数', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^(0|[1-9]\d*)$/,
				inputErrorMessage: '请输入正整数'
			}).then(({ value }) => {
				this.$http({
					url: this.$http.adornUrl("bl/shipinquan/modify"),
					method: "post",
					params: this.$http.adornParams({
						id: row.id,
						dzs: value,
					}),
				}).then(({ data }) => {
					if (data.code == 0) {
						this.$message({
							message: "设置成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.handleSelect();
							},
						});
					} else {
						this.$message({
							message: data.msg,
							type: "warning",
							duration: 1500,
							onClose: () => {
							},
						});
					}
				});
			}).catch(() => {
				
			});
		},
		// 获取列表数据
		handleSelect() {
			this.tableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("bl/shipinquan/list"),
				method: "get",
				params: this.$http.adornParams({
					page: this.page,
					limit: this.limit,
					artificerName: this.name,
					status: this.status,
					isTop:this.isTop
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.tableData = data.data;
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.tableDataLoading = false;
			});
		},
		// 重置
		handleClear() {
			this.name = "";
			this.status = "";
			this.isTop = "";
			this.page = 1;
			this.handleSelect();
		},
		//分页
		handleSizeChange(val) {
			this.limit = val;
			this.handleSelect();
		},
		//翻页
		handleCurrentChange(val) {
			this.page = val;
			this.handleSelect();
		},
		//打开审批弹窗
		handleApply(row) {
			this.titles = "审批";
			this.id = row.id;
			this.artificerImg = row.artificerImg;
			this.artificerName = row.artificerName;
			this.content = row.content;
			this.status = 1;
			this.dialogApproveFormVisible = true;
		},
		//删除
		handleDelete(row){
			this.$confirm(`确定删除此条信息?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				let id = row.id;
				this.$http({
					url: this.$http.adornUrl("bl/shipinquan/delete"),
					method: "post",
					params: this.$http.adornParams({
						id: id
					}),
				}).then(({data}) => {
					if (data.code == 0) {
						this.clearDatas();
						this.$message({
							message: "删除成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.handleSelect();
							},
						});
					} else {
						this.$message({
							message: data.msg,
							type: "warning",
							duration: 1500,
							onClose: () => {
							},
						});
					}
				});
			}).catch(() => {});
		},
		//更新菜单提示状态
		dataSelectSpq() {
			this.$http({
				url: this.$http.adornUrl('/bl/shipinquan/dataSelectSpq'),
				method: 'get',
			}).then(({ data }) => {
				if (data.data >= 0) {
					this.$cookie.set('numberSpq', data.data)
				}
			})
		},
		//授权
		handleApprove() {
			if (this.status == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请选择审批状态",
					type: "warning",
				});
				return;
			}
			if (this.status == '2') {
				if (this.opinion == "") {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: "请输入审批意见",
						type: "warning",
					});
					return;
				}
			}
			this.$http({
				url: this.$http.adornUrl("bl/shipinquan/approve"),
				method: "post",
				params: this.$http.adornParams({
					id: this.id,
					opinion: this.opinion,
					status: this.status,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.dialogApproveFormVisible = false;
					this.clearDatas();
					this.$message({
						message: "审核成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelect();
							this.dataSelectSpq();
						},
					});
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},
		//取消置顶 isTop true/false
		handleToTop(row,isTop){
			if (isTop) {
				this.$prompt('请输入置顶排序，值越大排名越靠前：', '置顶设置', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^(0|[1-9]\d*)$/,
					inputErrorMessage: '请输入正整数'
				}).then(({ value }) => {
					this.$http({
						url: this.$http.adornUrl("bl/shipinquan/modify"),
						method: "post",
						params: this.$http.adornParams({
							id: row.id,
							topSort: value,
						}),
					}).then(({ data }) => {
						if (data.code == 0) {
							this.$message({
								message: "置顶成功",
								type: "success",
								onClose: () => {
									this.handleSelect();
								},
							});
						} else {
							this.$message({
								message: data.msg,
								type: "warning",
								onClose: () => {
								},
							});
						}
					});
				}).catch(() => {

				});
			} else {
				//取消置顶操作
				this.$http({
						url: this.$http.adornUrl("bl/shipinquan/modify"),
						method: "post",
						params: this.$http.adornParams({
							id: row.id,
							topSort: 0,
						}),
					}).then(({ data }) => {
						if (data.code == 0) {
							this.$message({
								message: "取消置顶成功",
								type: "success",
								onClose: () => {
									this.handleSelect();
								},
							});
						} else {
							this.$message({
								message: data.msg,
								type: "warning",
								onClose: () => {
								},
							});
						}
					});
			}
		},
		//取消授权
		handleCancelApply(row){
			let id = row.id;
			let userId = row.userId;
			this.$http({
				url: this.$http.adornUrl("bl/shipinquan/approve"),
				method: "post",
				params: this.$http.adornParams({
					id: id,
					opinion: '系统取消授权',
					status: '0'
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.clearDatas();
					this.$message({
						message: "取消成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelect();
							this.dataSelectSpq();
						},
					});
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},
		closeApply(){
			this.dialogApproveFormVisible= false;
			this.titles = "";
		},
		clearDatas(){
			this.apiUrl="";
			this.tableDataLoading= false;
			this.id= "";
			this.name= "";
			this.status= "";
			this.artificerImg= "";
			this.artificerName= "";
			this.content= "";
			this.opinion= "";
			this.page= 1;
			this.limit= 10;
			this.dialogApproveFormVisible= false;
		},
		showVideo(row){
			this.dialogVideoFormVisible= true;
			this.titles = "视频";
			this.$nextTick(()=>{
				this.videoUrl = "";
				const video = this.$refs.videoRef;
				video.src = row.filePath;
				video.load();
				video.play();
			})
		},
		closeVideo(){
			this.dialogVideoFormVisible= false;
			this.filePath = "";
			this.titles = "";
			this.videoUrl = "";
		}
	},
	mounted() {
		this.handleSelect();
		//this.videoPlayer = this.$refs.videoRef;
	},
};
</script>

<style>
.customWidth {
	width: 80% !important;
}
.el-dialog--center {
	text-align: center;
	margin-top: 1vh !important;
}

.el-tooltip__popper {
	width: 200px;
	padding: 10px;
	color: #000 !important;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
	background-color: #fff !important;
}

.adver_main.box a {
	display: flex;
	justify-content: center;
	height: 150px;
	line-height: 150px;
	text-decoration: none;
}

.bannerManin span {
	display: inline-block;
	margin-left: 5px;
}

.bannerManin img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.bannerbtn a {
	flex: 1;
	text-align: center;
	color: #3e8ef7 !important;
	text-decoration: none;
}

.imgs {
	position: relative;
	border-radius: 6px;
	width: 148px;
	height: 148px;
	margin-right: 10px;
	display: inline-block;
}

.dels {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.dels .el-icon-delete {
	line-height: 148px;
	padding-left: 58px;
	font-size: 25px;
	color: #fff;
}

.imgs:hover .dels {
	width: 100%;
	height: 100%;
	background: #000;
	display: block;
	opacity: 0.5;
}

.bqList {
	padding: 4px 14px;
	margin: 4px;
	border: 1px solid #efefef;
	font-size: 12px;
	color: #999;
	border-radius: 4px;
	margin-right: 15px;
}

.delss {
	display: none;
	position: relative;
}

.delss .el-icon-delete {
	position: absolute;
	top: 0;
}

.bqList:hover .delss {
	display: initial;
	opacity: 0.5;
}

.tj {
	padding: 6px !important;
	margin: 4px;
	font-size: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
</style>