2024-04-28 新建特殊处理的searcheTable模版，并修正引用

7 months ago · 0e1f24ce9d
5 changed files with 194 additions and 4 deletions
--- a/src/api/mes/productOffline/index.ts
+++ b/src/api/mes/productOffline/index.ts
@ -64,8 +64,8 @@ export const getworkSchedulingPage = async (params) => {
  if (params.isSearch) {
    delete params.isSearch
    const data = {...params}
-    return await request.post({ url: '/mes/work-scheduling/senior', data })
+    return await request.post({ url: '/mes/workScheduling/senior', data })
  } else {
-    return await request.get({ url: `/mes/work-scheduling/page`, params })
+    return await request.get({ url: `/mes/workScheduling/page`, params })
  }
 }
--- a/src/components/SearchTable/index.ts
+++ b/src/components/SearchTable/index.ts
@ -1,3 +1,3 @@
 import SearchTable from './src/SearchTable.vue'

-export { SearchTable }
+export { SearchTable}
--- a/src/components/SearchTableV2/index.ts
+++ b/src/components/SearchTableV2/index.ts
@ -0,0 +1,3 @@
+import SearchTable from './src/SearchTableV2.vue'
+
+export { SearchTable }
--- a/src/components/SearchTableV2/src/SearchTableV2.vue
+++ b/src/components/SearchTableV2/src/SearchTableV2.vue
@ -0,0 +1,187 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="searchDialogVisible" :width="'80%'">
+    <!-- 搜索工作栏 -->
+    <!-- <Search :schema="searchSchema" @search="setSearchParamsRef" @reset="setSearchParamsRef" /> -->
+
+    <!-- 列表头部 -->
+    <TableHead
+      :HeadButttondata="HeadButttondata"
+      :routeName="routeName"
+      @searchFormClick="searchFormClick"
+      :allSchemas="allSchemasRef"
+    />
+    <ContentWrap>
+      <Table
+        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"
+        :selection="true"
+        :reserveSelection="true"
+        row-key="id"
+      />
+    </ContentWrap>
+    <template #footer>
+      <div class="flex items-center">
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="searchDialogVisible = false">取 消</el-button>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
+
+// 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 HeadButttondata = [
+  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 multipleBol = ref(false)
+const searchConditionRef = ref()
+
+const openData = (titleName: any, tableObject:any ,allSchemas: any,multiple: any) => {
+  dialogTitle.value = titleName
+  tableObjectRef.value = tableObject
+  searchDialogVisible.value = true
+  multipleBol.value = multiple
+  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 ) => {
+  searchDialogVisible.value = true
+  formFieldRef.value = formField
+  searchFieldRef.value = searchField
+  allSchemasRef.value = allSchemas
+  searchSchema.value = allSchemas.searchSchema
+  tableColumns.value = allSchemas.tableColumns.filter(item => (item.field !== 'action'))
+  getPage.value = getApiPage
+  typeRef.value = type
+  rowRef.value = row
+  multipleBol.value = multiple
+  // dialogTitle.value = t('action.' + type)
+  dialogTitle.value = titleName
+  const {tableObject, tableMethods } = useTable({
+    getListApi: getPage.value // 分页接口
+  })
+  tableObjectRef.value = tableObject
+  searchConditionRef.value = searchCondition
+  if (searchCondition) tableObjectRef.value.params = searchCondition;
+
+  // 获得表格的各种操作
+  const { getList } = tableMethods
+  // setSearchParamsRef.value = setSearchParams
+  setSearchParamsRef.value = tableObject.params
+  getListRef.value = getList
+  getList()
+}
+
+// 筛选提交
+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 {
+      Object.keys(searchConditionRef.value).forEach(key => {
+        searchData.filters = [{
+          action: "==",
+          column: key,
+          value: searchConditionRef.value[key]
+        }]
+      });
+    }
+  }
+  tableObjectRef.value.params = {
+    isSearch: true,
+    filters: searchData.filters
+  }
+  getListRef.value() // 刷新当前列表
+}
+
+defineExpose({ open,openData }) // 提供 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
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
--- a/src/views/mes/orderDay/components/BasicFormV2.vue
+++ b/src/views/mes/orderDay/components/BasicFormV2.vue
@ -23,7 +23,7 @@
  <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />
 </template>
 <script setup lang="ts">
-import { SearchTable } from '@/components/SearchTable'
+import { SearchTable } from '@/components/SearchTableV2'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import ButtonBase from '@/components/XButton/src/ButtonBase.vue'