~jiangyouyao/beauty-erp.git

New file
			@@ -0,0 +1,360 @@
			<!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.isCourse=='Y'" > 剩余次数：<span v-if="item.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>