展开明细

src/components/TableDetail/index.ts

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

src/components/TableDetail/src/TableDetail.vue

@@ -0,0 +1,844 @@
+<template>
+    <!-- 详情 -->
+    <div class="expandTable" :style="{width:width}" style="padding:10px">          <!-- 列表头部 -->
+      <!-- <TableHead
+        v-if="!isBasic"
+        :HeadButttondata="HeadButttondata"
+        :masterId="masterParmas.masterId"
+        @button-base-click="buttonBaseClick"
+        :routeName="routeName"
+        @searchFormClick="searchFormClick"
+        :allSchemas="detailAllSchemas"
+      /> -->
+      <!-- 默认单表展现 -->
+      <Descriptions
+        v-if="isBasic && !tabsExtend"
+        :data="detailData"
+        :schema="allSchemas.detailSchema"
+        :columns="2"
+      />
+      <!-- 单表切换tabs 展现table -->
+      <Table 
+        v-if="isBasic && tabsExtend"
+        :columns="detailAllSchemasRef.tableColumns"
+        :data="tableObjectRef.tableList"
+        :loading="tableObjectRef.loading"
+        :pagination="{ total: tableObjectRef.total }"
+        v-model:pageSize="tableObjectRef.pageSize"
+        v-model:currentPage="tableObjectRef.currentPage"
+      >
+        <!-- <template #action="{ row }">
+          <ButtonBase
+            :Butttondata="buttondata"
+            @button-base-click="buttonTableClick($event, row)"
+          />
+        </template> -->
+      </Table>
+      <Table  style="width:100%"
+        v-if="!isBasic && fromeWhere != 'countPlan'"
+        :columns="detailAllSchemasRef.tableColumns"
+        :data="tableObjectRef.tableList"
+        :loading="tableObjectRef.loading"
+        v-model:pageSize="tableObjectRef.pageSize"
+        v-model:currentPage="tableObjectRef.currentPage"
+      >
+      <template #photos="{ row }">
+        <div v-for="(item,index) in row.photos.split(',')" :key="index" style="color:#409eff ; cursor: pointer;" @click="openImage(item)">{{ item }}</div>            </template>
+        <template #action="{ row }">
+          <ButtonBase
+            :Butttondata="buttondata"
+            @button-base-click="buttonTableClick($event, row)"
+          />
+        </template>
+      </Table>
+      <DetailTable
+        v-if="!isBasic && fromeWhere == 'countPlan' && isShowDrawer"
+        :columns="detailAllSchemasRef.tableColumns"
+        :data="tableObjectRef.tableList"
+        :allList="allList"
+        :countScopeType="countScopeType"
+        :key="updateKey"
+      >
+        <template #action="{ row }">
+          <ButtonBase
+            :Butttondata="buttondata"
+            @button-base-click="buttonTableClick($event, row)"
+          />
+        </template>
+      </DetailTable>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+
+import Annex from '@/components/Annex/src/Annex.vue'
+import Remarks from '@/components/Remarks/src/Remarks.vue'
+import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
+import Tabs from '@/components/Tabs/src/Tabs.vue'
+import * as RemarkApi from '@/api/wms/remark'
+import * as FileApi from '@/api/wms/file'
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
+import BasicForm from '@/components/BasicForm/src/BasicForm.vue'
+import TableHead from '@/components/TableHead/src/TableHead.vue'
+import DetailTable from '@/components/DetailTable/src/DetailTable.vue'
+import { SearchTable } from '@/components/SearchTable'
+
+defineOptions({ name: 'Detail' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const route = useRoute() // 路由信息
+const routeName = ref()
+routeName.value = route.name
+routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
+const updateKey = ref(0)
+
+const props = defineProps({
+  // 标签参数
+  tabs: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  width:{
+    type: String,
+    required: false,
+    default: '100%'
+  },
+  openDetailParams:{
+    type:Object,
+    required: false,
+    default: null
+  },
+  //展示附件组件的tab标签
+  annexTable: {
+    type: Array,
+    required: false,
+    default: ()=>[]
+  },
+  isExpandDetail: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // 是否是基础数据 展现详情顶部表单
+  isBasic: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // 表单，列表 相关信息
+  allSchemas: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 明细列表相关信息
+  detailAllSchemas: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  //  明细验证
+  detailAllSchemasRules: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 子表新增API
+  apiCreate: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表编辑API
+  apiUpdate: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表分页列表API
+  apiPage: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表删除API
+  apiDelete: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 子表新增修改校验
+  detailValidate: {
+    type: Function,
+    required: false,
+    default: null
+  },
+  // 来源 countPlan盘点计划进入
+  fromeWhere: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  // 获取接口列表集合
+  allList: {
+    type: Object,
+    required: true,
+    default: null
+  },
+  // 盘点范围类型
+  countScopeType: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  //盘点详情子表新增的时候判断盘点范围值显示输入框还是下拉框
+  formTypeDetail: {
+    type: String,
+    required: false,
+    default: 'InputString'
+  },
+  //盘点详情子表新增的时候判断盘点范围值的下拉列表
+  countPlanAllList: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  // 详情列表扩展操作按钮
+  buttondataTable: {
+    type: Array,
+    required: false,
+    default: ()=>{
+      return []
+    }
+  },
+  // 针对基础数据tabs扩展 显示table列表 默认false
+  tabsExtend: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // tableObject 数据过滤条件 针对 详情扩展标签页 传入不同条件
+  tableObjectExtend: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  // 子列表 筛选 展示与隐藏 ，默认展示
+  detailButtonIsShowFilter:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  // 子列表 新增 展示与隐藏 ，默认展示
+  detailButtonIsShowAdd:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  // 子列表 编辑 展示与隐藏 ，默认展示
+  detailButtonIsShowEdit:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  // 子列表 删除 展示与隐藏 ，默认展示
+  detailButtonIsShowDelete:{
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  //是否直接展示搜索表单
+  isOpenSearchTable:{
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  //扩展其他按钮
+  otherHeadButttonData:{
+    type:Array,
+    required: false,
+    default: () => []
+  }
+})
+
+const isShowDrawer = ref(false)
+const detailLoading = ref(false)
+const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))
+onMounted(() => {
+  openDetail(props.openDetailParams)
+  detailAllSchemasRef.value.tableColumns = detailAllSchemasRef.value.tableColumns.filter((item)=>{
+    if(item.field=='action'){
+      return false
+    }
+    return true
+  })
+})
+if (props.isBasic == true) {
+  if (tabsList.value && tabsList.value.length > 0) {
+    tabsList.value.unshift({
+      label: '详情',
+      prop: 'Detail'
+    })
+  }
+} else {
+  if (tabsList.value && tabsList.value.length > 0) {
+  } else {
+    tabsList.value = [
+      {
+        label: '明细',
+        prop: 'Detail'
+      }
+    ]
+  }
+}
+
+const otherList = [...props.annexTable,{
+    label:'附件',
+    prop:'Annex'
+  },{
+    label:'备注',
+    prop:'Remarks'
+  },{
+    label:'变更记录',
+    prop:'ChangeRecord'
+}]
+
+tabsList.value = [...tabsList?.value,...otherList]
+
+if (!tabsList.value || tabsList.value && tabsList.value.length == otherList.length) {
+  tabsList.value.unshift({
+      label: '明细',
+      prop: 'Detail'
+  })
+}
+
+//  Tabs 
+const tabRef = ref()
+//滚动条
+const scrollbar = ref() 
+//附件 备注 变更记录 高度计算
+const remarkHeight = computed(() => { 
+  const tab = unref(tabRef)
+  const tabTop = tab?.$el.getBoundingClientRect().top
+  const tabHeight = tab?.$el.getBoundingClientRect().height
+  console.log('tabTop',tabTop)
+  const height = window.innerHeight - (tabTop) - (tabHeight) - 60
+  return height
+})
+
+
+// 附件默认数据
+const annexData = reactive({
+  annexList: []
+})
+// 其他附件默认数据数组
+const annexTableData = ref<Array<any>>([])
+
+// 备注数据
+const remarksData = reactive({
+  remarksList: [],
+  data: {}
+})
+
+// 变更记录默认数据
+const changeRecordData = reactive({
+  changeRecordList: []
+})
+const detailData = ref({}) //详情数据
+// 获取附件列表篇
+const getFileList = async () => {
+  detailLoading.value = true
+  try {
+    annexData.annexList = await FileApi.getFileList(remarksData.data)
+  } finally {
+    detailLoading.value = false
+  }
+}
+// 获取其他附件列表篇
+const getAnnexFileList =  async () => {
+  props.annexTable?.forEach(async (item) => {
+    let requstData = {...remarksData.data,tableName: item?.tableName} 
+    const annexList = await FileApi.getFileList(requstData)
+    const annexData = annexTableData.value.find(annex=>annex.label === item.label)
+    if(annexData){
+      annexData.annexList = annexList
+    }else{
+      annexTableData.value.push({
+        label: item.label,
+        tableName: item?.tableName || '',
+        annexList
+      })
+    }
+  })
+}
+/** 添加附件 */
+const handleAnnexSuccess = () => {
+  getFileList()
+  getChangeRecordList()
+}
+// 删除附件成功之后所走的方法
+const deleteAnnexSuccess = async () => {
+  getFileList()
+  getChangeRecordList()
+}
+/** 追加的附件 */
+const updateAnnexTableHandle  = () => {
+  getAnnexFileList()
+  getChangeRecordList()
+}
+
+// Tabs当前选择
+const current = ref(0)
+const change = (item, index) => {
+  current.value = index
+  emit('changeTabs', item)
+  if(otherList.find(other=>other.label==item.label)){
+    // 附件/备注/变更记录 -- 点击回到顶部
+    scrollbar.value.scrollTo({ top: 0});
+  }
+      
+}
+
+//主表所需的参数
+const masterParmas = ref({
+  masterId: '', //主表id
+  number: '', //主表单据号
+  status: '' //主表状态 用于控制子表新增编辑按钮显示情况
+})
+
+// 列表头部按钮
+const HeadButttondata = ref()
+// 列表-操作按钮
+const buttondata = ref()
+
+/** 表格弹窗 */
+const initModel = (schema: FormSchema[], formModel: Recordable) => {
+  const model: Recordable = { ...formModel }
+  schema.map((v) => {
+    // 如果是hidden，就删除对应的值
+    if (v.hidden) {
+      delete model[v.field]
+    } else if (v.component && v.component !== 'Divider') {
+      const hasField = Reflect.has(model, v.field)
+      // 如果先前已经有值存在，则不进行重新赋值，而是采用现有的值
+      model[v.field] = hasField ? model[v.field] : v.value !== void 0 ? v.value : ''
+    }
+  })
+  return model
+}
+const searchTableRef = ref()
+// 如果需要直接打开表格数据表单数据
+const searchTableFormModel = ref<Recordable>({})
+if(props.isOpenSearchTable){
+  searchTableFormModel.value = initModel(props.detailAllSchemas.formSchema, unref(searchTableFormModel))
+}
+const searchTableFormType = ref('') // 表单的类型：create - 新增；update - 修改
+
+/** 打开弹窗 */
+const formRef = ref()
+const titleNameRef = ref()
+const titleValueRef = ref()
+const openDetail = async ({row, titleName, titleValue, tableName}) => {
+  titleNameRef.value = titleName
+  titleValueRef.value = titleValue
+  remarksData.data = {
+    tableId: row.id,
+    tableName: tableName
+  }
+  // 加载明细列表
+  if (!props.isBasic) {
+    // 设置主表id
+    masterParmas.value.masterId = row.id
+    masterParmas.value.number = row.number
+    masterParmas.value.status = row.status
+    tableObjectRef.value.params = {
+      masterId: row.id
+    }
+    await getList()
+  }
+  isShowDrawer.value = true
+  if (row) {
+    detailLoading.value = true
+    try {
+      detailData.value = row
+      getRemarkList()
+      getFileList()
+      getAnnexFileList()
+      getChangeRecordList()
+      // 判断详情按钮是否显示
+      let detailButtonFilter: any = []
+      let detailButtonAdd: any = []
+      if (props.detailButtonIsShowFilter) {
+        // 筛选
+        detailButtonFilter = [
+          defaultButtons.defaultFilterBtn(null)
+        ]
+      }
+      if (props.detailButtonIsShowAdd) {
+        // 新增
+        detailButtonAdd = [
+          defaultButtons.defaultAddBtn({
+            hide: isShowMainButton(row, ['1'])
+          })
+        ]
+      }
+      HeadButttondata.value = [...detailButtonFilter,...detailButtonAdd]
+
+      // 针对特殊处理 当业务是任务的 只显示筛选 正常情况下应在业务页面设置 后期再作优化
+      if (routeName.value.indexOf('Job') > -1) {
+        HeadButttondata.value = [
+          defaultButtons.defaultFilterBtn(null) // 筛选
+        ]
+      }
+      HeadButttondata.value = [...HeadButttondata.value,...props.otherHeadButttonData]
+      let detailButtonEdit: any = []
+      let detailButtonDelete: any = []
+      if (props.detailButtonIsShowEdit) {
+        // 编辑
+        detailButtonEdit = [
+          defaultButtons.mainListEditBtn({
+            hide: isShowMainButton(row, ['1'])
+          })
+        ]
+      }
+      if (props.detailButtonIsShowDelete) {
+        // 删除
+        detailButtonDelete = [
+          defaultButtons.mainListDeleteBtn({
+            hide: isShowMainButton(row, ['1'])
+          })
+        ]
+      }
+      buttondata.value = [...detailButtonEdit,...detailButtonDelete,...props.buttondataTable]
+
+    } finally {
+      detailLoading.value = false
+    }
+  }
+}
+defineExpose({ openDetail, formRef }) // 提供 open 方法，用于打开弹窗
+
+// 获取备注列表
+const getRemarkList = async () => {
+  detailLoading.value = true
+  try {
+    remarksData.remarksList = await RemarkApi.getRemarkPage(remarksData.data)
+  } finally {
+    detailLoading.value = false
+  }
+}
+// 备注提交成功之后
+const remarksSubmitScuess = async (remark) => {
+  detailLoading.value = false
+  getRemarkList()
+  getChangeRecordList()
+}
+// 获取变更记录
+const getChangeRecordList = async () => {
+  changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
+}
+
+const tableObjectRef = ref()
+const tableMethodsRef = ref()
+const detailAllSchemasRef = ref()
+
+const { tableObject, tableMethods } = useTable({
+  getListApi: props.apiPage // 分页接口
+})
+
+tableObjectRef.value = tableObject
+tableMethodsRef.value = tableMethods
+detailAllSchemasRef.value = props.detailAllSchemas
+
+// 根据状态返回该按钮是否显示
+const isShowMainButton = (row, val) => {
+  if (val.indexOf(row.status) > -1) {
+    return false
+  } else {
+    return true
+  }
+}
+
+// 获得表格的各种操作
+const { getList } = tableMethodsRef.value
+
+// 头部按钮事件
+const buttonBaseClick = (val, item) => {
+  if (val == 'add') {
+    // 新增
+    if(props.isOpenSearchTable){
+      searchTableFormType.value = 'create'
+      // 如果需要直接打开表格数据
+      searchTableFormModel.value = Object.assign(unref(searchTableFormModel), {
+        masterId: masterParmas.value.masterId,
+        number: masterParmas.value.number
+      })
+      const item = props.detailAllSchemas.formSchema[0]
+      opensearchTable(
+          item.field, item?.componentProps?.searchField,
+          item?.componentProps?.searchTitle, 
+          item?.componentProps?.searchAllSchemas, 
+          item?.componentProps?.searchPage,
+          item?.componentProps?.searchCondition,
+          item?.componentProps?.multiple,
+          undefined,undefined
+      )
+    }else{
+      openForm('create')
+    }
+  } else if (val == 'import') {
+    // 导入
+    handleImport()
+  } else if (val == 'export') {
+    // 导出
+    handleExport()
+  } else if (val == 'refresh') {
+    // 刷新
+    getList()
+  } else if (val == 'filtrate') {
+    // 筛选
+  } else {
+    // 其他按钮
+    console.log('其他按钮', item)
+    emit('buttonBaseClick',val, item)
+  }
+}
+
+// 直接打开表格数据 --> 对应：isOpenSearchTable === true
+const opensearchTable = (
+  formField,
+  searchField,
+  searchTitle,
+  searchAllSchemas,
+  searchPage,
+  searchCondition,
+  multiple,
+  type,
+  row
+) => {
+  const _searchCondition = {}
+  // 判断查询条件中，是否存在指向主表的数据
+  if (searchCondition && searchCondition.length > 0) {
+    // 转换筛选条件所需
+    for (var i=0; i< searchCondition.length; i++ ) {
+      // 查询条件为主表某字段，需要赋值主表数据，数据来源是详情的，赋值需要从row中获取
+      if (searchCondition[i].isMainValue) {
+        _searchCondition[searchCondition[i].key] = detailData
+          ? detailData.value[searchCondition[i].value]
+          : ''
+      }else{
+        _searchCondition[searchCondition[i].key] = searchCondition[i].value
+      }
+    }
+  }
+  console.log(searchCondition)
+  console.log(_searchCondition)
+  searchTableRef.value.open(
+    searchTitle,
+    searchAllSchemas,
+    searchPage,
+    formField,
+    searchField,
+    multiple,
+    type,
+    row,
+    _searchCondition
+  )
+}
+
+// 字段设置 更新主列表字段
+// const updataTableColumns = (val) => {
+//   detailAllSchemas.tableColumns.value = val
+// }
+
+// 列表-操作按钮事件
+const buttonTableClick = async (val, row) => {
+  if (val == 'edit') {
+    // 编辑
+    if(props.isOpenSearchTable){
+      searchTableFormType.value = 'update'
+      if (row?.id || row?.masterId) {
+        searchTableFormModel.value = Object.assign(unref(searchTableFormModel), row)
+      }
+      const item = props.detailAllSchemas.formSchema[0]
+      opensearchTable(
+          item.field, item?.componentProps?.searchField,
+          item?.componentProps?.searchTitle, 
+          item?.componentProps?.searchAllSchemas, 
+          item?.componentProps?.searchPage,
+          item?.componentProps?.searchCondition,
+          item?.componentProps?.multiple,
+          undefined,undefined
+      )
+    }else{
+      openForm('update', row)
+    }
+  } else if (val == 'delete') {
+    // 删除
+    handleDelete(row.id)
+  } else {
+    emit('tableFormButton',val, row)
+  }
+}
+/** 添加/修改操作 */
+const openForm = async (type: string, row?: number) => {
+  formRef.value.open(type, row, masterParmas.value)
+  emit('detailOpenForm', type, row)
+}
+// form 提交
+const submitForm = async (formType, data) => {
+  try {
+    // 子表新增编辑校验 如果业务需要子表提交校验 需在主页详情组件添加 detailValidate 参数及方法
+    const rs = (await props.detailValidate) ? await props.detailValidate(data) : true
+    if (!rs) return
+    if (formType === 'create') {
+      await props.apiCreate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await props.apiUpdate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    emit('handleMainFefresh')
+    formRef.value.dialogVisible = false
+    // 刷新当前列表
+    await getList()
+    updateKey.value += 1
+  } finally {
+    formRef.value.formLoading = false
+  }
+}
+
+
+const searchTableSuccess1 = (formField, searchField, val, formRef) => {
+  searchTableFormModel.value[formField] = val.map(item=>item[searchField]).join(',')
+  console.log('searchTableSuccess1',searchTableFormModel)
+  submitForm(searchTableFormType.value,searchTableFormModel.value)
+  emit('searchTableSuccessDetail', formField, searchField, val, formRef)
+}
+// 查询页面返回
+const searchTableSuccess = (formField, searchField, val, formRef) => {
+  emit('searchTableSuccessDetail', formField, searchField, val, formRef)
+}
+// 传递给父类
+const emit = defineEmits([
+  'searchTableSuccessDetail',
+  'changeTabs',
+  'selectChangeDetail',
+  'detailOpenForm',
+  'tableFormButton',
+  'openImage',
+  'onBlur',
+  'detailBasicFormOnChange',
+  'formFormDateChange',
+  'buttonBaseClick'
+])
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    tableObject.loading = true
+    // 发起删除
+    await props.apiDelete(id)
+    tableObject.loading = false
+    message.success(t('common.delSuccess'))
+    emit('handleMainFefresh')
+    // 刷新列表
+    await getList()
+    updateKey.value += 1
+  } catch {}
+}
+// 筛选提交
+const searchFormClick = async (searchData) => {
+  const { tableObject, tableMethods } = useTable({
+    getListApi: props.apiPage // 分页接口
+  })
+  tableObject.params = {
+    isSearch: true,
+    filters: searchData.filters
+      ? searchData.filters
+      : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
+  }
+  detailAllSchemasRef.value = props.detailAllSchemas
+  tableObjectRef.value = tableObject
+  tableMethodsRef.value = tableMethods
+  tableObjectRef.value.tableList = []
+  const { getList } = tableMethods
+  await getList()
+  updateKey.value += 1
+  // tableObjectRef.value.params = {
+  //   isSearch: true,
+  //   filters: searchData.filters
+  //     ? searchData.filters
+  //     : [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
+  // }
+  // getList() // 刷新当前列表
+}
+// 选择盘点类型的时候针对限值的操作
+const selectChangeDetail = (field, val) => {
+  emit('selectChangeDetail', field, val)
+}
+// 打开图片
+const openImage=(item)=>{
+  emit('openImage', item)
+}
+/**
+ * 监听改变事件
+ * @param field 当前操作字段
+ * @param cur 改变后值
+ */
+ const detailBasicFormOnChange = (field, cur) => {
+  emit('detailBasicFormOnChange', field, cur)
+}
+
+/**
+ * 监听失焦事件
+ * @param field 当前操作字段
+ * @param e 
+ */
+ const onBlur = (field, e) => {
+  emit('onBlur', field, e)
+}
+
+// 日期改变事件
+const formFormDateChange = (field, val,row, index) => {
+  emit('formFormDateChange', field, val,row, index)
+}
+//监视属性
+watch(
+  () => props.apiPage,
+  () => {
+    const { tableObject, tableMethods } = useTable({
+      getListApi: props.apiPage // 分页接口
+    })
+    tableObject.params.masterId = masterParmas.value.masterId
+    detailAllSchemasRef.value = props.detailAllSchemas
+    if (props.tableObjectExtend) {
+      props.tableObjectExtend.forEach(item => {
+        tableObject.params[item.key] = item.value
+      })
+    }
+    tableObjectRef.value = tableObject
+    tableMethodsRef.value = tableMethods
+    const { getList } = tableMethods
+    getList()
+  }
+)
+</script>
+<style lang="scss">
+.el-drawer__body {
+  background: #f5f5f5 !important;
+}
+
+::v-deep(.label-class-name) {
+  color: #dedede;
+}
+
+</style>
+<style scoped lang="scss">
+
+</style>