改

src/assets/scss/smp.scss

@@ -38,6 +38,7 @@ $smp--box-shadow-1: 0 0 5px rgba(0,0,0,0.1);
   justify-content: center;
   padding:0 20px;
   @include smp-form-height;
+  cursor: pointer;
 }
 @mixin smp-btn-hollow() {
   border: 1px solid $smp--color-blue;
@@ -657,8 +658,8 @@ html,body{
       box-shadow: $smp--box-shadow;
       .nbm-item{
         box-sizing:border-box;
-        border-right:1px solid rgba(255,255,255,0.1);
-        border-bottom:1px solid rgba(255,255,255,0.1);
+        // border-right:1px solid rgba(255,255,255,0.1);
+        // border-bottom:1px solid rgba(255,255,255,0.1);
       }
     }
   }
@@ -705,6 +706,7 @@ html,body{
     width:40px;
     i{
       position:relative;
+      cursor: pointer;
     }
     span{
       position:absolute;
@@ -790,6 +792,7 @@ html,body{
     .nulw-li{
       display: flex;
       height:30px;
+      cursor: pointer;
       // border-bottom:1px solid #ccc;
       align-items: center;
       span{
@@ -972,6 +975,7 @@ html,body{
     height:108px;
     // background-color: $smp--color-blue;
     transform: translateY(-50%);
+    cursor: pointer;
   }
 }
 .smp-page-left{
@@ -1409,8 +1413,11 @@ html,body{
     border:1px solid $smp--color-gray_e7;
     border-top:none;
     padding:6px 14px;
-    display: flex;
+    display: none;
     flex-wrap: wrap;
+    &.on{
+      display:flex;
+    }
   }
   .cc-type-item{
     display: flex;
@@ -1438,6 +1445,7 @@ html,body{
       align-items: center;
       margin:7px 9px;
       color:$smp--color-font-color-6;
+      cursor: pointer;
       &.on{
         color:$smp--color-blue;
         background-color: $smp--color-blue-white-2;
@@ -1469,7 +1477,9 @@ html,body{
   }
   .smp-aft-line{
     font-size:16px;
-    text-align: center;
     color:$smp--color-font-color-6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }

src/views/main/main-navbar-menu.vue

@@ -47,7 +47,7 @@ export default {
           name: '监测预警',
           url: '/monitorwarn-index',
           on: false,
-          icon: 'smp-ni-nav_sy_n'
+          icon: 'smp-ni-nav_jcyj_n'
         },
         {
           name: '分析研判',
@@ -105,7 +105,17 @@ export default {
       this.menuOpen = !this.menuOpen
     },
     gotoPage (item) {
-      this.menuList.forEach((e) => { e.on = false })
+      let spliceItem = ''
+      this.menuList.forEach((e, i) => {
+        e.on = false
+        if (i === 0 || i === 1) {
+          return
+        }
+        if (e.name === item.name) {
+          spliceItem = this.menuList.splice(i, 1)[0]
+          this.menuList.splice(1, 0, spliceItem)
+        }
+      })
       item.on = true
       this.$router.push({ path: item.url })
     }

src/views/modules/all-form-type.vue

@@ -4,17 +4,17 @@
       cardname="表单内容合集"
     >
     <div class="smp-aft-inner">
-      <el-form class="smp-form" ref="form" :model="form" label-width="120px">
-        <el-form-item label="输入框">
+      <el-form class="smp-form" ref="form" :rules="rules" :model="form" label-width="120px">
+        <el-form-item label="输入框" prop="input">
           <el-input v-model="form.input" placeholder="请输入关键字"></el-input>
         </el-form-item>
-        <el-form-item label="下拉框">
+        <el-form-item label="下拉框" prop="select">
           <el-select v-model="form.select" placeholder="请选择预案类型">
             <el-option label="区域一" value="shanghai"></el-option>
             <el-option label="区域二" value="beijing"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="单选">
+        <el-form-item label="单选" prop="radio">
           <el-radio-group v-model="form.radio">
             <el-radio label="A选项"></el-radio>
             <el-radio label="B选项"></el-radio>
@@ -22,7 +22,7 @@
             <el-radio label="D选项"></el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="多选">
+        <el-form-item label="多选" prop="checkbox">
           <el-checkbox-group v-model="form.checkbox">
             <el-checkbox label="A选项"></el-checkbox>
             <el-checkbox label="B选项"></el-checkbox>
@@ -31,18 +31,22 @@
           </el-checkbox-group>
         </el-form-item>
 
-        <el-form-item label="时间">
+        <el-form-item label="时间" prop="time">
           <el-col :span="24">
             <el-time-picker placeholder="请选择时间" v-model="form.time"></el-time-picker>
           </el-col>
         </el-form-item>
-        <el-form-item label="日期区间">
+        <el-form-item label="日期区间" required>
           <el-col :span="11">
-            <el-date-picker type="date" placeholder="请选择开始日期" v-model="form.dayStart"></el-date-picker>
+            <el-form-item prop="dayStart">
+              <el-date-picker type="date" placeholder="请选择开始日期" v-model="form.dayStart"></el-date-picker>
+            </el-form-item>
           </el-col>
           <el-col class="smp-aft-line" :span="2">—</el-col>
           <el-col :span="11">
-            <el-date-picker placeholder="请选择结束日期" v-model="form.dayEnd"></el-date-picker>
+            <el-form-item prop="dayEnd">
+              <el-date-picker placeholder="请选择结束日期" v-model="form.dayEnd"></el-date-picker>
+            </el-form-item>
           </el-col>
         </el-form-item>
         <el-form-item label="区间范围选择">
@@ -51,8 +55,7 @@
         <el-form-item label="开关">
           <el-switch v-model="form.switch"></el-switch>
         </el-form-item>
-
-        <el-form-item label="文本域">
+        <el-form-item label="文本域" prop="textarea">
           <el-input type="textarea" v-model="form.textarea"></el-input>
         </el-form-item>
         <el-form-item label="标签">
@@ -65,7 +68,7 @@
         </el-form-item>
         <el-form-item>
           <div class="smpaft-btn-wraper">
-            <div class="smpaft-btn smp-btn-full">提交</div>
+            <div class="smpaft-btn smp-btn-full" @click="onSubmit">提交</div>
             <div class="smpaft-btn smp-btn-hollow">取消</div>
           </div>
         </el-form-item>
@@ -93,6 +96,33 @@ export default {
         dayEnd: '',
         switch: false,
         textarea: ''
+      },
+      rules: {
+        input: [
+          { required: true, message: '请输入关键字', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        select: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        radio: [
+          { required: true, message: '请选择', trigger: 'change' }
+        ],
+        checkbox: [
+          { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
+        ],
+        time: [
+          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        ],
+        dayStart: [
+          { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
+        ],
+        dayEnd: [
+          { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
+        ],
+        textarea: [
+          { required: true, message: '请填写内容', trigger: 'blur' }
+        ]
       }
     }
   },
@@ -102,6 +132,7 @@ export default {
   },
   methods: {
     onSubmit () {
+      this.$refs['form'].validate((valid) => {})
       console.log('submit!')
     }
   }

src/views/monitorwarn/clueGathering/clue-list.vue

@@ -9,34 +9,30 @@
               <div class="cc-hd">
                 <div class="cch-input">
                   <div class="cch-input-inner">
-                    <span class="cch-ii-item">【123】</span>
-                    <span class="cch-ii-item">【123】</span>
+                    <span class="cch-ii-item" v-for="(item,i) in condChooseArr" :key="i">【{{item.name}}】</span>
                   </div>
                 </div>
-                <div class="cch-switch">
-                  <i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
+                <div class="cch-switch" @click="openCond">
+                  <i class="el-submenu__icon-arrow el-icon-arrow-down" :class="{on:isCondOepn}"></i>
                 </div>
               </div>
-              <div class="cc-bd">
+              <div class="cc-bd" :class="{on:isCondOepn}">
                 <div class="cc-type-item">
                   <div class="ccti-l">线索类型：</div>
                   <div class="ccti-r">
-                    <div class="ccti-text on">全部</div>
-                    <div class="ccti-text on">走私类</div>
+                    <div class="ccti-text" :class="{on:item.on}" v-for="(item,i) in xiansuoArr" :key="i" @click="addCond(item)">{{item.name}}</div>
                   </div>
                 </div>
                 <div class="cc-type-item">
-                  <div class="ccti-l">线索类型：</div>
+                  <div class="ccti-l">敏感性：</div>
                   <div class="ccti-r">
-                    <div class="ccti-text on">全部</div>
-                    <div class="ccti-text on">走私类</div>
+                    <div class="ccti-text" :class="{on:item.on}" v-for="(item,i) in minganArr" :key="i" @click="addCond(item)">{{item.name}}</div>
                   </div>
                 </div>
                 <div class="cc-type-item">
-                  <div class="ccti-l">线索类型：</div>
+                  <div class="ccti-l">线索来源：</div>
                   <div class="ccti-r">
-                    <div class="ccti-text on">全部</div>
-                    <div class="ccti-text on">走私类</div>
+                    <div class="ccti-text" :class="{on:item.on}" v-for="(item,i) in laiyuanArr" :key="i" @click="addCond(item)">{{item.name}}</div>
                   </div>
                 </div>
               </div>
@@ -102,14 +98,85 @@ export default {
     return {
       dayStart: '',
       dayEnd: '',
-      condTitle: ''
+      condTitle: '',
+      isCondOepn: false,
+      condChooseArr: [],
+      xiansuoArr: [
+        {
+          name: '全部',
+          on: false,
+          id: '1'
+        },
+        {
+          name: '走私',
+          on: false,
+          id: '2'
+        },
+        {
+          name: '偷渡',
+          on: false,
+          id: '3'
+        }
+      ],
+      minganArr: [
+        {
+          name: '全部',
+          on: false,
+          id: '4'
+        },
+        {
+          name: '敏感',
+          on: false,
+          id: '5'
+        },
+        {
+          name: '重要',
+          on: false,
+          id: '6'
+        }
+      ],
+      laiyuanArr: [
+        {
+          name: '全部',
+          on: false,
+          id: '7'
+        },
+        {
+          name: '人共录入',
+          on: false,
+          id: '8'
+        },
+        {
+          name: '车辆监测预警',
+          on: false,
+          id: '9'
+        }
+      ]
     }
   },
   components: {
     listTable
   },
   methods: {
-
+    openCond () {
+      this.isCondOepn = !this.isCondOepn
+    },
+    addCond (item) {
+      let chooseIndex = ''
+      this.condChooseArr.filter((e, i) => {
+        if (e.id === item.id) {
+          chooseIndex = i
+          return true
+        }
+      })
+      if (chooseIndex !== '') {
+        this.condChooseArr.splice(chooseIndex, 1)
+        item.on = false
+      } else {
+        this.condChooseArr.push(item)
+        item.on = true
+      }
+    }
   }
 }
 </script>