sfms3.0-ui/src/components/SearchTable/src/SearchTable.vue

<template>
  <Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="dialogWidth">
    <!-- 搜索工作栏 -->
    <slot :name="'searchQuery'+formFieldRef"></slot>
    <ContentWrap v-if="searchQuery">
      <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" />
    </ContentWrap>

    <!-- 列表头部 -->
    <TableHead
      :HeadButttondata="HeadButttondata"
      :routeName="routeName"
      @searchFormClick="searchFormClick"
      @buttonBaseClick="buttonBaseClick"
      :allSchemas="allSchemasRef"
    />
    <ContentWrap>
      <Table
        v-clientSearchTable
        ref="searchTableRef"
        :columns="tableColumns"
        :data="tableObjectRef.tableList"
        :loading="tableObjectRef.loading"
        :pagination="{
          total: tableObjectRef.total
        }"
        v-model:pageSize="tableObjectRef.pageSize"
        v-model:currentPage="tableObjectRef.currentPage"
        v-model:sort="tableObjectRef.sort"
        :searchTableSelectionsList="searchTableSelectionsList"
        :selection="true"
        :selectionTotal="multipleBol"
        :reserveSelection="true"
        row-key="id"
        @rowClick="rowClick"
      />
    </ContentWrap>
    <template #footer>
      <div class="flex items-center">
        <slot name="selectionsActions" :selections="searchTableRef?searchTableRef.selections:[]"></slot>
        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
        <el-button @click="searchDialogVisible = false">取 消</el-button>

        <slot name="actions"></slot>
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as defaultButtons from '@/utils/disposition/defaultButtons'
const props = defineProps({
  showSearchTableQueryFields: {
    type: Array,
    required: false,
    default: []
  },
  hiddenFilterBtnFields:{
    type: Array,
    required: false,
    default: []
  },
})
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name

const searchDialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const multipleBol = ref(false)

// 列表头部按钮
const HeadButttondata = ref(
  multipleBol.value
    ? [
        defaultButtons.defaultWhenPageBtn(null), // 选择当页
        defaultButtons.defaultUnselectPageBtn(null), // 反选当页
        // defaultButtons.defaultDeselectAllBtn(null), // 取消全选
        defaultButtons.defaultFilterBtn(null) // 筛选
      ]
    : [
        defaultButtons.defaultFilterBtn(null) // 筛选
      ]
)

/** 打开弹窗 */
const getListRef = ref()
const setSearchParamsRef = ref()
const tableObjectRef = ref()
const getPage: any = ref()
const searchSchema = ref()
const tableColumns = ref()
const formFieldRef = ref()
const searchFieldRef = ref()
const typeRef = ref()
const rowRef = ref()
const allSchemasRef = ref()
const searchConditionRef = ref()
const searchTableSelectionsList = ref() //表格弹窗回显的列表
const searchQuery = ref(false)
const hiddenFilterBtn = ref(false)
const openData = (titleName: any, tableObject:any ,allSchemas: any,multiple: any) => {
  dialogWidth.value = '80%'
  multipleBol.value = multiple
  HeadButttondata.value = multiple
    ? [
        defaultButtons.defaultWhenPageBtn(null), // 选择当页
        defaultButtons.defaultUnselectPageBtn(null), // 反选当页
        // defaultButtons.defaultDeselectAllBtn(null), // 取消全选
        defaultButtons.defaultFilterBtn(null) // 筛选
      ]
    : [
        defaultButtons.defaultFilterBtn(null) // 筛选
      ]
  dialogTitle.value = t(`ts.${titleName}`).replace('ts.', '')
  tableObjectRef.value = tableObject
  searchDialogVisible.value = true
  allSchemasRef.value = allSchemas
  searchSchema.value = allSchemas.searchSchema
  tableColumns.value = allSchemas.tableColumns
}
const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, searchField: any,multiple: any, type: any, row: any, searchCondition:any , isCountRequestRe:any,isConcatDetailSchemas=false,detailSchemas: any, searchTableSelections:any) => {
  searchQuery.value = props.showSearchTableQueryFields.find(item=>item==formField)?true:false
  hiddenFilterBtn.value = props.hiddenFilterBtnFields.find(item=>item==formField)?true:false
  
  dialogWidth.value = '80%'
  multipleBol.value = multiple
   
  const filterBtns = hiddenFilterBtn.value?[]:[defaultButtons.defaultFilterBtn(null)]
  
  HeadButttondata.value = multiple?[
    defaultButtons.defaultWhenPageBtn(null), // 选择当页
    defaultButtons.defaultUnselectPageBtn(null), // 反选当页
    // defaultButtons.defaultDeselectAllBtn(null), // 取消全选
    ...filterBtns, // 筛选
  ]:
  [
    ...filterBtns, // 筛选
  ]
  searchDialogVisible.value = true
  formFieldRef.value = formField
  searchFieldRef.value = searchField
  allSchemasRef.value = allSchemas
  searchSchema.value = allSchemas.searchSchema
  if (isConcatDetailSchemas) {
    //主子表合并
    console.log('detailSchemas', detailSchemas)
    tableColumns.value = [...allSchemas?.tableColumns, ...detailSchemas?.tableMainColumns].filter(
      (item) => item.field !== 'action'
    )
  } else {
    tableColumns.value = allSchemas?.tableColumns.filter((item) => item.field !== 'action')
  }
  getPage.value = getApiPage
  typeRef.value = type
  rowRef.value = row
  // dialogTitle.value = t('action.' + type)
  dialogTitle.value = t(`ts.${titleName}`).replace('ts.', '')
  searchTableSelectionsList.value = searchTableSelections

  const { tableObject, tableMethods } = useTable({
    getListApi: getPage.value // 分页接口
  })
  tableObjectRef.value = tableObject
  searchConditionRef.value = searchCondition
  if (searchCondition) tableObjectRef.value.params = searchCondition

  // 获得表格的各种操作
  const { getList, setSearchParams } = tableMethods
  setSearchParamsRef.value = setSearchParams
  getListRef.value = getList
  getList()
}
const dialogWidth = ref('80%')
const changeDialogWidth = (width: any) => {
  dialogWidth.value = width
}
const hiddenFilterButton = () => {
  HeadButttondata.value = []
}

