|
|
@@ -0,0 +1,441 @@
|
|
|
+<template>
|
|
|
+ <div class="lz-edit">
|
|
|
+ <nav-bar></nav-bar>
|
|
|
+ <div class="page-container">
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <div class="card" v-if="taskInfo">
|
|
|
+ <van-panel :title="taskInfo.taskName" :status="getDictLabel(taskInfo.status,'safety_check_status')">
|
|
|
+ <van-cell title="日期时间" :value="rangDate(taskInfo.planstarttime,taskInfo.planendtime)" />
|
|
|
+ <van-cell title="受检机构" :value="taskInfo.beCheckedOrgName" />
|
|
|
+ <van-field
|
|
|
+ v-model="taskInfo.checkTeam"
|
|
|
+ label="检查组成员"
|
|
|
+ rows="2"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入用户名" />
|
|
|
+ </van-panel>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 检查项目 -->
|
|
|
+ <fieldset class="fieldset" :disabled="!enable">
|
|
|
+ <div class="card" >
|
|
|
+ <p class="legend">检查项目 <span @click="addCheck">添加检查内容</span></p>
|
|
|
+ <van-collapse v-model="activeNames" v-for="v in checkList" :key="v.areaId">
|
|
|
+ <van-collapse-item :title="v.itemName" :name="v.itemName" >
|
|
|
+ <div v-for="(item,index) in v.pointList" :key="item.itemId">
|
|
|
+ <van-cell :title="item.itemName">
|
|
|
+ <template #right-icon>
|
|
|
+ <van-switch
|
|
|
+ v-if="enable"
|
|
|
+ style="margin-left: 10px;"
|
|
|
+ v-model="item.resvalue"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ inactive-color="#4fc08d"
|
|
|
+ active-color="#ee0a24"
|
|
|
+ @change="switchChange(item)"
|
|
|
+ size="20" />
|
|
|
+ <span v-else>
|
|
|
+<!-- <van-icon v-if="item.resvalue" name="success" color="#07c160" />-->
|
|
|
+<!-- <van-icon v-else name="fail" color="#ee0a24"/>-->
|
|
|
+ <van-tag v-if="item.resvalue" type="warning">隐患</van-tag>
|
|
|
+ <van-tag v-else type="success">正常</van-tag>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell-group v-show="item.resvalue">
|
|
|
+ <select-cell required :disabled="!enable" title="整改期限" v-model="item.rectificationDeadline" :data-list="dayList" />
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="item.resremark"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ label="情况描述:"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"/>
|
|
|
+ <div class="upload-box" >
|
|
|
+ <uploader :maxCount="5" v-if="enable" v-model="item.imgData"/>
|
|
|
+ <van-cell v-else>
|
|
|
+ <div class="nfc-img van-hairline--surround" v-for="(v,i) in item.imgData" :key="v.imgPath" @click="clickWarnImage(item.imgData,i)">
|
|
|
+ <img :src="imgUrl(v.imgPath)" alt="" >
|
|
|
+ <span>{{v.checkName}}</span>
|
|
|
+ </div>
|
|
|
+<!-- <img class="nfc-img" v-for="v in item.imgData" :src="imgUrl(v.imgPath)" alt="" :key="v.id">-->
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ <date-cell
|
|
|
+ :disabled="!enable"
|
|
|
+ v-if="item.businessType === 1"
|
|
|
+ v-for="(val,ind) in item.protectionVo"
|
|
|
+ :title="val.protectionName"
|
|
|
+ v-model="val.statusUpdateTime"
|
|
|
+ :key="val.id"
|
|
|
+ date-type="datetime" />
|
|
|
+ </div>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </div >
|
|
|
+
|
|
|
+ <div v-if="enable" class="flex-box">
|
|
|
+ <van-button type="default" style="width: 30%;" plain @click="goBack">授权</van-button>
|
|
|
+ <van-button type="info" style="width: 30%;" plain hairline @click="saveData">保存</van-button>
|
|
|
+ <van-button type="info" style="width: 30%;" @click="submitData">提交</van-button>
|
|
|
+ </div>
|
|
|
+ </fieldset>
|
|
|
+ </div>
|
|
|
+
|
|
|
+<!-- <van-image-preview v-model="showPreView" :images="preViewImages.images" :startPosition="preViewImages.startPosition">-->
|
|
|
+<!-- <template v-slot:index>第{{ index }}页</template>-->
|
|
|
+<!-- </van-image-preview>-->
|
|
|
+
|
|
|
+ <!-- nfc弹窗 -->
|
|
|
+ <nfc-popup v-if="enable" ref="NfcPopup" @change="changeNfcImg"></nfc-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import NavBar from '@/components/NavBar';
|
|
|
+import SelectCell from '@/components/selectCell';
|
|
|
+import DateCell from '@/components/dateCell';
|
|
|
+import Uploader from '@/components/upload/uploader';
|
|
|
+import NfcPopup from '@/components/nfcPopup/more';
|
|
|
+import {registerDetail,registerSubmit} from "./api";
|
|
|
+import {formatDate} from "@/filters/filter";
|
|
|
+import {getDict} from "@/api/toConsult";
|
|
|
+import {imgUrl} from "@/utils";
|
|
|
+import { ImagePreview } from 'vant';
|
|
|
+import {mapGetters} from "vuex";
|
|
|
+export default {
|
|
|
+ components:{NavBar,SelectCell,DateCell,Uploader,NfcPopup},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ activeNames: ['1'],
|
|
|
+ //基本信息
|
|
|
+ taskInfo:[],
|
|
|
+ NFCList:[],
|
|
|
+ //区域下检查内容列表
|
|
|
+ checkList:[],
|
|
|
+ //检查内容具体项列表
|
|
|
+ checkItemList:[],
|
|
|
+ //nfc扫描数量
|
|
|
+ NFCNum:0,
|
|
|
+ //所有检查项数量
|
|
|
+ allCheckNum:0,
|
|
|
+ //区域下检查项数量
|
|
|
+ checkNum:0,
|
|
|
+ //nfc图片
|
|
|
+ nfcImage:[],
|
|
|
+ enable:false,
|
|
|
+ stateList:[],
|
|
|
+ dayList:[],
|
|
|
+ preViewImages:{
|
|
|
+ images:[],
|
|
|
+ startPosition:0
|
|
|
+ },
|
|
|
+ dicts:['safety_check_status'],
|
|
|
+ showPreView:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapGetters(['dictionary'])
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ getDict( 'resumption_status' ).then(res => {
|
|
|
+ let { data } = res
|
|
|
+ this.stateList = data;
|
|
|
+ })
|
|
|
+ getDict( 'rectification_deadline' ).then(res => {
|
|
|
+ let { data } = res
|
|
|
+ this.dayList = data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ addCheck(){
|
|
|
+ this.$router.push({path:'/addCheckRegister'});
|
|
|
+ },
|
|
|
+ clickWarnImage(arr,i){
|
|
|
+ this.preViewImages.images = arr.map(v=>imgUrl(v.imgPath));
|
|
|
+ this.preViewImages.startPosition = i;
|
|
|
+ ImagePreview(this.preViewImages)
|
|
|
+ },
|
|
|
+ preViewNFC(i){
|
|
|
+ this.preViewImages.images = this.nfcImage.map(v=>imgUrl(v.img));
|
|
|
+ this.preViewImages.startPosition = i;
|
|
|
+ ImagePreview(this.preViewImages)
|
|
|
+ },
|
|
|
+ getDicts(s){
|
|
|
+ return this.stateList.find(v=> s == v.dictValue)?.dictLabel;
|
|
|
+ },
|
|
|
+ //初始化数据
|
|
|
+ getData() {
|
|
|
+ let taskId = this.$route.query.id;
|
|
|
+ registerDetail(taskId).then(res=>{
|
|
|
+ console.log(res,'res')
|
|
|
+ this.taskInfo = res.data;
|
|
|
+ this.enable = this.taskInfo.status === 1 || this.taskInfo.status === 2; //是否可编辑
|
|
|
+ this.checkList = res.data.checkList;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //保存数据
|
|
|
+ saveData(){
|
|
|
+ let pointdata = [];
|
|
|
+ let checkNFC = [];
|
|
|
+ this.areaList.forEach(area=>{
|
|
|
+ area.nfclist.forEach(v=>{
|
|
|
+ if(v.status === 1){
|
|
|
+ checkNFC.push(v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ area.checklist.forEach(item=>{
|
|
|
+ item.checkitemlist.forEach(checkItem=>{
|
|
|
+ checkItem.protections = checkItem.protectionVo;
|
|
|
+ checkItem.resRemark = checkItem.resremark;
|
|
|
+ checkItem.resStatus = checkItem.resstatus;
|
|
|
+ checkItem.areaId = checkItem.areaid;
|
|
|
+ checkItem.id = checkItem.pointdataid;
|
|
|
+ checkItem.pointId = checkItem.pointid;
|
|
|
+ checkItem.resValue = checkItem.resvalue;
|
|
|
+ checkItem.resumptionId = this.$route.query.id;
|
|
|
+ pointdata.push(checkItem);
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+ //验证必填项
|
|
|
+ let arr = pointdata.filter(v=>{
|
|
|
+ if(v.resvalue === 1 ){
|
|
|
+ return !v.resremark || !v.rectificationDeadline
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(arr.length) return this.$toast(`${arr[0].areaname}-${arr[0].itemname}:信息不完整请填写`);
|
|
|
+ let data = {
|
|
|
+ dateTime:new Date(),
|
|
|
+ isSubmit:0,
|
|
|
+ resumptionId:this.$route.query.id,
|
|
|
+ year: this.taskInfo.year,
|
|
|
+ quarter: this.taskInfo.quarter,
|
|
|
+ nfcData:checkNFC,
|
|
|
+ pointdata,
|
|
|
+ }
|
|
|
+ saveTaskData(data).then(res=>{
|
|
|
+ this.$toast('提交成功');
|
|
|
+ this.$router.go(-1);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //获取当前区域检查项数量
|
|
|
+ getCheckItemNum(){
|
|
|
+ let num = 0;
|
|
|
+ this.selectArea.checklist.forEach(v=>{
|
|
|
+ num += v.checkitemlist.length;
|
|
|
+ });
|
|
|
+ this.checkNum = num;
|
|
|
+ },
|
|
|
+ //获取当前区域nfc数量
|
|
|
+ getNFCItemNum(){
|
|
|
+ let num = 0;
|
|
|
+ this.selectArea.nfclist.forEach(v=>{
|
|
|
+ if(v.status === 0 || !v.img){
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.NFCNum = num;
|
|
|
+ },
|
|
|
+ //提交数据
|
|
|
+ submitData(){
|
|
|
+ let pointdata = [];
|
|
|
+ let checkNFC = [];
|
|
|
+ this.areaList.forEach(area=>{
|
|
|
+ area.nfclist.forEach(v=>{
|
|
|
+ if(v.status === 1){
|
|
|
+ checkNFC.push(v)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ area.checklist.forEach(item=>{
|
|
|
+ item.checkitemlist.forEach(checkItem=>{
|
|
|
+ checkItem.protections = checkItem.protectionVo;
|
|
|
+ checkItem.resRemark = checkItem.resremark;
|
|
|
+ checkItem.resStatus = checkItem.resstatus;
|
|
|
+ checkItem.areaId = checkItem.areaid;
|
|
|
+ checkItem.id = checkItem.pointdataid;
|
|
|
+ checkItem.pointId = checkItem.pointid;
|
|
|
+ checkItem.resValue = checkItem.resvalue;
|
|
|
+ checkItem.resumptionId = this.$route.query.id;
|
|
|
+ pointdata.push(checkItem);
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ //验证必填项
|
|
|
+ let arr = pointdata.filter(v=>{
|
|
|
+ if(v.resvalue === 1 ){
|
|
|
+ console.log(v,'验证')
|
|
|
+ return !v.resremark || !v.rectificationDeadline
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(arr.length) return this.$toast(`${arr[0].areaname}-${arr[0].itemname}:信息不完整请填写`);
|
|
|
+
|
|
|
+ let data = {
|
|
|
+ dateTime:new Date(),
|
|
|
+ isSubmit:1,
|
|
|
+ resumptionId:this.$route.query.id,
|
|
|
+ year: this.taskInfo.year,
|
|
|
+ quarter: this.taskInfo.quarter,
|
|
|
+ nfcData:checkNFC,
|
|
|
+ pointdata,
|
|
|
+ }
|
|
|
+ saveTaskData(data).then(res=>{
|
|
|
+ this.$toast('提交成功');
|
|
|
+ this.$router.go(-1);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //返回
|
|
|
+ goBack(){
|
|
|
+ this.$router.go(-1);
|
|
|
+ this.clearData();
|
|
|
+ },
|
|
|
+ //点击NFC图标
|
|
|
+ clickNFC(){
|
|
|
+ if(!this.NFCNum) return;
|
|
|
+ let arr = this.selectArea.nfclist.filter(item=>{
|
|
|
+ return item.status == 0;
|
|
|
+ })
|
|
|
+ this.$refs.NfcPopup.show(arr);
|
|
|
+ },
|
|
|
+ //清空数据
|
|
|
+ clearData(){
|
|
|
+ this.areaList = [];
|
|
|
+ this.taskInfo= [];
|
|
|
+ this.selectArea = [];
|
|
|
+ this.NFCList = [];
|
|
|
+ this.checkList = [];
|
|
|
+ this.checkItemList = [];
|
|
|
+ this.NFCNum = 0;
|
|
|
+ this.enable = false;
|
|
|
+ },
|
|
|
+ //切换开关时添加操作时间
|
|
|
+ switchChange(item){
|
|
|
+ console.log(item,'666')
|
|
|
+ item.resTime = formatDate(new Date());
|
|
|
+ },
|
|
|
+ //添加图片时的回调
|
|
|
+ changeNfcImg(imgItem){
|
|
|
+ console.log(imgItem,this.selectArea.nfclist,'imgItem')
|
|
|
+ this.selectArea.nfclist.forEach(v=>{
|
|
|
+ if(v.nfccdoe === imgItem.nfcCode){
|
|
|
+ v.img = imgItem.url;
|
|
|
+ v.status = 1;
|
|
|
+ v.scanMethod = 1;
|
|
|
+ this.nfcImage.push(v);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log( this.selectArea.nfclist,this.nfcImage,'nfcObj')
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+ .lz-edit{
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .page-container{
|
|
|
+ height: calc(100vh - 194px);
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .flex-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ >span{
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ font-size: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >span{
|
|
|
+ color: orange;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: 0 10px 10px #eaeaea;
|
|
|
+ }
|
|
|
+ .check-area{
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ margin: 10px;
|
|
|
+ padding:20px;
|
|
|
+ color:#aaa;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 2px 6px #ddd;
|
|
|
+ }
|
|
|
+ .nfc-icon{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .custom-title {
|
|
|
+ align-self: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .upload-box{
|
|
|
+ margin: 30px;
|
|
|
+ }
|
|
|
+ .warning-msg{
|
|
|
+ color: orange;
|
|
|
+ text-align: center;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #fff;
|
|
|
+ background-color: #1989fa;
|
|
|
+ }
|
|
|
+ .nfc-img{
|
|
|
+ display: inline-block;
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ margin: 0 10px;
|
|
|
+ position: relative;
|
|
|
+ >img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ >span{
|
|
|
+ position: absolute;
|
|
|
+ padding: 0 10px;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0,0,0,.2 );
|
|
|
+ color: #eaeaea;
|
|
|
+ font-size: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|