修改整改流程

李乾广
Commit 3d79e91c authored Aug 28, 2023 by 李乾广
Showing 1 changed file with 130 additions and 12 deletions
h5/src/App.vue
--- a/h5/src/App.vue
+++ b/h5/src/App.vue
@@ -3,11 +3,41 @@
        <div v-if="picUrl">
            <!-- <img mode="widthFix" style="position:relative;width:100vw;height: 50vwpx;" :src="picUrl"/> -->
            <canvas id="painter" ref="captureCanvas"></canvas>
+            <div class="template-name-box">
+				<div class="template-name-content">
+					<span class="template-name-title">模板名称：</span>
 					<van-cell :title="templateNameDefault" @click="show = true" is-link />
 					<van-popup v-model:show="show" position="bottom">
 					    <van-picker :columns="templateNameList" @confirm="onConfirm" @cancel="onCancel" />
 					</van-popup>
-            <div class="itemList" id="itemList">
+				</div>
+				<van-button class="template-btn" plain type="primary" size="small" @click="templateClick"> + 问题项</van-button>
+			</div>
+			<div class="template-select-box" v-if="checkboxRefsShow.length > 0">
+				<div class="template-select-list">
+					<van-tag class="template-select-one" v-for="(item, index) in checkboxRefsShow" :key="index" closeable size="large" type="primary" @close="deleteTemplate(item,index)">
+					  {{item.name}}
+					</van-tag>
+				</div>
+			</div>
+			<van-popup v-model:show="templateDialogShow" position="bottom" class="template-list-model" closeable round>
+				<div class="template-list-box">
+					<div class="template-list-title">添加问题项</div>
+					<div class="template-list">
+						<van-checkbox-group shape="square" v-model="checked" ref="checkboxGroup">
+						  <van-cell-group inset>
+						    <van-cell v-for="(item, index) in templateItemList" center clickable :key="index" :title="item.name" @click="toggle(index)" >
+						      <template #right-icon>
+						        <van-checkbox :name="item.id" :ref="el => checkboxRefs[index] = el" @click.stop />
+						      </template>
+						    </van-cell>
+						  </van-cell-group>
+						</van-checkbox-group>
+					</div>
+					<van-button class="template-list-submit" round block type="primary"  @click="templateSubmit">确认</van-button>
+				</div>
+			</van-popup>
+            <!-- <div class="itemList" id="itemList">
                <van-checkbox-group v-model="checked">
                    <van-cell-group inset>
                        <van-cell v-for="(item, index) in templateItemList" clickable center :key="index" :title="'['+item.score+']'+item.name" :label="item.intro" @click="toggle(index)">
@@ -17,8 +47,9 @@
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
-            </div>
+            </div> -->
            <div class="formBox">
+				<van-field v-model="message" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" />
                <van-field name="radio" label="是否需要整改">
                    <template #input>
                        <van-radio-group v-model="isRectify" direction="horizontal">
@@ -44,12 +75,11 @@
                    @cancel="showRectification = false"
                  />
                </van-popup>
-                <van-cell-group inset>
+				<div style="padding:15px;">
-                    <van-field v-model="message" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" />
-                </van-cell-group>
 					<van-button round block type="primary"  @click="submitContent">提交</van-button>
 				</div>
            </div>
+        </div>
        <div v-else>
            <livePlayer ref="livePlayerRef" :params="paramObj"></livePlayer>
            <div class="tour-btns" v-if="paramObj.type=='titem'">
@@ -98,7 +128,7 @@
    }
    /*获取 Url 参数 S*/
    import parse from 'url-param-parser';
-    let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=16e4bf63-a3cd-420c-895a-a22617939989&type=undefined&id=42&channelid=122&platform=2&name=全景球机&mallId=9216&bookmark=true&accountId=337'
+    let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=e79ef960-d219-420b-8150-7ced24b5bbc9&type=undefined&id=39&channelid=127&platform=2&name=河南分公司-华衍&mallId=9217&bookmark=true&accountId=337'
    const paramObj = parse(url).search || {}
    // const paramObj = parse(window.location.href).search || {}
    /********************************/