// 筛选提交
const searchFormClick = (searchData) => {
  console.log(99, rowRef.value)
  console.log(100, searchData)
  console.log(101, searchConditionRef.value)
  // 20240104 修改 判断 当前弹窗 是否有条件 如果有条件 需拼接到 筛选中 searchData.filters
  // 20240321 修改 判断 searchData 是否有条件 如果有 拼接
  if (searchData.filters) {
    if (searchConditionRef.value.filters) {
      Object.keys(searchConditionRef.value.filters).forEach((key) => {
        searchData.filters.push(searchConditionRef.value.filters[key])
      })
    } else {
      Object.keys(searchConditionRef.value).forEach((key) => {
        searchData.filters.push({
          action: '==',
          column: key,
          value: searchConditionRef.value[key]
        })
      })
    }
  } else {
    if (searchConditionRef.value.filters) {
      searchData.filters = searchConditionRef.value.filters
    } else {
      searchData.filters = []
      Object.keys(searchConditionRef.value).forEach((key) => {
        searchData.filters.push({
          action: '==',
          column: key,
          value: searchConditionRef.value[key]
        })
      })
    }
  }
  tableObjectRef.value.params = {
    isSearch: true,
    filters: searchData.filters
  }
  getListRef.value() // 刷新当前列表
}
const buttonBaseClick = (val, item) => {
  // 设置按钮
  if (val == 'DeselectAll') {
    // 取消全选
    searchTableRef.value.clearSelection()
  } else if (val == 'UnselectPage') {
    // 反选当页
    searchTableRef.value.togglePageSelection()
  } else if (val == 'WhenPage') {
    // 选择当页
    searchTableRef.value.toggleAllSelection(true)
  }
}


defineExpose({ open,openData,hiddenFilterButton ,changeDialogWidth,searchFormClick}) // 提供 open 方法，用于打开弹窗

// Table 组件 ref
const searchTableRef = ref()

/** 提交表单 */
const emit = defineEmits(['searchTableSuccess']) // 定义 searchTableSuccess 事件，用于操作成功后的回调
const submitForm = async () => {
  // 提交请求
  formLoading.value = true
  const selections = searchTableRef.value.selections
  // 如果不是多选的
  if (!multipleBol.value) {
    if (selections.length > 1 || selections.length == 0) {
      message.warning('请选择一条数据！')
      formLoading.value = false
      return
    }
    // 多选
  } else {
    if (selections.length == 0) {
      message.warning('至少选择一条数据！')
      formLoading.value = false
      return
    }
  }

  try {
    searchDialogVisible.value = false
    // 发送操作成功的事件
    emit(
      'searchTableSuccess',
      formFieldRef.value,
      searchFieldRef.value,
      selections,
      typeRef.value,
      rowRef.value
    )
  } finally {
    formLoading.value = false
  }
}
const rowClick = (row: any, column: any, event: Event) => {
  const selected = searchTableRef.value?.elTableRef
    ?.getSelectionRows()
    .some((item) => item.id === row.id)
  if (!selected) {
    searchTableRef.value?.elTableRef?.toggleRowSelection(row, true)
  } else {
    // 取消
    searchTableRef.value?.elTableRef?.toggleRowSelection(row, false)
  }
}
</script>
<style scoped lang="scss">
</style>