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

751 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>