test

src/api/onlineproblem.js

@@ -19,6 +19,14 @@ export function getPerson(data) {
   })
 }
 
+export function getListPerson(data) {
+  return request({
+    url: TeamManagement + '/member/getMembersInfoByLdaps',
+    method: 'post',
+    data
+  })
+}
+
 export function create(data) {
   return request({
     url: TeamManagement + '/onlineProblem/create',

src/components/formInput/index.vue

@@ -150,7 +150,6 @@ export default {
   display: flex;
   justify-content: space-between;
   .title {
-    // display: inline-block;
     min-width: 153px;
     .mustInput {
       display: inline-block;

src/views/projectManage/onlineproblem/create/component/makeBetterList.vue

@@ -12,31 +12,44 @@
         />
       </div>
       <div class="formWrap">
-        <div v-for="(r, idx) in renderFromData" :key="idx" class="formLine" :class="r.length > 1 && 'Layout'">
-          <formInput
-            v-for="d in r"
-            :key="d.key"
-            :title="d.name"
-            :type="d.type"
-            :option="d.option"
-            :value="item[d.key]"
-            :multiple="d.multiple"
-            :requried="false"
-            :has-slot="d.hasSlot"
-            :styles="{ minWidth: '110px' }"
-            @onChange="(e) => onChange(d.key, e, index)"
-            @remoteMethod="(e) => remoteMethod(d.key, e, d.utilName)"
-          >
-            <div v-if="d.hasSlot" slot="option">
-              <el-option v-for="o in d.option" :key="o.value" :label="o.label" :value="o.value">
+        <div class="formLine Layout">
+          <div class="formInput">
+            <span class="title">
+              责任人
+            </span>
+            <el-select
+              v-model="item.leader"
+              filterable
+              remote
+              clearable
+              placeholder="请选择"
+              :multiple="true"
+              :remote-method="(e) => remoteMethod('leader', e, 'getPerson', index)"
+              :size="size"
+              @change="(e) => onChange('leader', e, index)"
+            >
+              <el-option v-for="o in leaderOptione" :key="o.value" :label="o.label" :value="o.value">
                 <div class="item-style">
                   <div class="item-detail">{{ o.deptName }}</div>
                   <div style="min-width:80px">{{ o.name }}</div>
                   <div class="item-detail">{{ o.idap }}</div>
                 </div>
               </el-option>
-            </div>
-          </formInput>
+            </el-select>
+          </div>
+          <div class="formInput">
+            <span class="title">
+              计划完成时间
+            </span>
+            <el-date-picker
+              v-model="item.finishTime"
+              :size="size"
+              value-format="yyyy-MM-dd hh:mm:ss"
+              type="datetime"
+              placeholder="请选择"
+              @change="(e) => onChange('finishTime', e, index)"
+            />
+          </div>
         </div>
         <div class="progress formLine">
           <span class="title">
@@ -48,6 +61,7 @@
             :max="100"
             class="number"
             type="number"
+            @change="(e) => onChange('progress', e.target.value, index)"
           >
           %
           <span class="brandColor pointer overBtn" @click="(e) => onChange('progress', '100', index)">
@@ -57,7 +71,7 @@
         </div>
       </div>
       <div class="delBtn">
-        <span class="brandColor pointer" @click="$emit('delHandle', index)">
+        <span class="brandColor pointer" @click="() => del(index)">
           <svg-icon icon-class="del" class="icon" />
         </span>
       </div>
@@ -71,13 +85,9 @@
   </div>
 </template>
 <script>
-import formInput from '@/components/formInput'
-import { getPerson } from '@/api/onlineproblem'
+import { getPerson, getListPerson } from '@/api/onlineproblem'
 import '@/views/projectManage/publicCss/index.css'
 export default {
-  components: {
-    formInput
-  },
   props: {
     list: {
       type: Array,
@@ -90,49 +100,58 @@ export default {
       size: 'small',
       val: '',
       data: {},
-      renderFromData: [
-        [{
-          name: '责任人',
-          key: 'leader',
-          type: 'remoteSelect',
-          utilName: 'getPerson',
-          multiple: true,
-          placeholder: '请选择责任人',
-          hasSlot: true,
-          default: '',
-          option: []
-        }, {
-          name: '计划完成时间',
-          key: 'finishTime',
-          type: 'date'
-        }]
-      ]
+      leaderOptione: []
     }
   },
+  mounted() {
+    this.getListPerson()
+  },
   methods: {
-    async remoteMethod(key, q, utilName) {
+    async remoteMethod(key, q, utilName, index) {
       if (utilName === 'getPerson') {
         const res = await getPerson({ memberIDAP: q })
         const personData = res.data || []
-        this.renderFromData.map(t => t.map(g => {
-          if (g.key === key) {
-            g.option = personData.map(t => ({
-              ...t,
-              value: t.idap,
-              label: t.name
-            }))
-          }
+        this.leaderOptione = personData.map(t => ({
+          ...t,
+          value: t.idap,
+          label: t.name
         }))
       }
     },
     onChange(key, value, index) {
       this.$emit('onChange', key, value, index)
+    },
+    del(index) {
+      this.getListPerson()
+      this.$emit('delHandle', index)
+    },
+    async getListPerson() {
+      let perlist = []
+      this.list.forEach(t => {
+        perlist = [...perlist, ...t.leader]
+      })
+      const res = await getListPerson({ memberIDAPs: perlist })
+      const personData = res.data || []
+      this.leaderOptione = personData.map(t => ({
+        ...t,
+        value: t.idap,
+        label: t.name
+      }))
     }
   }
 }
 </script>
 <style scoped lang="scss">
 .makeBetterWrap {
+  .formInput {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .title {
+      min-width: 110px;
+      padding-left: 12px;
+    }
+  }
   .brandColor {
     color: #1890FF;
   }

src/views/projectManage/onlineproblem/create/index.vue

@@ -119,16 +119,25 @@ export default {
       }
     },
     addMakeBetterList() {
-      this.improvements.push({})
+      this.improvements.push({
+        randomKey: new Date().getTime() + '' + Math.ceil(Math.random() * 1000),
+        progress: '0'
+      })
     },
     delMakeBetterList(index) {
       this.improvements.splice(index, 1)
     },
     // 只有改进项会有index
     change(type, key, value, index) {
+      // 有index就是改进项
       if (index !== undefined) {
         const data = [...this[type]]
         data[index][key] = value
+        if (key === 'progress') {
+          if (!value) {
+            data[index][key] = '0'
+          }
+        }
         this[type] = [...data]
       } else {
         this[type] = { ...this[type], ...{ [key]: value }}

src/views/projectManage/onlineproblem/detial/component/base.vue

@@ -68,7 +68,7 @@
             />
           </template>
           <template slot="overMouse">
-            <span>{{ data.teamName }}</span>
+            <span :class="!data.teamName && 'showPlacehodler'">{{ data.teamName ? data.teamName : '请选择' }}</span>
           </template>
         </over-click>
       </el-form-item>
@@ -88,7 +88,7 @@
             </el-select>
           </template>
           <template slot="overMouse">
-            <span>{{ data.influenceSurfaceName }}</span>
+            <span :class="!data.influenceSurfaceName && 'showPlacehodler'">{{ data.influenceSurfaceName ? data.influenceSurfaceName : '请选择' }}</span>
           </template>
         </over-click>
       </el-form-item>
@@ -105,7 +105,7 @@
             />
           </template>
           <template slot="overMouse">
-            <span>{{ data.influenceDesc }}</span>
+            <span :class="!data.influenceDesc && 'showPlacehodler'">{{ data.influenceDesc ? data.influenceDesc : '请填写' }}</span>
           </template>
         </over-click>
       </el-form-item>
@@ -122,7 +122,7 @@
             />
           </template>
           <template slot="overMouse">
-            <span>{{ data.closedLoopTime }}</span>
+            <span :class="!data.closedLoopTime && 'showPlacehodler'">{{ data.closedLoopTime ? data.closedLoopTime : '请填写' }}</span>
           </template>
         </over-click>
       </el-form-item>
@@ -139,7 +139,7 @@
             />
           </template>
           <template slot="overMouse">
-            <span>{{ data.slaNotAvailableTime }}</span>
+            <span :class="!data.slaNotAvailableTime && 'showPlacehodler'">{{ data.slaNotAvailableTime ? data.slaNotAvailableTime : '请填写' }}</span>
           </template>
         </over-click>
       </el-form-item>
@@ -156,7 +156,7 @@
             />
           </template>
           <template slot="overMouse">
-            <span class="textLine">{{ data.desc }}</span>
+            <span class="textLine" :class="!data.desc && 'showPlacehodler'">{{ data.desc ? data.desc : '请填写' }}</span>
           </template>
         </over-click>
       </el-form-item>
@@ -217,8 +217,12 @@ export default {
 .wb-base {
   .textLine {
     word-wrap: break-word;
-    // display: inherit;
     word-break: normal;
+    display: inline-block;
+    margin-top: 10px;
+  }
+  .showPlacehodler {
+    color: #A7AEBC;
   }
 }
 </style>

src/views/projectManage/onlineproblem/detial/component/makeBetterView.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="JSON.stringify(list) !== '[{}]'" class="makeBetterView">
-    <div v-for="(item, index) in list" :key="index" class="list">
+    <div v-for="(item, index) in list" :key="item.randomKey" class="list">
       <div class="desc">
         <span class="NO">{{ index + 1 }}</span>
         <span class="name">{{ item.name }}</span>

src/views/projectManage/onlineproblem/detial/index.vue

@@ -79,6 +79,7 @@
       <div v-if="form_data" class="makeBetter">
         <!-- edit -->
         <make-better-list
+          v-if="improvementsData"
           v-show="makeBetterEdit"
           :list="improvementsData"
           @addHandle="addMakeBetterList"
@@ -87,6 +88,7 @@
         />
         <!-- view -->
         <make-better-view
+          v-if="improvementsData"
           v-show="!makeBetterEdit"
           :list="improvementsData"
         />
@@ -164,7 +166,7 @@ export default {
       replayUrl: '',
       updateData: {},
       makeBetterEdit: false,
-      improvementsData: [{}],
+      improvementsData: null,
       commentlist: [], // 评价列表
       changeRecordList: [] // 变更记录列表
     }
@@ -180,7 +182,7 @@ export default {
         this.form_data = JSON.parse(JSON.stringify(res.data))
         this.copy_form_data = JSON.parse(JSON.stringify(res.data))
         this.replayUrl = res.data.replayUrl || ''
-        this.improvementsData = res.data.improvementsData || [{}]
+        this.improvementsData = res.data.improvementsData || [{ progress: '0', randomKey: new Date().getTime() + '' + Math.ceil(Math.random() * 1000) }]
         this.getRecordList()
         // 当更改的复盘链接把弹框关闭 所以每次都执行一下就好
         this.addLinkModelvisible = false
@@ -207,9 +209,14 @@ export default {
       this.addLinkModelvisible = true
     },
     makeBetterChange(key, value, index) {
-      const data = this.form_data.improvementsData ? [...this.form_data.improvementsData] : []
+      const data = this.improvementsData ? [...this.improvementsData] : []
       data[index][key] = value
-      this.form_data = { ...this.form_data, ... { improvementsData: data }}
+      if (key === 'progress') {
+        if (!value) {
+          data[index][key] = '0'
+        }
+      }
+      this.improvementsData = data
     },
     makeBetterCancel() {
       this.makeBetterEdit = false
@@ -244,7 +251,10 @@ export default {
       }
     },
     addMakeBetterList() {
-      this.improvementsData.push({})
+      this.improvementsData.push({
+        randomKey: new Date().getTime() + '' + Math.ceil(Math.random() * 1000),
+        progress: '0'
+      })
     },
     delMakeBetterList(index) {
       this.improvementsData.splice(index, 1)