Merge branch 'jzl'

danger-manage-web/src/views/educationPlanExam/trainingProgram/components/Item.vue

@@ -3,39 +3,47 @@
     <div class="item flex" :class="{ active: isActive }">
       <div class="left flex">
         <div class="left-item flex" :class="{ active: isActive }">
-          <div class="text">
-            <i class="iconfont icon-24gl-checklist" />
+          <div class="text flex">
+            <div class="i-wrapper">
+              <i class="iconfont icon-24gl-checklist" />
+            </div>
+            <div ref="tp" class="text-center-wrapper flex">
+              <div ref="t" style="margin-right: 10px" v-if="!isActive">
+                {{ infoData.planName }}
+              </div>
+            </div>
 
-            <span style="margin-right: 10px" v-if="!isActive">{{
-              infoData.planName
-            }}</span>
-            <el-input
+            <!-- <el-input
               v-else
               size="mini"
               v-model="infoData.planName"
               placeholder="请输入内容"
               style="width: 120px"
-            ></el-input>
+            ></el-input> -->
           </div>
         </div>
       </div>
-      <div class="right flex"  style="line-height: 110px;">
-          <div style="margin-left: 20px" v-if="infoData.personnelType==1">员工培训</div>
-          <div style="margin-left: 20px" v-if="infoData.personnelType==2">承包商培训</div>
+      <div class="right flex" style="line-height: 110px">
+        <div style="margin-left: 20px" v-if="infoData.personnelType == 1">
+          员工培训
+        </div>
+        <div style="margin-left: 20px" v-if="infoData.personnelType == 2">
+          承包商培训
+        </div>
       </div>
       <div class="middle flex">
         <div>
-          <div class="top">参与培训人员({{personnelOptions.length}})</div>
+          <div class="top">参与培训人员({{ personnelOptions.length }})</div>
           <div class="bottom">
             <!-- <el-checkbox-group class="" v-model="infoData.postIds"> -->
-              <el-checkbox
-                :disabled="!isActive"
-                v-model="personnel.ischeck"
-                v-for="personnel in personnelOptions"
-                :label="personnel.postId"
-                :key="personnel.postId"
-                >{{ personnel.postName }}</el-checkbox
-              >
+            <el-checkbox
+              :disabled="!isActive"
+              v-model="personnel.ischeck"
+              v-for="personnel in personnelOptions"
+              :label="personnel.postId"
+              :key="personnel.postId"
+              >{{ personnel.postName }}</el-checkbox
+            >
             <!-- </el-checkbox-group> -->
           </div>
         </div>
@@ -43,7 +51,9 @@
       <div class="right flex">
         <template v-if="!isActive">
           <div>
-            <el-button type="text" @click="edit(personnelOptions)">编辑</el-button>
+            <el-button type="text" @click="edit(personnelOptions)"
+              >编辑</el-button
+            >
             <el-button type="text" @click="deletePlan">删除</el-button>
           </div>
         </template>
@@ -86,7 +96,18 @@ export default {
       return this.isActiveId === this.infoData.planId;
     },
   },
-  mounted() {},
+  mounted() {
+    console.log(this.$refs.t.offsetHeight);
+    // 如果子元素的高大于父元素的高，就改变上下居中策略，改为滚动条展示
+    if (this.$refs.t.offsetHeight > this.$refs.tp.offsetHeight) {
+      console.log(this.$refs.tp.style);
+      this.$refs.tp.style.overflow = "auto";
+      this.$refs.tp.style.alignItems = "";
+    } else {
+      // console.log(this.$refs.t.offsetHeight)
+      // this.$refs.t.style.alignItems='center'
+    }
+  },
   data() {
     return {
       // 记录初始的选项
@@ -99,7 +120,7 @@ export default {
     edit(personnelOptions) {
       // 编辑
       console.log(personnelOptions);
-      this.$parent.addClick(this.infoData,personnelOptions);
+      this.$parent.addClick(this.infoData, personnelOptions);
       //this.$emit("edit", this.oldInfoData);
     },
     save() {
@@ -204,11 +225,12 @@ export default {
       align-items: center;
       justify-content: right;
       margin-top: 25px;
+
       .left-item {
         transition: all 0.5s;
         width: 200px;
         height: 60px;
-        line-height: 60px;
+        // line-height: 60px;
         font-size: 14px;
         padding-left: 25px;
         border: 1px solid #efefef;
@@ -223,8 +245,16 @@ export default {
           background: #1d84ff;
           color: #fff;
         }
-        span {
-          margin-left: 10px;
+        .i-wrapper {
+          height: 60px;
+          line-height: 60px;
+          padding-right: 10px;
+        }
+        .text-center-wrapper {
+          height: 100%;
+          width: 100%;
+          // overflow: auto;
+          align-items: center;
         }
       }
     }

danger-manage-web/vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target: process.env.VUE_APP_TARGET,
-        //target: `http://192.168.2.21:8908/dangerManage`,
+        // target: `http://192.168.2.21:8908/dangerManage`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''