coys

src/views/menu/rehearsalTask/components/rehearsalTaskSign.vue

@@ -2,114 +2,242 @@
   <div>
     <NavBar :go="{ type: 'push', path: goBack }" />
     <div class="bigbox">
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>标题</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.title }}</div>
+           
+            
+            
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>单位名称</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.orgName }}</div>
+          </van-col>
+        </van-row>
+      </div>
 
-    
-    <div class="mainItem">
-      <div class="label">标题</div>
-      <div>{{ trainingData.title }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">单位名称</div>
-      <div>{{ trainingData.orgName }}</div>
-    </div>
-   
-    <div class="mainItem">
-      <div class="label">演练开始时间</div>
-      <div>{{ trainingData.drillStartTime }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">演练结束时间</div>
-      <div>{{ trainingData.drillEndTime }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">演练地点</div>
-      <div>{{ trainingData.drillSite }}</div>
-    </div>
-    <!-- <div class="mainItem">
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>演练开始时间</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.drillStartTime }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>演练结束时间</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.drillEndTime }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>演练地点</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.drillSite }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <!-- <div class="mainItem">
       <div class="label">演练类型</div>
       <div>{{ trainingData.categoryText }}</div>
     </div> -->
-    <div class="mainItem mainItemData">
-      <p class="label labelPeople">演练计划资料</p>
-      <div>
-        <div v-for="item in studyList" :key="item.name">
-          <van-tag type="primary" class="tagCls" plain @click="tagHandler(item)">{{ item.name }}</van-tag>
-        </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>演练计划资料</div>
+          </van-col>
+          <van-col :span="16" class="zl">
+            <div v-for="item in studyList" :key="item.name">
+              <van-tag type="primary" class="tagCls" plain @click="tagHandler(item)">{{ item.name }}</van-tag>
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>指挥人</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.hostName }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>演练项目</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.typeText }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>预设案由</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.presetCase }}</div>
+          </van-col>
+        </van-row>
       </div>
-    </div>
-    <div class="mainItem">
-      <div class="label">指挥人</div>
-      <div>{{ trainingData.hostName }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">演练项目</div>
-      <div>{{ trainingData.typeText }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">预设案由</div>
-      <div>{{ trainingData.presetCase }}</div>
-    </div>
 
-    <div class="mainItem">
-      <div class="label">演练情况</div>
-      <div>{{ trainingData.drillSituation }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">点评总结</div>
-      <div>{{ trainingData.comment }}</div>
-    </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>演练情况</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.drillSituation }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>点评总结</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.comment }}</div>
+          </van-col>
+        </van-row>
+      </div>
 
