前端后台

ruoyi-ui/src/components/SearchFile/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <Form ref="form" :label-width="labelWidth" :size="size">
+    <div id="searchFilter" :gutter="10" style="display: flex; flex-wrap: wrap">
+      <slot></slot>
+      <FormItem>
+        <Button type="primary" @click="handleQuery">查询</Button>
+        <Button @click="handleReset">重置</Button>
+        <Button v-show="collapsiable" type="text" @click="shiftCollapsiable">
+          <span>
+            {{ fold ? '收起' : '展开' }}
+            <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+          </span>
+        </Button>
+      </FormItem>
+    </div>
+  </Form>
+</template>
+<script>
+import { Form, FormItem, Button } from 'element-ui'
+export default {
+  name: 'SearchFilter',
+  components: { Form, FormItem, Button },
+  props: {
+    // 最大展示数，默认3个，超过则隐藏，为0时不限制
+    maxShow: {
+      type: Number,
+      default: 3,
+    },
+    labelWidth: {
+      type: String,
+      default: '100px',
+    },
+    size: {
+      type: String,
+      default: 'small',
+    },
+  },
+  data() {
+    return {
+      collapsiable: false,
+      fold: false,
+    }
+  },
+  created() {},
+  mounted() {
+    // 通过最大显示个数控制展开/折叠
+    if (this.maxShow > 0) {
+      this.minShowCtrol()
+    }
+  },
+  methods: {
+    shiftCollapsiable() {
+      this.fold = !this.fold
+      this.minShowCtrol()   
+    },
+    // 通过maxShow控制元素显示/折叠
+    minShowCtrol() {
+      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
+      const len = group?.length ? group?.length - 1 : 0
+      if (this.maxShow < len) {
+        group.forEach((item, index) => {
+          if (index > this.maxShow - 1 && index < len) {
+            item.hidden = !this.fold
+          }
+        })
+        this.collapsiable = true
+      } else {
+        this.collapsiable = false
+      }
+    },
+    handleQuery() {
+      this.$emit('search')
+    },
+    handleReset() {
+      this.$emit('reset')
+    },
+  },
+}
+</script>
+<style lang="scss" scoped></style>
+

ruoyi-ui/src/main.js

@@ -40,6 +40,8 @@ import DictData from '@/components/DictData'
 
 import Tinymce from '@/components/tinymce/index.vue'
 
+// 查询条件展开收起组件
+import SearchFile from '@/components/SearchFile/index.vue'
 
 
 
@@ -63,6 +65,7 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 Vue.component('tinymce', Tinymce)
+Vue.component('SearchFile', SearchFile)
 
 Vue.use(directive)
 Vue.use(plugins)

ruoyi-ui/src/views/crmSystem/customerInformation/index.vue

@@ -8,127 +8,161 @@
       v-show="showSearch"
       label-width="68px"
     >
-      <el-collapse class="searchCollapse">
+      <el-collapse class="searchCollapse" disabled>
         <el-collapse-item>
           <template slot="title">
-            <div class="titleWrapper">
-              <el-form-item label="客户名称" prop="customerName">
-                <el-input
-                  v-model="queryParams.customerName"
-                  placeholder="请输入客户名称"
-                  clearable
-                  @keyup.enter.native="handleQuery"
-                />
-              </el-form-item>
-              <el-form-item label="客户编号" prop="customerCode">
-                <el-input
-                  v-model="queryParams.customerCode"
-                  placeholder="请输入客户编号"
-                  clearable
-                  @keyup.enter.native="handleQuery"
-                />
-              </el-form-item>
-
-              <el-form-item label="客户状态" prop="status">
-                <el-select
-                  v-model="queryParams.status"
-                  placeholder="全部"
-                  clearable
-                >
-                  <el-option
-                    v-for="dict in dict.type.CUSTOMER_STATUS"
-                    :key="dict.value"
-                    :label="dict.label"
-                    :value="dict.value"
-                  />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="登记日期" prop="createdDate">
-                <el-date-picker
-                  v-model="queryParams.createdDate"
-                  type="date"
-                  placeholder="请选择登记日期"
-                  style="width: 205.4px"
-                >
-                </el-date-picker>
-              </el-form-item>
-            </div>
+            <el-row class="flex">
+              <div class="titleWrapper">
+                <el-col :span="6">
+                  <el-form-item label="客户名称" prop="customerName">
+                    <el-input
+                      v-model="queryParams.customerName"
+                      placeholder="请输入客户名称"
+                      clearable
+                      @keyup.enter.native="handleQuery"
+                      :style="{ width: '100%' }"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户编号" prop="customerCode">
+                    <el-input
+                      v-model="queryParams.customerCode"
+                      placeholder="请输入客户编号"
+                      clearable
+                      @keyup.enter.native="handleQuery"
+                      :style="{ width: '100%' }"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="客户状态" prop="status">
+                    <el-select
+                      v-model="queryParams.status"
+                      placeholder="全部"
+                      clearable
+                      :style="{ width: '100%' }"
+                    >
+                      <el-option
+                        v-for="dict in dict.type.CUSTOMER_STATUS"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="登记日期" prop="createdDate">
+                    <el-date-picker
+                      v-model="queryParams.createdDate"
+                      type="date"
+                      placeholder="请选择登记日期"
+                      :style="{ width: '100%' }"
+                    >
+                      <!-- style="width: 205.4px" -->
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+              </div>
+            </el-row>
           </template>
           <div class="infoWrapper">
