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

587 lines
13 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>
<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"
>
</el-table-column>
<el-table-column
prop="pls"
label="评论数"
width="120"
>
</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 label="操作" prop="id" width="300" 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 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>
</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: "",
artificerImg: "",
artificerName: "",
content: "",
opinion: "",
page: 1,
limit: 10,
dialogApproveFormVisible: false,
videoUrl: "",
dialogVideoFormVisible: false,
videoPlayer: null
};
},
methods: {
// 获取列表数据
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
}),
}).then(({data}) => {
if (data.code == 0) {
this.tableData = data.data;
console.log(this.tableData);
} else {
this.$notify({
title: "提示",
duration: 1800,
message: data.msg,
type: "warning",
});
}
this.tableDataLoading = false;
});
},
// 重置
handleClear() {
this.name = "";
this.status = "";
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(() => {});
},
//授权
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();
},
});
} else {
this.$message({
message: data.msg,
type: "warning",
duration: 1500,
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();
},
});
} 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>