UI优化

src/views/monthlyReport/childrenPage/editReport/components/MrTable/TableExpandRow.vue

@@ -11,12 +11,10 @@
           <span class="item-index">{{ index + 1 }}</span>
         </div>
         <!--问题-->
-        <span class="item-title">问题：</span>
-        <span class="item-content">{{ item.problem }}</span>
+        <span class="item-title">问题:<mt10 /></span><span>{{ item.problem }}</span>
         <br>
         <!--原因-->
-        <span class="item-title">原因：</span>
-        <span class="item-content">{{ item.reason }}</span>
+        <div style="word-break: break-word;"><span class="item-title">原因</span>:<mt10 /><span class="item-content">{{ item.reason }}</span></div>
         <br>
         <!--改进项-->
         <span class="item-title">改进项：</span>
@@ -27,7 +25,9 @@
           class="improvementItems-wrapper"
         >
           <!--改进项: 描述-->
-          <div>{{ subIndex + 1 }}、{{ subItem.description }}{{ subItem.detail && '：' }}{{ subItem.detail }}</div>
+          <div style="word-break: break-word;">
+            {{ subIndex + 1 }}.<mt10 />{{ subItem.description }}{{ subItem.detail && ':' }}<mt10 />{{ subItem.detail }}
+          </div>
           <!--改进项: 其他-->
           <div class="description-wrapper">
             <!--改进项: 责任人-->
@@ -59,8 +59,9 @@
               v-if="subItem.isProgressEdit"
               type="text"
               @click.stop="progressEdit(subItem)"
-            >保存</el-button
             >
+              保存
+            </el-button>
               <el-tooltip
                 v-if="subItem.isHold"
                 class="item"
@@ -107,10 +108,11 @@
 import MultiplePeopleInfo from '../MultiplePeopleInfo'
 import _ from 'lodash'
 import Hold from './Hold'
+import mt10 from './mt10'
 
 export default {
   name: 'TableExpandRow',
-  components: { MultiplePeopleInfo, Hold },
+  components: { MultiplePeopleInfo, Hold, mt10 },
   props: {
     analyticFeedback: {
       type: Object,
@@ -151,7 +153,7 @@ export default {
     rTime(date) {
       if (!date) return ''
       var json_date = new Date(date).toJSON()
-      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
+      return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/00:00:00/, '')
     },
     progressEdit(item) {
       if (!_.isBoolean(item.isProgressEdit)) {
@@ -224,6 +226,7 @@ export default {
   }
 
   .item-content {
+    //display: initial;
     margin-bottom: 5px;
   }
 

src/views/monthlyReport/childrenPage/editReport/components/MrTable/mt10.vue

@@ -0,0 +1,16 @@
+<template>
+<span :style="{marginRight: right}" />
+</template>
+
+<script>
+export default {
+  name: 'Mt10',
+  props: {
+    right: {
+      type: String,
+      required: false,
+      default: '10px'
+    }
+  }
+}
+</script>