-            <el-form-item label="登记人" prop="createdBy">
-              <el-input
-                v-model="queryParams.createdBy"
-                placeholder="请输入登记人"
-                clearable
-                @keyup.enter.native="handleQuery"
-              />
-            </el-form-item>
-            <el-form-item label="审核状态" prop="state">
-              <el-select
-                v-model="queryParams.state"
-                placeholder="全部"
-                clearable
-              >
-                <el-option
-                  v-for="dict in dict.type.audit_status"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="是否启用" prop="isOpen">
-              <el-select
-                v-model="queryParams.isOpen"
-                placeholder="全部"
-                clearable
-              >
-                <el-option
-                  v-for="dict in dict.type.start_using_yes_no"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="企业性质" prop="customerNature">
-              <el-select
-                v-model="queryParams.customerNature"
-                placeholder="全部"
-                clearable
-              >
-                <el-option
-                  v-for="dict in dict.type.CUSTOMER_NATURE"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="申请部门" prop="responsibleDept">
-              <treeselect
-                v-model="queryParams.responsibleDept"
-                :options="deptOptions"
-                :show-count="true"
-                placeholder="全部"
-                style="width: 489px"
-              />
-            </el-form-item>
-            <el-form-item label="行业" prop="trade">
-              <el-select
-                v-model="queryParams.trade"
-                placeholder="全部"
-                clearable
-              >
-                <el-option
-                  v-for="dict in dict.type.CUSTOMER_TRADE"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-              </el-select>
-            </el-form-item>
+            <el-row>
+              <el-col :span="6">
+                <el-form-item label="登记人" prop="createdBy">
+                  <el-input
+                    v-model="queryParams.createdBy"
+                    placeholder="请输入登记人"
+                    clearable
+                    @keyup.enter.native="handleQuery"
+                    :style="{ width: '100%' }"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="审核状态" prop="state">
+                  <el-select
+                    v-model="queryParams.state"
+                    placeholder="全部"
+                    clearable
+                    :style="{ width: '100%' }"
+                  >
+                    <el-option
+                      v-for="dict in dict.type.audit_status"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="是否启用" prop="isOpen">
+                  <el-select
+                    v-model="queryParams.isOpen"
+                    placeholder="全部"
+                    clearable
+                    :style="{ width: '100%' }"
+                  >
+                    <el-option
+                      v-for="dict in dict.type.start_using_yes_no"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="企业性质" prop="customerNature">
+                  <el-select
+                    v-model="queryParams.customerNature"
+                    placeholder="全部"
+                    clearable
+                    :style="{ width: '100%' }"
+                  >
+                    <el-option
+                      v-for="dict in dict.type.CUSTOMER_NATURE"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="6">
+                <el-form-item label="申请部门" prop="responsibleDept">
+                  <treeselect
+                    v-model="queryParams.responsibleDept"
+                    :options="deptOptions"
+                    :show-count="true"
+                    placeholder="全部"
+                    :style="{ width: '100%' }"
+                  />
+                  <!-- style="width: 489px" -->
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="行业" prop="trade">
+                  <el-select
+                    v-model="queryParams.trade"
+                    placeholder="全部"
+                    clearable
+                    :style="{ width: '100%' }"
+                  >
+                    <el-option
+                      v-for="dict in dict.type.CUSTOMER_TRADE"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </div>
         </el-collapse-item>
       </el-collapse>
@@ -274,13 +308,13 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "customerInformationIndex",
   dicts: [
-    "CUSTOMER_STATUS",//客户状态
-    "audit_status",//审核状态
-    "start_using_yes_no",//是否启用
-    "CUSTOMER_NATURE",//企业性质
-    "CUSTOMER_TRADE",//客户行业
-  ],
-  components: { Treeselect },
+    "CUSTOMER_STATUS", //客户状态
+    "audit_status", //审核状态
+    "start_using_yes_no", //是否启用
+    "CUSTOMER_NATURE", //企业性质
+    "CUSTOMER_TRADE", //客户行业
+  ], 
+  components: { Treeselect,SearchFile },
   data() {
     return {
       // 显示搜索条件