style:高级查询

@@ -218,7 +218,7 @@ aside {
 }
 
 .width100 {
-  width: 100%!important;
+  width: 100% !important;
 }
 
 .sub-navbar {
@@ -327,10 +327,17 @@ aside {
 .allow,
 .prohibit {
   position: relative;
-  width: 60px;
   margin: 0 auto;
 }
 
+.allow {
+  color: $green;
+}
+
+.prohibit {
+  color: $pink;
+}
+
 .allow::before {
   content: '';
   position: absolute;

@@ -18,6 +18,7 @@
         display: flex;
         font-size: 12px;
         flex-wrap: wrap;
+        line-height: 36px;
 
         span {
             display: flex;
@@ -39,6 +40,7 @@
                 border: 1px solid $light-blue;
                 border-radius: 10px;
                 padding: 2px 8px;
+                line-height: 16px;
             }
         }
 

@@ -42,6 +42,7 @@ class data extends filter {
       },
       {
         label: "是否启用",
+        width: '72',
         render: (h, scope) => {
           return (
             <div>

@@ -45,9 +45,12 @@
         <el-row class="advanced-search">
           <span>高级搜索条件：</span>
           <ul>
-            <li>不动产单元号:201252222<i class="el-icon-circle-close"></i></li>
+            <li v-for="(item,index) in searchList" :key="index">
+              {{item.name}}:{{item.value}}
+              <i class="el-icon-circle-close" @click="handelItem(index)"></i>
+            </li>
           </ul>
-          <el-button class="clean-btn" type="text">清除全部</el-button>
+          <el-button class="clean-btn" type="text" v-if="searchList.length>0">清除全部</el-button>
         </el-row>
       </el-form>
     </div>
@@ -57,22 +60,25 @@
         @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
       </lb-table>
     </div>
+    <searchBox v-model="isSearch" @getSearch="getSearch"></searchBox>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+import searchBox from './search.vue'
 import table from "@/utils/mixin/table";
 import { datas, sendThis } from "./dbxdata";
 import { searchTaskToDo, deleteFlow } from "@/api/ywbl.js"
-import { mapGetters } from 'vuex'
 export default {
   name: "dbx",
-  components: {},
+  components: { searchBox },
   mixins: [table],
   computed: {
     ...mapGetters(['dictData']),
   },
   data () {
     return {
+      isSearch: false,
       queryForm: {
         ywly: "",
         qllx: "",
@@ -84,11 +90,11 @@ export default {
         columns: datas.columns(),
         data: [],
       },
-    };
+      searchList: []
+    }
   },
   mounted () {
     sendThis(this);
-    let that = this
     window.addEventListener('visibilitychange', this.init, true)
   },
   destroyed () {
@@ -111,7 +117,6 @@ export default {
       searchTaskToDo({ ...this.queryForm, ...this.pageData }).then(res => {
         if (res.code === 200) {
           let { total, records } = res.result
-          let str = ''
           records.forEach(item => {
             item.qlrmc = item.qlrmc.join(',')
             item.ywh = item.ywh.join(',')
@@ -120,7 +125,6 @@ export default {
             item.qlrmcStr = item.qlrmc ? String(item.qlrmc) : ''
             item.ywrmcStr = item.ywrmc ? String(item.ywrmc) : ''
           })
-          console.log(records);
           this.tableData.total = total;
           this.tableData.data = records ? records : []
         }
@@ -129,6 +133,20 @@ export default {
     queryClick () {
       this.fetchData()
     },
+    getSearch (val) {
+      let obj = { ywlymc: '业务来源', sqywmc: '申请业务名称', qlrmc: '权利人', ywrmc: '义务人', slsj: '受理时间' }
+      this.searchList = Object.entries(val).map((item) => {
+        const [name, value] = item
+        if (value) return { name: obj[name], value }
+      }).filter(Boolean)
+    },
+    moreQueryClick () {
+      this.isSearch = true
+    },
+    handelItem (index) {
+      console.log(index);
+      this.searchList.splice(index, 1)
+    },
     handleSort (val) {
       this.queryForm.sortField = val.prop
       this.queryForm.sortOrder = val.order == "ascending" ? 'asc' : 'desc'
@@ -158,8 +176,8 @@ export default {
         this.$message({
           type: 'info',
           message: '已取消删除'
-        });
-      });
+        })
+      })
     },
     ywhClick (item) {
       const { href } = this.$router.resolve('/workFrame?bsmSlsq=' + item.bsmSlsq + '&bestepid=' + item.bestepid + '&bsmBusiness=' + '&viewtype=1');

@@ -33,9 +33,9 @@ class data extends filter {
         render: (h, scope) => {
           switch (scope.row.lczt) {
             case '1':
-              return <span>进行中</span>
+              return <div class='allow'>进行中</div>
             case '2':
-              return <span>已结束</span>
+              return <div class='prohibit'>已结束</div>
             case '3':
               return <span>进行中</span>
           }

+<!--
+  功能：高级搜索
+  作者：calliope
+-->
+<template>
+  <dialogBox :isButton="false" :isFullscreen="false" width="50%" @closeDialog="closeDialog" v-model="myValue"
+    title="高级搜索">
+    <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="业务来源" prop="ywlymc">
+            <el-input v-model="ruleForm.ywlymc"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="申请业务名称" prop="sqywmc">
+            <el-input v-model="ruleForm.sqywmc"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="权利人" prop="qlrmc">
+            <el-input v-model="ruleForm.qlrmc"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="义务人" prop="ywrmc">
+            <el-input v-model="ruleForm.ywrmc"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="受理时间" prop="slsj">
+            <el-date-picker v-model="ruleForm.slsj" class="width100" type="date" placeholder="请选择日期" clearable>
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row class="search-btn">
+        <el-button type="text" @click.native="closeDialog">收起搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
+        <el-button icon="el-icon-refresh-left" @click="resetForm('ruleForm')">重置</el-button>
+      </el-row>
+    </el-form>
+  </dialogBox>
+</template>
+<script>
+
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  data () {
+    return {
+      myValue: this.value,
+      ruleForm: {
+        ywlymc: '',
+        sqywmc: '',
+        qlrmc: '',
+        ywrmc: '',
+        slsj: ''
+      }
+    }
+  },
+  watch: {
+    value (val) {
+      this.myValue = val
+    }
+  },
+  methods: {
+    closeDialog () {
+      this.$emit('input', false)
+    },
+    resetForm () {
+      this.$refs['ruleForm'].resetFields()
+    },
+    submitForm () {
+      this.$emit('getSearch', this.ruleForm)
+      this.$refs['ruleForm'].resetFields()
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+<style scoped lang='scss'>
+@import '~@/styles/public.scss';
+
+.search-btn {
+  padding: 0 20px 20px 20px;
+  text-align: right;
+}
+
+/deep/.el-icon-date {
+  display: none;
+}
+</style>
\ No newline at end of file