调整报工样式问题

fhKeeper/formulahousekeeper/timesheet-workshop-h5/src/views/workView/fillReport.vue

@@ -1,61 +1,62 @@
 <template>
   <div class="distribution">
-    <van-nav-bar title="报工" left-text="返回"  @click-left="back" fixed left-arrow/>
+    <van-nav-bar title="报工" left-text="返回" @click-left="back" fixed left-arrow />
     <div class="distribution_header">
-        <div>{{reportForm.product_name}}</div>
-        <div>{{reportForm.plan_type == 0? reportForm.product_scheduling_num:reportForm.task_change_notice_num}}</div>
-        <div>{{reportForm.start_date.replace(/-/g, '')}}-{{reportForm.end_date.replace(/-/g, '')}}</div>
+      <div>{{ reportForm.product_name }}</div>
+      <div>{{ reportForm.plan_type == 0 ? reportForm.product_scheduling_num : reportForm.task_change_notice_num }}</div>
+      <div>{{ reportForm.start_date }}至{{ reportForm.end_date }}</div>
+    </div>
+    <div class="distribution_con">
+      <van-form @submit="onSubmit">
+        <van-cell-group inset>
+          <van-cell v-if="reportForm.plan_type == 0" title="工序" :value="reportForm.procedure_name" />
+          <van-cell v-else title="任务变更通知号" :value="reportForm.task_change_notice_num" />
+          <van-cell title="钢印号">
+            <template>
+              <div style="float:right;">
+                <van-checkbox-group v-model="reportForm.checkedSteelNum" direction="horizontal">
+                  <van-checkbox style="padding:5px;" :name="item" @click="onCheckChange"
+                    v-for="(item, index) in reportForm.planSteelStampNumberList" :key="index">{{ item }}</van-checkbox>
+                </van-checkbox-group>
+              </div>
+            </template>
+          </van-cell>
+          <van-cell title="进度(%)">
+            <template>
+              <van-stepper v-model="reportForm.progress" step="10" :min="0" :max="100" />
+            </template>
+          </van-cell>
+          <van-cell title="中止工作" v-if="reportForm.progress < 100">
+            <template>
+              <div style="float:right;">
+                <van-checkbox v-model="reportForm.isTerminated" />
+              </div>
+            </template>
+          </van-cell>
+          <van-cell title="质检类型" :value="checkTypeTxt[reportForm.check_type]" v-if="reportForm.progress == 100" />
+          <van-cell title="质检人" :value="reportForm.checker_name" is-link v-if="reportForm.progress == 100"
+            @click="showCheckerOptionList">
+          </van-cell>
+        </van-cell-group>
+        <div style="margin: 16px;">
+          <van-button round block type="primary" native-type="submit" :loading="saving"
+            :disabled="reportForm.progress == 0">
+            提交
+          </van-button>
+        </div>
+      </van-form>
     </div>
 
-    <van-form @submit="onSubmit">
-      <van-cell-group inset>
-        <van-cell v-if="reportForm.plan_type==0" title="工序" :value="reportForm.procedure_name" />
-        <van-cell v-else title="任务变更通知号" :value="reportForm.task_change_notice_num" />
-        <van-cell title="钢印号" >
-          <template>
-            <div style="float:right;">
-              <van-checkbox-group v-model="reportForm.checkedSteelNum" direction="horizontal">
-                <van-checkbox style="padding:5px;" :name="item" @click="onCheckChange" v-for="(item, index) in reportForm.planSteelStampNumberList" :key="index">{{item}}</van-checkbox>
-              </van-checkbox-group>
-            </div>
-          </template>
-        </van-cell>
-        <van-cell title="进度(%)"   >
-          <template>
-            <van-stepper v-model="reportForm.progress" step="10" :min="0" :max="100"/>
-          </template>
-        </van-cell>
-        <van-cell title="中止工作" v-if="reportForm.progress < 100">
-          <template>
-            <div style="float:right;">
-              <van-checkbox v-model="reportForm.isTerminated" />
-            </div>
-          </template>
-        </van-cell>
-        <van-cell title="质检类型" :value="checkTypeTxt[reportForm.check_type]" v-if="reportForm.progress==100"/>
-        <van-cell title="质检人" :value="reportForm.checker_name" is-link v-if="reportForm.progress==100" @click="showCheckerOptionList">
-        </van-cell>
-      </van-cell-group>
-      <div style="margin: 16px;">
-        <van-button round block type="primary" native-type="submit" :loading = "saving" :disabled="reportForm.progress==0">
-          提交
-        </van-button>
-      </div>
-    </van-form>
     <!-- 弹出层选人 -->
     <van-popup v-model="checkerShow" position="bottom">
