src/pages/dlg/projectSpecialDlg.vue

@@ -1,10 +1,24 @@
 <template>
     <MyDialog v-if="show" v-model="show" width="1200px" height="550px" class="projectSpecialDlg">
         <template slot="title">{{title}}</template>
+        <div>
+            <div class="head-title-select">
+                <div class="head-select">
+                    <input type="text" value="" @click="setScreenSpecial()" placeholder="请选择项目" readonly>
+                </div>
+                <el-collapse-transition>
+                    <ul class="header-screen-ul" ref="selectUl">
+                        <li v-for="item in specialTypeList" @click="setScreenSpecial(item)" :title="item.dictLabel">{{
+                            item.dictLabel }}
+                        </li>
+                    </ul>
+                </el-collapse-transition>
+            </div>
+        </div>
         <div class="head-title-tab">
-            <div :class="nav == 'all' ? 'head-nav active' : 'head-nav'" @click="doNav('all')">全部数据({{ tags.all }})</div>
+            <div :class="nav == 'all' ? 'head-nav active' : 'head-nav'" @click="doNav(all)">全部数据({{ tags.all }})</div>
-            <div :class="nav == 'wgq' ? 'head-nav active' : 'head-nav'" @click="doNav('wgq')">未过期({{ tags.wgq }})</div>
+            <div :class="nav == 'wgq' ? 'head-nav active' : 'head-nav'" @click="doNav(wgq)">未过期({{ tags.wgq }})</div>
-            <div :class="nav == 'ygq' ? 'head-nav active' : 'head-nav'" @click="doNav('ygq')">已过期({{ tags.ygq }})</div>
+            <div :class="nav == 'ygq' ? 'head-nav active' : 'head-nav'" @click="doNav(ygq)">已过期({{ tags.ygq }})</div>
             
         </div>
         <el-table :data="dataList" class="mytable" style="width: 100%;background: transparent;" height="470">
@@ -38,7 +52,6 @@
 <script>
 import '@/components/module/module-one-1-1'
 import MyDialog from '../components/MyDialog'
-
 export default {
     components: {
         MyDialog,
@@ -51,12 +64,13 @@ export default {
             dataList: [],
             show: false,
             nav:"wgq",
-            specialType:"0",
+            specialType:0,
             tags:{
                 all:0,
                 wgq:0,
                 qgq:0
             },
+            specialTypeList:[],
         };
     },
 
@@ -75,9 +89,12 @@ export default {
             this.title = it.title;
             this.getList();
             this.queryCount();
+            this.$api.dict('project_special_type').then(response => {
+                this.specialTypeList = response;
+            });
         },
         doNav(nav) {
-            this.nav = nav;
+            this.nav = nav();
             this.getList();
         },
         getList(){
@@ -102,6 +119,9 @@ export default {
                 }
             });
         },
+        setScreenSpecial(it){
+            debugger
+        }
     },
 };
 </script>
@@ -112,16 +132,42 @@ export default {
         color: aquamarine;
     }
 }
-.head-title-tab {
+.head-select{
-        padding-top: 12px;
+    height: 35px;
-        display: block;
+    padding-left: 25px;
-        width: 100%;
+    padding-right: 30px;
-
+    //background: url("@images/head_select.png") no-repeat center/100% 100%;
-        .head-nav {
+}
-            background-size: 100% 100%;
+.head-title-select {
-            display: inline-block;
+    width: 300px;
-            width: auto;
+    padding-top: 0px;
-            padding: 0px 24px;
+}
-        }
+.head-select input{
-    }
+    height: 100%;
+    width: 100%;
+    border: 0;
+    outline: 0;
+    background:0;
+    color: #1ce7ff;
+    cursor: pointer;
+    overflow: hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+}
+.head-select input::-webkit-input-placeholder{
+    color: #6ca5b1;
+}
+.header-screen-ul{
+    list-style: none;
+    width: 90%;
+    position: absolute;
+    max-height: 600px;
+    border: 1px solid #05556b;
+    left: 5%;
+    background: #00092a;
+    overflow: auto;
+    color: #02a6ff;
+    border-radius: 3px;
+    z-index: 99999;
+}
 </style>