switch branch

src/views/chartRelevance_manage/components/selectTarget.vue

@@ -14,7 +14,8 @@
         :value="item.val"
       />
     </el-select>
-    <div v-else>
+
+    <div v-else-if="selectStyleType===2">
       <label>选择指标：</label>
       <el-radio-group v-model="targetType" @change="targetTypeChange">
         <el-radio  
@@ -24,9 +25,50 @@
         >{{item.label}}</el-radio>
       </el-radio-group>
     </div>
+
+    <div v-else-if="selectStyleType===3" style="display:flex;align-items:center">
+      <el-select
+        v-model="targetType"
+        placeholder="请选择指标种类"
+        @change="targetTypeChange"
+        style="width: 150px;"
+      >
+        <el-option
+          v-for="item in etaTypeOpt"
+          :key="item.val"
+          :label="item.label"
+          :value="item.val"
+        />
+      </el-select>
+      <el-select
+        v-model="search_txt"
+        v-loadMore="searchLoad"
+        :filterable="!search_txt"
+        remote
+        clearable
+        placeholder="请选择指标名称"
+        style="flex: 1;margin-left: 15px"
+        :remote-method="searchHandle"
+        @click.native="inputFocusHandle"
+        @change="handleSelectTarget"
+      >
+        <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        <el-option
+          v-for="item in searchOptions"
+          :key="item.EdbInfoId"
+          :label="item.EdbName"
+          :value="item.EdbInfoId"
+        >
+          <edbDetailPopover :info="item">
+            <div slot="reference">{{item.EdbName}}</div>
+          </edbDetailPopover>
+        </el-option>
+      </el-select>
+    </div>
     <el-select
       v-model="search_txt"
       v-loadMore="searchLoad"
+      v-if="selectStyleType!==3"
       :filterable="!search_txt"
       remote
       clearable

src/views/datasheet_manage/components/selectTargetValueDia.vue

@@ -1,30 +1,25 @@
 <template>
-  <el-dialog
-    :visible.sync="isShow"
-    :close-on-click-modal="false"
-    :modal-append-to-body="false"
-    :modal="false"
-    title="选择指标"
-    @close="cancelHandle"
-    custom-class="select-target-value-dialog"
-    center
-    width="550px"
-    v-dialogDrag
-  >
+<div v-dialogDrag v-show="isShow" >
+  <div class="select-target-value-dia el-dialog" >
+    <div class="header el-dialog__header">
+      <span>选择指标</span>
+      <i class="el-icon-close" @click="cancelHandle"/>
+    </div>
     <div class="main">
       <selectTarget
-        ref="xSelectRef"
+        ref="selectRef"
+        :selectStyleType="3"
         @select="chooseEdb"
       />
 
       <ul class="data-cont">
         <template v-if="dataList.length">
-          <li v-for="(item,index) in dataList" :key="index">
+          <li v-for="(item,index) in dataList" :key="index" class="data-li">
             <span>{{item.DataTime}}</span>
-            <span>{{item.Value}}</span>
+            <span style="min-width:150px">{{item.Value}}</span>
           </li>
         </template>
-        <tableNoData size="mini"/>
+        <tableNoData size="mini" v-else/>
       </ul>
 
       <div class="dia-bot">
@@ -35,20 +30,25 @@
       </div>
     </div>
     
-  </el-dialog>
+  </div>
+</div>
 </template>
 <script>
 import selectTarget from '@/views/chartRelevance_manage/components/selectTarget.vue';
+import draggable from 'vuedraggable';
 export default {
   props: {
     isShow: {
       type: Boolean,
     }
   },
-  components: { selectTarget },
+  components: { selectTarget,draggable },
   data() {
     return {
-      dataList: [],
+      dataList: [
+        { Value: 1515, DataTime: '2020-5-6' },
+        { Value: 1515, DataTime: '2020-5-6' },
+      ],
     }
   },
   mounted(){
@@ -57,7 +57,14 @@ export default {
   methods:{
     /* 选择指标和日期获取近5期数据 */
     chooseEdb(edb) {
+      if(!edb) return
       
+      if(this.$parent.selectCell.DataType !== 1){
+
+        this.$message.warning('请先在表格中选择日期')
+        this.selectRef.search_txt=''
+        return
+      }
     },
 
     cancelHandle() {
@@ -67,22 +74,55 @@ export default {
 }
 </script>
 <style scoped lang='scss'>
-.main {
-  padding: 20px 0;
-  .data-cont {
-    margin: 15px 0;
-    border: 1px solid #DCDFE6;
-    padding: 20px;
-  }
-  .dia-bot {
-    margin-top: 20px; 
+@import "../../../styles/theme-vars.scss";
+.select-target-value-dia {
+  background: #fff;
+  position: fixed;
+  top: 20%;
+  left: 55%;
+  width: 500px;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  .header { 
+    height: 50px;
+    font-size: 16px;
+    background: $theme-color;
+    color: #fff;
+    padding: 0 15px;
     display: flex;
-    justify-content: center;
+    align-content: center;
+    justify-content: space-between;
+    span {
+      line-height: 50px;
+    }
+    .el-icon-close {
+      font-size: 20px;
+      line-height: 50px;
+      cursor: pointer;
+    }
   }
-}
-</style>
-<style lang="scss">
-  .select-target-value-dialog {
-    margin-right: 10vw;
+  .main {
+    padding: 20px 15px;
+    .data-cont {
+      margin: 15px 0;
+      border: 1px solid #DCDFE6;
+      /* padding: 20px; */
+      .data-li {
+        display: flex;
+        padding: 15px;
+        text-align: center;
+        justify-content: space-around;
+        &.choose {
+          background: #ECF5FF;
+        }
+      }
+    }
+    .dia-bot {
+      margin-top: 20px; 
+      display: flex;
+      justify-content: center;
+    }
   }
+}
 </style>