style:高级查询

任超
Showing 6 changed files with 138 additions and 14 deletions
src/styles/index.scss
src/styles/public.scss
src/views/system/sqywgz/sqywgzdata.js
src/views/ywbl/dbx/dbx.vue
src/views/ywbl/dbx/dbxdata.js
src/views/ywbl/dbx/search.vue
--- a/src/styles/index.scss
View file @9f98702
+++ b/src/styles/index.scss
View file @9f98702
@@ -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;
--- a/src/styles/public.scss
View file @9f98702
+++ b/src/styles/public.scss
View file @9f98702
@@ -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;
            }
        }
--- a/src/views/system/sqywgz/sqywgzdata.js
View file @9f98702
+++ b/src/views/system/sqywgz/sqywgzdata.js
View file @9f98702
@@ -42,6 +42,7 @@ class data extends filter {
      },
      {
        label: "是否启用",
+        width: '72',
        render: (h, scope) => {
          return (
            <div>
--- a/src/views/ywbl/dbx/dbx.vue
View file @9f98702
+++ b/src/views/ywbl/dbx/dbx.vue
View file @9f98702
@@ -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');
--- a/src/views/ywbl/dbx/dbxdata.js
View file @9f98702
+++ b/src/views/ywbl/dbx/dbxdata.js
View file @9f98702
@@ -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>
          }
--- a/src/views/ywbl/dbx/search.vue 0 → 100644
View file @9f98702
+++ b/src/views/ywbl/dbx/search.vue 0 → 100644
View file @9f98702
+<!--
+  功能：高级搜索
+  作者：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