筛选组件

src/components/SearchHigh/index.ts

@@ -0,0 +1,3 @@
+import SearchHigh from './src/SearchHigh.vue'
+
+export { SearchHigh }

src/components/SearchHigh/src/SearchHigh.vue

@@ -0,0 +1,257 @@
+<template>
+  <!-- 高级筛选界面 -->
+  <Dialog title="筛选" v-model="popoverVisible" :width="'42%'" >
+    <el-form id="moreListElForm" size="default" labelWidth="0" :searchData="moreListData">
+      <el-form-item v-for="(item, index) in moreListData.filters" :key="index" :prop="item.column" >
+        <!-- 第一列 label-->
+        <div class="rowInnerItem">
+          <el-select v-model="item.column" placeholder="请选择筛选对象" :disabled="item.hide" :filterable="true" @change="resetSelect(item)" >
+            <el-option v-for="(item, index) in searchOption_high" :key="index" :label="item.label" :value="item.field" />
+          </el-select>
+        </div>
+        <!-- 第二列 条件-->
+        <div class="rowInnerItem">
+          <el-select v-model="item.action" placeholder="请选择条件" :disabled="item.column == '' || item.hide ? true : false">
+            <el-option v-for="item in formatMoreListActions(item) " :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </div>
+        <!-- 第三列 值 -->
+        <div class="rowInnerItem">
+          <!-- 输入框 -->
+          <el-input v-if="getInputType(item.column) == 'input'" v-model="item.value" placeholder="请输入内容" clearable />
+          <!-- 数字输入框 -->
+          <el-input-number v-else-if="getInputType(item.column) == 'inputNumber'" v-model="item.value" :precision="6"  />
+          <!-- 下拉框 -->
+          <el-select v-else-if="getInputType(item.column) == 'select'" v-model="item.value" placeholder="请选择内容" :filterable="true" clearable >
+            <el-option v-for="dict in initSelectOptions(item.column)" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
+            <!-- <el-option v-for="(op, index) in initSelectOptions(item.column)" :label="op[item.optionsLabel] || op.label"
+              :value="op[item.optionsValue] || op.value" :key="index" /> -->
+          </el-select>
+          <!-- 时间 -->
+          <el-time-picker v-else-if="getInputType(item.column) == 'time'" v-model="item.value" placeholder="选择时间" />
+          <!-- 日期 -->
+          <el-date-picker v-else-if="getInputType(item.column) == 'date'" v-model="item.value" type="date"
+            placeholder="选择日期" />
+          <!-- 日期时间 -->
+          <el-date-picker v-else-if="getInputType(item.column) == 'datePicker'" v-model="item.value" type="datetime"
+            placeholder="选择日期时间" />
+        </div>
+        <!-- 删除条件按钮 -->
+        <el-button type="danger" :icon="Minus" circle size="small"
+          @click="moreListDelete(index, item, $event)" />
+      </el-form-item>
+    </el-form>
+    <!-- 添加筛选条件 -->
+    <div class="moreListPush-btn">
+      <span @click="moreListPush">+ 添加筛选条件</span>
+    </div>
+    <!-- 按钮 -->
+    <div class="moreListBaseBts" >
+      <ButtonBase :Butttondata="butttondata" @button-base-click="buttonBaseClick" />
+    </div>
+  </Dialog>
+</template>
+<script setup >
+import { Minus } from '@element-plus/icons-vue'
+import * as tableColumnsFun from '@/utils/disposition/tableColumns'
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+const route = useRoute() // 路由信息
+const popoverVisible = ref(false)
+const searchOption_high = ref(tableColumnsFun[route.name].allSchemas.tableColumns.filter(item => (item.field != "action")))
+const moreListData = ref({
+  filters:[]
+})
+// 列表-操作按钮
+const butttondata = [
+  defaultButtons.defaultSearchBtn(null), // 查询
+  defaultButtons.defaultSearchResetBtn(null), // 重置
+]
+// 高级筛选条件列表配置 ==,!=,>,<,>=,<=,like,in,notIn,betweeen,isNull,isNotNull
+const moreListOptions = ref({
+  action: [
+    {
+      value: '==',
+      label: '等于'
+    }, {
+      value: '!=',
+      label: '不等于'
+    }, {
+      value: '>',
+      label: '大于'
+    }, {
+      value: '<',
+      label: '小于'
+    }, {
+      value: '>=',
+      label: '大于等于'
+    }, {
+      value: '<=',
+      label: '小于等于'
+    }, {
+      value: 'Like',
+      label: '模糊'
+    }, {
+      value: 'in',
+      label: '包含'
+    }, {
+      value: 'notIn',
+      label: '不包含'
+    }, {
+      value: 'betweeen',
+      label: '区间'
+    }, {
+      value: 'isNull',
+      label: '是空'
+    }, {
+      value: 'isNotNull',
+      label: '不是空'
+    }
+  ]
+})
+
+ // 判断输入框类型
+ const getInputType = (val) => {
+  
+  const type = searchOption_high.value.find(item => (item.field == val))
+  let data = 'input'
+  if (type?.dictClass) {
+    data = 'select'
+  } else if (type?.form?.component == 'InputNumber') {
+    data = 'inputNumber'
+  } else if (type?.form?.component == 'DatePicker') {
+    data = 'datePicker'
+  }
+  return data
+}
+
+// 根据数据内容约束条件选项 ==,!=,>,<,>=,<=,like,in,notIn,betweeen,isNull,isNotNull
+const formatMoreListActions = (val) => {
+  if (val) {
+    // for(var i = 0; i < searchOption_high.value.length; i++) {
+    //   if (val == searchOption_high[i].prop) {
+    //     if (state.searchOption_high[i].filters) {
+    //       return state.moreListOptions.action.filter(item => item.value == '==' || item.value == '!=')
+    //     } else if (state.searchOption_high[i].type == 'dateTime') {
+    //       return state.moreListOptions.action.filter(item => 
+    //         item.value == '==' || 
+    //         item.value == '!=' ||
+    //         item.value == '>' ||
+    //         item.value == '<' ||
+    //         item.value == '>=' ||
+    //         item.value == '<=' )
+    //     } else {
+    //       return moreListOptions.value.action
+    //     }
+    //   }
+    // }
+  }
+  return moreListOptions.value.action
+}
+
+// 高级筛选列表-删除筛选条件行
+const moreListDelete = (val,item,$event) => {
+  if (moreListData.value.filters.length == 1) {
+    message.warning('必须保留一条筛选条件!')
+  } else {
+    message.confirm('您确定删除吗, 是否继续?').then(() => {
+      moreListData.value.filters.splice(val, 1)
+    })    
+  }
+}
+
+// 高级筛选列表-添加筛选条件行
+const moreListPush = () => {
+  let data = {
+    column: '',
+    action: "==",
+    value: ""
+  }
+  moreListData.value.filters.push(data)
+}
+
+// 筛选条件改变重置其他项
+const resetSelect = (val) => {
+  val.action = "=="
+  val.value = ""
+}
+
+// 查询 重置按钮事件
+const buttonBaseClick = (val) => {
+  if (val == 'search') { // 查询
+    emit('searchFormClick', moreListData.value)
+  } else if (val == 'searchReset') { // 重置
+    moreListData.value = {filters:[]}
+    moreListPush()
+  }
+}
+
+// 初始化下拉option值
+const initSelectOptions = (item) => {
+  return getStrDictOptions(item)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  moreListPush()
+})
+
+// 传递给父类
+const emit = defineEmits([
+  'searchFormClick'
+])
+
+defineExpose({
+  popoverVisible
+})
+</script>
+<style lang="scss" scoped>
+//  .searchHighComponent {
+   .moreListOuter {
+     margin-top: 10px;
+     position: relative;
+
+     .el-form {
+       max-height: 155px; //3行条件个高度
+       overflow: auto;
+     }
+   }
+
+   .title {
+     padding: 0 0 15px 0;
+     font-weight: bold;
+     color: #333;
+     font-size: 16px;
+   }
+
+   .rowInnerItem {
+     margin-right: 20px;
+     width: 220px;
+
+     .el-input__wrapper {
+       width: 220px;
+     }
+   }
+
+   .moreListBaseBts {
+     padding-bottom: 10px;
+   }
+
+   .moreListPush-btn {
+     padding: 0 10px 15px 0;
+     color: rgb(64, 158, 255);
+
+     span {
+       cursor: pointer;
+
+       &:hover {
+         color: blue;
+       }
+     }
+   }
+//  }
+</style>

