lh-mobile/pages/jiance/manyi.vue

<template>
	<view class="container">
		<cu-custom bgColor="bg-luohu" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">客户满意度调查</block>
		</cu-custom>
		<u-alert-tips type="success" :title="descriptionTitle" :description="description" style="margin:10rpx"></u-alert-tips>
		<view class="cu-form-group">
			<view class="title">客户单位:</view>
			<input placeholder="请输入客户单位" v-model="buMenName" name="input" disabled></input>
		</view>
		<view class="cu-form-group">
			<view class="title">客户联系方式:</view>
			<input placeholder="请输入客户联系方式" v-model="lianxidianhua" name="input"></input>
			<u-icon class="uni-icon" name="close-circle-fill" color="rgb(192, 196, 204)" size="42" v-if="lianxidianhua != ''" @click="lianxidianhua = ''"></u-icon>
		</view>
		<view class="cu-form-group">
			<view class="title">服务项目:</view>
			<input placeholder="请输入服务项目" v-model="fuWuXiangMu" name="input"></input>
			<u-icon class="uni-icon" name="close-circle-fill" color="rgb(192, 196, 204)" size="42" v-if="fuWuXiangMu != ''" @click="fuWuXiangMu = ''"></u-icon>
		</view>
		<view class="cu-form-group" style="justify-content:left">
			<view class="title">服务类型:</view>
			<u-checkbox-group v-model="fuWuLeiXingCheck" @change="checkboxGroupChange">
				<u-checkbox v-model="it.checked" v-for="(it, index) in fuWuLeiXingList" :key="index" :name="it.name">
					{{it.name}}
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="cu-form-group">
			<view class="title">客户联系人:</view>
			<input placeholder="请输入客户联系人" v-model="keHuLianXiRen" name="input"></input>
			<u-icon class="uni-icon" name="close-circle-fill" color="rgb(192, 196, 204)" size="42" v-if="keHuLianXiRen != ''" @click="keHuLianXiRen = ''"></u-icon>
		</view>
		<view class="cu-form-group">
			<view class="title">备注:</view>
			<input placeholder="请输入备注" v-model="keHuLianXiYouXian" name="input"></input>
			<u-icon class="uni-icon" name="close-circle-fill" color="rgb(192, 196, 204)" size="42" v-if="keHuLianXiYouXian != ''" @click="keHuLianXiYouXian = ''"></u-icon>
		</view>
		<uni-section title="服务态度" type="line" padding>
			<view class="scoreLine">
				<uni-rate size="24" :max="6" activeColor="#67c23a" v-model="wenTiYiDaAn" />
				<view class="score" v-if="wenTiYiDaAn!=''">{{getRote(wenTiYiDaAn)}}</view>
			</view>
		</uni-section>
		<uni-section title="检测服务能力" type="line" padding>
			<view class="scoreLine">
				<uni-rate size="24" :max="6" activeColor="#67c23a" v-model="wenTiErDaAn" />
				<view class="score" v-if="wenTiErDaAn!=''">{{getRote(wenTiErDaAn)}}</view>
			</view>
		</uni-section>
		<uni-section title="检测报告及时性" type="line" padding>
			<view class="scoreLine">
				<uni-rate size="24" :max="6" activeColor="#67c23a" v-model="wenTiSanDaAn" />
				<view class="score" v-if="wenTiSanDaAn!=''">{{getRote(wenTiSanDaAn)}}</view>
			</view>
		</uni-section>
		<uni-section title="报告差错率" type="line" padding>
			<view class="scoreLine">
				<uni-rate size="24" :max="6" activeColor="#67c23a" v-model="wenTiSiDaAn" />
				<view class="score" v-if="wenTiSiDaAn!=''">{{getRote(wenTiSiDaAn)}}</view>
			</view>
		</uni-section>
		<uni-section title="投诉应答处理" type="line" padding>
			<view class="scoreLine">
				<uni-rate size="24" :max="6" activeColor="#67c23a" v-model="wenTiWuDaAn" />
				<view class="score" v-if="wenTiWuDaAn!=''">{{getRote(wenTiWuDaAn)}}</view>
			</view>
		</uni-section>
		<uni-section title="客户意见和建议" type="line" padding>
			<textarea maxlength="-1" v-model="qingNinTianXie" placeholder="意见和建议"></textarea>
		</uni-section>
		<uni-section title="签名" type="line" padding>
			<view style="width: 100%;">
				<view style="text-align: right;width: 100%;">
					<view>
						<u-button type="primary" class="btn-back-color" size="mini" @click="qianming">
							签名</u-button>
						<u-button type="error" size="mini" @click="deqianming" style="margin-left: 15rpx;" v-if="qianMing != ''">
							取消</u-button>
					</view>
				</view>
				<view style="width: 100%;margin-top: 10rpx;" v-if="qianMing != ''">
					<image :src="qianMing" style="width: 100%;height: 500rpx;border: 1px #eee solid;">
					</image>
				</view>
			</view>
		</uni-section>
		<view class="padding flex flex-direction">
			<u-button type="success" class="btn btn-back-color" @click="onSubmit">提交
			</u-button>
		</view>
		<u-popup mode="center" v-model="popupShow">
			<view style="padding: 30rpx;background: #FFFFFF;width: 100%;">
				<view class="cu-form-group ">
					<view class="title">签名</view>
				</view>
				<autograph @save="save" @clear="clear" @close="close"></autograph>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants" // 拉取登录token,userName,userInfo
	import appSelect from '@/components/my-componets/appSelect.vue'
	import myDate from '@/components/my-componets/my-date.vue'
	import md5 from "@/common/util/md5.js"

	export default {
		components: {
			myDate,
			appSelect
		},
		data() {
			return {
				popupShow: false,
				description: `感谢您对深圳市罗湖医院集团细胞质量检测实验室的信任与支持，为了帮助实验室更好的发展，为客户提供更优质的服务，请您抽出宝贵时间帮忙填写调查问卷，非常感谢！`,
				descriptionTitle: '尊敬的客户：您好!',
				buMenList: [],
				pingJiaShiJian: null,
				buMenId: '',
				wenTiYiDaAn: '',
				wenTiErDaAn: '',
				wenTiSanDaAn: '',
				wenTiSiDaAn: '',
				wenTiWuDaAn: '',
				qingNinTianXie: '',
				kehuXinXinList: [],
				lianxidianhua: '',
				fuWuLeiXing: '',
				fuWuLeiXingCheck: [],
				keHuLianXiYouXian: '',
				fuWuXiangMu: '',
				keHuLianXiRen: '',
				mobile: '',
				buMenName: '',
				shiWuShuoMing: '',
				qianMing: '',
				fuWuLeiXingList: [{
					name: "检验检测",
					checked: false,
					disabled: false
				}, {
					name: "科研服务",
					checked: false,
					disabled: false
				}],
				keHuBianHao: '',
				opinionList: ['很不满意', '不满意', '基本满意', '较满意', '满意', '非常满意']
			}
		},
		onLoad() {
			this.wenTiYiDaAn = 6
			this.wenTiErDaAn = 6
			this.wenTiSanDaAn = 6
			this.wenTiSiDaAn = 6
			this.wenTiWuDaAn = 6
			this.getKehu()
		},
		methods: {
			//对应选择分数显示
			getRote(index) {
				if (index) {
					let data = ''
					let dataItem = this.setRote(index) + '分'
					return '（' + this.opinionList[index - 1] + ':' + dataItem + "）"
				} else {
					return ''
				}
			},
			//对应分数编译
			setRote(index) {
				let data = ''
				switch (index) {
					case 1:
						data = '0'
						break
					case 2:
						data = '2'
						break
					case 3:
						data = '5'
						break
					case 4:
						data = '7'
						break
					case 5:
						data = '9'
						break
					case 6:
						data = '10'
						break
				}
				return data
			},
			getKehu() {
				let info = uni.getStorageSync(USER_INFO);
				if (info) {
					this.keHuBianHao = info.user.id || ''
					this.buMenName = info.user.qq || ''
					this.lianxidianhua = info.user.mobile || ''
					this.keHuLianXiRen = info.user.name || ''
					// this.keHuLianXiYouXian = info.user.email || ''
					this.shiWuShuoMing = info.user.qq || ''
				}
			},
			checkboxGroupChange(e) {
				if (e.length > 0) {
					this.fuWuLeiXing = e.join(",")
				} else {
					this.fuWuLeiXing = ''
				}
			},
			onSubmit() {
				let info = uni.getStorageSync(USER_INFO);
				let useId = info.user.id
				let detpId = info.org.id

				if (this.buMenName == '') {
					return this.$methCommon.getPrompt('该账户暂时不能填写满意度调查,如果需要填写请联系本公司')
				}
				if (!this.fuWuXiangMu) {
					return this.$methCommon.getPrompt('请输入服务项目')
				}
				if (!this.fuWuLeiXing) {
					return this.$methCommon.getPrompt('请选择服务类型')
				}

				var nowDate = new Date((new Date).getTime() + 8 * 60 * 60 * 1000)
				var time = nowDate.toJSON().split('T').join(' ').substr(0, 10);
				let para = {
					"parameters": [{
							"key": "defId",
							"value": "1022834234382876672"
						},
						{
							"key": "version",
							"value": "0"
						},
						{
							"key": "data",
							"value": ""
						}
					]
				}
				let paraValue = {
					nianFen: time.substring(0, 4),
					guanLianKeHu: this.buMenName,
					keHu: this.keHuBianHao,
					lianXiDianHua: this.lianxidianhua,
					keHuLianXiRen: this.keHuLianXiRen,
					keHuLianXiYouXian: this.keHuLianXiYouXian,
					fuWuXiangMu: this.fuWuXiangMu,
					fuWuLeiXing: this.fuWuLeiXing,
					pingFen1: this.setRote(this.wenTiYiDaAn),
					pingFen2: this.setRote(this.wenTiErDaAn),
					pingFen3: this.setRote(this.wenTiSanDaAn),
					pingFen4: this.setRote(this.wenTiSiDaAn),
					pingFen5: this.setRote(this.wenTiWuDaAn),
					yiJianHeJianYi: this.qingNinTianXie,
					bianZhiRen: useId,
					bianZhiShiJian: time,
					bianZhiBuMen: detpId,
					shiFouGuoShen: "已编制",
					shiWuShuoMing: this.shiWuShuoMing,
					qianMing: this.qianMing
				}
				para.parameters[2].value = JSON.stringify(paraValue);
				let that = this;
				this.$http.post("ibps/business/v3/bpm/instance/start", para).then(res => {
					if (res.data.state == 200) {
						this.$methCommon.getPrompt('提交成功', 'success')
						this.$Router.replace({
							name: 'index'
						})
					} else {
						this.$methCommon.getPrompt('请求出现错误', 'error')
					}
				}).catch((err) => {
					this.$methCommon.getPrompt('请求出现错误，请稍后再试', 'error')
				});
			},
			//弹出框显示
			qianming() {
				this.popupShow = true
			},
			//清除签名
			deqianming(index) {
				this.qianMing = ''
			},
			//保存签名
			save(val) {
				this.qianMing = val
				this.popupShow = false
			},
			//清除签名
			clear(val) {
				this.qianMing = ''
			},
			close() {
				this.popupShow = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	.cu-form-group .title {
		min-width: calc(8em + 25px);
	}

	.btn {
		margin: 15rpx
	}

	.scoreLine {
		display: flex;
		align-items: center;
	}

	.score {
		display: inline-block;
		font-size: 12px;
		color: grey;
	}

	/deep/ .u-alert-tips--border--success-disabled {
		border-color: rgba(255, 255, 255, 0.6);
	}

	/deep/ .u-alert-tips--bg--success-light {
		background-color: #f0f9eb;
	}

	/deep/.u-alert-title {
		color: #67c23a;
	}

	/deep/.u-alert-desc {
		color: #67c23a;
	}
</style>