hrp-ui-base 1.4.7 → 1.4.8

package/src/components/list-search-content/modules/search-condition-area.vue

@@ -1,252 +1,252 @@
-<!-- 
- * @description: 条件筛选的区域组件
- * @fileName: search-condition-area.vue 
- * @author: huatuo 
-!-->
-<template>
-  <div v-if="dialogVisible" v-loading="formLoading">
-    <div class="overlay" @click="dialogVisible = false"></div>
-    <!-- <div class="overlay" ></div> -->
-    <div v-if="dialogVisible" :title="dialogTitle" size="default" class="search-menu-dialog-body"
-      :close-on-click-modal="false">
-      <div class="search-condition-box">
-
-        <slot name="search-select-3"></slot>
-        <template v-for="(item, index) in tableData" :key="item.field">
-          <div class="search-condition-item flex-row-start" v-if="item.type !== 'hidden'">
-            <div class="search-condition-item-title">{{ item.name }}</div>
-            <div class="search-condition-item-content flex-row-center">
-              <component :is="SearchComponents[item.type]" v-if="item.type !== 'custom'" :option="item" :index="index"
-                @changeValue="changeComponentValue" style="width:100%;" ref="sonComponent"></component>
-              <slot :name="item.slotName" v-else> </slot>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="search-condition-footer flex-row-center">
-        <el-button type="primary" icon="search" @click="seachList">查询</el-button>
-        <!-- <el-button  icon="search" @click="seachList">重置</el-button> -->
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" name="SystemTenantForm" setup>
-import { ref, onActivated, reactive, watch, defineAsyncComponent, nextTick } from 'vue'
-import { debounce } from 'lodash';
-import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
-import SearchComponents from '../components'
-import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
-
-const searchContent = ref<string>('')
-const ruleFormRef = ref()
-const formLoading = ref<boolean>(false)
-const dialogVisible = ref<boolean>(false)
-const dialogTitle = ref<string>('')
-/** 打开弹窗 */
-const open = async (formList: SearchVO[], tagsList: FieldConditionBO[]) => {
-  formLoading.value = true
-  console.error(tagsList)
-  // type  add 新增  edit 编辑 
-  dialogVisible.value = true
-  dialogTitle.value = '菜单搜索'
-  tableData.value = formList ? formList.map((item) => {
-    let findIt = false
-    let value = null
-    let valueShow = ""
-    for (let i = 0; i < tagsList.length; i++) {
-      if (item.id === tagsList[i].id) {
-        findIt = true
-        value = tagsList[i].value
-        valueShow = tagsList[i].valueShow
-      }
-    }
-    return {
-      ...item,
-      value: findIt ? value : item.value,
-      valueShow: findIt ? valueShow : item.valueShow,
-    }
-  }) : []
-  console.error(tableData.value)
-  // resetForm()
-  nextTick(() => {
-    formLoading.value = false
-  })
-}
-/** 提交表单 */
-const emit = defineEmits(['success', 'filterValueChange']) // 定义 success 事件，用于操作成功后的回调
-/** 重置表单 */
-const resetForm = () => {
-  tableData.value = []
-  searchContent.value = ''
-}
-/** 请求接口返回的数组 */
-const tableData = ref<SearchVO[]>([])
-
-onActivated(async () => {
-
-})
-/** 修改组件双向绑定值 */
-const changeComponentValue = (value: any, valueShow: string, index: number) => {
-  console.error(value, valueShow, index)
-  tableData.value[index].value = value
-  tableData.value[index].valueShow = valueShow
-  emit('filterValueChange', {
-    field: tableData.value[index].field,
-    id: tableData.value[index].id,
-    value,
-    valueShow,
-    index
-  })
-}
-/** 测试 */
-const seachList = () => {
-  dialogVisible.value = false
-  getSearchData()
-  console.error(saveList.value)
-  emit('success', saveList.value)
-
-}
-/** 清除指定字段的值（供外部在筛选面板打开期间级联清空使用） */
-const clearFieldByFieldName = (fieldName: string) => {
-  if (sonComponent.value && Array.isArray(sonComponent.value)) {
-    for (let i = 0; i < sonComponent.value.length; i++) {
-      if (sonComponent.value[i]?.originData?.field === fieldName) {
-        sonComponent.value[i].currentData = ''
-        sonComponent.value[i].currentShowData = ''
-        break
-      }
-    }
-  }
-}
-defineExpose({ open, clearFieldByFieldName })
-/** 子组件ref */
-const sonComponent = ref<any[]>([])
-/** 保存参数 */
-const saveList = ref<FieldConditionBO[]>([])
-const getSearchData = () => {
-  let copySearchData: FieldConditionBO[] = []
-  if (sonComponent.value && Array.isArray(sonComponent.value) && sonComponent.value.length > 0) {
-    for (let i = 0; i < sonComponent.value.length; i++) {
-      if (sonComponent.value[i].originData.type === 'date-range' || sonComponent.value[i].originData.type === 'date-time-range' || sonComponent.value[i].originData.type === 'input-number' || sonComponent.value[i].originData.type === 'multiple_select') {
-        if (sonComponent.value[i].currentData && sonComponent.value[i].currentData.length > 0) {
-          copySearchData.push({
-            name: sonComponent.value[i].originData.name,
-            id: sonComponent.value[i].originData.id,
-            value: sonComponent.value[i].currentData,
-            valueShow: sonComponent.value[i].currentShowData
-          })
-        }
-      } else {
-        if (sonComponent.value[i].currentData) {
-          copySearchData.push({
-            name: sonComponent.value[i].originData.name,
-            id: sonComponent.value[i].originData.id,
-            value: sonComponent.value[i].currentData,
-            valueShow: sonComponent.value[i].currentShowData
-          })
-        }
-      }
-
-    }
-  }
-  saveList.value = copySearchData
-}
-</script>
-
-<style lang="scss" scoped>
-.search-menu-dialog-body {
-  border-radius: 0 0 12px 12px;
-  width: 100%;
-  // position: absolute;
-  // top: 0;
-  // left: 0;
-  z-index: 999;
-  padding: 0px;
-  max-height: 400px;
-  font-size: 14px;
-
-  background: var(--custom-theme-fill-4);
-  box-shadow: 0px 8px 24px 1px rgba(0, 0, 0, 0.16);
-  // opacity: 0.95;
-}
-
-.search-condition-box {
-  width: 100%;
-  padding: 16px 0 0;
-  min-height: 50px;
-  max-height: 350px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex-wrap: wrap;
-
-  // background-color: var(--custom-theme-fill-4);
-  // background: transparent;
-  .search-condition-item {
-    width: 48.5%;
-    min-height: 34px;
-    // height: auto;
-    margin: 0 0.75% 16px;
-    border-radius: 4px;
-    overflow: visible; // 允许内容溢出显示
-    background: var(--custom-theme-fill-7);
-    user-select: none;
-    display: flex;
-
-    .search-condition-item-title {
-      width: 30%;
-      height: 100%; // 高度自适应父容器
-      min-height: 34px; // 最小高度
-      display: flex; // 启用flex布局
-      align-items: center; // 垂直居中
-      /* line-height: 34px;  // 删除这一行 */
-      text-align: left;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .search-condition-item-content {
-      width: 70%;
-      min-height: 34px; // 最小高度保证单行美观
-      height: auto;
-      text-align: left;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-left: 1px solid var(--custom-theme-border-4);
-
-    }
-  }
-
-
-}
-
-.search-condition-footer {
-  height: 46px;
-  width: 100%;
-}
-
-
-
-/* 遮罩层样式 */
-.overlay {
-  position: fixed;
-  /* 固定定位 */
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  // background-color: rgba(0, 0, 0, 0.4);
-  background-color: transparent;
-
-  /* 透明度可调整 */
-  z-index: 999;
-  /* 确保遮罩层在其他元素之上 */
-}
-</style>
+<!-- 
+ * @description: 条件筛选的区域组件
+ * @fileName: search-condition-area.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <div v-if="dialogVisible" v-loading="formLoading">
+    <div class="overlay" @click="dialogVisible = false"></div>
+    <!-- <div class="overlay" ></div> -->
+    <div v-if="dialogVisible" :title="dialogTitle" size="default" class="search-menu-dialog-body"
+      :close-on-click-modal="false">
+      <div class="search-condition-box">
+
+        <slot name="search-select-3"></slot>
+        <template v-for="(item, index) in tableData" :key="item.field">
+          <div class="search-condition-item flex-row-start" v-if="item.type !== 'hidden'">
+            <div class="search-condition-item-title">{{ item.name }}</div>
+            <div class="search-condition-item-content flex-row-center">
+              <component :is="SearchComponents[item.type]" v-if="item.type !== 'custom'" :option="item" :index="index"
+                @changeValue="changeComponentValue" style="width:100%;" ref="sonComponent"></component>
+              <slot :name="item.slotName" v-else> </slot>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="search-condition-footer flex-row-center">
+        <el-button type="primary" icon="search" @click="seachList">查询</el-button>
+        <!-- <el-button  icon="search" @click="seachList">重置</el-button> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" name="SystemTenantForm" setup>
+import { ref, onActivated, reactive, watch, defineAsyncComponent, nextTick } from 'vue'
+import { debounce } from 'lodash';
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
+import SearchComponents from '../components'
+import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
+
+const searchContent = ref<string>('')
+const ruleFormRef = ref()
+const formLoading = ref<boolean>(false)
+const dialogVisible = ref<boolean>(false)
+const dialogTitle = ref<string>('')
+/** 打开弹窗 */
+const open = async (formList: SearchVO[], tagsList: FieldConditionBO[]) => {
+  formLoading.value = true
+  console.error(tagsList)
+  // type  add 新增  edit 编辑 
+  dialogVisible.value = true
+  dialogTitle.value = '菜单搜索'
+  tableData.value = formList ? formList.map((item) => {
+    let findIt = false
+    let value = null
+    let valueShow = ""
+    for (let i = 0; i < tagsList.length; i++) {
+      if (item.id === tagsList[i].id) {
+        findIt = true
+        value = tagsList[i].value
+        valueShow = tagsList[i].valueShow
+      }
+    }
+    return {
+      ...item,
+      value: findIt ? value : item.value,
+      valueShow: findIt ? valueShow : item.valueShow,
+    }
+  }) : []
+  console.error(tableData.value)
+  // resetForm()
+  nextTick(() => {
+    formLoading.value = false
+  })
+}
+/** 提交表单 */
+const emit = defineEmits(['success', 'filterValueChange']) // 定义 success 事件，用于操作成功后的回调
+/** 重置表单 */
+const resetForm = () => {
+  tableData.value = []
+  searchContent.value = ''
+}
+/** 请求接口返回的数组 */
+const tableData = ref<SearchVO[]>([])
+
+onActivated(async () => {
+
+})
+/** 修改组件双向绑定值 */
+const changeComponentValue = (value: any, valueShow: string, index: number) => {
+  console.error(value, valueShow, index)
+  tableData.value[index].value = value
+  tableData.value[index].valueShow = valueShow
+  emit('filterValueChange', {
+    field: tableData.value[index].field,
+    id: tableData.value[index].id,
+    value,
+    valueShow,
+    index
+  })
+}
+/** 测试 */
+const seachList = () => {
+  dialogVisible.value = false
+  getSearchData()
+  console.error(saveList.value)
+  emit('success', saveList.value)
+
+}
+/** 清除指定字段的值（供外部在筛选面板打开期间级联清空使用） */
+const clearFieldByFieldName = (fieldName: string) => {
+  if (sonComponent.value && Array.isArray(sonComponent.value)) {
+    for (let i = 0; i < sonComponent.value.length; i++) {
+      if (sonComponent.value[i]?.originData?.field === fieldName) {
+        sonComponent.value[i].currentData = ''
+        sonComponent.value[i].currentShowData = ''
+        break
+      }
+    }
+  }
+}
+defineExpose({ open, clearFieldByFieldName })
+/** 子组件ref */
+const sonComponent = ref<any[]>([])
+/** 保存参数 */
+const saveList = ref<FieldConditionBO[]>([])
+const getSearchData = () => {
+  let copySearchData: FieldConditionBO[] = []
+  if (sonComponent.value && Array.isArray(sonComponent.value) && sonComponent.value.length > 0) {
+    for (let i = 0; i < sonComponent.value.length; i++) {
+      if (sonComponent.value[i].originData.type === 'date-range' || sonComponent.value[i].originData.type === 'date-time-range' || sonComponent.value[i].originData.type === 'input-number' || sonComponent.value[i].originData.type === 'multiple_select') {
+        if (sonComponent.value[i].currentData && sonComponent.value[i].currentData.length > 0) {
+          copySearchData.push({
+            name: sonComponent.value[i].originData.name,
+            id: sonComponent.value[i].originData.id,
+            value: sonComponent.value[i].currentData,
+            valueShow: sonComponent.value[i].currentShowData
+          })
+        }
+      } else {
+        if (sonComponent.value[i].currentData) {
+          copySearchData.push({
+            name: sonComponent.value[i].originData.name,
+            id: sonComponent.value[i].originData.id,
+            value: sonComponent.value[i].currentData,
+            valueShow: sonComponent.value[i].currentShowData
+          })
+        }
+      }
+
+    }
+  }
+  saveList.value = copySearchData
+}
+</script>
+
+<style lang="scss" scoped>
+.search-menu-dialog-body {
+  border-radius: 0 0 12px 12px;
+  width: 100%;
+  // position: absolute;
+  // top: 0;
+  // left: 0;
+  z-index: 999;
+  padding: 0px;
+  max-height: 400px;
+  font-size: 14px;
+
+  background: var(--custom-theme-fill-4);
+  box-shadow: 0px 8px 24px 1px rgba(0, 0, 0, 0.16);
+  // opacity: 0.95;
+}
+
+.search-condition-box {
+  width: 100%;
+  padding: 16px 0 0;
+  min-height: 50px;
+  max-height: 350px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-wrap: wrap;
+
+  // background-color: var(--custom-theme-fill-4);
+  // background: transparent;
+  .search-condition-item {
+    width: 48.5%;
+    min-height: 34px;
+    // height: auto;
+    margin: 0 0.75% 16px;
+    border-radius: 4px;
+    overflow: visible; // 允许内容溢出显示
+    background: var(--custom-theme-fill-7);
+    user-select: none;
+    display: flex;
+
+    .search-condition-item-title {
+      width: 30%;
+      height: 100%; // 高度自适应父容器
+      min-height: 34px; // 最小高度
+      display: flex; // 启用flex布局
+      align-items: center; // 垂直居中
+      /* line-height: 34px;  // 删除这一行 */
+      text-align: left;
+      padding: 0 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .search-condition-item-content {
+      width: 70%;
+      min-height: 34px; // 最小高度保证单行美观
+      height: auto;
+      text-align: left;
+      padding: 0 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-left: 1px solid var(--custom-theme-border-4);
+
+    }
+  }
+
+
+}
+
+.search-condition-footer {
+  height: 46px;
+  width: 100%;
+}
+
+
+
+/* 遮罩层样式 */
+.overlay {
+  position: fixed;
+  /* 固定定位 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  // background-color: rgba(0, 0, 0, 0.4);
+  background-color: transparent;
+
+  /* 透明度可调整 */
+  z-index: 999;
+  /* 确保遮罩层在其他元素之上 */
+}
+</style>