-        <van-picker
-        show-toolbar
-        value-key="name"
-        :columns="checkerOptionList"
-        @confirm="onConfirm"
-        @cancel="checkerShow = false"
-        >
+      <van-picker show-toolbar value-key="name" :columns="checkerOptionList" @confirm="onConfirm"
+        @cancel="checkerShow = false">
         <template #option="item">
-            <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName' :openid='item.name'></ww-open-data></span>
-            <span v-else>{{item.name}}</span>
+          <span v-if="user.userNameNeedTranslate == '1'"><ww-open-data type='userName'
+              :openid='item.name'></ww-open-data></span>
+          <span v-else>{{ item.name }}</span>
         </template>
-        </van-picker>
+      </van-picker>
     </van-popup>
   </div>
 </template>
@@ -71,7 +72,7 @@ export default {
       checkerShow: false,
       user: JSON.parse(localStorage.userInfo),
       saving: false,
-      checkTypeTxt:['自检','互检','专检'],
+      checkTypeTxt: ['自检', '互检', '专检'],
       reportForm: {
         progress: 10,
 
@@ -81,7 +82,7 @@ export default {
   },
   computed: {},
   watch: {},
-  created() {},
+  created() { },
   mounted() {
     this.getMyPlanProcedureList();
   },
@@ -89,77 +90,77 @@ export default {
     back() {
       this.$router.go(-1);
     },
-    onConfirm(value,key){
-        this.reportForm.checker_id = value.id
-        this.reportForm.checker_name = value.name
-        this.checkerShow = false
+    onConfirm(value, key) {
+      this.reportForm.checker_id = value.id
+      this.reportForm.checker_name = value.name
+      this.checkerShow = false
     },
     showCheckerOptionList() {
       this.checkerShow = true;
-      this.$axios.post("/report/getCheckerList", {checkType: this.reportForm.check_type, deptId: this.reportForm.station_id})
+      this.$axios.post("/report/getCheckerList", { checkType: this.reportForm.check_type, deptId: this.reportForm.station_id })
         .then(res => {
           this.saving = false;
-            if(res.code == "ok") {
-                this.checkerOptionList = res.data;
-                this.$forceUpdate();
-            } else {
-                this.$toast.fail(res.msg);
-            }
-        }).catch(err=> {this.$toast.clear();});
+          if (res.code == "ok") {
+            this.checkerOptionList = res.data;
+            this.$forceUpdate();
+          } else {
+            this.$toast.fail(res.msg);
+          }
+        }).catch(err => { this.$toast.clear(); });
     },
     onSubmit() {
-        if (this.reportForm.progress == 0){
-          this.$toast.fail('进度不可为0')
-              return;
-        }
-        let postData = {
-          userProcedureTeamId:this.reportForm.id,
-          prodProcedureId: this.reportForm.prod_procedure_id,
-          progress: this.reportForm.progress,
-          planId: this.reportForm.plan_id,
-          checkType: this.reportForm.check_type,
-          isTerminated: this.reportForm.isTerminated,
-          steelNumArray: JSON.stringify(this.reportForm.checkedSteelNum)
-        };
-        if (this.reportForm.progress == 100) {
-          if (this.reportForm.check_type != 0) {
-            if (this.reportForm.checker_id == null) {
-              this.$toast.fail('请选择检验人')
-              return;
-            } else {
-              postData.checkerId = this.reportForm.checker_id;
-            }
+      if (this.reportForm.progress == 0) {
+        this.$toast.fail('进度不可为0')
+        return;
+      }
+      let postData = {
+        userProcedureTeamId: this.reportForm.id,
+        prodProcedureId: this.reportForm.prod_procedure_id,
+        progress: this.reportForm.progress,
+        planId: this.reportForm.plan_id,
+        checkType: this.reportForm.check_type,
+        isTerminated: this.reportForm.isTerminated,
+        steelNumArray: JSON.stringify(this.reportForm.checkedSteelNum)
+      };
+      if (this.reportForm.progress == 100) {
+        if (this.reportForm.check_type != 0) {
+          if (this.reportForm.checker_id == null) {
+            this.$toast.fail('请选择检验人')
+            return;
+          } else {
+            postData.checkerId = this.reportForm.checker_id;
           }
         }
-        this.saving = true;
-        this.$axios.post("/report/submitReport", postData)
+      }
+      this.saving = true;
+      this.$axios.post("/report/submitReport", postData)
         .then(res => {
           this.saving = false;
-            if(res.code == "ok") {
-              this.$toast.success('提交成功')
-            } else {
-                this.$toast.fail(res.msg);
-            }
-        }).catch(err=> {this.$toast.clear();});
+          if (res.code == "ok") {
+            this.$toast.success('提交成功')
+          } else {
+            this.$toast.fail(res.msg);
+          }
+        }).catch(err => { this.$toast.clear(); });
     },
     onCheckChange(names) {
       this.$forceUpdate();
       console.log(this.reportForm.checkedSteelNum);
     },
     getMyPlanProcedureList() {
-        this.$axios.post("/plan-procedure-total/getFillProcedureDetail", {id: this.$route.query.id})
+      this.$axios.post("/plan-procedure-total/getFillProcedureDetail", { id: this.$route.query.id })
         .then(res => {
-            if(res.code == "ok") {
-                this.reportForm = res.data;
-                this.reportForm.checkedSteelNum = JSON.parse(this.reportForm.steel_num_array);
-                if (this.reportForm.check_type == 0) {
-                  //自检
-                  this.reportForm.checker_name = this.user.name;
-                }
-            } else {
-                this.$toast.fail(res.msg);
+          if (res.code == "ok") {
+            this.reportForm = res.data;
+            this.reportForm.checkedSteelNum = JSON.parse(this.reportForm.steel_num_array);
+            if (this.reportForm.check_type == 0) {
+              //自检
+              this.reportForm.checker_name = this.user.name;
             }
-        }).catch(err=> {this.$toast.clear();});
+          } else {
+            this.$toast.fail(res.msg);
+          }
+        }).catch(err => { this.$toast.clear(); });
     },
 
     //打开报工页面
@@ -171,90 +172,96 @@ export default {
 </script>
 
 <style scoped lang="less">
-  * {
-    box-sizing: border-box;
-  }
-  .valueCls {
-    color:#20a0ff;
-    margin-top: 5px;
-    margin-bottom: 5px;;
-  }
-  .labelCls {
-    color:#666;
-  }
-  .distribution {
-    width: 100%;
-    height: 100%;
-    padding: 54px 15px 15px 15px;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    background-color: #F4F4F4;
-    color: #333;
+* {
+  box-sizing: border-box;
+}
 
-    .distribution_header {
-      font-size: 16px;
-      div {
-        margin-top: 6px;
-        margin-bottom: 5px;
-      }
+.valueCls {
+  color: #20a0ff;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  ;
+}
+
+.labelCls {
+  color: #666;
+}
+
+.distribution {
+  width: 100%;
+  height: 100%;
+  padding: 54px 15px 15px 15px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  background-color: #F4F4F4;
+  color: #333;
+
+  .distribution_header {
+    font-size: 16px;
+
+    div {
+      margin-top: 6px;
+      margin-bottom: 5px;
     }
+  }
 
-    .distribution_con {
-      flex: 1;
-      overflow: auto;
-      margin-top: 14px;
+  .distribution_con {
+    flex: 1;
+    overflow: auto;
+    margin-top: 14px;
 
-      .distribution_box {
-        width: 100%;
-        background-color: #fff;
-        border-radius: 4px;
-        padding: 10px;
-        margin-bottom: 15px;
-        position: relative;
-        overflow: hidden;
+    .distribution_box {
+      width: 100%;
+      background-color: #fff;
+      border-radius: 4px;
+      padding: 10px;
+      margin-bottom: 15px;
+      position: relative;
+      overflow: hidden;
 
-        .distribution_ItemBom {
-          font-size: 16px;
-          display: flex;
-          flex-wrap: wrap;
-          padding: 0px 6px 6px 6px;
+      .distribution_ItemBom {
+        font-size: 16px;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0px 6px 6px 6px;
 
-          .PlanItem {
-            width: 50%;
-            display: flex;
-            padding-top: 12px;
+        .PlanItem {
+          width: 50%;
+          display: flex;
+          padding-top: 12px;
 
-            &:first-child {
-              width: 100%;
-              padding-top: 10px;
-              span {
-                font-size: 18px;
-                color: #333;
-              }
-            }
+          &:first-child {
+            width: 100%;
+            padding-top: 10px;
 
-            &:nth-child(2) {
-              width: 100%;
-              span {
-                width: 230px;
-                word-break: break-all;
-              }
+            span {
+              font-size: 18px;
+              color: #333;
             }
+          }
 
-            div {
-              width: 80px;
-              text-align: right;
-              color: #666;
-            }
+          &:nth-child(2) {
+            width: 100%;
 
             span {
-              display: inline-block;
-              color: #333;
+              width: 230px;
+              word-break: break-all;
             }
           }
+
+          div {
+            width: 80px;
+            text-align: right;
+            color: #666;
+          }
+
+          span {
+            display: inline-block;
+            color: #333;
+          }
         }
       }
     }
   }
-</style>
+}</style>