<!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"/>
|
<LINK rel="Bookmark" href="../images/favicon.ico">
|
<!-- 本框架基本脚本和样式 -->
|
|
<script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
|
<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
|
<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
|
<style>
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
|
.avatar-uploader-icon-small {
|
font-size: 28px;
|
color: #8c939d;
|
width: 78px;
|
height: 78px;
|
line-height: 78px;
|
text-align: center;
|
}
|
|
.avatar-small {
|
width: 78px;
|
height: 78px;
|
display: block;
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="ibox-content" id="app" v-cloak>
|
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="检测对象">
|
<el-input v-model="form.checkedUser" :disabled="true"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :offset="2" :span="6">
|
<el-form-item label="检测时间" prop="checkTime">
|
<el-date-picker
|
v-model="form.checkTime"
|
type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row class="mb-20">
|
<el-col :span="20">
|
<el-form-item label="检测主图">
|
<el-upload
|
class="avatar-uploader"
|
action="/admin/multipleUploadFile/doUpload"
|
:show-file-list="false"
|
:on-preview="handlePictureCardPreview"
|
:on-success="handleUploadSuccess"
|
>
|
<img v-if="imageUrl" :src="imageUrlView" class="avatar">
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
|
</el-col>
|
</el-row>
|
|
|
<el-tabs type="card">
|
<el-tab-pane label="问题分析">
|
<el-row>
|
<el-col :span="5">
|
<el-form-item label="输入问题分析">
|
<el-input v-model="analysisTitle"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="4" :offset="1">
|
<el-button type="primary" @click="addSkinAnalysis">添加问题分析</el-button>
|
</el-col>
|
</el-row>
|
<el-row v-for="(item, index) in form.analysisDetail">
|
<p class="el-big-title">问题分析 - {{ item.symptom }}
|
<el-button type="text" @click="delSkinAnalysis(item.symptom)">删除分析</el-button>
|
</p>
|
<el-row>
|
<el-col :offset="2" :span="7">
|
<el-form-item label="问题图片">
|
<el-upload class="avatar-uploader"
|
action="/admin/multipleUploadFile/doUpload"
|
:data="{'data': index}"
|
:show-file-list="false"
|
:on-preview="handlePictureCardPreviewForAnalysis"
|
:on-success="handleUploadSuccessForAnalysis" >
|
<img v-if="item.img" :src="item.imgView" class="avatar-small" />
|
<i v-else class="el-icon-plus avatar-uploader-icon-small"></i>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :offset="2" :span="7">
|
<el-form-item label="问题占比" :prop="'analysisDetail.'+ index +'.percentage'" :rules="rules.percentage">
|
<el-input v-model:number="item.percentage" prop="percentage"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :offset="2" :span="7">
|
<el-form-item label="描述" :prop="'analysisDetail.'+ index +'.analysis'" :rules="rules.analysis">
|
<el-input v-model="item.analysis" type="textarea" :rows="3"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="解决方案">
|
<el-row>
|
<el-col :span="5">
|
<el-form-item label="输入症状">
|
<el-input v-model="symptom"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="4" :offset="1">
|
<el-button type="primary" @click="addSkinSymptom">添加皮肤症状</el-button>
|
</el-col>
|
</el-row>
|
|
<el-row v-for="(item, index) in form.skinDetails">
|
<p class="el-big-title">皮肤症状 - {{ item.symptom }}
|
<el-button type="text" @click="delSkinSymptom(item.symptom)">删除症状</el-button>
|
</p>
|
<el-row>
|
<el-col :offset="2" :span="7">
|
<el-form-item label="症状图片">
|
<el-upload class="avatar-uploader"
|
action="/admin/multipleUploadFile/doUpload"
|
:data="{'data': index}"
|
:show-file-list="false"
|
:on-preview="handlePictureCardPreviewForList"
|
:on-success="handleUploadSuccessForList" >
|
<img v-if="item.img" :src="item.imgView" class="avatar-small" />
|
<i v-else class="el-icon-plus avatar-uploader-icon-small"></i>
|
</el-upload>
|
</el-col>
|
</el-row>
|
<!-- <el-row>-->
|
<!-- <el-col :offset="2" :span="7">-->
|
<!-- <el-form-item label="问题占比" :prop="'skinDetails.'+ index +'.percentage'" :rules="rules.percentage">-->
|
<!-- <el-input v-model:number="item.percentage" prop="percentage"></el-input>-->
|
<!-- </el-form-item>-->
|
<!-- </el-col>-->
|
<!-- </el-row>-->
|
<el-row>
|
<el-col :offset="2" :span="7">
|
<el-form-item label="症状描述" :prop="'skinDetails.'+ index +'.analysis'" :rules="rules.analysis">
|
<el-input v-model="item.analysis" type="textarea" :rows="3"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :offset="1" :span="7">
|
<el-form-item label="护理建议" :prop="'skinDetails.'+ index +'.solution'" :rules="rules.solution">
|
<el-input v-model="item.solution" type="textarea" :rows="3"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :offset="2" :span="7">
|
<el-form-item label="推荐产品" :prop="'skinDetails.'+ index +'.products'" :rules="rules.products">
|
<el-select v-model="item.products" multiple filterable default-first-option placeholder="请选择产品">
|
<el-option v-for="item1 in options" :key="item1.id"
|
:label="item1.title"
|
:value="item1.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
|
<el-form-item class="foot_bar">
|
<el-button :loading="submiting" type="primary" @click="submitForm('form')" >保存</el-button>
|
<el-button @click="closeForm()">关闭</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<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 type="text/javascript">
|
|
// {
|
// symptom : "",
|
// desc : "",
|
// advice : "",
|
// products : ""
|
// }
|
|
/*
|
console.log('加载服务器数据');
|
var _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
async: false,
|
url: basePath + '/admin/projService/findProjServiceInfo?id=' + id,
|
callback: function (data) {
|
|
}
|
});
|
*/
|
const priceValidator = (rule, value, callback) =>{
|
const reg = /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/;
|
const flag = reg.test(value);
|
if (flag) {
|
callback()
|
} else {
|
callback(new Error('请输入保留两位以内的小数'))
|
}
|
};
|
|
var vipId = $.query.get("vipId");
|
var id = $.query.get("id");
|
var app = new Vue({
|
el: '#app',
|
data: {
|
symptom : "",
|
analysisTitle : "",
|
submiting : false,
|
options: [],
|
form : {
|
id : "",
|
skinDetails : [],
|
analysisDetail : [],
|
checkTime : "",
|
checkedUser : "",
|
userId : "",
|
ext1 : "",
|
},
|
rules:{
|
checkTime : [
|
{ required: true, message: '请选择日期', trigger: 'blur' }
|
],
|
percentage : [
|
{ required: true, message: '请输入保留两位以内的小数', trigger: 'blur' },
|
{ validator : priceValidator, trigger: 'blur' }
|
],
|
analysis : [
|
{ required: true, message: '请输入症状描述', trigger: 'blur' }
|
],
|
solution : [
|
{ required: true, message: '请输入护理建议', trigger: 'blur' }
|
],
|
products : [
|
{ required: true, message: '请选择推荐产品', trigger: 'change' }
|
],
|
},
|
//产品主图上传相关变量
|
dialogVisible: false,
|
imageUrlView:'',
|
imageUrl:'',
|
},
|
created: function () {
|
this.loadInfo();
|
|
if (id != '' || id == undefined) {
|
this.initData(id);
|
}
|
},
|
mounted: function () {
|
},
|
methods: {
|
loadInfo: function () {
|
let _this = this;
|
AjaxProxy.requst({
|
app: _this,
|
async: false,
|
url: basePath + '/admin/vipInfo/findUserById?id=' + vipId,
|
callback: function (data) {
|
_this.form.checkedUser = data.rows[0].vipName;
|
_this.form.userId = data.rows[0].id;
|
}
|
});
|
|
AjaxProxy.requst({
|
app: _this,
|
async: false,
|
url: basePath + '/admin/shopProduct/showList?limit=999',
|
callback: function (data) {
|
console.log(data);
|
_this.options = data.rows;
|
}
|
});
|
},
|
initData : function(id) {
|
var _this = this;
|
_this.form.id = id;
|
AjaxProxy.requst({
|
app: _this,
|
async: false,
|
url: basePath + '/admin/sysSkinCheckRecord/findSkinCheckInfoById?id=' + id,
|
callback: function (data) {
|
var result = data.mapInfo.data;
|
console.log(result)
|
_this.form.checkTime = result.checkTime;
|
_this.imageUrl = result.ext1;
|
_this.imageUrlView = result.ext1;
|
result.skinDetails.forEach((item) => {
|
item.products = item.productIds.split(",").map(Number);
|
item.imgView = item.img;
|
_this.form.skinDetails.push(item);
|
});
|
|
result.analysisDetail.forEach((item) => {
|
item.imgView = item.img;
|
_this.form.analysisDetail.push(item);
|
});
|
}
|
});
|
},
|
loadData : function() {
|
if (id == "" || id == undefined) {
|
return;
|
}
|
|
AjaxProxy.requst({
|
app: _this,
|
async: false,
|
url: basePath + '/admin/shopProduct/showList?limit=999',
|
callback: function (data) {
|
console.log(data);
|
_this.options = data.rows;
|
}
|
});
|
},
|
handlePictureCardPreview(file){
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
handleUploadSuccess(res, file) {
|
this.imageUrlView = URL.createObjectURL(file.raw);
|
this.imageUrl = res.path;
|
},
|
handleRemove() {
|
this.imageUrl = '';
|
},
|
handlePictureCardPreviewForList(file){
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
handleUploadSuccessForList(res, file) {
|
this.form.skinDetails[res.index].imgView = URL.createObjectURL(file.raw);
|
this.form.skinDetails[res.index].img = res.path;
|
Vue.set(this.form.skinDetails,res.index,this.form.skinDetails[res.index])
|
},
|
handleRemoveForList() {
|
this.imageUrl = '';
|
},
|
handlePictureCardPreviewForAnalysis(file){
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
handleUploadSuccessForAnalysis(res, file) {
|
this.form.analysisDetail[res.index].imgView = URL.createObjectURL(file.raw);
|
this.form.analysisDetail[res.index].img = res.path;
|
Vue.set(this.form.analysisDetail,res.index,this.form.analysisDetail[res.index])
|
},
|
handleRemoveForAnalysis() {
|
this.imageUrl = '';
|
},
|
addSkinSymptom : function() {
|
let _this = this;
|
var symptomTitle = _this.symptom;
|
|
if (symptomTitle == '') {
|
_this.$notify({
|
title: '提示',
|
message: '请输入皮肤症状',
|
type: 'warning'
|
});
|
return;
|
}
|
|
var symptom = {};
|
symptom.symptom = symptomTitle;
|
let symptomList = _this.form.skinDetails;
|
if (symptomList.length > 0) {
|
var flag = true;
|
for (var i = 0; i < symptomList.length; i++) {
|
if(symptomList[i].symptom == symptomTitle) {
|
flag = false;
|
break;
|
}
|
}
|
if (flag) {
|
symptomList.push(symptom);
|
}
|
} else {
|
symptomList.push(symptom);
|
}
|
},
|
delSkinSymptom : function (value) {
|
let _this = this;
|
var symptomTitle = value;
|
let symptomList = _this.form.skinDetails;
|
if (symptomList.length > 1) {
|
for (var i = 0; i < symptomList.length; i++) {
|
if(symptomList[i].symptom == symptomTitle) {
|
console.log(symptomList[i].symptom)
|
symptomList.splice(i, 1);
|
break;
|
}
|
}
|
} else {
|
symptomList.splice(0, 1);
|
}
|
},
|
addSkinAnalysis : function() {
|
let _this = this;
|
var analysisTitle = _this.analysisTitle;
|
|
if (analysisTitle == '') {
|
_this.$notify({
|
title: '提示',
|
message: '请输入问题分析标题',
|
type: 'warning'
|
});
|
return;
|
}
|
|
var analysis = {};
|
analysis.symptom = analysisTitle;
|
let analysisList = _this.form.analysisDetail;
|
if (analysisList.length > 0) {
|
var flag = true;
|
for (var i = 0; i < analysisList.length; i++) {
|
if(analysisList[i].symptom == analysisTitle) {
|
flag = false;
|
break;
|
}
|
}
|
if (flag) {
|
analysisList.push(analysis);
|
}
|
} else {
|
analysisList.push(analysis);
|
}
|
},
|
delSkinAnalysis : function(value) {
|
let _this = this;
|
var analysisTitle = value;
|
let analysisList = _this.form.analysisDetail;
|
if (analysisList.length > 1) {
|
for (var i = 0; i < analysisList.length; i++) {
|
if(analysisList[i].symptom == analysisTitle) {
|
analysisList.splice(i, 1);
|
break;
|
}
|
}
|
} else {
|
analysisList.splice(0, 1);
|
}
|
},
|
submitForm : function (formName) {
|
let _this = this;
|
var params = _this.form;
|
|
var flag = false;
|
_this.$refs[formName].validate((valid) => {
|
if (!valid) {
|
console.log('error submit!!');
|
flag = true;
|
return;
|
}
|
});
|
if (flag) {
|
return;
|
}
|
|
if (_this.imageUrl == '' || _this.imageUrl == undefined) {
|
_this.$notify({
|
title: '提示',
|
message: '请添加主图',
|
type: 'warning'
|
});
|
return;
|
}
|
|
for(var i = 0; i < params.skinDetails.length; i++) {
|
params.skinDetails[i].productIds = params.skinDetails[i].products.join(",");
|
params.skinDetails[i].t1=1;
|
}
|
|
for(var i = 0; i < params.analysisDetail.length; i++) {
|
params.analysisDetail[i].t1=2;
|
}
|
params.ext1 = _this.imageUrl;
|
_this.submiting = true;
|
console.log(params)
|
AjaxProxy.requst({
|
app: _this,
|
data: params,
|
url: basePath + '/admin/sysSkinCheckRecord/addSysSkinCheckRecord',
|
callback: function (data) {
|
_this.$message({
|
message: "保存成功",
|
type: 'success',
|
duration : 1000,
|
onClose: function () {
|
_this.closeForm();
|
}
|
});
|
if (parent.myGrid) {
|
parent.myGrid.serchData();
|
}
|
|
if (parent.app) {
|
parent.app.skinCheckQuery();
|
}
|
}
|
});
|
},
|
closeForm : function () {
|
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
}
|
},
|
filters:
|
{
|
format: function (value, patten) {
|
if (!value) return '';
|
return MTools.formatDate(value, patten)
|
},
|
},
|
})
|
</script>
|
</body>
|
</html>
|
