<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
|
<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
|
<script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>
|
<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
|
|
<!-- 富文本编辑器 -->
|
<script type="text/javascript" charset="utf-8"
|
th:src="@{/plugin/beditor/ueditor.config.js}"></script>
|
<script type="text/javascript" charset="utf-8"
|
th:src="@{/plugin/beditor/ueditor.all.js}">
|
</script>
|
<script type="text/javascript" charset="utf-8"
|
th:src="@{/plugin/beditor/lang/zh-cn/zh-cn.js}"></script>
|
|
|
<style>
|
|
.mform{
|
display: flex;
|
align-items: center;
|
margin-top: 10px;
|
}
|
|
|
.mixSearchBox .searchResultTable {
|
position: absolute;
|
padding: 10px;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
background-color: #fff;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
box-sizing: border-box;
|
margin: 10px 0;
|
z-index: 99999999;
|
}
|
.el-icon-delete{
|
cursor: pointer;
|
}
|
.el-icon-delete:hover{
|
color: #F56C6C;
|
}
|
.tabs {
|
margin-bottom: 80px;
|
}
|
.foot_bar2 {
|
top: 98%;
|
position: absolute;
|
width: 98%;
|
height: 80px;
|
overflow: hidden;
|
left: 0px;
|
display: flex;
|
align-items: center;
|
z-index: 99;
|
justify-content: center;
|
|
}
|
.max-height{
|
height: 98%;
|
}
|
.orderBox{
|
position: relative;
|
border-left: 1px solid #EFEFEF;
|
padding-left: 10px;
|
margin-left:10px ;
|
}
|
.openOrClose {
|
cursor:pointer
|
}
|
</style>
|
</head>
|
<body>
|
<div class="ibox-content max-height" id="app" v-cloak>
|
|
<el-row class="max-height">
|
<el-col :span="16" >
|
<el-tabs class="tabs" type="card" v-model="activeName" >
|
<el-tab-pane label="项目" name="tab1">
|
|
<el-table
|
:data="projList"
|
style="width: 98%">
|
<el-table-column
|
prop="projName"
|
label="项目">
|
</el-table-column>
|
<el-table-column
|
prop="balance"
|
label="余额"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="surplusCount"
|
label="余次">
|
</el-table-column>
|
<el-table-column
|
prop="failTimeStr"
|
label="有效期">
|
</el-table-column>
|
<el-table-column
|
prop="source"
|
label="来源">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button v-if="scope.row.surplusCount>0" type="primary"
|
size="mini"
|
@click="selected(scope.$index, scope.row)">添加
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
|
</el-tab-pane>
|
<el-tab-pane label="套餐" name="tab2">
|
<template v-for="(item,index) in taocanList">
|
<p class="el-big-title">
|
<span class="openOrClose" v-if="!item.openOrClose" @click="openOrCloseTc(item, index, 1)"><i class="el-icon-arrow-down"></i></span>
|
<span class="openOrClose" v-if="item.openOrClose" @click="openOrCloseTc(item, index, 2)"><i class="el-icon-arrow-up"></i></span>
|
【{{item.isCourse=='N'?'固定套餐':'任选套餐'}}】{{item.projName}}
|
<span style="float: right" v-if="item.failTime != null">有效期:{{item.failTime}}</span>
|
<code v-if="item.projInfo.isCourse=='Y'" > 剩余次数：<span v-if="item.projInfo.isInfinite == 'Y'">无限次</span><span v-else>{{item.surplusCount}}</span> </code>
|
</p>
|
<el-table
|
:data="item.taocanProjUse"
|
style="width: 98%" v-show="item.openOrClose">
|
<el-table-column
|
prop="projName"
|
label="项目">
|
</el-table-column>
|
<el-table-column
|
prop="balance"
|
label="余额"
|
width="180">
|
</el-table-column>
|
<el-table-column
|
prop="surplusCount"
|
label="余次">
|
</el-table-column>
|
<!-- <el-table-column-->
|
<!-- prop="failTimeStr"-->
|
<!-- label="有效期">-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="source"
|
label="来源">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button v-if="scope.row.surplusCount>0" type="primary"
|
size="mini"
|
@click="selected(scope.$index, scope.row, item.projName)">添加
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
<!-- <el-row style="text-align: center; margin-top: 5px;">-->
|
<!-- <el-link type="primary" v-if="!tcIsOpen && taocanList.length > 0" @click="tcIsOpen = true">点击展开</el-link>-->
|
<!-- <el-link type="primary" v-if="tcIsOpen" @click="tcIsOpen = false">点击隐藏</el-link>-->
|
<!-- </el-row>-->
|
</el-tab-pane>
|
|
</el-tabs>
|
</el-col>
|
<el-col :span="7" class="orderBox max-height" >
|
<p class="el-big-title">服务开单</p>
|
<el-row class="mform" v-for="(item,index) in orderItemList" >
|
<el-col :span="16" >{{item.projUse.projName}}</el-col>
|
<el-col :span="6" >
|
<el-input @blur="checkCount(item)" type="number" v-model="item.count">
|
</el-input>
|
</el-col>
|
<el-col :offset="1" :span="1" >
|
<i @click="remove(index)" class="el-icon-delete "></i>
|
</el-col>
|
</el-row>
|
<el-row class="foot_bar2">
|
<el-button :loading="submiting" type="primary" @click="submitForm('form')" >添加</el-button>
|
<el-button @click="closeFram()">取消</el-button>
|
</el-row>
|
</el-col>
|
</el-row>
|
|
|
|
</div>
|
</body>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
|
|
|
<script>
|
var id = $.query.get("id");
|
//校验方法
|
var ValidatorFactory = {
|
validateUseCount: function (rule, value, callback) {
|
if ((true)) {
|
return callback;
|
} else {
|
return callback(new Error('请输入套餐最大使用次数'));
|
}
|
}
|
};
|
|
Vue.component('ValidatorFactory', ValidatorFactory);
|
Vue.component('treeselect', VueTreeselect.Treeselect)
|
|
var app = new Vue({
|
el: '#app',
|
data: {
|
submiting:false,
|
activeName:"tab1",
|
orderItemList:[],
|
projList:[],
|
taocanList:[],
|
tcIsOpen : false,
|
yyTime:new Date(),
|
|
|
},
|
|
/**
|
* 初始化数据表
|
*/
|
created: function () {
|
this.loadinfo();
|
},
|
|
methods: {
|
/**
|
* 提交表单
|
* */
|
submitForm(formName) {
|
let _this=this;
|
_this.submiting = true;
|
if(_this.orderItemList.length<1){
|
_this.$message.error('请选择下单项目');
|
return false;
|
}
|
let formData={
|
vipId:id,
|
serviceItems:[],
|
}
|
|
parent.app.addProjItems(_this.orderItemList);
|
_this.closeFram();
|
},
|
open(data) {
|
let _this=this;
|
this.$confirm('服务创建成功是否马上排班？', '确认信息', {
|
distinguishCancelAndClose: true,
|
confirmButtonText: '马上排班',
|
cancelButtonText: '暂不排班'
|
}).then(() => {
|
window.location.href=basePath+"/admin/projService/yypb?pageFlae=1&id="+data.rows[0].id;
|
})
|
.catch(action => {
|
if(action === 'cancel'){
|
_this.submiting = false;
|
_this.closeFram();
|
}
|
});
|
},
|
|
remove(index){
|
this.orderItemList.splice(index, 1);
|
},
|
checkCount(item){
|
if(item.count>item.projUse.surplusCount){
|
item.count=item.projUse.surplusCount;
|
this.$message.error('下单次数不能大于余次');
|
}else if(item.count<0){
|
item.count=1;
|
this.$message.error('下单次数不能小于0');
|
}
|
},
|
/**
|
* 选择产品
|
* */
|
selected(index, row, name) {
|
|
//是否已经被选择了
|
let selected = false;
|
this.orderItemList.forEach(item => {
|
if (item.projUse.id == row.id) {
|
selected = true;
|
//叠加次数
|
if(item.count<item.projUse.surplusCount){
|
item.count=item.count+1;
|
}else{
|
this.$message.error('下单次数不能大于余次');
|
}
|
|
return;
|
}
|
});
|
if (!selected) {
|
if(row.surplusCount>0){
|
this.orderItemList.push({
|
projUse: row,
|
count: 1,
|
name : name
|
});
|
}
|
|
}
|
|
},
|
loadinfo(){
|
let _this=this;
|
AjaxProxy.requst({
|
app: _this,
|
url: basePath + "/admin/projService/getUserProjInfo?vipId="+id,
|
callback: function (data) {
|
_this.projList = data.mapInfo.projList;
|
_this.taocanList = data.mapInfo.taoCanList;
|
}
|
});
|
},
|
closeFram: function () {
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
},
|
openOrCloseTc : function (item, index, value) {
|
if (value == 1) {
|
item.openOrClose = true;
|
} else {
|
item.openOrClose = false;
|
}
|
Vue.set(this.taocanList, index, item);
|
}
|
}
|
|
})
|
</script>
|
|
</body>
|
</html>
|
