intelligent-factory-front-pad/pages/index/index.vue

<template>
	<view class="content">
		<view class="content-left">
			<view class="d-flex a-center j-center w-100 flex-column u-m-t-80  u-m-b-38">
				<image src="../../static/userimg.png" style="width:62rpx;height:62rpx;" mode=""></image>
				<view class="u-m-t-2 f-w-900">{{ $store.state.userinfo.name }}</view>
			</view>
			<view v-for="(item,index) in leftData" :key="index" class="d-flex a-center u-m-l-20 u-m-r-15 u-m-b-10" style="height:38rpx"
			 :style="{'borderRight': ( index === changeStatus ? '5px #18B566 solid' : '5px #1A6CD6 solid')}" @click="changeLeft(index)">
				<image :src="item.img" style="width:25rpx;height:25rpx;" mode=""></image>
				<view style="font-size:6rpx;width:60rpx" class="u-m-l-2 f-w-900">{{ item.text }}</view>
			</view>
			<view class="d-flex a-center u-m-l-20" style="margin-top:100rpx" @click="quit">
				<image src="../../static/quit.png" style="width:25rpx;height:25rpx;" mode=""></image>
				<view style="font-size:6rpx;" class="u-m-l-8 f-w-900">退出</view>
			</view>
		</view>
		<view class="content-right" style="color: #1F2C6B;" v-if="infoStatus">
			<view class="d-flex a-center u-m-t-42 u-m-b-28 f-w">
				<view style="font-size: 16rpx;">
					<view class="u-m-r-48">{{ sjOrFx === 0 ? '首件检验放行记录表' : '首件检验防错记录表' }}</view>
					<view>共{{ sjOrFx === 0 ? recordNum + '张记录' : recordNum + '张防错' }}表待响应处理</view>
				</view>
				<image src="../../static/menu.png" class="u-p-t-4" style="width:17rpx;height:10rpx;display: flex;align-self: flex-start;"
				 mode=""></image>
			</view>
			<view class="d-flex a-center j-sb f-w-900" style="height:100%">
				<view v-for="(item,index) in rightData" :key="index" style="height:100%">
					<view class="d-flex a-center" style="font-size: 8rpx;">
						<image :src="recordList(item.type)[1]" style="width:29rpx;height:24rpx;" mode=""></image>
						<view class="u-m-l-8 u-m-r-40">{{ recordList(item.type)[0] }}</view>
						<image src="../../static/top.png" v-if="item.chu !== true" style="width:7rpx;height:4rpx;" mode="" @click.stop="showOrHidden(index)"></image>
						<image src="../../static/bottom.png" v-else style="width:7rpx;height:4rpx;" mode="" @click.stop="showOrHidden(index)"></image>
					</view>
					<view class="u-m-t-14 content-right-item" style="max-height:70%;overflow-y: auto;" v-if="item.recordList && item.recordList.length && item.chu === true">
						<view class="d-flex a-center u-m-b-10" style="font-size: 7rpx;" @click.stop="showInfo(iten.versionId)" v-for="(iten,indey) in item.recordList"
						 :key="indey">
							<image :src="recordList(item.type)[2]" style="width:21rpx;height:30rpx;" mode=""></image>
							<view class="u-m-l-6">{{ iten.name }}</view>
						</view>
					</view>
					<view class="u-m-t-14" style="padding-left: 9rpx;width: 170rpx;padding-top: 8rpx;padding-bottom: 8rpx;" v-else></view>
				</view>
			</view>
		</view>
		<view class="content-right" v-else>
			<view class="d-flex a-center j-sb u-m-t-42 u-m-b-10">
				<view class="d-flex a-center" style="font-size: 16rpx;">
					<image src="../../static/return.png" style="width:19rpx;height:19rpx;" mode="" @click="returnSjList"></image>
					<view class="u-m-l-16 u-m-r-10 f-w-900" style="color:#1A6CD6;">记录表名称</view>
					<image src="../../static/menu.png" style="width:17rpx;height:10rpx;" mode=""></image>
				</view>
				<view class="d-flex f-w-900" style="font-size: 13rpx;">
					<view class="d-flex a-center content-right-chunk b-r-5" :style="{'background': responseClickStatus ? '#999' : '#1A6CD6'}">
						<image src="../../static/xy.png" style="width:15rpx;height:15rpx;" mode=""></image>
						<view class="u-m-l-4" @click="responseClick">{{ responseClickStatus ? '已响应' : '响应' }}</view>
					</view>
					<view v-if="changeStatus !== 0" class="content-right-chunk b-r-5 f-w-900">
						保存
					</view>
					<view class="content-right-chunk b-r-5 f-w-900" :style="{'background': submitClickStatus ? '#999' : '#1A6CD6'}" @click="submitSj">
						{{ submitClickStatus ? '已提交' : '提交' }}
					</view>
					<view class="content-right-chunk b-r-5 f-w-900">
						查看附件
					</view>
				</view>
			</view>
			<template v-if="!changeStatus">
				<view class="d-flex a-center u-m-b-5 sjHead" style="font-size: 9rpx;">
					<view class="flex-1 d-flex a-center j-center b-r-5 f-w-900" :style="{'background': index === sjIndex ? '#FAB732' : '#FADB50'}"
					 style="height:24rpx;color:#fff;" v-for="(item,index) in sjHeadData" :key="index" @click="changeSj(index)">{{ item.name }}</view>
				</view>
				<view style="height:80%;overflow-y: auto;">
					<view style="background: #FAB732;color:#fff;font-size:10rpx;height:92rpx;" class="d-flex u-m-b-5 b-r-5" v-for="(item,index) in datas"
					 :key="index">
						<view class="d-flex a-center j-center u-m-l-18 u-m-r-12 u-m-t-24 button-point f-w">{{ index + 1 }}</view>
						<view style="width:80%;">
							<view class="u-m-t-12 d-flex w-100">
								<view class="f-w" style="width:62%;">
									<view class="u-m-b-2">检验特性：{{ item.inspectionItem }}</view>
									<view class="u-m-b-2">检验方法：{{ item.floor + 'Nm-' + item.top + 'Nm' + item.method }}</view>
									<view class="over_style">检验工具(首选)：{{ item.tool }}</view>
								</view>
								<view class="f-w">
									<view class="u-m-b-2">等级：{{ item.level }}</view>
									<view class="u-m-b-2">工作站：{{ item.workstation }}</view>
									<view class="d-flex a-center">
										<view class="u-m-r-6 flex-shrink">订单号 : </view>
										<input type="text" style="background: #fff;height:16rpx;width:109rpx;color:#000;border-radius: 5rpx;" v-model="item.checkSubList[0].orderId"
										 @focus="ifResponse">
									</view>
								</view>
							</view>
							<view class="d-flex a-center u-m-t-6 f-w" v-if="!item.sightCheck">
								<view class="u-m-r-6 flex-shrink">{{ item.workStationFist }}-{{ item.workStationLast }} : </view>
								<input v-for="(iten,indey) in item.checkSubList[0].checkWorkGreadList" :key="indey" type="text" v-model="iten.greadResult"
								 class="u-m-r-10" style="width:36rpx;height:21rpx;background: #fff;border-radius: 5rpx;color:#000;" @focus="ifResponse">
							</view>
							<view class="d-flex a-center u-m-t-6 f-w" v-else>
								<view :class="[ item.checkSubList[0].checkWorkGreadList[0].sightResult === true ? 'button-chunk-check' : 'button-chunk' ]"
								 class=" u-m-r-12 b-r-5" @click="changeOK(item.id,true)">OK</view>
								<view :class="[ item.checkSubList[0].checkWorkGreadList[0].sightResult === false ? 'button-chunk-check' : 'button-chunk' ]"
								 class="button-chunk b-r-5" @click="changeOK(item.id,false)">NOK</view>
							</view>
						</view>
						<view v-if="!item.checkSubList[0].orderId" class="u-m-t-36 button-chunk b-r-5 f-w" @click="save(index,item.sightCheck)">
							保存
						</view>
						<view v-else class="u-m-t-36 button-chunk b-r-5 f-w" @click="save(index,item.sightCheck)">
							编辑
						</view>
					</view>
					<view style="background: #FAB732;color:#fff;font-size:10rpx;height:92rpx;" class="d-flex u-m-b-5 b-r-5">
						<view class="d-flex a-center j-center u-m-l-18 u-m-r-12 u-m-t-24 f-w" style="width:17rpx;height:17rpx;"></view>
						<view style="width:80%;" class="u-p-r-20">
							<view class="d-flex j-sb u-m-t-24 u-m-b-8 f-w">
								<view style="font-size: 13rpx;">备注:是否使用前面所规定得扭矩扳手</view>
								<view class="d-flex a-center">
									<view :class="[ useSpanner === true ? 'button-chunk-check' : 'button-chunk' ]" class="u-m-r-12 b-r-5" @click="changeButton(1)">是</view>
									<view :class="[ useSpanner === false ? 'button-chunk-check' : 'button-chunk' ]" class="b-r-5" @click="changeButton(0)">否</view>
								</view>
							</view>
							<input type="text" class="f-w" style="background: #fff;height:21rpx;color:#000;border-radius: 5rpx;" v-model="spannerRemark"
							 @focus="ifResponse">
						</view>
						<view v-if="spannerRemark" class="u-m-t-36 button-chunk b-r-5 f-w" @click="save('-1')">
							保存
						</view>
						<view v-else class="u-m-t-36 button-chunk b-r-5 f-w" @click="save('-1')">
							保存
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="d-flex a-center u-m-b-5 sjHead" style="font-size: 9rpx;">
					<view class="flex-1 d-flex a-center j-center b-r-5 f-w-900" :style="{'background': index === fcIndex ? '#FAB732' : '#FADB50'}"
					 style="color:#fff;height:24rpx;" v-for="(item,index) in fcHeadData" :key="index" @click="changeFc(index)">{{ item.name }}</view>
				</view>
				<view style="height:80%;overflow-y: auto;">
					<view class="u-m-b-5 d-flex a-center  u-m-b-5" style="background: #FAB732;height:51rpx;border-radius: 2rpx;" v-for="(item,index) in data"
					 :key="index">
						<view style="width:8%;font-size: 9rpx;font-weight: 900;" class="d-flex flex-column a-center j-center">
							<view style="color:#1F2C6B;">OP</view>
							<view class="button-point d-flex a-center j-center u-m-t-2">5</view>
						</view>
						<view style="font-size: 10rpx;color:#fff;width:70%;font-weight: bold;">
							点检内容：方向机支架到副架38+-5.7Nm
						</view>
						<view class="d-flex a-center">
							<view class="button-chunk u-m-r-12">OK</view>
							<view class="button-chunk">NOK</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		<u-modal v-model="questionShow" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" :zoom="false"
		 width="30%">
			<view slot="default" class="u-p-b-10">
				<u-row class="d-flex j-sb a-center w-100">
					<u-col span="2" offset="10" style="display: flex;justify-content: flex-end;">
						<view @click="questionShow = false">
							<u-icon name="close-circle-fill" color="#A9A3D2" size="30"></u-icon>
						</view>
					</u-col>
				</u-row>
				<u-row justify="center" class="u-m-t-10 u-m-b-10 w-100 d-flex a-center j-center" style="font-size: 16rpx;">
					{{ modalTitles[modalTitleStatus] }}
				</u-row>
				<view class="d-flex">
					<dj-button class="u-m-t-18" content="是" @click.native="affirm" />
					<dj-button class="u-m-t-18 u-m-b-20" content="否" @click.native="questionShow = false" />
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import sj from '../../static/leftSj.png'
	import fc from '../../static/leftFc.png'
	import bFile from '../../static/bFile.png'
	import bItem from '../../static/b-item.png'
	import gFile from '../../static/gFile.png'
	import gItem from '../../static/g-item.png'
	import yFile from '../../static/yFile.png'
	import yItem from '../../static/y-item.png'
	import djButton from '../../components/dj-button.vue'
	import {
		mapMutations
	} from "vuex"
	import {
		iniPlanList,
		getDetails,
		getFrequency,
		saveResult,
		versionResponse,
		saeSpanner,
		submit
	} from "@/common/api.js"
	export default {
		components: {
			djButton
		},
		data() {
			return {
				questionShow: false,
				changeStatus: 0,
				sjOrFx: 0,
				num: 26,
				// 详情状态
				infoStatus: 1,
				maskCloseAble: false,
				sjIndex: 0,
				// 当前记录表id
				sjRecordId: "",
				// 当前type
				sjRecordType: 1,
				sjHeadData: [],
				fcIndex: 0,
				fcHeadData: [{
						'name': '日'
					},
					{
						'name': '周'
					},
					{
						'name': '月'
					}
				],
				modalTitleStatus: 0,
				modalTitles: ['数据有误,是否提交', '是否退出'],
				value: "",
				word: "",
				leftData: [{
						img: sj,
						text: '首件检验放行记录表'
					},
					{
						img: fc,
						text: '放错点检表'
					}
				],
				rightData: [{
						status: 1,
						show: true
					},
					{
						status: 2,
						show: true
					},
					{
						status: 3,
						show: true
					}
				],
				data: [{
						id: 1
					},
					{
						id: 2,
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
					{
						id: 2
					},
				],
				datas: [],
				// 备注id(检查单id)
				remarkId: '',
				// 备注
				spannerRemark: "",
				// 备注按钮
				useSpanner: '',
				// 需要响应记录
				unRes: [],
				// 响应按钮是否能点击(是否已经响应过)
				responseClickStatus: false,
				// 需要提交记录
				submi: [],
				// 提交按钮是否能点击(是否已经提交过)
				submitClickStatus: false
			}
		},
		onLoad() {
			this.init()
		},
		computed: {
			recordList() {
				return function(index) {
					if (index === 1) {
						return ['待响应记录表', yFile, yItem]
					} else if (index === 2) {
						return ['处理中记录表', bFile, bItem]
					} else {
						return ['已完成记录表', gFile, gItem]
					}
				}
			},
			recordNum() {
				if(this.rightData[0].recordList) {
					return this.rightData[0].recordList.length
				}
			}
		},
		methods: {
			...mapMutations(['logout']),
			init() {
				iniPlanList().then(res => {
					if (res.status === '20000') {
						this.rightData = res.data
					}
				})
			},
			changeLeft(index) {
				this.changeStatus = index
				this.sjOrFx = index
				this.infoStatus = 1
				this.returnIndex()
			},
			showInfo(id) {
				// 首件: 记录当前记录表id
				this.sjRecordId = id
				this.sjHeadData = []
				getFrequency({
					id: id
				}).then(res => {
					if (res.status === '20000') {
						this.unRes = res.data.unRes
						if (this.unRes && this.unRes.indexOf(1) === -1) {
							this.responseClickStatus = true
						}
						this.submi = res.data.submi
						if (this.submi && this.submi.indexOf(1) === -1) {
							this.submitClickStatus = true
						}
						for (let i of res.data.allCheckType) {
							if (i === 1) {
								this.sjHeadData.push({
									'name': '首件'
								})
							} else if (i === 2) {
								this.sjHeadData.push({
									'name': '200件'
								})
							} else {
								this.sjHeadData.push({
									'name': '中断件'
								})
							}
						}
						getDetails({
							id: id,
							type: 1
						}).then(res => {
							if (res.status === '20000') {
								this.infoStatus = 0
								this.returnIndex()
								this.datas = res.data.versionSubList
								this.spannerRemark = res.data.spannerRemark
								this.useSpanner = res.data.useSpanner
								this.remarkId = res.data.id
							}
						})
					}
				})
			},
			// 首件详情页返回
			returnSjList() {
				this.infoStatus = 1
				this.init()
			},
			// 响应
			responseClick() {
				if (this.responseClickStatus) return
				let type = this.sjRecordType
				let id = this.sjRecordId
				versionResponse({
					'id': id,
					'type': type
				}).then(res => {
					if (res.status === '20000') {
						getFrequency({
							id: id
						}).then(res => {
							this.unRes = res.data.unRes
							this.sjHeadData = []
							if (this.unRes.indexOf(this.sjIndex + 1) === -1) {
								this.responseClickStatus = true
							}
							// this.submi =  res.data.submi
							// if (this.submi.indexOf(this.sjIndex + 1)) === -1) {
							// 	this.submitClickStatus = true
							// }
							for (let i of res.data.allCheckType) {
								if (i === 1) {
									this.sjHeadData.push({
										'name': '首件'
									})
								} else if (i === 2) {
									this.sjHeadData.push({
										'name': '200件'
									})
								} else {
									this.sjHeadData.push({
										'name': '中断件'
									})
								}
							}
							getDetails({
								'id': id,
								'type': type
							}).then(res => {
								if (res.status === '20000') {
									this.datas = res.data.versionSubList
									this.spannerRemark = res.data.spannerRemark
									this.useSpanner = res.data.useSpanner
									this.remarkId = res.data.id
								}
							})
						})


					}
				})
			},
			showOrHidden(index) {
				this.rightData[index].chu = !this.rightData[index].chu
			},
			// 切换右侧栏
			changeSj(index) {
				this.sjIndex = index
				if (this.unRes && this.unRes.indexOf(this.sjIndex + 1) === -1) {
					this.responseClickStatus = true
				} else {
					this.responseClickStatus = false
				}
				if (this.submi && this.submi.indexOf(this.sjIndex + 1) === -1) {
					this.submitClickStatus = true
				} else {
					this.submitClickStatus = false
				}
				this.sjRecordType = index + 1
				getDetails({
					'id': this.sjRecordId,
					type: index + 1
				}).then(res => {
					if (res.status === '20000') {
						this.datas = res.data.versionSubList
						this.spannerRemark = res.data.spannerRemark
						this.useSpanner = res.data.useSpanner
						this.remarkId = res.data.id
					}
				})
			},
			changeFc(index) {
				this.fcIndex = index
			},
			// 还原索引
			returnIndex() {
				this.sjIndex = 0
				this.fcIndex = 0
			},
			// 提交
			submitSj() {
				if (this.submitClickStatus) return
				let data = {'type':this.sjRecordType,'id':this.sjRecordId,'versionSubList':this.datas}
				submit(data).then(res=> {
					if(res.status === '20000') {
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success'
						})
					}
				})
			},
			// 保存
			save(index,bool) {
				if (this.ifResponse()) {
					if(index === '-1'){
						// 保存时必填
						if (!this.spannerRemark) {
							this.$refs.uToast.show({
								title: '请填写备注',
								type: 'error'
							})
							return
						}
						if (typeof(this.useSpanner) != 'boolean') {
							this.$refs.uToast.show({
								title: '请点击按钮',
								type: 'error'
							})
							return
						}
						let data = {'checkResultId':this.remarkId,'spannerRemark':this.spannerRemark,'useSpanner':this.useSpanner}
						saeSpanner(data).then(res=> {
							if(res.status === '20000'){
								this.$refs.uToast.show({
									title: '保存成功',
									type: 'success'
								})
							}
						})
					} else {
						let res = this.datas[index].checkSubList[0]
						// 保存时必填
						if (!res.orderId) {
							this.$refs.uToast.show({
								title: '请填写订单号',
								type: 'error'
							})
							return
						}
						if(!bool){
							let flag = true
							if (res.checkWorkGreadList.length) {
								for (let i of res.checkWorkGreadList) {
									if (!i.greadResult) {
										flag = false
										this.$refs.uToast.show({
											title: '请将工位分数填全',
											type: 'error'
										})
									}
								}
							
							}
							if (flag) {
								saveResult(res).then(res => {
									if (res.status === '20000') {
										this.$refs.uToast.show({
											title: '保存成功',
											type: 'success'
										})
									}
								})
							}
						} else {
							if(typeof(res.checkWorkGreadList[0].sightResult) != 'boolean'){
								this.$refs.uToast.show({
									title: '请点击按钮',
									type: 'error'
								})
								return
							}
							saveResult(res).then(res => {
								if (res.status === '20000') {
									this.$refs.uToast.show({
										title: '保存成功',
										type: 'success'
									})
								}
							})
						}

					}
				}
			},
			changeButton(index) {
				if (this.ifResponse()) {
					this.useSpanner = index ? true :false
				}
			},
			changeOK(id, bool) {
				if (this.ifResponse()) {
					for (let i of this.datas) {
						if (id === i.id) {
							i.checkSubList[0].checkWorkGreadList[0].sightResult = bool
							return
						}
					}
				}
			},
			// 提交
			// submit() {
			// 	this.questionShow = true
			// 	this.modalTitleStatus = 0
			// },
			// 退出登录
			quit() {
				this.questionShow = true
				this.modalTitleStatus = 1
			},
			// 确认
			affirm() {
				this.questionShow = false
				// 提交
				if (!this.modalTitleStatus) {
					console.log('提交');
					// 退出登录
				} else {
					this.logout()
				}
			},
			// 是否响应
			ifResponse() {
				let responseStatus = true
				for (let i of this.unRes) {
					if (parseInt(this.sjIndex + 1) === parseInt(i)) {
						uni.showModal({
							title: '请先执行响应'
						})
						responseStatus = false
					}
				}
				return responseStatus
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		height: 100%;
		min-height: 100vh;
		display: flex;
		background: linear-gradient(208deg, #FFFFFF 0%, #F2F7FF 100%);

		.content-left {
			width: 20%;
			background-color: #1A6CD6;
			font-size: 9rpx;
			color: #fff;
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
		}

		.content-right {
			width: 80%;
			height: 100%;
			padding-left: 22rpx;
			padding-right: 22rpx;
			color: #1F2C6B;
			overflow: hidden;

			.content-right-item {
				width: 170rpx;
				background: #fff;
				border-radius: 15rpx;
				box-shadow: 0px 10px 10px #E5E8F9;
				padding-left: 9rpx;
				padding-top: 8rpx;
				padding-bottom: 8rpx;
			}

			.content-right-chunk {
				padding: 5rpx 10rpx;
				background: #1A6CD6;
				color: #fff;
				margin-left: 11rpx;
			}
		}
	}

	.button-chunk {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 48rpx;
		height: 19rpx;
		background: #FCDB99;
		color: #383143;
		font-weight: bold;
		font-size: 10rpx;
	}

	.button-chunk-check {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 48rpx;
		height: 19rpx;
		background: #999;
		color: #fff;
		font-weight: bold;
		font-size: 10rpx;
	}

	.button-point {
		width: 17rpx;
		height: 17rpx;
		background: #fff;
		font-size: 9rpx;
		color: #000;
		border-radius: 50%;
	}

	.sjHead>view+view {
		margin-left: 5rpx;
	}
</style>