2024-04-19 创建了mes的公用detail 组件，并修改了人员能力的页面

src/views/mes/components/Detail.vue

@@ -0,0 +1,967 @@
+<template>
+  <div>
+    <el-drawer
+      v-model="isShowDrawer"
+      title="详情"
+      direction="rtl"
+      size="80%"
+      v-loading="detailLoading"
+    >
+      <template #header>
+        <div class="font-size-18px">
+          {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
+        </div>
+      </template>
+      <Tabs ref="tabRef" :tabsList="tabsList" :current="current" @change="change" />
+      <ContentWrap v-if="!isBasic" v-show="tabsList[current].label=='主数据'">
+        <Descriptions
+          :data="detailData"
+          labelClassName="label-class-name"
+          label-align="left"
+          direction="vertical"
+          :column="8"
+          :schema="allSchemas.detailSchema"
+          :columns="2"
+          width="200px"
+        />
+      </ContentWrap>
+      <ContentWrap v-else-if="!isBasicMes" v-show="tabsList[current].label=='主数据'">
+        <Descriptions
+          :data="detailData"
+          labelClassName="label-class-name"
+          label-align="left"
+          direction="vertical"
+          :column="8"
+          :schema="allSchemas.detailSchema"
+          :columns="2"
+          width="200px"
+        />
+      </ContentWrap>
+      <div class="flex">
+        <!-- 详情 -->
+        <ContentWrap class="w-[100%]" v-show="tabsList[current].label!=annexAliasLabel&&tabsList[current].label!='备注'&&tabsList[current].label!='变更记录'&&tabsList[current].label!='主数据'&&!annexTableData.some(item=>item.label==tabsList[current].label)">          <!-- 列表头部 -->
+          <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"
+            v-model:sort="tableObjectRef.sort"
+          >
+            <!-- <template #action="{ row }">
+              <ButtonBase
+                :Butttondata="buttondata"
+                @button-base-click="buttonTableClick($event, row)"
+              />
+            </template> -->
+          </Table>
+          <Table
+            v-if="!isBasic && fromeWhere != 'countPlan'"
+            :columns="detailAllSchemasRef.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"
+          >
+          <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>
+        </ContentWrap>
+        <!-- other附件组件:如质检明细 -->
+        <div  v-for="(annexItem ,index) in annexTableData" :key="index" v-show="annexItem.label==tabsList[current].label"  class="w-[100%]" :style="{height:annexItem.hasSubDetail?'100%':remarkHeight+'px'}">
+          <ContentWrap  class="w-[100%]">
+            <ElScrollbar ref="scrollbar" :style="{height:annexItem.hasSubDetail?'100%':(remarkHeight-40)+'px'}">
+                <Annex v-show="tabsList[current].label==annexItem.label"
+                  :annexData="annexItem"
+                  @handleAnnexSuccess="updateAnnexTableHandle"
+                  @deleteAnnexSuccess="updateAnnexTableHandle"
+                  :upData="{...remarksData.data,tableName:annexItem.tableName}"
+                />
+            </ElScrollbar>
+          </ContentWrap> 
+          <ContentWrap class="w-[100%]" v-if="annexItem.subDetailTableData">
+            <Table 
+              v-if="!isBasic && fromeWhere != 'countPlan'"
+              :align="annexItem.align?annexItem.align:'center'"
+              :columns="annexItem.subDetailTableData.tableColumns"
+              :data="annexItem.subDetailTableData.tableList"
+              :loading="annexItem.subDetailTableData.loading"
+              :pagination="{ total: annexItem.subDetailTableData.tableList.length }"
+              v-model:pageSize="tableObjectRef.pageSize"
+              v-model:currentPage="tableObjectRef.currentPage"
+              v-model:sort="tableObjectRef.sort"
+            />
+          </ContentWrap> 
+
+        </div>
+        <!-- 附件/备注/变更记录 -->
+        <ContentWrap class="w-[100%]" v-show="tabsList[current].label==annexAliasLabel||tabsList[current].label=='备注'||tabsList[current].label=='变更记录'" :style="{height:remarkHeight+'px'}">
+          <!-- 附件组件 -->
+          <ElScrollbar ref="scrollbar" :style="{height:(remarkHeight-40)+'px'}">
+            <Annex v-show="tabsList[current].label==annexAliasLabel"
+                :annexData="annexData"
+                @handleAnnexSuccess="handleAnnexSuccess"
+                @deleteAnnexSuccess="deleteAnnexSuccess"
+                :upData="remarksData.data" 
+                :key="count"
+              />
+            <!-- 备注组件 -->
+            <Remarks v-show="tabsList[current].label=='备注'"
+              :remarksData="remarksData"
+              class="mt-20px"
+              @remarksSubmitScuess="remarksSubmitScuess"
+              :key="count"
+            />
+            <!-- 变更记录组件 -->
+            <ChangeRecord v-show="tabsList[current].label=='变更记录'" :changeRecordData="changeRecordData" class="mt-20px"  :key="count"/>
+          </ElScrollbar> 
+        </ContentWrap>
+      </div>
+    </el-drawer>
+    <!-- 表格弹窗 -->
+    <SearchTable ref="searchTableRef" @search-table-success="searchTableSuccess1" />
+    <!-- 表单弹窗：添加/修改 -->
+    <BasicForm
+      ref="formRef"
+      @success="submitForm"
+      :rules="detailAllSchemasRules"
+      :formAllSchemas="detailAllSchemas"
+      :isBusiness="false"
+      :apiUpdate="apiUpdate"
+      :apiCreate="apiCreate"
+      :fromeWhere="fromeWhere"
+      :isDetail="true"
+      @searchTableSuccess="searchTableSuccess"
+      :detailData="detailData"
+      @submitForm="submitForm"
+      @selectChangeDetail="selectChangeDetail"
+      :formTypeDetail="formTypeDetail"
+      :countPlanAllList="countPlanAllList"
+      @onChange="detailBasicFormOnChange"
+      @onBlur="onBlur"
+      @formFormDateChange="formFormDateChange"
+    />
+  </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
+  },
+  //展示附件组件的tab标签
+  annexTable: {
+    type: Array,
+    required: false,
+    default: ()=>[]
+  },
+  //展示附件组件的tab标签
+  annexAliasLabel: {
+    type: String,
+    required: false,
+    default: '附件'
+  },
+  // 是否是基础数据 展现详情顶部表单
+  isBasic: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  // 是否是基础数据 mes
+  isBasicMes: {
+    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 : '')))
+
+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:props.annexAliasLabel,
+    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'
+  })
+}
+tabsList.value.unshift({
+    label: '主数据',
+    prop: 'Descriptions'
+})
+
+//  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 (row:id) => {
+  console.log('getAnnexFileList')
+  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({
+        align:item.align,
+        label: item.label,
+        tableName: item?.tableName || '',
+        annexList,
+        hasSubDetail:item.hasSubDetail||false,
+        subDetailTableData:item.subDetailTableData
+      })
+      if(item?.subDetailTableData){
+        const { tableObject:subTableObject, tableMethods:subTableMethods } = useTable({
+          getListApi: item.subDetailTableData.getSubList // 分页接口
+        })
+        const {getList:getSubList} = subTableMethods
+        subTableObject.params= {}
+        item.subDetailTableData.queryParams.forEach(queryItem => {
+          subTableObject.params[queryItem.queryField] = row[queryItem.rowField]
+        });
+        await getSubList()
+        item.subDetailTableData.tableList = subTableObject.tableList
+        console.log('subTableObject',annexTableData.value)
+      }
+    }
+  })
+}
+/** 添加附件 */
+const handleAnnexSuccess = () => {
+  getFileList()
+  getChangeRecordList()
+}
+// 删除附件成功之后所走的方法
+const deleteAnnexSuccess = async () => {
+  getFileList()
+  getChangeRecordList()
+}
+/** 追加的附件 */
+const updateAnnexTableHandle  = () => {
+  getAnnexFileList(detailData.value)
+  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 count  =ref(0)
+const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
+  titleNameRef.value = titleName
+  titleValueRef.value = titleValue
+  remarksData.data = {
+    tableId:  row.masterId||row.id,
+    tableName: tableName
+  }
+  count.value++
+  // 加载明细列表
+  if (!props.isBasic) {
+    // 设置主表id
+    masterParmas.value.masterId = row.masterId||row.id
+    masterParmas.value.number = row.number
+    masterParmas.value.status = row.status
+    tableObjectRef.value.params = {
+      masterId: row.masterId||row.id
+    }
+    await getList()
+  }
+  isShowDrawer.value = true
+  if (row) {
+    detailLoading.value = true
+    try {
+      detailData.value = row
+      getRemarkList()
+      getFileList()
+      getAnnexFileList(row)
+      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>

src/views/mes/hrPersonAbility/index.vue

@@ -51,7 +51,8 @@
   />
 
   <!-- 详情 -->
-  <Detail ref="detailRef" :isBasic="true" :allSchemas="HrPersonAbility.allSchemas" />
+  <Detail ref="detailRef" :isBasic="false" :isBasicMes="true"  :allSchemas="HrPersonAbility.allSchemas" :detailAllSchemas="HrPersonAbility.allSchemas"
+  :apiPage="HrPersonAbilityApi.getHrPersonAbilityPage"/>
 
   <!-- 导入 -->
   <ImportForm ref="importFormRef" url="/mes/hr-person-ability/import" :importTemplateData="importTemplateData" @success="importSuccess" />
@@ -64,7 +65,7 @@ import * as HrPersonAbilityApi from '@/api/mes/hrPersonAbility'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import TableHead from '@/components/TableHead/src/TableHead.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
-import Detail from '@/components/Detail/src/Detail.vue'
+import Detail from '../components/Detail.vue'
 
 defineOptions({ name: 'HrPersonAbility' })