src/components/TableHead/src/TableHead.vue

@@ -29,14 +29,21 @@
     :routeName="routeName"
     @updataTableColumns="updataTableColumns"
   />
+  <!-- 高级筛选 -->
+  <SearchHigh
+    ref="searchHigh_Ref"
+    class="searchHighClass"
+    :showPrimaryBaseButton="false"
+    @searchFormClick="searchFormClick"
+    :isHighExcludePrimary="false"
+    :primarySearchCustomButton="[]"
+    :highSearchCustomButton="[]"
+  />
 </template>
 <script setup>
 import ButtonBase from '@/components/XButton/src/ButtonBase.vue'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import rowDrop from "@/components/rowDrop/index.vue"
-// import SearchNormal from '@/components/SearchNormal/index.vue'
-// import * as highSearch from '@/utils/search/highSearch'
-// import * as primarySearch from '@/utils/search/primarySearch'
 
   const props = defineProps({
     HeadButttondata: {
@@ -50,11 +57,6 @@ import rowDrop from "@/components/rowDrop/index.vue"
       type: String,
       default: ''
     }
-    // 快速搜索条件（业务线特殊搜索条件--非utils/search/quicklySearch.ts）
-    // quicklySearchOption:{
-    //   type: Object,
-    //   default: null
-    // },
   })
 
   const buttonsLeft = ref([])
