hrp-ui-base 1.4.7 → 1.4.8

package/src/components/list-search-content/index.vue

@@ -1,803 +1,803 @@
-<!-- 
- * @description: 
- * @fileName: list-search-content.vue 
- * @author: huatuo 
-!-->
-<template>
-  <div class="normal-list-box flex-row-start" v-loading="loading">
-    <div v-if="baseOptionConfig.ifLeft && baseOptionConfig.ifShow" class="list-body-out-left-area flex-column-start">
-      <div :title="baseOptionConfig.title" class="search-left-title">
-        {{ baseOptionConfig.title ? baseOptionConfig.title : '--' }}
-      </div>
-      <div class="list-divide-small-horizontal"></div>
-      <div class="list-body-out-left-item-box">
-        <div v-for="item in baseOptionConfig.viewVOList" :key="item.viewId" :class="'list-body-out-left-item ' +
-          (viewId === item.viewId
-            ? 'list-body-out-left-item-active'
-            : 'list-body-out-left-item-default')
-          " :title="item.viewName" @click="changeView(item.viewId)">
-          {{ item.viewName }}
-        </div>
-      </div>
-      <div class="flex-column-center fix-view-left-is-box">
-        <div class="flex-row-start-center fix-view-left-is" style="cursor: pointer" @click="openManageViews">
-          <el-icon style="font-size:  var(--font-size-h2); margin: 0 8px 0 11px">
-            <Setting />
-          </el-icon>
-          <span class="fix-view-left-is-span">视图管理</span>
-        </div>
-        <div class="flex-row-start-center fix-view-left-is">
-          <el-switch v-model="baseOptionConfig.ifLeft" style="margin: 0 8px" @change="changeLeft" />
-          <span class="fix-view-left-is-span">固定在视图左侧</span>
-        </div>
-      </div>
-    </div>
-    <div :style="baseOptionConfig.ifLeft ? { width: 'calc(100% - 190px)' } : { width: '100%' }" class="list-body-area">
-      <div class="list-search-content-box flex-row-between" style="flex-wrap: wrap">
-        <div class="search-left flex-row-start-center">
-          <div v-if="!baseOptionConfig.ifLeft" class="search-left-title">
-            {{ baseOptionConfig.title || '--' }}
-          </div>
-          <div v-if="!baseOptionConfig.ifLeft && baseOptionConfig.ifShow" class="list-divide-small"></div>
-          <!-- 常用筛选条件 -->
-          <el-popover v-if="!baseOptionConfig.ifLeft && baseOptionConfig.ifShow" placement="bottom">
-            <template #reference>
-              <div style="font-weight: 400;margin-left: 12px;padding: 8px;">{{ baseOptionConfig.currentView.viewName ||
-                '--' }}<el-icon style="margin-left: 8px;font-size: 12px;">
-                  <ArrowDownBold />
-                </el-icon></div>
-            </template>
-            <template #default>
-              <div v-for="item in baseOptionConfig.viewVOList" :key="item.viewId" :label="item.viewName"
-                :value="item.viewId"
-                :style="baseOptionConfig.currentView.viewId === item.viewId ? 'background: var(--custom-theme-normal-5);color: var(--custom-theme-normal-1);height:40px;line-height:40px;text-align:center;font-size: var(--font-size-body);cursor: pointer;' : 'height:40px;line-height:40px;text-align:center;font-size: var(--font-size-body);cursor: pointer;'"
-                @click="changeView(item.viewId)">{{ item.viewName || '-' }}</div>
-              <div class="flex-row-start-center search-select-button" style="cursor: pointer" @click="openManageViews">
-                <el-icon style="margin: 0 8px">
-                  <Tools />
-                </el-icon>
-                <span class="search-select-button-span">视图管理</span>
-              </div>
-              <div class="flex-row-start-center search-select-button">
-                <el-switch v-model="baseOptionConfig.ifLeft" style="margin: 0 8px" @change="changeLeft" />
-                <span class="search-select-button-span">固定在视图左侧</span>
-              </div>
-            </template>
-          </el-popover>
-          <!-- <el-select v-if="!baseOptionConfig.ifLeft && baseOptionConfig.ifShow" v-model="viewId" :disabled="loading"
-            :fit-input-width="false" class="list-select-left select-input-font" filterable placeholder="常用筛选"
-            @change="changeView(viewId)" id='select-input-font'>
-            <template #prefix>
-              <el-icon>
-                <Search />
-              </el-icon>
-            </template>
-            <el-option v-for="item in baseOptionConfig.viewVOList" :key="item.viewId" :label="item.viewName"
-              :value="item.viewId" />
-            <template #footer>
-              <div class="flex-row-start-center search-select-button" style="cursor: pointer" @click="openManageViews">
-                <el-icon style="margin: 0 8px">
-                  <Tools />
-                </el-icon>
-                <span class="search-select-button-span">视图管理</span>
-              </div>
-              <div class="flex-row-start-center search-select-button">
-                <el-switch v-model="baseOptionConfig.ifLeft" style="margin: 0 8px" @change="changeLeft" />
-                <span class="search-select-button-span">固定在视图左侧</span>
-              </div>
-            </template>
-          </el-select> -->
-          <!-- 另存为 -->
-          <el-dropdown
-            v-if="baseOptionConfig.ifShow && !(baseOptionConfig.currentView && baseOptionConfig.currentView.viewId === 'default' && !(tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue))">
-            <el-button :disabled="loading" style="margin: 0 12px 0 0" @click="saveNew" size="small">
-              另存为新视图
-            </el-button>
-            <template #dropdown>
-              <div style="padding: 10px;font-size: 12px;">
-                点击后可将当前页面的搜索条件保存为新的专属视图，下次直接选择该视图即可快速加载相同搜索条件，无需重复设置。
-              </div>
-            </template>
-          </el-dropdown>
-          <!-- 保存 -->
-          <el-dropdown
-            v-if="baseOptionConfig.ifShow && !(baseOptionConfig.currentView && baseOptionConfig.currentView.viewId === 'default' && !(tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue))">
-            <el-button :disabled="loading" style="margin: 0 12px 0 0" @click="saveThis" size="small">
-              更新视图
-            </el-button>
-            <template #dropdown>
-              <div style="padding: 10px;font-size: 12px;">
-                点击后可将当前页面已调整的搜索条件，覆盖该视图原有的默认条件，更新后下次打开此视图将直接加载新保存的条件。
-              </div>
-            </template>
-          </el-dropdown>
-          <!-- 重置 -->
-          <el-dropdown
-            v-if="baseOptionConfig.ifShow && !(baseOptionConfig.currentView && baseOptionConfig.currentView.viewId === 'default' && !(tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue))">
-            <el-button :disabled="loading" style="margin: 0 12px 0 0" @click="resetSearch" size="small">
-              重置视图
-            </el-button>
-            <template #dropdown>
-              <div style="padding: 10px;font-size: 12px;">
-                点击后可将当前页面已调整的搜索条件，恢复为该视图最初保存的原始搜索条件，一键还原初始筛选状态。
-              </div>
-            </template>
-          </el-dropdown>
-        </div>
-        <div class="search-right flex-row-start-center">
-          <div v-loading="loading" class="flex-row-start-center"
-            v-if="((baseOptionConfig.searchList && Array.isArray(baseOptionConfig.searchList) && baseOptionConfig.searchList.length > 0) || baseOptionConfig.ifKey)">
-            <el-input v-model="baseOptionConfig.keyValue" clearable class="search-right-input"
-              :placeholder="baseOptionConfig.keyName ? '请输入' + baseOptionConfig.keyName + '搜索' : '请输入关键字搜索'"
-              style="margin: 0 5px 0 0; width: 220px" @keydown.enter="searchInputBlur" v-if="baseOptionConfig.ifKey">
-              <template #prefix style="cursor: pointer ;">
-                <el-icon @click="goSearch" style="cursor: pointer ;">
-                  <Search />
-                </el-icon>
-              </template>
-            </el-input>
-            <div
-              style="margin: 0 5px 0 0; cursor: pointer;user-select: none;font-size: var(--el-font-size-base);color:var(--el-button-text-color);"
-              @click="showSearchArea"
-              v-if="baseOptionConfig.searchList && Array.isArray(baseOptionConfig.searchList) && baseOptionConfig.searchList.some(s => s.type !== 'hidden')"
-              class="flex-row-center">
-              <el-icon>
-                <Filter />
-              </el-icon>
-              <div>筛选</div>
-            </div>
-          </div>
-          <el-button :disabled="loading" icon="Plus" style="margin-right: 16px" type="primary" @click="add"
-            v-if="baseOptionConfig.ifAdd">新增</el-button>
-
-          <el-popover v-if="baseOptionConfig.ifButton" placement="bottom"   popper-class="batch-operate-popover">
-            <template #reference>
-              <div style="width: 100px;text-align:center;font-size: var(--font-size-body);">批量操作<el-icon style="margin-left: 8px;font-size: 12px;" v-loading="loading">
-                  <ArrowDownBold />
-                </el-icon></div>
-            </template>
-            <template #default>
-              <div v-for="item in baseOptionConfig.oprateButtonList" :key="item.emitEvent" :label="item.buttonName"
-                :value="item.emitEvent" class="buttonOperateItemA" :title="item.buttonName" @click="batchOperate(item.emitEvent)">{{
-                  item.buttonName || '-' }}</div>
-            </template>
-          </el-popover>
-        </div>
-      </div>
-      <div class="list-tag-list flex-row-start-center"
-        v-if="tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue">
-        <el-tag closable type="primary" @close="clearKeyInput" style="margin:0 8px 8px 0;"
-          v-if="baseOptionConfig.keyValue">
-          {{ baseOptionConfig.keyName + '：' + baseOptionConfig.keyValue }}
-        </el-tag>
-        <template v-for="(tag, tagIndex) in tagsList" :key="tag.name">
-        <el-tag v-if="tag && tag.id && !hiddenSearchIds.has(tag.id)" closable type="primary"
-          @close="deleteTag(tag, tagIndex)" style="margin:0 8px 8px 0;">
-          {{ tag.name + '：' + tag.valueShow }}
-        </el-tag>
-        </template>
-        <el-button type="primary" link @click="clearTags" style="margin:0 8px 8px 0;">
-          清空
-        </el-button>
-      </div>
-      <div :style="{ height: centerListHeight + 'px' }" class="list-search-content-list">
-        <slot name="list"></slot>
-      </div>
-      <div class="list-page-content-footer-box">
-        <div style="display: flex; justify-content: flex-end">
-          <el-pagination v-model:current-page="domModel.pageNum" v-model:page-size="domModel.pageSize"
-            style="--el-pagination-font-size: var(--font-size-description);" :page-sizes="[10, 15, 20, 30, 40, 50, 100, 200]"
-            :background="false" :total="domModel.total" layout=" prev, pager, next,total, sizes"
-            @current-change="goSearch('footer')" @size-change="goSearch('footer')" />
-        </div>
-      </div>
-    </div>
-    <ViewsPackageManage ref="viewsPackageManageDialogRef" @success="viewsPackageManageSuccess"></ViewsPackageManage>
-    <AddViewsPackageDialog ref="addViewsPackageDialogRef" @success="addViewSuccess"></AddViewsPackageDialog>
-    <SeachConditionArea ref="searchConditionAreaRef" :baseOptionConfig="baseOptionConfig"
-      style="position: absolute; top: 62px; left: 11px; width: 98%" @success="searchConditionSuccess" @filterValueChange="onFilterValueChange">
-      <!-- @vue-ignore -->
-      <template v-for="item in slotList" :key="item" v-slot:[item]>
-        <slot :name="item"></slot>
-      </template>
-    </SeachConditionArea>
-  </div>
-</template>
-
-<script lang="ts" name="normal-list-KeepAlive" setup>
-import {
-  ref,
-  reactive,
-  computed,
-  PropType,
-  onMounted,
-  onUnmounted,
-  onActivated,
-  watch,
-} from "vue";
-import { type CheckboxValueType, ElMessage } from "element-plus";
-import { debounce } from "lodash";
-import ViewsPackageManage from "./modules/views-package-manage-dialog.vue";
-import AddViewsPackageDialog from "./modules/add-views-package-dialog.vue";
-import SeachConditionArea from "./modules/search-condition-area.vue";
-/** controller  */
-import TabulationController from "hrp-ui-base/api/bms/tabulation/TabulationController"
-/** bo */
-import PersonViewVO from "hrp-ui-base/api/bms/tabulation/bo/PersonViewVO";
-import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
-import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
-import TabulationBO from "hrp-ui-base/api/bms/tabulation/bo/TabulationBO";
-import FunPointVo from "hrp-ui-base/api/bms/permission-manage/bo/FunPointVo"
-
-const props = defineProps({
-  routeId: { type: String, default: "", require: true },
-  modelType: { type: String, default: "pc", require: true },
-  defaultPageSizeValue: { type: Number, default: 15 }
-});
-const emits = defineEmits(["searchHandler", "addEvent", "getPagePermit", "buttonChange", "filterValueChange"]);
-/** 新增 */
-const add = () => {
-  emits("addEvent")
-}
-const viewId = ref<string>("");
-const viewName = ref<string>("")
-/** loading */
-const loading = ref<boolean>(false);
-const currentViewId = ref<string>("");
-// 全局数据
-const baseOptionConfig = ref<PersonViewVO>(new PersonViewVO());
-/** 获取数据 */
-const getData = async (reqViewId?: string) => {
-  loading.value = true
-  let id = reqViewId ? reqViewId : ""
-  let reqRouteId = props.routeId ? props.routeId : 'add'
-  if (props.modelType && props.modelType === 'mobile') {
-    await TabulationController.selectPhoneTabulation(reqRouteId, id).then((data) => {
-      if (data.code == 200 && data.res) {
-        baseOptionConfig.value = data.res
-        getSlotList(baseOptionConfig.value.searchList)
-        tagsList.value = data.res.currentView.fields && Array.isArray(data.res.currentView.fields) && data.res.currentView.fields.length > 0 ? data.res.currentView.fields : []
-        viewName.value = data.res.currentView.viewName
-        viewId.value = data.res.currentView.viewId
-        emits("getPagePermit", data.res.funPointVo)
-
-        // goSearch()
-      } else {
-        ElMessage.error('请求配置信息错误！')
-      }
-    }).finally(() => {
-      loading.value = false
-    })
-  } else {
-    await TabulationController.selectTabulation(reqRouteId, id).then((data) => {
-      if (data.code == 200 && data.res) {
-        baseOptionConfig.value = data.res
-        getSlotList(baseOptionConfig.value.searchList)
-        tagsList.value = data.res.currentView.fields && Array.isArray(data.res.currentView.fields) && data.res.currentView.fields.length > 0 ? data.res.currentView.fields : []
-        viewName.value = data.res.currentView.viewName
-        viewId.value = data.res.currentView.viewId
-        emits("getPagePermit", data.res.funPointVo)
-
-        // goSearch()
-      } else {
-        ElMessage.error('请求配置信息错误！')
-      }
-    }).finally(() => {
-      loading.value = false
-    })
-  }
-
-};
-
-/** 查询 */
-const searchHandler = (type: number) => {
-  emits("searchHandler");
-};
-/** 总数 */
-const tableTotal = ref<number>(0);
-const domModel = ref<{ total: number, pageNum: number, pageSize: number }>({ total: 0, pageNum: 1, pageSize: props.defaultPageSizeValue });
-const centerListHeight = ref<number>(0);
-/** 重新获取中间区域的高度的方法 */
-const handleResize = debounce(() => {
-  // 更新数据或执行其他操作
-  let boxHeight = document.getElementsByClassName("normal-list-box")[0]
-    ? document.getElementsByClassName("normal-list-box")[0].clientHeight
-    : 0;
-
-  let SearchHeight = document.getElementsByClassName(
-    "list-search-content-box"
-  )[0]
-    ? document.getElementsByClassName("list-search-content-box")[0].clientHeight
-    : 0;
-
-  let tagsHeight = document.getElementsByClassName(
-    "list-tag-list"
-  )[0]
-    ? document.getElementsByClassName("list-tag-list")[0].clientHeight
-    : 0;
-
-  let SearchFooter = document.getElementsByClassName(
-    "list-page-content-footer-box"
-  )[0]
-    ? document.getElementsByClassName("list-page-content-footer-box")[0]
-      .clientHeight
-    : 0;
-
-  centerListHeight.value =
-    boxHeight && SearchHeight && SearchFooter
-      ? boxHeight - SearchHeight - SearchFooter - tagsHeight - 20
-      : 0;
-
-}, 500);
-const isFirstMounted=ref(true)
-onMounted(() => {
-  handleResize();
-  window.addEventListener("resize", handleResize);
-  getData(undefined);
-  setTimeout(() => {
-  isFirstMounted.value = false; 
-  }, 500);
-
-});
-onActivated(() => {
-  if(!isFirstMounted.value){
-    goSearch()
-  }
-});
-onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
-});
-/** 管理视图 */
-const viewsPackageManageDialogRef = ref();
-const openManageViews = () => {
-  viewsPackageManageDialogRef.value?.open({
-    tagsList: tagsList.value,
-    viewId: viewId.value,
-    viewName: viewName.value,
-    routeId: props.routeId,
-    keyValue: baseOptionConfig.value.keyValue
-  });
-};
-
-/** 更新视图成功后的回调 */
-const viewsPackageManageSuccess = () => {
-  getData(viewId.value)
-  handleResize()
-};
-/** 批量操作触发事件 */
-const batchOperate = (value: string) => {
-  emits("buttonChange", value);
-};
-/** 将放大镜icon转为搜索的input组件 */
-const isHideIconShowInput = ref<boolean>(false);
-const changeIcoToInput = (value: boolean) => {
-  isHideIconShowInput.value = value;
-};
-/** 搜索框失去焦点 */
-const searchInputBlur = () => {
-  if (!baseOptionConfig.value.keyValue) {
-    isHideIconShowInput.value = false
-  }
-  goSearch()
-  handleResize()
-}
-/** 关键字搜索条件 */
-const keySearch = ref<string>("");
-/** 搜索关键字 */
-const goSeachKey = () => {
-  loading.value = true;
-  isHideIconShowInput.value = false;
-  loading.value = false;
-};
-/** 修改选中视图 */
-const changeView = (id: string) => {
-  viewId.value = id;
-  getData(viewId.value)
-};
-/** 另存為 */
-const saveNew = () => {
-  addViewsPackageDialogRef.value?.open("add", {
-    tagsList: tagsList.value,
-    viewId: viewId.value,
-    viewName: viewName.value,
-    routeId: props.routeId,
-    keyValue: baseOptionConfig.value.keyValue
-  });
-};
-/** 保存 */
-const saveThis = async () => {
-  loading.value = true
-  let formData: TabulationBO = {
-    fieldConditionBO: tagsList.value,
-    tabulationId: viewId.value,
-    tabulationName: viewName.value,
-    routeId: props.routeId,
-    keyValue: baseOptionConfig.value.keyValue
-  }
-  await TabulationController.updateTabulation(formData).then((data) => {
-    if (data.code == 200) {
-      ElMessage.success('保存成功！');
-    }
-  }).finally(() => {
-    loading.value = false;
-  })
-};
-/** 新增弹窗 */
-const addViewsPackageDialogRef = ref();
-/** 新增成功的回调 */
-const addViewSuccess = (newViewId: string) => {
-  getData(newViewId)
-
-};
-/** 重置 */
-const resetSearch = () => {
-  domModel.value.pageNum = 1;
-  domModel.value.pageSize = 10;
-  getData(viewId.value)
-};
-
-/** 打开搜索条件区域 */
-const showSearchArea = () => {
-  searchConditionAreaRef.value?.open((baseOptionConfig.value.searchList || []), tagsList.value);
-};
-/** 搜索条件区域 */
-const searchConditionAreaRef = ref();
-const searchConditionSuccess = (saveList: FieldConditionBO[]) => {
-  tagsList.value = saveList
-  goSearch()
-};
-/** 筛选条件值变化事件转发 */
-const onFilterValueChange = (data: any) => {
-  emits('filterValueChange', data)
-};
-/** 插槽名字的集合，决定出要承接的插槽集合 */
-const slotList = ref<string[]>([]);
-const tagsList = ref<FieldConditionBO[]>([])
-/** type='hidden' 的查询条件 id 集合，用于 tags 过滤显示 */
-const hiddenSearchIds = computed<Set<string>>(() => {
-  const list = baseOptionConfig.value.searchList
-  if (!list || !Array.isArray(list)) return new Set()
-  return new Set(list.filter(s => s.type === 'hidden' && s.id).map(s => s.id))
-})
-/** 根据接口返回的数据 计算出 插槽 与 显示tags 的 名字集合 */
-const getSlotList = (list: SearchVO[]) => {
-  let slotCopyList: string[] = [];
-
-  if (list && Array.isArray(list) && list.length > 0) {
-    for (let i = 0; i < list.length; i++) {
-      if (list[i].type == "custom") {
-        slotCopyList.push(list[i].slotName);
-      }
-    }
-  }
-  slotList.value = slotCopyList;
-};
-/** 删除tag的回调0 */
-const deleteTag = (tag: FieldConditionBO, index: number) => {
-  tagsList.value.splice(index, 1)
-  for (let i = 0; i < baseOptionConfig.value.searchList.length; i++) {
-    if (baseOptionConfig.value.searchList[i].id == tag.id) {
-      if (baseOptionConfig.value.searchList[i].type === "date-range" || baseOptionConfig.value.searchList[i].type === "date-time-range" || baseOptionConfig.value.searchList[i].type === "input-number") {
-        baseOptionConfig.value.searchList[i].value = [];
-        baseOptionConfig.value.searchList[i].valueShow = ""
-      } else {
-        baseOptionConfig.value.searchList[i].value = null;
-        baseOptionConfig.value.searchList[i].valueShow = ""
-      }
-
-    }
-  }
-  goSearch()
-};
-/** 清除所有的tag标签 */
-const clearTags = () => {
-  tagsList.value = []
-  for (let i = 0; i < baseOptionConfig.value.searchList.length; i++) {
-    if (baseOptionConfig.value.searchList[i].type === "date-range" || baseOptionConfig.value.searchList[i].type === "date-time-range" || baseOptionConfig.value.searchList[i].type === "input-number") {
-      baseOptionConfig.value.searchList[i].value = [];
-      baseOptionConfig.value.searchList[i].valueShow = ""
-    } else {
-      baseOptionConfig.value.searchList[i].value = null;
-      baseOptionConfig.value.searchList[i].valueShow = ""
-    }
-  }
-  clearKeyInput()
-}
-/** 删除key的标签 */
-const clearKeyInput = () => {
-  baseOptionConfig.value.keyValue = ''
-  goSearch()
-}
-const changeLeft = () => {
-  TabulationController.updateTabulationConfig(props.routeId).then((data) => {
-    if (data.code == 200) {
-      ElMessage.success('修改成功！')
-      // getData(viewId.value)
-    } else {
-      ElMessage.error('修改失败！')
-    }
-  })
-
-}
-/** 去搜索 */
-const goSearch = (from: string = "search") => {
-  let searchObj: any = {
-    pageSize: domModel.value.pageSize ? domModel.value.pageSize : 10,
-    pageNum: domModel.value.pageNum ? domModel.value.pageNum : 1,
-    keyValue: baseOptionConfig.value.keyValue,
-    fieldConditionBO: tagsList.value
-  }
-  emits('searchHandler', searchObj, 1, from)
-}
-// 由外部控制修改状态集合
-const callbackGetList = (fieldConditionVOList: FieldConditionBO[], pageInfo: { total: number, pageSize: number, pageNum: number }) => {
-  if (fieldConditionVOList && Array.isArray(fieldConditionVOList) && fieldConditionVOList.length > 0) {
-    tagsList.value = fieldConditionVOList
-  }
-  if (pageInfo) {
-    domModel.value.pageSize = pageInfo.pageSize
-    domModel.value.pageNum = pageInfo.pageNum
-    domModel.value.total = pageInfo.total
-  }
-}
-watch(()=>{return tagsList.value},()=> {
-    handleResize()
-},{deep:true})
-defineExpose({ callbackGetList, goSearch, baseOptionConfig, searchConditionAreaRef })
-</script>
-<style lang="scss">
-.list-search-content-box {
-  margin-bottom: 5px;
-
-  .el-select__input {
-    width: 100% !important;
-  }
-
-  .select-input-font {
-    .el-select__wrapper {
-      font-size: var(--font-size-description);
-    }
-  }
-}
-
-.list-page-content-footer-box {
-  .el-select__wrapper {
-    font-size: var(--font-size-description);
-  }
-}
-
-.search-right {
-  .search-right-input .el-input__inner {
-
-    text-wrap: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis
-  }
-}
-
-// 批量操作弹层样式（通过 popper-class 挂载到 body，需要非 scoped 样式）
-.batch-operate-popover {
-  max-width: 280px;
-  padding: 6px 0;
-
-  .buttonOperateItemA {
-    max-width: 260px;
-    padding: 0 12px;
-    box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-</style>
-<style lang="scss" scoped>
-.normal-list-box {
-  width: 100%;
-  height: calc(100vh - 94px);
-  overflow: auto;
-  padding: 5px 10px 0 10px;
-  background: var(--custom-theme-fill-7);
-}
-
-.list-body-area {
-  height: 100%;
-
-  .list-search-content-box {
-    background: var(--custom-theme-fill-7);
-    padding: 0 10px 5px 10px;
-    border-bottom: 1px solid var(--custom-theme-border-4);
-
-    .search-left-title {
-      margin-right: 11px;
-      height: 21px;
-      font-weight: bold;
-      font-size: var(--font-size-body);
-      color: var(--custom-theme-text-1);
-      line-height: 21px;
-      text-align: left;
-      font-style: normal;
-      text-transform: none;
-    }
-
-    .list-divide-small {
-      width: 0;
-      height: 23px;
-      border: 1px solid var(--custom-theme-border-4);
-    }
-
-    .list-select-left {
-      width: 120px;
-      margin: 0 11px;
-      background: var(--custom-theme-border-4);
-    }
-
-  }
-
-  .list-search-content-list {
-    width: 100%;
-    overflow: auto;
-    :deep(.tables-ifRed)
-    {
-      height: 100%;
-    }
-    :deep(.tables-ifRed .el-table)
-    {
-      height: 100%;
-    }
-  }
-
-  .list-page-content-footer-box {
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    user-select: none;
-  }
-}
-
-// 左侧展开视图列表的功能样式
-.list-body-out-left-area {
-  color: var(--custom-theme-text-1);
-  width: 180px;
-  border-right: 1px solid var(--custom-theme-border-1);
-  margin-right: 8px;
-  height: 100%;
-
-  .search-left-title {
-    height: 21px;
-    font-weight: bold;
-    font-size: var(--font-size-body);
-    color: var(--custom-theme-text-1);
-    line-height: 21px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    margin: 5px 5px 20px 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .list-body-out-left-item-box {
-    height: calc(100% - 80px);
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    cursor: pointer;
-
-    .list-body-out-left-item {
-      height: 37px;
-      line-height: 37px;
-      font-size: var(--font-size-body);
-      background: var(--custom-theme-fill-6);
-
-      border-radius: 6px 6px 6px 6px;
-      padding: 0 8px;
-      margin: 0 3px 0 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .list-body-out-left-item:hover {
-      background: var(--custom-theme-normal-5);
-      color: var(--custom-theme-normal-1);
-    }
-
-    .list-body-out-left-item-active {
-      background: var(--custom-theme-normal-5);
-      color: var(--custom-theme-normal-1);
-    }
-
-    .list-body-out-left-item-default {
-      background: var(--custom-theme-fill-6);
-      color: var(--custom-theme-text-1);
-    }
-  }
-
-  .list-divide-small-horizontal {
-    width: 149px;
-    height: 0px;
-    border: 1px solid var(--custom-theme-border-1);
-    margin-bottom: 12px;
-  }
-
-  .fix-view-left-is-box {
-    height: 80px;
-    width: 100%;
-    box-shadow: var(--custom-theme-text-1);
-
-    .fix-view-left-is {
-      height: 40px;
-      width: 100%;
-      line-height: 40px;
-
-      .fix-view-left-is-span {
-        font-size: var(--font-size-body);
-        overflow: hidden;
-        width: 100%;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.search-select-button {
-  width: 100%;
-  height: 34px;
-  user-select: none;
-  margin-right: 8px;
-
-  .search-select-button-span {
-    font-size: var(--font-size-body);
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.search-select-button:hover {
-  background: var(--el-fill-color-light);
-}
-
-.list-tag-list {
-  flex-wrap: wrap;
-  line-height: 30px;
-  min-height: 30px;
-}
-
-.buttonOperateItemA {
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: var(--font-size-body);
-  cursor: pointer;
-  display: block;
-  padding: 0 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.buttonOperateItemA:hover {
-  background: var(--custom-theme-normal-5);
-  color: var(--custom-theme-normal-1);
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: var(--font-size-body);
-  cursor: pointer;
-}
-</style>
-<style lang="scss">
-  .normal-list-box {
-    .el-scrollbar__bar.is-horizontal {
-      display: block !important;
-      height: 10px;
-      /* 加 !important 防止被 Element UI 内置样式覆盖 */
-    }
-  }
-  </style>
+<!-- 
+ * @description: 
+ * @fileName: list-search-content.vue 
+ * @author: huatuo 
+!-->
+<template>
+  <div class="normal-list-box flex-row-start" v-loading="loading">
+    <div v-if="baseOptionConfig.ifLeft && baseOptionConfig.ifShow" class="list-body-out-left-area flex-column-start">
+      <div :title="baseOptionConfig.title" class="search-left-title">
+        {{ baseOptionConfig.title ? baseOptionConfig.title : '--' }}
+      </div>
+      <div class="list-divide-small-horizontal"></div>
+      <div class="list-body-out-left-item-box">
+        <div v-for="item in baseOptionConfig.viewVOList" :key="item.viewId" :class="'list-body-out-left-item ' +
+          (viewId === item.viewId
+            ? 'list-body-out-left-item-active'
+            : 'list-body-out-left-item-default')
+          " :title="item.viewName" @click="changeView(item.viewId)">
+          {{ item.viewName }}
+        </div>
+      </div>
+      <div class="flex-column-center fix-view-left-is-box">
+        <div class="flex-row-start-center fix-view-left-is" style="cursor: pointer" @click="openManageViews">
+          <el-icon style="font-size:  var(--font-size-h2); margin: 0 8px 0 11px">
+            <Setting />
+          </el-icon>
+          <span class="fix-view-left-is-span">视图管理</span>
+        </div>
+        <div class="flex-row-start-center fix-view-left-is">
+          <el-switch v-model="baseOptionConfig.ifLeft" style="margin: 0 8px" @change="changeLeft" />
+          <span class="fix-view-left-is-span">固定在视图左侧</span>
+        </div>
+      </div>
+    </div>
+    <div :style="baseOptionConfig.ifLeft ? { width: 'calc(100% - 190px)' } : { width: '100%' }" class="list-body-area">
+      <div class="list-search-content-box flex-row-between" style="flex-wrap: wrap">
+        <div class="search-left flex-row-start-center">
+          <div v-if="!baseOptionConfig.ifLeft" class="search-left-title">
+            {{ baseOptionConfig.title || '--' }}
+          </div>
+          <div v-if="!baseOptionConfig.ifLeft && baseOptionConfig.ifShow" class="list-divide-small"></div>
+          <!-- 常用筛选条件 -->
+          <el-popover v-if="!baseOptionConfig.ifLeft && baseOptionConfig.ifShow" placement="bottom">
+            <template #reference>
+              <div style="font-weight: 400;margin-left: 12px;padding: 8px;">{{ baseOptionConfig.currentView.viewName ||
+                '--' }}<el-icon style="margin-left: 8px;font-size: 12px;">
+                  <ArrowDownBold />
+                </el-icon></div>
+            </template>
+            <template #default>
+              <div v-for="item in baseOptionConfig.viewVOList" :key="item.viewId" :label="item.viewName"
+                :value="item.viewId"
+                :style="baseOptionConfig.currentView.viewId === item.viewId ? 'background: var(--custom-theme-normal-5);color: var(--custom-theme-normal-1);height:40px;line-height:40px;text-align:center;font-size: var(--font-size-body);cursor: pointer;' : 'height:40px;line-height:40px;text-align:center;font-size: var(--font-size-body);cursor: pointer;'"
+                @click="changeView(item.viewId)">{{ item.viewName || '-' }}</div>
+              <div class="flex-row-start-center search-select-button" style="cursor: pointer" @click="openManageViews">
+                <el-icon style="margin: 0 8px">
+                  <Tools />
+                </el-icon>
+                <span class="search-select-button-span">视图管理</span>
+              </div>
+              <div class="flex-row-start-center search-select-button">
+                <el-switch v-model="baseOptionConfig.ifLeft" style="margin: 0 8px" @change="changeLeft" />
+                <span class="search-select-button-span">固定在视图左侧</span>
+              </div>
+            </template>
+          </el-popover>
+          <!-- <el-select v-if="!baseOptionConfig.ifLeft && baseOptionConfig.ifShow" v-model="viewId" :disabled="loading"
+            :fit-input-width="false" class="list-select-left select-input-font" filterable placeholder="常用筛选"
+            @change="changeView(viewId)" id='select-input-font'>
+            <template #prefix>
+              <el-icon>
+                <Search />
+              </el-icon>
+            </template>
+            <el-option v-for="item in baseOptionConfig.viewVOList" :key="item.viewId" :label="item.viewName"
+              :value="item.viewId" />
+            <template #footer>
+              <div class="flex-row-start-center search-select-button" style="cursor: pointer" @click="openManageViews">
+                <el-icon style="margin: 0 8px">
+                  <Tools />
+                </el-icon>
+                <span class="search-select-button-span">视图管理</span>
+              </div>
+              <div class="flex-row-start-center search-select-button">
+                <el-switch v-model="baseOptionConfig.ifLeft" style="margin: 0 8px" @change="changeLeft" />
+                <span class="search-select-button-span">固定在视图左侧</span>
+              </div>
+            </template>
+          </el-select> -->
+          <!-- 另存为 -->
+          <el-dropdown
+            v-if="baseOptionConfig.ifShow && !(baseOptionConfig.currentView && baseOptionConfig.currentView.viewId === 'default' && !(tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue))">
+            <el-button :disabled="loading" style="margin: 0 12px 0 0" @click="saveNew" size="small">
+              另存为新视图
+            </el-button>
+            <template #dropdown>
+              <div style="padding: 10px;font-size: 12px;">
+                点击后可将当前页面的搜索条件保存为新的专属视图，下次直接选择该视图即可快速加载相同搜索条件，无需重复设置。
+              </div>
+            </template>
+          </el-dropdown>
+          <!-- 保存 -->
+          <el-dropdown
+            v-if="baseOptionConfig.ifShow && !(baseOptionConfig.currentView && baseOptionConfig.currentView.viewId === 'default' && !(tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue))">
+            <el-button :disabled="loading" style="margin: 0 12px 0 0" @click="saveThis" size="small">
+              更新视图
+            </el-button>
+            <template #dropdown>
+              <div style="padding: 10px;font-size: 12px;">
+                点击后可将当前页面已调整的搜索条件，覆盖该视图原有的默认条件，更新后下次打开此视图将直接加载新保存的条件。
+              </div>
+            </template>
+          </el-dropdown>
+          <!-- 重置 -->
+          <el-dropdown
+            v-if="baseOptionConfig.ifShow && !(baseOptionConfig.currentView && baseOptionConfig.currentView.viewId === 'default' && !(tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue))">
+            <el-button :disabled="loading" style="margin: 0 12px 0 0" @click="resetSearch" size="small">
+              重置视图
+            </el-button>
+            <template #dropdown>
+              <div style="padding: 10px;font-size: 12px;">
+                点击后可将当前页面已调整的搜索条件，恢复为该视图最初保存的原始搜索条件，一键还原初始筛选状态。
+              </div>
+            </template>
+          </el-dropdown>
+        </div>
+        <div class="search-right flex-row-start-center">
+          <div v-loading="loading" class="flex-row-start-center"
+            v-if="((baseOptionConfig.searchList && Array.isArray(baseOptionConfig.searchList) && baseOptionConfig.searchList.length > 0) || baseOptionConfig.ifKey)">
+            <el-input v-model="baseOptionConfig.keyValue" clearable class="search-right-input"
+              :placeholder="baseOptionConfig.keyName ? '请输入' + baseOptionConfig.keyName + '搜索' : '请输入关键字搜索'"
+              style="margin: 0 5px 0 0; width: 220px" @keydown.enter="searchInputBlur" v-if="baseOptionConfig.ifKey">
+              <template #prefix style="cursor: pointer ;">
+                <el-icon @click="goSearch" style="cursor: pointer ;">
+                  <Search />
+                </el-icon>
+              </template>
+            </el-input>
+            <div
+              style="margin: 0 5px 0 0; cursor: pointer;user-select: none;font-size: var(--el-font-size-base);color:var(--el-button-text-color);"
+              @click="showSearchArea"
+              v-if="baseOptionConfig.searchList && Array.isArray(baseOptionConfig.searchList) && baseOptionConfig.searchList.some(s => s.type !== 'hidden')"
+              class="flex-row-center">
+              <el-icon>
+                <Filter />
+              </el-icon>
+              <div>筛选</div>
+            </div>
+          </div>
+          <el-button :disabled="loading" icon="Plus" style="margin-right: 16px" type="primary" @click="add"
+            v-if="baseOptionConfig.ifAdd">新增</el-button>
+
+          <el-popover v-if="baseOptionConfig.ifButton" placement="bottom"   popper-class="batch-operate-popover">
+            <template #reference>
+              <div style="width: 100px;text-align:center;font-size: var(--font-size-body);">批量操作<el-icon style="margin-left: 8px;font-size: 12px;" v-loading="loading">
+                  <ArrowDownBold />
+                </el-icon></div>
+            </template>
+            <template #default>
+              <div v-for="item in baseOptionConfig.oprateButtonList" :key="item.emitEvent" :label="item.buttonName"
+                :value="item.emitEvent" class="buttonOperateItemA" :title="item.buttonName" @click="batchOperate(item.emitEvent)">{{
+                  item.buttonName || '-' }}</div>
+            </template>
+          </el-popover>
+        </div>
+      </div>
+      <div class="list-tag-list flex-row-start-center"
+        v-if="tagsList && Array.isArray(tagsList) && tagsList.length > 0 || baseOptionConfig.keyValue">
+        <el-tag closable type="primary" @close="clearKeyInput" style="margin:0 8px 8px 0;"
+          v-if="baseOptionConfig.keyValue">
+          {{ baseOptionConfig.keyName + '：' + baseOptionConfig.keyValue }}
+        </el-tag>
+        <template v-for="(tag, tagIndex) in tagsList" :key="tag.name">
+        <el-tag v-if="tag && tag.id && !hiddenSearchIds.has(tag.id)" closable type="primary"
+          @close="deleteTag(tag, tagIndex)" style="margin:0 8px 8px 0;">
+          {{ tag.name + '：' + tag.valueShow }}
+        </el-tag>
+        </template>
+        <el-button type="primary" link @click="clearTags" style="margin:0 8px 8px 0;">
+          清空
+        </el-button>
+      </div>
+      <div :style="{ height: centerListHeight + 'px' }" class="list-search-content-list">
+        <slot name="list"></slot>
+      </div>
+      <div class="list-page-content-footer-box">
+        <div style="display: flex; justify-content: flex-end">
+          <el-pagination v-model:current-page="domModel.pageNum" v-model:page-size="domModel.pageSize"
+            style="--el-pagination-font-size: var(--font-size-description);" :page-sizes="[10, 15, 20, 30, 40, 50, 100, 200]"
+            :background="false" :total="domModel.total" layout=" prev, pager, next,total, sizes"
+            @current-change="goSearch('footer')" @size-change="goSearch('footer')" />
+        </div>
+      </div>
+    </div>
+    <ViewsPackageManage ref="viewsPackageManageDialogRef" @success="viewsPackageManageSuccess"></ViewsPackageManage>
+    <AddViewsPackageDialog ref="addViewsPackageDialogRef" @success="addViewSuccess"></AddViewsPackageDialog>
+    <SeachConditionArea ref="searchConditionAreaRef" :baseOptionConfig="baseOptionConfig"
+      style="position: absolute; top: 62px; left: 11px; width: 98%" @success="searchConditionSuccess" @filterValueChange="onFilterValueChange">
+      <!-- @vue-ignore -->
+      <template v-for="item in slotList" :key="item" v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </SeachConditionArea>
+  </div>
+</template>
+
+<script lang="ts" name="normal-list-KeepAlive" setup>
+import {
+  ref,
+  reactive,
+  computed,
+  PropType,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  watch,
+} from "vue";
+import { type CheckboxValueType, ElMessage } from "element-plus";
+import { debounce } from "lodash";
+import ViewsPackageManage from "./modules/views-package-manage-dialog.vue";
+import AddViewsPackageDialog from "./modules/add-views-package-dialog.vue";
+import SeachConditionArea from "./modules/search-condition-area.vue";
+/** controller  */
+import TabulationController from "hrp-ui-base/api/bms/tabulation/TabulationController"
+/** bo */
+import PersonViewVO from "hrp-ui-base/api/bms/tabulation/bo/PersonViewVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
+import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
+import TabulationBO from "hrp-ui-base/api/bms/tabulation/bo/TabulationBO";
+import FunPointVo from "hrp-ui-base/api/bms/permission-manage/bo/FunPointVo"
+
+const props = defineProps({
+  routeId: { type: String, default: "", require: true },
+  modelType: { type: String, default: "pc", require: true },
+  defaultPageSizeValue: { type: Number, default: 15 }
+});
+const emits = defineEmits(["searchHandler", "addEvent", "getPagePermit", "buttonChange", "filterValueChange"]);
+/** 新增 */
+const add = () => {
+  emits("addEvent")
+}
+const viewId = ref<string>("");
+const viewName = ref<string>("")
+/** loading */
+const loading = ref<boolean>(false);
+const currentViewId = ref<string>("");
+// 全局数据
+const baseOptionConfig = ref<PersonViewVO>(new PersonViewVO());
+/** 获取数据 */
+const getData = async (reqViewId?: string) => {
+  loading.value = true
+  let id = reqViewId ? reqViewId : ""
+  let reqRouteId = props.routeId ? props.routeId : 'add'
+  if (props.modelType && props.modelType === 'mobile') {
+    await TabulationController.selectPhoneTabulation(reqRouteId, id).then((data) => {
+      if (data.code == 200 && data.res) {
+        baseOptionConfig.value = data.res
+        getSlotList(baseOptionConfig.value.searchList)
+        tagsList.value = data.res.currentView.fields && Array.isArray(data.res.currentView.fields) && data.res.currentView.fields.length > 0 ? data.res.currentView.fields : []
+        viewName.value = data.res.currentView.viewName
+        viewId.value = data.res.currentView.viewId
+        emits("getPagePermit", data.res.funPointVo)
+
+        // goSearch()
+      } else {
+        ElMessage.error('请求配置信息错误！')
+      }
+    }).finally(() => {
+      loading.value = false
+    })
+  } else {
+    await TabulationController.selectTabulation(reqRouteId, id).then((data) => {
+      if (data.code == 200 && data.res) {
+        baseOptionConfig.value = data.res
+        getSlotList(baseOptionConfig.value.searchList)
+        tagsList.value = data.res.currentView.fields && Array.isArray(data.res.currentView.fields) && data.res.currentView.fields.length > 0 ? data.res.currentView.fields : []
+        viewName.value = data.res.currentView.viewName
+        viewId.value = data.res.currentView.viewId
+        emits("getPagePermit", data.res.funPointVo)
+
+        // goSearch()
+      } else {
+        ElMessage.error('请求配置信息错误！')
+      }
+    }).finally(() => {
+      loading.value = false
+    })
+  }
+
+};
+
+/** 查询 */
+const searchHandler = (type: number) => {
+  emits("searchHandler");
+};
+/** 总数 */
+const tableTotal = ref<number>(0);
+const domModel = ref<{ total: number, pageNum: number, pageSize: number }>({ total: 0, pageNum: 1, pageSize: props.defaultPageSizeValue });
+const centerListHeight = ref<number>(0);
+/** 重新获取中间区域的高度的方法 */
+const handleResize = debounce(() => {
+  // 更新数据或执行其他操作
+  let boxHeight = document.getElementsByClassName("normal-list-box")[0]
+    ? document.getElementsByClassName("normal-list-box")[0].clientHeight
+    : 0;
+
+  let SearchHeight = document.getElementsByClassName(
+    "list-search-content-box"
+  )[0]
+    ? document.getElementsByClassName("list-search-content-box")[0].clientHeight
+    : 0;
+
+  let tagsHeight = document.getElementsByClassName(
+    "list-tag-list"
+  )[0]
+    ? document.getElementsByClassName("list-tag-list")[0].clientHeight
+    : 0;
+
+  let SearchFooter = document.getElementsByClassName(
+    "list-page-content-footer-box"
+  )[0]
+    ? document.getElementsByClassName("list-page-content-footer-box")[0]
+      .clientHeight
+    : 0;
+
+  centerListHeight.value =
+    boxHeight && SearchHeight && SearchFooter
+      ? boxHeight - SearchHeight - SearchFooter - tagsHeight - 20
+      : 0;
+
+}, 500);
+const isFirstMounted=ref(true)
+onMounted(() => {
+  handleResize();
+  window.addEventListener("resize", handleResize);
+  getData(undefined);
+  setTimeout(() => {
+  isFirstMounted.value = false; 
+  }, 500);
+
+});
+onActivated(() => {
+  if(!isFirstMounted.value){
+    goSearch()
+  }
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
+/** 管理视图 */
+const viewsPackageManageDialogRef = ref();
+const openManageViews = () => {
+  viewsPackageManageDialogRef.value?.open({
+    tagsList: tagsList.value,
+    viewId: viewId.value,
+    viewName: viewName.value,
+    routeId: props.routeId,
+    keyValue: baseOptionConfig.value.keyValue
+  });
+};
+
+/** 更新视图成功后的回调 */
+const viewsPackageManageSuccess = () => {
+  getData(viewId.value)
+  handleResize()
+};
+/** 批量操作触发事件 */
+const batchOperate = (value: string) => {
+  emits("buttonChange", value);
+};
+/** 将放大镜icon转为搜索的input组件 */
+const isHideIconShowInput = ref<boolean>(false);
+const changeIcoToInput = (value: boolean) => {
+  isHideIconShowInput.value = value;
+};
+/** 搜索框失去焦点 */
+const searchInputBlur = () => {
+  if (!baseOptionConfig.value.keyValue) {
+    isHideIconShowInput.value = false
+  }
+  goSearch()
+  handleResize()
+}
+/** 关键字搜索条件 */
+const keySearch = ref<string>("");
+/** 搜索关键字 */
+const goSeachKey = () => {
+  loading.value = true;
+  isHideIconShowInput.value = false;
+  loading.value = false;
+};
+/** 修改选中视图 */
+const changeView = (id: string) => {
+  viewId.value = id;
+  getData(viewId.value)
+};
+/** 另存為 */
+const saveNew = () => {
+  addViewsPackageDialogRef.value?.open("add", {
+    tagsList: tagsList.value,
+    viewId: viewId.value,
+    viewName: viewName.value,
+    routeId: props.routeId,
+    keyValue: baseOptionConfig.value.keyValue
+  });
+};
+/** 保存 */
+const saveThis = async () => {
+  loading.value = true
+  let formData: TabulationBO = {
+    fieldConditionBO: tagsList.value,
+    tabulationId: viewId.value,
+    tabulationName: viewName.value,
+    routeId: props.routeId,
+    keyValue: baseOptionConfig.value.keyValue
+  }
+  await TabulationController.updateTabulation(formData).then((data) => {
+    if (data.code == 200) {
+      ElMessage.success('保存成功！');
+    }
+  }).finally(() => {
+    loading.value = false;
+  })
+};
+/** 新增弹窗 */
+const addViewsPackageDialogRef = ref();
+/** 新增成功的回调 */
+const addViewSuccess = (newViewId: string) => {
+  getData(newViewId)
+
+};
+/** 重置 */
+const resetSearch = () => {
+  domModel.value.pageNum = 1;
+  domModel.value.pageSize = 10;
+  getData(viewId.value)
+};
+
+/** 打开搜索条件区域 */
+const showSearchArea = () => {
+  searchConditionAreaRef.value?.open((baseOptionConfig.value.searchList || []), tagsList.value);
+};
+/** 搜索条件区域 */
+const searchConditionAreaRef = ref();
+const searchConditionSuccess = (saveList: FieldConditionBO[]) => {
+  tagsList.value = saveList
+  goSearch()
+};
+/** 筛选条件值变化事件转发 */
+const onFilterValueChange = (data: any) => {
+  emits('filterValueChange', data)
+};
+/** 插槽名字的集合，决定出要承接的插槽集合 */
+const slotList = ref<string[]>([]);
+const tagsList = ref<FieldConditionBO[]>([])
+/** type='hidden' 的查询条件 id 集合，用于 tags 过滤显示 */
+const hiddenSearchIds = computed<Set<string>>(() => {
+  const list = baseOptionConfig.value.searchList
+  if (!list || !Array.isArray(list)) return new Set()
+  return new Set(list.filter(s => s.type === 'hidden' && s.id).map(s => s.id))
+})
+/** 根据接口返回的数据 计算出 插槽 与 显示tags 的 名字集合 */
+const getSlotList = (list: SearchVO[]) => {
+  let slotCopyList: string[] = [];
+
+  if (list && Array.isArray(list) && list.length > 0) {
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].type == "custom") {
+        slotCopyList.push(list[i].slotName);
+      }
+    }
+  }
+  slotList.value = slotCopyList;
+};
+/** 删除tag的回调0 */
+const deleteTag = (tag: FieldConditionBO, index: number) => {
+  tagsList.value.splice(index, 1)
+  for (let i = 0; i < baseOptionConfig.value.searchList.length; i++) {
+    if (baseOptionConfig.value.searchList[i].id == tag.id) {
+      if (baseOptionConfig.value.searchList[i].type === "date-range" || baseOptionConfig.value.searchList[i].type === "date-time-range" || baseOptionConfig.value.searchList[i].type === "input-number") {
+        baseOptionConfig.value.searchList[i].value = [];
+        baseOptionConfig.value.searchList[i].valueShow = ""
+      } else {
+        baseOptionConfig.value.searchList[i].value = null;
+        baseOptionConfig.value.searchList[i].valueShow = ""
+      }
+
+    }
+  }
+  goSearch()
+};
+/** 清除所有的tag标签 */
+const clearTags = () => {
+  tagsList.value = []
+  for (let i = 0; i < baseOptionConfig.value.searchList.length; i++) {
+    if (baseOptionConfig.value.searchList[i].type === "date-range" || baseOptionConfig.value.searchList[i].type === "date-time-range" || baseOptionConfig.value.searchList[i].type === "input-number") {
+      baseOptionConfig.value.searchList[i].value = [];
+      baseOptionConfig.value.searchList[i].valueShow = ""
+    } else {
+      baseOptionConfig.value.searchList[i].value = null;
+      baseOptionConfig.value.searchList[i].valueShow = ""
+    }
+  }
+  clearKeyInput()
+}
+/** 删除key的标签 */
+const clearKeyInput = () => {
+  baseOptionConfig.value.keyValue = ''
+  goSearch()
+}
+const changeLeft = () => {
+  TabulationController.updateTabulationConfig(props.routeId).then((data) => {
+    if (data.code == 200) {
+      ElMessage.success('修改成功！')
+      // getData(viewId.value)
+    } else {
+      ElMessage.error('修改失败！')
+    }
+  })
+
+}
+/** 去搜索 */
+const goSearch = (from: string = "search") => {
+  let searchObj: any = {
+    pageSize: domModel.value.pageSize ? domModel.value.pageSize : 10,
+    pageNum: domModel.value.pageNum ? domModel.value.pageNum : 1,
+    keyValue: baseOptionConfig.value.keyValue,
+    fieldConditionBO: tagsList.value
+  }
+  emits('searchHandler', searchObj, 1, from)
+}
+// 由外部控制修改状态集合
+const callbackGetList = (fieldConditionVOList: FieldConditionBO[], pageInfo: { total: number, pageSize: number, pageNum: number }) => {
+  if (fieldConditionVOList && Array.isArray(fieldConditionVOList) && fieldConditionVOList.length > 0) {
+    tagsList.value = fieldConditionVOList
+  }
+  if (pageInfo) {
+    domModel.value.pageSize = pageInfo.pageSize
+    domModel.value.pageNum = pageInfo.pageNum
+    domModel.value.total = pageInfo.total
+  }
+}
+watch(()=>{return tagsList.value},()=> {
+    handleResize()
+},{deep:true})
+defineExpose({ callbackGetList, goSearch, baseOptionConfig, searchConditionAreaRef })
+</script>
+<style lang="scss">
+.list-search-content-box {
+  margin-bottom: 5px;
+
+  .el-select__input {
+    width: 100% !important;
+  }
+
+  .select-input-font {
+    .el-select__wrapper {
+      font-size: var(--font-size-description);
+    }
+  }
+}
+
+.list-page-content-footer-box {
+  .el-select__wrapper {
+    font-size: var(--font-size-description);
+  }
+}
+
+.search-right {
+  .search-right-input .el-input__inner {
+
+    text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+  }
+}
+
+// 批量操作弹层样式（通过 popper-class 挂载到 body，需要非 scoped 样式）
+.batch-operate-popover {
+  max-width: 280px;
+  padding: 6px 0;
+
+  .buttonOperateItemA {
+    max-width: 260px;
+    padding: 0 12px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.normal-list-box {
+  width: 100%;
+  height: calc(100vh - 94px);
+  overflow: auto;
+  padding: 5px 10px 0 10px;
+  background: var(--custom-theme-fill-7);
+}
+
+.list-body-area {
+  height: 100%;
+
+  .list-search-content-box {
+    background: var(--custom-theme-fill-7);
+    padding: 0 10px 5px 10px;
+    border-bottom: 1px solid var(--custom-theme-border-4);
+
+    .search-left-title {
+      margin-right: 11px;
+      height: 21px;
+      font-weight: bold;
+      font-size: var(--font-size-body);
+      color: var(--custom-theme-text-1);
+      line-height: 21px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    .list-divide-small {
+      width: 0;
+      height: 23px;
+      border: 1px solid var(--custom-theme-border-4);
+    }
+
+    .list-select-left {
+      width: 120px;
+      margin: 0 11px;
+      background: var(--custom-theme-border-4);
+    }
+
+  }
+
+  .list-search-content-list {
+    width: 100%;
+    overflow: auto;
+    :deep(.tables-ifRed)
+    {
+      height: 100%;
+    }
+    :deep(.tables-ifRed .el-table)
+    {
+      height: 100%;
+    }
+  }
+
+  .list-page-content-footer-box {
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    user-select: none;
+  }
+}
+
+// 左侧展开视图列表的功能样式
+.list-body-out-left-area {
+  color: var(--custom-theme-text-1);
+  width: 180px;
+  border-right: 1px solid var(--custom-theme-border-1);
+  margin-right: 8px;
+  height: 100%;
+
+  .search-left-title {
+    height: 21px;
+    font-weight: bold;
+    font-size: var(--font-size-body);
+    color: var(--custom-theme-text-1);
+    line-height: 21px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    margin: 5px 5px 20px 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .list-body-out-left-item-box {
+    height: calc(100% - 80px);
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    cursor: pointer;
+
+    .list-body-out-left-item {
+      height: 37px;
+      line-height: 37px;
+      font-size: var(--font-size-body);
+      background: var(--custom-theme-fill-6);
+
+      border-radius: 6px 6px 6px 6px;
+      padding: 0 8px;
+      margin: 0 3px 0 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .list-body-out-left-item:hover {
+      background: var(--custom-theme-normal-5);
+      color: var(--custom-theme-normal-1);
+    }
+
+    .list-body-out-left-item-active {
+      background: var(--custom-theme-normal-5);
+      color: var(--custom-theme-normal-1);
+    }
+
+    .list-body-out-left-item-default {
+      background: var(--custom-theme-fill-6);
+      color: var(--custom-theme-text-1);
+    }
+  }
+
+  .list-divide-small-horizontal {
+    width: 149px;
+    height: 0px;
+    border: 1px solid var(--custom-theme-border-1);
+    margin-bottom: 12px;
+  }
+
+  .fix-view-left-is-box {
+    height: 80px;
+    width: 100%;
+    box-shadow: var(--custom-theme-text-1);
+
+    .fix-view-left-is {
+      height: 40px;
+      width: 100%;
+      line-height: 40px;
+
+      .fix-view-left-is-span {
+        font-size: var(--font-size-body);
+        overflow: hidden;
+        width: 100%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.search-select-button {
+  width: 100%;
+  height: 34px;
+  user-select: none;
+  margin-right: 8px;
+
+  .search-select-button-span {
+    font-size: var(--font-size-body);
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.search-select-button:hover {
+  background: var(--el-fill-color-light);
+}
+
+.list-tag-list {
+  flex-wrap: wrap;
+  line-height: 30px;
+  min-height: 30px;
+}
+
+.buttonOperateItemA {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: var(--font-size-body);
+  cursor: pointer;
+  display: block;
+  padding: 0 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.buttonOperateItemA:hover {
+  background: var(--custom-theme-normal-5);
+  color: var(--custom-theme-normal-1);
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: var(--font-size-body);
+  cursor: pointer;
+}
+</style>
+<style lang="scss">
+  .normal-list-box {
+    .el-scrollbar__bar.is-horizontal {
+      display: block !important;
+      height: 10px;
+      /* 加 !important 防止被 Element UI 内置样式覆盖 */
+    }
+  }
+  </style>