-    <div class="mainItem">
-      <div class="label">参与人员</div>
-      <div>{{ taskUserList }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">缺席人员</div>
-      <div>{{ qsUserList }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">上传图片</div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>参与人员</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ taskUserList }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>缺席人员</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ qsUserList }}</div>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>上传图片</div>
+          </van-col>
+          <van-col :span="16">
+            <imgCom
+              :width="'100'"
+              v-for="item in imgList"
+              :list="imgList"
+              :key="item"
+              :height="'100'"
+              :src="item"
+            ></imgCom>
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem" v-if="peopleShow">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>参与人员签名图片</div>
+          </van-col>
+          <van-col :span="16">
+            <!-- signUserList -->
+            <template v-for="item in signUserList">
+              <imgCom
+                :width="'100'"
+                v-if="item.signImage"
+                :list="signUserListMap"
+                :key="item.userId"
+                :height="'100'"
+                :src="item.signImage"
+              ></imgCom>
+            </template>
+          </van-col>
+        </van-row>
 
-      <imgCom :width="'100'" v-for="item in imgList" :list="imgList" :key="item" :height="'100'" :src="item"></imgCom>
-    </div>
-    <div class="mainItem" v-if="peopleShow">
-      <div class="label labelPeople">参与人员签名图片</div>
-      <template v-for="item in signUserList">
-        <imgCom :width="'100'" v-if="item.signImage" :list="signUserListMap" :key="item.userId" :height="'100'" :src="item.signImage"></imgCom>
-      </template>
-    </div>
-    <div class="mainItem" v-if="evaluate">
-      <div class="label">评分</div>
-      <div><van-rate :disabled="disabledShow" v-model="value" :count="10" /></div>
-    </div>
-    
+      </div>
+      <div class="mainItem" v-if="evaluate">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>评分</div>
+          </van-col>
+          <van-col :span="16">
+            <van-rate :disabled="disabledShow" v-model="value" :count="10" />
+          </van-col>
+        </van-row>
 
-    <div class="mainItem" v-if="disabledShow">
-      <div class="label">评分</div>
-      <div>{{ value }}分</div>
-    </div>
-   
-    <div class="mainItem" v-if="islearning">
-      <div class="label">评优状态</div>
-      <div>{{ trainingData.recStatusText }}</div>
-    </div>
-    <div class="mainItem" v-if="$route.params.id.split('_')[1] === 'comment'">
-      <!-- <div class="label"></div> -->
-      <div>
-        <van-checkbox-group v-model="result" direction="horizontal" @change="clickChekcBox($event)">
-          <van-checkbox
-            v-for="item in resultList"
-            :key="item.value"
-            :disabled="item.disabled"
-            shape="square"
-            :checked="item.checked"
-            :name="item.value"
-            >{{ item.name }}</van-checkbox
-          >
-        </van-checkbox-group>
+      </div>
+
+      <div class="mainItem" v-if="disabledShow">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>评分</div>
+          </van-col>
+          <van-col :span="16">
+            {{ value }}分
+          </van-col>
+        </van-row>
+       
+      </div>
+
+      <div class="mainItem" v-if="islearning">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>评优状态</div>
+          </van-col>
+          <van-col :span="16">
+            {{ trainingData.recStatusText }}分
+          </van-col>
+        </van-row>
+     
+      </div>
+      <div class="mainItem" v-if="$route.params.id.split('_')[1] === 'comment'">
+        <van-row >
+          <van-col :span="24" class="label bgc" >
+            
+            <van-checkbox-group v-model="result" direction="horizontal" @change="clickChekcBox($event)">
+            <van-checkbox
+              v-for="item in resultList"
+              :key="item.value"
+              :disabled="item.disabled"
+              shape="square"
+              :checked="item.checked"
+              :name="item.value"
+              >{{ item.name }}</van-checkbox
+            >
+          </van-checkbox-group>
+          </van-col>
+         
+        </van-row>
+       
       </div>
     </div>
-  </div>
     <van-row>
       <van-col span="24" class="btns">
         <!-- 签名 -->
@@ -254,10 +382,8 @@ export default {
         this.qsUserList = this.qsUserList.join(',')
 
         this.signUserList = data.taskUserList || []
-        if(data.taskUserList){
-        
-
-        this.signUserListMap = data.taskUserList.map(item=>item.signImage) || []
+        if (data.taskUserList) {
+          this.signUserListMap = data.taskUserList.map(item => item.signImage) || []
         }
         let list = data.fileList || []
         if (list.length > 0) {
@@ -272,8 +398,7 @@ export default {
             this.studyList.push(i)
           })
         }
-        if(this.trainingData.imageList){
-
+        if (this.trainingData.imageList) {
           this.imgList = this.trainingData.imageList.split(',') || []
         }
         //获取当前登录人机构类型
@@ -483,34 +608,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .mainItem {
-  display: flex;
   font-size: 28px;
-  align-items: center;
-  padding: 34px;
-  justify-content: space-between;
-  background-color: #fff;
-  flex-wrap: wrap;
-  div {
-    flex: 1;
-    text-align: left;
-  }
-  p {
-   
-  }
-  .label {
-    width: 240px;
-    flex: none;
-    border-left: 1px solid #008cd6;
-    padding-left: 10px;
-  }
-  .labelPeople {
-    margin-bottom: 20px;
-  }
+  width: 100%;
+ 
 }
 .mainItemData {
   justify-content: end;
 }
-.bigbox{
+.bigbox {
   margin: 20px;
   box-shadow: 0 8px 12px #ebedf0;
 }
@@ -528,4 +633,41 @@ export default {
 .sheet {
   height: 45%;
 }
+
+.van-row {
+  background-color: #d7d7d7;
+  display: flex;
+  align-items: center;
+  .van-col--8 {
+    min-height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+  }
+  .van-col{
+    text-align: justify;
+  white-space: pre-wrap;
+  }
+  .zl {
+    display: block !important;
+    flex: none !important;
+    padding-left: 10px;
+  }
+  .van-col--16 {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    background-color: #fff;
+    padding: 10px;
+  }
+  .tagCls {
+    margin-top: 10px;
+  }
+  .bgc{
+    background-color: #fff;
+    padding: 10px;
+  }
+}
 </style>

src/views/menu/training/components/personnelSignature.vue

@@ -2,80 +2,211 @@
   <div>
     <NavBar :go="{ type: 'push', path: '/training' }" />
     <div class="bigbox">
-
-   
-    <div class="mainItem">
-      <div class="label">培训主题</div>
-      <div>{{ trainingData.title }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">单位名称</div>
-      <div>{{ trainingData.orgName }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">培训类型</div>
-      <div>{{ trainingData.typeText }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">培训开始时间</div>
-      <div>{{ trainingData.trainingStartDateTime }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">培训结束时间</div>
-      <div>{{ trainingData.trainingEndDateTime }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">主持人</div>
-      <div>{{ trainingData.hostName }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">记录人</div>
-      <div>{{ trainingData.recorderName }}</div>
-    </div>
-    <div class="mainItem mainItemData">
-        <p class="label labelPeople">培训资料</p>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>培训主题</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.title }}</div>
+           
+           
+          </van-col>
+        </van-row>
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>单位名称</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.orgName }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">单位名称</div>
+        <div>{{ trainingData.orgName }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>培训类型</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.typeText }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">培训类型</div>
+        <div>{{ trainingData.typeText }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>培训开始时间</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.trainingStartDateTime }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">培训开始时间</div>
+        <div>{{ trainingData.trainingStartDateTime }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>培训结束时间</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.trainingEndDateTime }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">培训结束时间</div>
+        <div>{{ trainingData.trainingEndDateTime }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>主持人</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.hostName }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">主持人</div>
+        <div>{{ trainingData.hostName }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>记录人</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.recorderName }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">记录人</div>
+        <div>{{ trainingData.recorderName }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>培训资料</div>
+          </van-col>
+          <van-col :span="16" class="zl">
+            <div v-for="item in studyList" :key="item.name">
+              <van-tag type="primary" class="tagCls" plain @click="tagHandler(item)">{{ item.name }}</van-tag>
+            </div>
+          </van-col>
+        </van-row>
+        <!-- <p class="label labelPeople">培训资料</p>
         <div>
           <div v-for="item in studyList" :key="item.name">
-            <van-tag type="primary"  class="tagCls" plain @click="tagHandler(item)">{{
-              item.name
-            }}</van-tag>
+            <van-tag type="primary" class="tagCls" plain @click="tagHandler(item)">{{ item.name }}</van-tag>
           </div>
-        </div>
+        </div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>培训内容</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.content }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">培训内容</div>
+        <div>{{ trainingData.content }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>总结</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ trainingData.note }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">总结</div>
+        <div>{{ trainingData.note }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>参与人员</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ taskUserList }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">参与人员</div>
+        <div>{{ taskUserList }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>缺席人员</div>
+          </van-col>
+          <van-col :span="16">
+            <div>{{ qsUserList }}</div>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">缺席人员</div>
+        <div>{{ qsUserList }}</div> -->
+      </div>
+      <div class="mainItem">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>上传图片</div>
+          </van-col>
+          <van-col :span="16">
+            <imgCom
+              :width="'100'"
+              :list="imgList"
+              v-for="item in imgList"
+              :key="item"
+              :height="'100'"
+              :src="item"
+            ></imgCom>
+          </van-col>
+        </van-row>
+        <!-- <div class="label">上传图片</div> -->
+      </div>
+      <div class="mainItem" v-if="this.$route.params.id.split('_')[1] === 'info'">
+        <van-row>
+          <van-col :span="8" class="label">
+            <div>参与人员签名图片</div>
+          </van-col>
+          <van-col :span="16">
+            <template v-for="item in signUserList">
+              <imgCom
+                :width="'100'"
+                v-if="item.signImage"
+                :list="signUserListMap"
+                :key="item.userId"
+                :height="'100'"
+                :src="item.signImage"
+              ></imgCom>
+            </template>
+          </van-col>
+        </van-row>
+        <!-- <div class="label labelPeople">参与人员签名图片</div>
+        <template v-for="item in signUserList">
+          <imgCom
+            :width="'100'"
+            v-if="item.signImage"
+            :list="signUserListMap"
+            :key="item.userId"
+            :height="'100'"
+            :src="item.signImage"
+          ></imgCom>
+        </template> -->
       </div>
-    <div class="mainItem">
-      <div class="label">培训内容</div>
-      <div>{{ trainingData.content }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">总结</div>
-      <div>{{ trainingData.note }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">参与人员</div>
-      <div>{{ taskUserList }}</div>
-    </div>
-    <div class="mainItem">
-      <div class="label">缺席人员</div>
-      <div>{{ qsUserList }}</div>
-    </div>
-    <div class="mainItem" >
-      <div class="label">上传图片</div>
-      
-      <imgCom :width="'100'" :list="imgList" v-for="item in imgList" :key="item" :height="'100'" :src="item"></imgCom>
-    </div>
-    <div class="mainItem" v-if="this.$route.params.id.split('_')[1] === 'info'">
-      <div class="label labelPeople">参与人员签名图片</div>
-      <template v-for="item in signUserList">
-        <imgCom :width="'100'" v-if="item.signImage" :list="signUserListMap" :key="item.userId" :height="'100'" :src="item.signImage"></imgCom>
-      </template>
     </div>
-  </div>
-    <van-row>
+    <van-row v-if="this.$route.params.id.split('_')[1] === 'edit'">
       <van-col span="24" class="btns">
         <van-button
           type="info"
           class="btn"
-          v-if="this.$route.params.id.split('_')[1] === 'edit'"
+         
           @click="signatureHandler"
           >签名</van-button
         >
@@ -138,12 +269,10 @@ export default {
         this.qsUserList = this.qsUserList.join(',')
 
         this.signUserList = data.taskUserList || []
-        if(data.taskUserList){
-        
-
-        this.signUserListMap = data.taskUserList.map(item=>item.signImage) || []
+        if (data.taskUserList) {
+          this.signUserListMap = data.taskUserList.map(item => item.signImage) || []
         }
-      
+
         let list = data.fileList || []
         if (list.length > 0) {
           list.forEach(item => {
@@ -157,13 +286,9 @@ export default {
             this.studyList.push(i)
           })
         }
-        if(this.trainingData.imageList){
-
+        if (this.trainingData.imageList) {
           this.imgList = this.trainingData.imageList.split(',') || []
-         
         }
-        
-        
       }
     })
   },
@@ -226,48 +351,35 @@ export default {
         tempLink.click()
         document.body.removeChild(tempLink)
       }
-    },
-
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
 .mainItem {
-  display: flex;
+  // display: flex;
   font-size: 28px;
-  align-items: center;
-  padding: 34px;
-  justify-content: space-between;
-  background-color: #fff;
-  flex-wrap: wrap;
-  // border-bottom: 1px solid #ccc;
-  div {
-    flex: 1;
-    text-align: left;
-  }
-  p {
-  }
-  .label {
-    width: 240px;
-    flex: none;
-    border-left: 1px solid #008cd6;
-    padding-left: 10px;
-  }
-  .labelPeople {
-    margin-bottom: 20px;
-  }
+  white-space: pre-wrap;
+  // align-items: center;
+  // padding: 10px;
+  width: 100%;
+  // justify-content: space-between;
+  // background-color: #fff;
 }
 .mainItemData {
   justify-content: end;
 }
 .tagCls {
-  margin-bottom: 20px;
-  margin-left: 10px;
 }
-.bigbox{
+.bigbox {
   margin: 20px;
   box-shadow: 0 8px 12px #ebedf0;
+  background-color: #fff;
 }
+.van-col{
+    text-align: justify;
+  white-space: pre-wrap;
+  }
 .btns {
   background-color: #fff;
   width: 100%;
@@ -278,4 +390,35 @@ export default {
 .sheet {
   height: 45%;
 }
+.van-row {
+  
+  background-color: #d7d7d7;
+  display: flex;
+  align-items: center;
+  .van-col--8 {
+    min-height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+  }
+
+  .zl {
+    display: block !important;
+    flex: none !important;
+    padding-left: 10px;
+  }
+  .van-col--16 {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    background-color: #fff;
+    padding: 10px;
+    
+  }
+  .tagCls {
+    margin-top: 10px;
+  }
+}
 </style>