@@ -159,6 +189,8 @@
    const checked = ref([]);
    const onConfirm = (value, index) => {
        templateNameDefault.value = value;
+        checkboxRefsShow.value = [];
+        checkboxRefs.value = [];
        checked.value = []
        if (index > 0) {
            getPatrolTemplateOne(templateList.value[index].id)
@@ -174,9 +206,31 @@
        show.value = false;
    }
    const checkboxRefs = ref([]);
+    const checkboxRefsShow = ref([]);
+	const templateClick = (val) => {
+		templateDialogShow.value = true;
+    }
    const toggle = (index) => {
        checkboxRefs.value[index].toggle();
    }
+	const templateSubmit = (index) => {
+		templateDialogShow.value = false;
+		if(checked.value && checked.value.length>0){
+			checkboxRefsShow.value = []
+		    checked.value.forEach(item=>{
+		        let sopItem = templateItemList.value.find(childItem => item==childItem.id);
+		        checkboxRefsShow.value.push({
+		            "id": sopItem.id,
+		            "name": sopItem.name,
+		        })
+		    })
+		}
+	}
+	const deleteTemplate = (item,index) => {
+	    checkboxRefsShow.value.splice(index,1)
+	}
    const message = ref();
    const isRectify = ref("1")
    const showRectification = ref(false)
@@ -217,6 +271,8 @@
            }else{
                return Toast.fail('请选择整改人');
            }
+        } else {
+			formData.append('handler', '')
 		}
        formData.append('pic', base64Str)
        tourApi.confirmPatrolRecord(formData, {
@@ -231,6 +287,8 @@
                    message.value = '';
                    rectificationUserName.value = '';
                    checked.value = [];
+					checkboxRefsShow.value = [];
+					checkboxRefs.value = [];
                    let context = captureCanvas.value.getContext("2d")
                    context.clearRect(0, 0, window.innerWidth, window.innerWidth/1.78)
                    picUrl.value = '';
@@ -273,6 +331,8 @@
    const tempalteId = ref()
    // 单个模板检查项
    const templateItemList = ref([]);
+	// 检查项弹框显示
+	const templateDialogShow = ref(false);
    const getPatrolTemplateList = () => {
        tourApi.getPatrolTemplateListFun({
            accountId: paramObj.accountId,
@@ -284,15 +344,15 @@
                if (templateList.value.length) {
                    tempalteId.value = templateList.value[0].id
                    getPatrolTemplateOne(templateList.value[0].id)
-                    templateNameDefault.value = templateList.value[0].name;
+                    // templateList.value.unshift({
-                    templateList.value.unshift({
+                    //     name: '全部',
-                        name: '全部',
+                    //     id: ''
-                        id: ''
+                    // })
-                    })
                    templateNameList.value = []
                    templateList.value.forEach(item => {
                        templateNameList.value.push(item.name)
                    })
+					templateNameDefault.value = templateList.value[0].name;
                }
            }
        })
@@ -362,7 +422,6 @@
                    let ctx = captureCanvas.value.getContext("2d");
                    ctx.drawImage(image, 0, 0, window.innerWidth, heightC);
                    capture()
-                    document.getElementById('itemList').style.height = (window.innerHeight - heightC - 250) + 'px'
                }
                // this.$refs.livePlayerRef.value.playerEz.stop();
                // wx.miniProgram.redirectTo({
@@ -503,4 +562,63 @@
    :deep(.van-cell-group--inset) {
        margin: 0;
    }
+	.template-select-box{
+		background: #fff;
+	}
+	.template-select-list{
+		padding:30px 0px 10px;
+		margin:0 30px;
+		border-bottom: 1px solid var(--van-cell-border-color);
+		.template-select-one{
+			margin: 0 20px 20px 0;
+			padding: 1.8vw;
+			/deep/.van-tag__close{
+				margin-left: 10px;
+			}
+		}
+	}
+	.template-name-box{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background:#fff;
+		padding: 0 30px;
+		border-bottom: 1px solid var(--van-cell-border-color);
+	}
+	.template-name-content{
+		display: flex;
+		align-items: center;
+	}
+	.template-name-title{
+		width: 140px;
+		min-width: 140px;
+		font-size: var(--van-cell-font-size);
+		color: var(--van-field-label-color);
+	}
+	.template-btn{
+		width: 130px;
+	}
+	.template-list-model{
+		.template-list-box{
+			width: calc(100vw - 0px);
+			height: calc(80vh - 0px);
+			padding: 30px;
+			background: #fff;
+			border-top-left-radius: 10px;
+			border-top-right-radius: 10px;
+			.template-list-title{
+				font-size: var(--van-font-size-lg);
+				line-height: var(--van-font-size-lg);
+				margin-bottom: 30px;
+			}
+			.template-list{
+				height: 62vh;
+				overflow: auto;
+			}
+			.template-list-submit{
+				margin-top: 30px;
+			}
+		}
+	}
 </style>