@@ -92,16 +94,20 @@ import rowDrop from "@/components/rowDrop/index.vue"
     'buttonBaseClick',
     'quicklySearchClick',
     'quicklySearchClear',
-    'updataTableColumns'
+    'updataTableColumns',
+    'searchFormClick'
   ])
 
   // 设置显示隐藏变量
   const rowDropRef = ref()
 
+
   const buttonBaseClick = (val, item) => {
     // 设置按钮 
     if (val == 'set') {
       rowDropRef.value.popoverVisible = true
+    } else if (val == 'filtrate') {
+      searchHigh_Ref.value.popoverVisible = true
     } else {
       emit('buttonBaseClick', val, item)
     }
@@ -119,6 +125,14 @@ import rowDrop from "@/components/rowDrop/index.vue"
 
   const quicklySearchDom_Ref = ref()
 
+  // 筛选组件
+  const searchHigh_Ref = ref(false)
+  // 高级筛选所有的按钮事件
+  const searchFormClick = (searchData) => {
+    emit('searchFormClick', searchData)
+    searchHigh_Ref.value.popoverVisible = false
+  }
+
   defineExpose({
     tableNavBtnsContent_Ref,
     quicklySearchDom_Ref

src/utils/disposition/defaultButtons.ts

@@ -110,7 +110,7 @@ export function defaultSetBtn(option:any) {
     name: 'set',
     hide: false,
     type: 'info',
-    icon: 'ep:operation',
+    icon: 'ep:setting',
     color: '',
     float:'right',
     hasPermi: ''
@@ -124,7 +124,35 @@ export function defaultFilterBtn(option:any) {
     name: 'filtrate',
     hide: false,
     type: 'info',
-    icon: 'Operation',
+    icon: 'ep:operation',
+    color: '',
+    float:'right',
+    hasPermi: ''
+  })
+}
+
+// 筛选——查询按钮
+export function defaultSearchBtn(option:any) {
+  return __defaultBtnOption(option,{
+    label: '搜索',
+    name: 'search',
+    hide: false,
+    type: 'primary',
+    icon: '',
+    color: '',
+    float:'right',
+    hasPermi: ''
+  })
+}
+
+// 筛选——重置按钮
+export function defaultSearchResetBtn(option:any) {
+  return __defaultBtnOption(option,{
+    label: '重置',
+    name: 'searchReset',
+    hide: false,
+    type: 'info',
+    icon: '',
     color: '',
     float:'right',
     hasPermi: ''