MES--工位管理--详情子页面添加SearchTable

src/views/mes/workstation/components/Detail.vue

@@ -138,6 +138,8 @@
       @onBlur="onBlur"
       @formFormDateChange="formFormDateChange"
     />
+    <!-- 表格弹窗 -->
+    <SearchTable ref="searchTableRef" @search-table-success="searchTableSuccess1" />
 
   </div>
 </template>
@@ -299,7 +301,18 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: true
-  }
+  },
+  //是否直接展示搜索表单
+  isOpenSearchTable:{
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  searchTableSchema: {
+    type: Array,
+    required: false,
+    default: null
+  },
 })
 const isShowDrawer = ref(false)
 const detailLoading = ref(false)
@@ -381,6 +394,79 @@ const HeadButttondata = ref()
 // 列表-操作按钮
 const buttondata = ref()
 
+
+/** isOpenSearchTable 对应 表格弹窗 */
+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.searchTableSchema.formSchema, unref(searchTableFormModel))
+}
+const searchTableFormType = ref('') // 表单的类型：create - 新增；update - 修改
+
+
+// 直接打开表格数据 --> 对应：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 searchTableSuccess1 = (formField, searchField, val, formRef) => {
+  console.log('searchTableSuccess1',val)
+  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 formRef = ref()
 const titleNameRef = ref()
@@ -512,7 +598,22 @@ const { getList } = tableMethodsRef.value
 const buttonBaseClick = (val, item) => {
   if (val == 'add') {
     // 新增
-    openForm('create')
+    if(props.isOpenSearchTable){
+      searchTableFormType.value = 'create'
+      // 如果需要直接打开表格数据
+      const item = props.searchTableSchema.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()
@@ -554,6 +655,7 @@ const openForm = async (type: string, row?: number) => {
 }
 // form 提交
 const submitForm = async (formType, data) => {
+  console.log('submitForm',data)
   try {
     // 子表新增编辑校验 如果业务需要子表提交校验 需在主页详情组件添加 detailValidate 参数及方法
     const rs = (await props.detailValidate) ? await props.detailValidate(data) : true

src/views/mes/workstation/index.vue

@@ -52,18 +52,21 @@
 
   <!-- 详情 -->
   <Detail ref="detailRef"
-          :isBasic="false"
-          :allSchemas="Workstation.allSchemas"
-          :detailAllSchemas="detailAllSchemas"
-          :detailAllSchemasRules="WorkstationRules"
-          :apiPage="apiPage"
-          :tabs="TabsList"
-          :apiDelete=tabsDeleteApi
-          @changeTabs="changeTabs"
-          :detailButtonIsShowAdd="true"
-          :detailButtonIsShowDelete="true"
-          :detailButtonIsShowEdit="false"
-          @detailOpenForm="detailOpenForm"
+    :isBasic="false"
+    :isOpenSearchTable="true"
+    :apiCreate="tabsCreateApi"
+    :apiDelete="tabsDeleteApi"
+    :allSchemas="Workstation.allSchemas"
+    :detailAllSchemas="detailAllSchemas"
+    :searchTableSchema="popList.allSchemas"
+    :detailAllSchemasRules="WorkstationRules"
+    :apiPage="apiPage"
+    :tabs="TabsList"
+    @changeTabs="changeTabs"
+    :detailButtonIsShowAdd="true"
+    :detailButtonIsShowDelete="true"
+    :detailButtonIsShowEdit="false"
+    @detailOpenForm="detailOpenForm"
   />
   <BasicForm
     ref="teamListRef"
@@ -95,6 +98,7 @@ import {
 import Detail from './components/Detail.vue'
 defineOptions({ name: 'Workstation' })
 let tabsDeleteApi = WorkstationApi.deleteTeamRelation
+let tabsCreateApi = WorkstationApi.createTeamRelation
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const teamRef = ref()
@@ -277,18 +281,24 @@ const changeTabs = (data) =>{
     apiPage.value = WorkstationApi.getTeamPage
     detailAllSchemas.value = Team.allSchemas
     tabsDeleteApi = WorkstationApi.deleteTeamRelation
+    tabsCreateApi = WorkstationApi.createTeamRelation
   }else if(data.prop == 'Equipment'){
     apiPage.value = WorkstationApi.getEquipmentPage
     detailAllSchemas.value = Equipment.allSchemas
     tabsDeleteApi = WorkstationApi.deleteEquipmentRelation
+    tabsCreateApi = WorkstationApi.createEquipmentRelation
+
   }else if(data.prop == 'Process'){
     apiPage.value = WorkstationApi.getProcessPage
     detailAllSchemas.value = Process.allSchemas
     tabsDeleteApi = WorkstationApi.deleteProcessRelation
+    tabsCreateApi = WorkstationApi.createProcessRelation
+
   }else if(data.prop == 'Opersteps'){
     apiPage.value = WorkstationApi.getOperstepsPage
     detailAllSchemas.value = Opersteps.allSchemas
     tabsDeleteApi = WorkstationApi.deleteOperstepsRelation
+    tabsCreateApi = WorkstationApi.createOperstepsRelation
   }
 }
 const teamListRef = ref()