|
|
@@ -13,14 +13,11 @@
|
|
|
:header-cell-style="header_cell_style">
|
|
|
<el-table-column fixed="left" type="index" label="序号" align="center" width="80">
|
|
|
</el-table-column>
|
|
|
- <el-table-column fixed="left" label="状态" align="center" width="100">
|
|
|
+ <el-table-column fixed="left" label="流程" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <!-- <span v-if="scope.row.status == 1" style="color: #666;">正在审批</span>
|
|
|
- <span v-else-if="scope.row.status == 2" style="color: #56AA2E;">审批通过</span>
|
|
|
- <span v-else-if="scope.row.status == 3" style="color: #F9273F;">拒绝</span> -->
|
|
|
- <span v-if="scope.$index == 0" style="color: #666;">正在审批</span>
|
|
|
- <span v-else-if="scope.$index == 1" style="color: #56AA2E;">审批通过</span>
|
|
|
- <span v-else-if="scope.$index == 2" style="color: #F9273F;">拒绝</span>
|
|
|
+ <span v-if="scope.row.type == 1" style="color: rgba(9, 101, 98, 1);">民宿信息维护</span>
|
|
|
+ <span v-else-if="scope.row.type == 2" style="color: rgba(9, 101, 98, 1);">投诉</span>
|
|
|
+ <span v-else-if="scope.row.type == 3" style="color: rgba(9, 101, 98, 1);">推文</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="发起人" align="center">
|
|
|
@@ -28,27 +25,12 @@
|
|
|
<span>{{ scope.row.createName }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="评价内容" align="center">
|
|
|
+ <el-table-column label="发起时间" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
- <span>{{ scope.row.remark }}</span>
|
|
|
+ <span>{{ scope.row.createDate }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="审批时间" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.workflowDate }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="审批人" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.workflowName }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="审批备注" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.workflowRemark }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" width="120">
|
|
|
+ <el-table-column fixed="right" label="操作" align="center" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button @click="handleClickZhuban(scope.$index, scope.row)" type="text" size="small">主办</el-button>
|
|
|
</template>
|
|
|
@@ -63,31 +45,71 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <!-- 民宿信息维护 -->
|
|
|
- <el-dialog title="民宿信息维护" custom-class="acceptance-class" :visible.sync="dialogInfoMinsuVisible" :close-on-click-modal="false"
|
|
|
+ <!-- 我的代办/主办 -->
|
|
|
+ <el-dialog title="我的代办/主办" custom-class="acceptance-class" :visible.sync="dialogInfoMinsuVisible" :close-on-click-modal="false"
|
|
|
:close-on-press-escape="false" @close="dialogInfoMinsuVisible = false">
|
|
|
- <h3 style="margin: 20px 0;">民宿图片：</h3>
|
|
|
- <div class="imgs">
|
|
|
- <div v-for="(image, index) in complaint.fileInfos" :key="index">
|
|
|
- <img :src="image.url" v-if="!image.url.endsWith('.mp4')" style="margin: 0 2px; border-radius: 5px;" alt=""
|
|
|
- @click="handlePictureCardPreview(image.url)" height="80px" width="80px" />
|
|
|
+ <div style="display: flex; align-items: flex-start;">
|
|
|
+ <div style="color: #999; font-weight: bold; width: 80px; text-align: right;">民宿图片</div>
|
|
|
+ <div style="margin: 0 10px; width: 230px;">
|
|
|
+ <div style="color: #000; margin: 0 0 10px 0; text-align: center;">封面图：</div>
|
|
|
+ <div style="text-align: center; border-radius: 5px;">
|
|
|
+ <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F20%2F20170720191223_wuHTd.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697879045&t=cb56d9c30aaec217a0d688704105f23f"
|
|
|
+ style="border-radius: 5px;" alt="" width="180">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 0 10px; width: 500px;">
|
|
|
+ <div style="color: #000; margin: 0 0 10px 0; text-align: center; ">详情图：</div>
|
|
|
+ <el-carousel :interval="3000" height="180px" style="border-radius: 5px;">
|
|
|
+ <el-carousel-item v-for="item in pics" :key="item.id">
|
|
|
+ <img :src="item.picUrl" width="500">
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">状态</div>
|
|
|
+ <div style="color: rgba(212, 48, 48, 1); width: 80px;">已驳回</div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; margin-top: 18px;">
|
|
|
+ <div style="color: #999; font-weight: bold; width: 80px; text-align: right; margin-right: 10px;">备注</div>
|
|
|
+ <div style="color: #000; width: 736px; height: 200px; border-radius: 3px; overflow-y: scroll; padding: 5px; border: 1px solid #ccc;">
|
|
|
+ 备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备备注</div>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
- <h3 style="padding-top: 20px;">简介：</h3>
|
|
|
- <p><el-input type="textarea" style="margin-left: 50px; margin-top: -20px; width: calc(100% - 50px);" :rows="6" placeholder="暂无简介信息"
|
|
|
- v-model="complaint.remark" maxlength="200" show-word-limit>
|
|
|
- </el-input>
|
|
|
- </p>
|
|
|
- <p style="display: flex; justify-content: flex-end;">
|
|
|
- <el-button type="warning">驳 回</el-button>
|
|
|
- <el-button type="primary" class="confirm-btn">通 过</el-button>
|
|
|
+ <p style="display: flex; justify-content: center;">
|
|
|
+ <el-button type="danger" @click="handlerReject">驳 回</el-button>
|
|
|
+ <el-button type="primary" class="confirm-btn" @click="handlerPass">通 过</el-button>
|
|
|
</p>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
- <!-- 查看图片 -->
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
+ <!-- 审核通过确认对话框 -->
|
|
|
+ <el-dialog title="提示" :center="true" :visible.sync="showPassDialog" width="280px" :show-close="false" :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false" custom-class="queren-class" @close="handlerCloseApprove">
|
|
|
+ <div ref="container" :class="{ 'loaded': isLoaded_approve }" style="margin-top: 18px; height: 88px;">
|
|
|
+ <div class='stamp_approve'></div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showPassDialog = false" class="cancel-btn">取 消</el-button>
|
|
|
+ <el-button type="primary" class="confirm-btn" @click="handlerApproveOk">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 审核驳回确认对话框 -->
|
|
|
+ <el-dialog title="提示" :center="true" :visible.sync="showRejectDialog" width="280px" :show-close="false" :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false" custom-class="bohui-class" @close="handlerCloseReject">
|
|
|
+ <div ref="container" :class="{ 'loaded': isLoaded_reject }" style="margin-top: 18px; height: 88px;">
|
|
|
+ <div class='stamp_reject'></div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div style="margin-right: 10px;">备注</div>
|
|
|
+ <div>
|
|
|
+ <el-input type="textarea" placeholder="请输入备注" v-model="approved_reject_Data.workflowRemark" maxlength="188" rows="4" show-word-limit></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="showRejectDialog = false" class="cancel-btn">取 消</el-button>
|
|
|
+ <el-button type="primary" class="confirm-btn" @click="handlerRejectOk">确 定</el-button>
|
|
|
+ </span>
|
|
|
</el-dialog>
|
|
|
<!-- 评价 -->
|
|
|
<el-dialog title="评价" custom-class="acceptance-class" :visible.sync="dialogevaluateVisible" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
@@ -113,7 +135,8 @@
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getTableData
|
|
|
+ getTableData,
|
|
|
+ approved
|
|
|
} from '@/api/myAgent'
|
|
|
|
|
|
export default {
|
|
|
@@ -135,22 +158,6 @@
|
|
|
'font-size': '16px',
|
|
|
'font-family': 'Microsoft YaHei-3970(82674968)'
|
|
|
},
|
|
|
- // 查询数据
|
|
|
- formInline: {
|
|
|
- options: [{
|
|
|
- id: 0,
|
|
|
- label: '已删除'
|
|
|
- }, {
|
|
|
- id: 1,
|
|
|
- label: '处理中'
|
|
|
- }, {
|
|
|
- id: 2,
|
|
|
- label: '已处理'
|
|
|
- }],
|
|
|
- status: '',
|
|
|
- search_datatime: '',
|
|
|
- keyword: ''
|
|
|
- },
|
|
|
tableData: [],
|
|
|
// 分页参数
|
|
|
pagination: {
|
|
|
@@ -173,7 +180,27 @@
|
|
|
},
|
|
|
dialogInfoMinsuVisible: false, // 民宿信息维护
|
|
|
dialogevaluateVisible: false, // 评价
|
|
|
- dialogVisible: false
|
|
|
+ showPassDialog: false, // 审核通过确认对话框
|
|
|
+ showRejectDialog: false, // 驳回确认对话框
|
|
|
+ pics: [{
|
|
|
+ picUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F20%2F20170720191223_wuHTd.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697879045&t=cb56d9c30aaec217a0d688704105f23f',
|
|
|
+ id: 1
|
|
|
+ }, {
|
|
|
+ picUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F20%2F20170720191223_wuHTd.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697879045&t=cb56d9c30aaec217a0d688704105f23f',
|
|
|
+ id: 2
|
|
|
+ }, {
|
|
|
+ picUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F20%2F20170720191223_wuHTd.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1697879045&t=cb56d9c30aaec217a0d688704105f23f',
|
|
|
+ id: 3
|
|
|
+ }],
|
|
|
+ approved_reject_Data: {
|
|
|
+ id: '',
|
|
|
+ type: '',
|
|
|
+ status: '',
|
|
|
+ workflowRemark: '',
|
|
|
+ remark: ''
|
|
|
+ }, // 审核 驳回 参数
|
|
|
+ isLoaded_approve: false, // 控制审核通过盖章
|
|
|
+ isLoaded_reject: false // 控制驳回盖章
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -191,18 +218,84 @@
|
|
|
document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
|
|
|
},
|
|
|
methods: {
|
|
|
- // 浏览图片
|
|
|
- handlePictureCardPreview(file) {
|
|
|
- this.dialogImageUrl = file;
|
|
|
- this.dialogVisible = true;
|
|
|
+ // 审核通过盖章动画效果
|
|
|
+ handlerCloseApprove() {
|
|
|
+ this.isLoaded_approve = false
|
|
|
+ },
|
|
|
+ // 驳回盖章动画效果
|
|
|
+ handlerCloseReject() {
|
|
|
+ this.isLoaded_reject = false
|
|
|
+ },
|
|
|
+ // 审核通过OK
|
|
|
+ handlerApproveOk() {
|
|
|
+ var that = this;
|
|
|
+ this.approved_reject_Data.workflowRemark = '同意'
|
|
|
+ approved(this.approved_reject_Data).then((res) => {
|
|
|
+ // console.log(res.data);
|
|
|
+ if (res.code === 200) {
|
|
|
+ that.$message.success(res.message)
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ that.$message.error(err.message)
|
|
|
+ });
|
|
|
+ that.showPassDialog = false;
|
|
|
+ that.dialogInfoMinsuVisible = false;
|
|
|
+ // 刷新列表
|
|
|
+ this.get_table_data()
|
|
|
+ },
|
|
|
+ // 审核通过确认对话框
|
|
|
+ handlerPass() {
|
|
|
+ var that = this;
|
|
|
+ this.showPassDialog = true
|
|
|
+ setTimeout(function() {
|
|
|
+ that.isLoaded_approve = true
|
|
|
+ }, 300)
|
|
|
+ },
|
|
|
+ // 审核驳回
|
|
|
+ handlerRejectOk() {
|
|
|
+ var that = this;
|
|
|
+ // this.approved_reject_Data.workflowRemark = '拒绝'
|
|
|
+ approved(this.approved_reject_Data).then((res) => {
|
|
|
+ // console.log(res.data);
|
|
|
+ if (res.code === 200) {
|
|
|
+
|
|
|
+ that.$message.success(res.message)
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ that.$message.error(err.message)
|
|
|
+ });
|
|
|
+ that.showRejectDialog = false;
|
|
|
+ that.dialogInfoMinsuVisible = false;
|
|
|
+ // 刷新列表
|
|
|
+ this.get_table_data()
|
|
|
+ },
|
|
|
+ // 审核驳回确认对话框
|
|
|
+ handlerReject() {
|
|
|
+ var that = this;
|
|
|
+ this.showRejectDialog = true
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ that.isLoaded_reject = true
|
|
|
+ }, 300)
|
|
|
},
|
|
|
// 民宿信息维护-主办
|
|
|
handleClickZhuban(index, row) {
|
|
|
// console.log(row, index);
|
|
|
- if ((index + 1) % 2 == 0)
|
|
|
- this.dialogInfoMinsuVisible = true;
|
|
|
- else
|
|
|
- this.dialogevaluateVisible = true;
|
|
|
+ // if ((index + 1) % 2 == 0)
|
|
|
+ this.dialogInfoMinsuVisible = true;
|
|
|
+ // else
|
|
|
+ // this.dialogevaluateVisible = true;
|
|
|
+
|
|
|
+ this.approved_reject_Data = {}
|
|
|
+ this.approved_reject_Data.id = row.id
|
|
|
+ this.approved_reject_Data.type = row.type
|
|
|
+ this.approved_reject_Data.status = row.status
|
|
|
},
|
|
|
/**
|
|
|
* 获取消费记录,表格数据
|
|
|
@@ -216,10 +309,10 @@
|
|
|
// console.log(res.data);
|
|
|
if (res.code === 200) {
|
|
|
var d = res.data
|
|
|
- // that.pagination.total = d.total
|
|
|
+ that.pagination.total = d.total
|
|
|
that.tableData = []
|
|
|
- for (var i = 0; i < d.length; i++) {
|
|
|
- that.tableData.push(d[i])
|
|
|
+ for (var i = 0; i < d.pageList.length; i++) {
|
|
|
+ that.tableData.push(d.pageList[i])
|
|
|
}
|
|
|
} else {
|
|
|
that.tableData = []
|
|
|
@@ -232,32 +325,6 @@
|
|
|
that.loading = false;
|
|
|
},
|
|
|
/**
|
|
|
- * 导出为Excel
|
|
|
- */
|
|
|
- exportExcel() {
|
|
|
- var that = this
|
|
|
- downloadExcel(this.cond_data).then((res) => {
|
|
|
- // console.log(res);
|
|
|
- if (res.code === 200) {
|
|
|
- that.$message.success(res.message)
|
|
|
- let xls = res.downurl
|
|
|
- window.open(xls)
|
|
|
- } else {
|
|
|
- that.tableData = []
|
|
|
- that.$message.warning(res.message)
|
|
|
- }
|
|
|
- }).catch((err) => {
|
|
|
- // console.log(err);
|
|
|
- that.$message.error(err.message)
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * 搜索
|
|
|
- */
|
|
|
- btn_search() {
|
|
|
- this.get_table_data('search')
|
|
|
- },
|
|
|
- /**
|
|
|
* currentPage 改变时会触发
|
|
|
* @param {Object} val
|
|
|
*/
|
|
|
@@ -497,11 +564,79 @@
|
|
|
height: calc(100% - 14px) !important;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 100px;
|
|
|
+ margin: auto;
|
|
|
+ -webkit-backface-visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stamp_approve {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ border: solid .1em #067d00;
|
|
|
+ border-radius: .2em;
|
|
|
+ color: #067d00;
|
|
|
+ content: '审核通过';
|
|
|
+ font-size: 33px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ padding: .1em .5em;
|
|
|
+ margin: 0 auto;
|
|
|
+ top: 10%;
|
|
|
+ left: 10%;
|
|
|
+ text-transform: uppercase;
|
|
|
+ opacity: 0;
|
|
|
+ transform-origin: 50% 50%;
|
|
|
+ transform: rotate(-2deg) scale(5);
|
|
|
+ transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .stamp_reject {
|
|
|
+ position: relative;
|
|
|
+ margin-left: 40px;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ border: solid .1em #f00;
|
|
|
+ border-radius: .2em;
|
|
|
+ color: #f00;
|
|
|
+ content: '驳回';
|
|
|
+ font-size: 33px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ padding: .1em .5em;
|
|
|
+ margin: 0 auto;
|
|
|
+ top: 10%;
|
|
|
+ left: 10%;
|
|
|
+ text-transform: uppercase;
|
|
|
+ opacity: 0;
|
|
|
+ transform-origin: 50% 50%;
|
|
|
+ transform: rotate(-2deg) scale(5);
|
|
|
+ transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded {
|
|
|
+
|
|
|
+ .stamp_approve:after,
|
|
|
+ .stamp_reject:after {
|
|
|
+ opacity: .75;
|
|
|
+ transform: rotate(-15deg) scale(1);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
.acceptance-class {
|
|
|
height: 680px !important;
|
|
|
+ width: 880px !important;
|
|
|
}
|
|
|
|
|
|
.add-remarks-class {
|
|
|
@@ -531,6 +666,11 @@
|
|
|
color: #bbb;
|
|
|
}
|
|
|
|
|
|
+ .cancel-btn {
|
|
|
+ color: rgba(9, 101, 98, 1) !important;
|
|
|
+ border: 1px solid rgba(9, 101, 98, 1) !important;
|
|
|
+ }
|
|
|
+
|
|
|
.confirm-btn {
|
|
|
border: none !important;
|
|
|
background: rgba(9, 101, 98, 1) !important;
|
|
|
@@ -538,4 +678,22 @@
|
|
|
border-radius: 5px !important;
|
|
|
margin-left: 28px !important;
|
|
|
}
|
|
|
+
|
|
|
+ .el-carousel__indicators {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .queren-class {
|
|
|
+ height: 290px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bohui-class {
|
|
|
+ height: 360px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .queren-class .el-dialog__header,
|
|
|
+ .bohui-class .el-dialog__header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
</style>
|
soft5566