线上问题团队

src/components/searchHeader/searchForm.vue

@@ -150,6 +150,9 @@ import moment from 'moment'
 import TagSearch from '@/components/Tag/TagSearch'
 moment.locale('zh-cn')
 export default {
+  components: {
+    TagSearch
+  },
   props: {
     data: {
       type: Array,
@@ -167,9 +170,6 @@ export default {
       required: false
     }
   },
-  components: {
-    TagSearch
-  },
   data() {
     return {
       pickerOptions: {

src/components/select/selectCascader.vue

@@ -10,6 +10,7 @@
     :style="itemStyles"
     :placeholder="placeholder"
     :remote-method="remoteMethod"
+    :popper-append-to-body="popperAppendToBody"
     @change="changeCascader"
   >
     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
@@ -63,6 +64,11 @@ export default {
       type: String,
       required: false,
       default: '请选择'
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -78,7 +84,7 @@ export default {
   },
   watch: {
     value() {
-      this.init()
+      // this.init()
     },
     selectEnum() {
       this.init()

src/components/select/selectCascaderInfo.vue

@@ -7,11 +7,10 @@
           effect="dark"
           :content="item.deptPath"
           placement="top">
-          <span>{{ item.label }}</span>
+          <span>{{ item.label }}{{ index === itemName.length - 1 ? '' : ',' }}</span>
         </el-tooltip>
-        <span>{{ !(index >= itemName.length - 1) ? ',' : '' }}</span>
       </span>
-    </span>
+    </span><slot />
   </div>
 </template>
 

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

@@ -87,6 +87,10 @@ export default {
       addLinkModelvisible: false
     }
   },
+  mounted() {
+    // 获取部门数据
+    this.$store.dispatch('monthlyReportEdit/setSelectEnum')
+  },
   methods: {
     back() {
       this.$router.push({ name: '线上问题 ', query: { id: 111 }})

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

@@ -58,8 +58,33 @@
           </template>
         </over-click>
       </el-form-item>
-      <el-form-item label="责任团队：">
-        <over-click id="teamId-select" @overMouse="changeArea">
+      <el-form-item label="责任团队：" class="over-context-from">
+        <span class="active" v-if="isActive" v-clickoutside="() => {isActive = false; changeArea()}">
+          <selectTeam
+            v-if="data.teamId"
+            :value="data.teamId"
+            :name="data.teamName"
+            :biz-id-flag="false"
+            @click.stop
+            @onChange="(e) => onChange('teamId', e)"
+          />
+          <span v-else>
+            <selectCascader
+            @click.stop
+            :popper-append-to-body="false"
+            v-model="data.deptIds"
+            placeholder="请选择责任团队"
+            @change="(e) => {onChange('deptIds', e)}"
+          />
+          </span>
+        </span>
+        <span class="overMouse over-context" v-else >
+          <selectCascaderInfo  v-if="data.deptIds && data.deptIds.length" :key="data.deptIds.length" :team-data="data.deptIds">
+            <i class="el-icon-edit" @click="isActive = !isActive" />
+          </selectCascaderInfo>
+          <span v-else :class="!data.teamName && 'showPlacehodler'">{{ data.teamName ? data.teamName : '请选择' }}<i class="el-icon-edit" @click="isActive = !isActive" /></span>
+        </span>
+        <!-- <over-click id="teamId-select" inline @overMouse="changeArea">
           <template slot="active">
             <selectTeam
               v-if="data.teamId"
@@ -80,7 +105,7 @@
             <selectCascaderInfo v-if="data.deptIds" :key="data.deptIds.length" :team-data="data.deptIds" />
             <span v-else :class="!data.teamName && 'showPlacehodler'">{{ data.teamName ? data.teamName : '请选择' }}</span>
           </template>
-        </over-click>
+        </over-click> -->
       </el-form-item>
       <el-form-item label="影响面：">
         <over-click id="influenceSurface-select" @overMouse="changeArea">
@@ -182,6 +207,7 @@ import selectCascader from '@/components/select/selectCascader'
 import selectCascaderInfo from '@/components/select/selectCascaderInfo'
 import overClick from '@/components/click/overClick'
 import Tag from '@/components/Tag'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 
 export default {
   components: {
@@ -191,6 +217,7 @@ export default {
     selectCascaderInfo,
     Tag
   },
+  directives: { Clickoutside },
   props: {
     data: {
       type: Object,
@@ -202,6 +229,7 @@ export default {
     return {
       size: 'small',
       form_data: this.data,
+      isActive: false,
       // data: this.data,
       priorityOption: [
         { value: '0', label: 'P0' },
@@ -264,11 +292,32 @@ export default {
         line-height: 18px;
       }
     }
+    .over-context {
+      .el-icon-edit{
+        display: none;
+      }
+    }
+    .over-context:hover{
+      color: #409EFF;
+      .el-icon-edit {
+        display: inline;
+      }
+    }
+    .el-icon-edit {
+      cursor: pointer;
+      padding-right: 5px;
+      color: #409EFF;
+    }
     /deep/.el-form-item__content {
       width: calc(100% - 340px);
       color: #333333;
       font-size: 14px;
     }
+    .over-context-from {
+      /deep/.el-form-item__content {
+        width: calc(100% - 200px);
+      }
+    }
   }
 }
 </style>