<template>
|
<div class="finance-del">
|
<div class="nav">
|
<span>预约明细</span>
|
<el-button type="primary" size="medium" @click="back">返回</el-button>
|
</div>
|
<!-- <div class="add">
|
<span class="back-color" @click="back"><i class="el-icon-arrow-left"></i>返回上一级</span>
|
</div> -->
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item>
|
<div class="block">
|
<span class="demonstration">预约日期</span>
|
<el-date-picker
|
v-model="time"
|
@change="changeTime"
|
type="daterange"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
:clearable="false"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
<button class="m_btn bgc_primary min-width" @click="Reset()">重 置</button>
|
</div>
|
</el-form-item>
|
<div class="right-btn">
|
<button class="m_btn bgc_primary min-width" @click="exports()">导 出</button>
|
<button class="m_btn bgc_primary" plain @click="cancelReservation">取消预约</button>
|
</div>
|
</el-form>
|
|
|
<div
|
class="Tips"
|
v-show="Change"
|
>
|
<i
|
style="color: #409EFF"
|
class="el-icon-info"
|
></i>
|
<div class="Tips-cont">已选择<span>{{ids.length}}</span>项</div>
|
<el-button
|
type="text"
|
@click="cancel"
|
>取消</el-button>
|
</div>
|
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
first
|
firstWidth="50px"
|
>
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox @change="cheAll" v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox @change="change" v-model="item.scope.che"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:data="{scope}">
|
{{scope.reserveTime.substring(0,10)}}
|
</template>
|
<template v-slot:btn="{scope}">
|
<div class="table_flex">
|
<span @click="seeDetails(scope.id)">查看</span>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
time:[],
|
os: {},
|
trs: [
|
{ text: "序号", val: "index" },
|
{ text: "用户昵称", val: "nickName" },
|
{ text: "预约人", val: "name" },
|
{ text: "联系电话", val: "phone" },
|
{ text: "预约日期", val: "btn",slot:"data" },
|
{ text: "预约时间", val: "reserveTime" },
|
{ text: "预约内容", val: "content" },
|
{ text: "备注人", val: "handleName" },
|
{ text: "社区备注", val: "actRemark" },
|
{ text: "提交时间", val: "createAt" },
|
{ text: "操作", val: "btn" ,slot:'btn' }
|
],
|
tds: [],
|
startTime:'',
|
endTime:'',
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
Change:true,
|
ids:[], //选中的id集合
|
alls: false, //全选状态
|
};
|
},
|
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
seeDetails(id) {
|
this.$router.push("/act_appointviewDetails/" + id);
|
},
|
|
Reset() {
|
this.time = '';
|
this.startTime = '';
|
this.endTime = '';
|
this.init();
|
},
|
|
back() {
|
this.$router.back();
|
},
|
|
changeTime() {
|
this.startTime = this.time[0];
|
this.endTime = this.time[1];
|
this.init();
|
},
|
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
|
init() {
|
let params = {
|
advertType: 0,
|
endTime: this.endTime,
|
ids: [],
|
keyWord: "",
|
pageNum: 1,
|
pageSize: 10,
|
reserveId:+this.$route.params.id,
|
startTime: this.startTime,
|
status: 0,
|
type: [1]
|
};
|
|
this.$api.post("reserve/make/page", params, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = (e.records || []).map((v) => {
|
this.$set(v, 'che', false)
|
return v;
|
});
|
e.records.map((item,index) => {
|
item.index = index + 1;
|
})
|
});
|
|
},
|
|
//导出
|
exports(v) {
|
if(!this.ids.length) {
|
demo.toast("请勾选需要导出的内容");
|
return
|
}
|
let t = this
|
let params = {
|
advertType: 0,
|
endTime: this.endTime,
|
ids: this.ids,
|
keyWord: "",
|
pageNum: 1,
|
pageSize: 10,
|
reserveId:+this.$route.params.id,
|
startTime: this.startTime,
|
status: 0,
|
type: [1]
|
}
|
this.$api.post("reserve/make/list/export", params, (e) => {
|
window.location.href = e;
|
});
|
},
|
|
cancelReservation() {
|
if(!this.ids.length) {
|
demo.toast("请勾选需要取消预约的内容");
|
return
|
}
|
|
let params = {
|
ids: this.ids,
|
remark:""
|
}
|
this.$api.post("reserve/make/cancel", params, (e) => {
|
this.init();
|
});
|
},
|
|
cheAll () {
|
// this.Change = !this.Change
|
//全选
|
this.tds.map(item => {
|
item.che = this.alls
|
})
|
this.change()
|
},
|
|
change () {
|
//单个选择
|
this.ids = []
|
this.tds.map(item => {
|
if (item.che) {
|
this.ids.push(item.id)
|
} else {
|
this.alls = false
|
}
|
})
|
},
|
|
cancel() {
|
this.ids = []
|
//取消
|
this.alls = false
|
this.tds.map(item=>{
|
item.che = false
|
});
|
},
|
|
},
|
watch: {},
|
};
|
</script>
|
<style scoped lang="less">
|
.finance-del {
|
overflow: scroll;
|
}
|
.nav {
|
padding: 20px 0;
|
span {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
font-weight: 700;
|
margin-right: 30px;
|
}
|
}
|
.add {
|
text-align: right;
|
padding-bottom: 20px;
|
.back-color {
|
color: #409EFF;
|
cursor: pointer;
|
}
|
}
|
.right-btn {
|
float: right;
|
}
|
.Tips {
|
margin: 10px 0;
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #e6f7ff;
|
border: #bae7ff 1px solid;
|
border-radius: 6px;
|
height: 40px;
|
padding: 0 20px;
|
}
|
.Tips-cont {
|
padding: 0 10px;
|
font-size: 16px;
|
color: #606266;
|
}
|
.Tips-cont > span {
|
padding: 0 4px;
|
color: #409eff;
|
font-weight: 600;
|
}
|
.bgc_primary {
|
margin-bottom: 15px;
|
}
|
.min-width {
|
width: 70px;
|
}
|
</style>
|
