tableform扩展操作按钮

src/api/wms/bomDismantle/index.ts

@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+// 查询制品返修申请子列表
+export const getBomDismantlePage = async (params) => {
+  return await request.get({ url: `/wms/productrepair-request-main/bomPage`, params })
+}

src/components/BasicForm/src/BasicForm.vue

@@ -78,6 +78,7 @@
         @selectCallback="selectCallback"
         @handleTableSelect="handleTableSelect"
         @inpuFocus="inpuFocus"
+        @buttonOperationClick="buttonOperationClick"
       />
     </div>
     <div v-if="isBusiness && formType == 'create' && fromeWhere == 'countPlan'">
@@ -234,6 +235,21 @@ const tableAllSchemas = ref(props.tableAllSchemas)
 const tableFormRules = ref(props.tableFormRules)
 console.log('fromeWhere', props.fromeWhere)
 
+// 列表-按钮
+const buttondata = [
+  defaultButtons.mainListEditBtn(null), // 编辑
+  defaultButtons.mainListDeleteBtn(null)
+]
+// 列表-操作按钮事件
+const buttonTableClick = async (val, row) => {
+  if (val == 'edit') {
+    
+  } else if (val == 'delete') {
+   
+  } else {
+  }
+}
+
 /** 弹层操作 */
 // formField form表单中的字段
 // searchField 查询列表中的字段
@@ -426,7 +442,8 @@ const emit = defineEmits([
   'submitForm',
   'selectChange',
   'selectChangeDetail',
-  'tableFormChange'
+  'tableFormChange',
+  'buttonOperationClick'
 ])
 //普通下拉改变事件
 const formSelectChange = (field, val, row) => {
@@ -490,6 +507,11 @@ const selectChangeDetail = (field, val,formSchema) => {
 const tableFormChange = (field, val, row) => {
   emit('tableFormChange', field, val, row)
 }
+
+const buttonOperationClick = (row, label, index)=> {
+  emit("buttonOperationClick", row, label, index);
+}
+
 </script>
 <style lang="scss" scoped>
 .table {

src/components/TableForm/src/TableForm.vue

@@ -39,7 +39,7 @@
         v-if="isShowIndex" 
       />
       <el-table-column 
-        v-slot="{ row }" 
+        v-slot="{ row, $index }" 
         v-for="(headerItem,index) in tableFields" 
         :key="headerItem"
         :fixed="headerItem.tableForm?.fixed" 
@@ -242,9 +242,20 @@
               </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
+          <!-- table表添加操作列 -->
+          <!-- <el-form-item> -->
+            <div v-if="headerItem?.tableForm?.type == 'action'">
+              <el-button
+                v-for="(itemButton, indexButton) in headerItem?.tableForm?.buttonText.split('|')"
+                :key="indexButton"
+                type="text"
+                style="padding-top: 0px;align-items:unsafe;"
+                @click="buttonOperationClick(row, headerItem?.tableForm?.buttonName.split('|')[indexButton], $index)"
+              >{{itemButton}}</el-button>
+            </div>
+          <!-- </el-form-item> -->
         </el-form>
       </el-table-column>
-     
     </el-table>
     <div class="button flex" v-if="isShowButton">
       <div class="p-12px" @click="handleAddTable">
@@ -330,7 +341,8 @@ const emit = defineEmits([
   'handleTableSelect',
   'handleDeleteTable',
   'handleAddTable',
-  'inpuFocus'
+  'inpuFocus',
+  'buttonOperationClick'
 ])
 // 获取下拉列表 | type = radio | type = select
 const initSelectOptions = (item) => {
@@ -400,6 +412,11 @@ const inpuFocus = (headerItem, row, index)=>{
   }
 }
 
+//点击table操作列按钮
+const buttonOperationClick = (row, label, index)=> {
+  emit("buttonOperationClick", row, label, index);
+}
+
 // setup 语法糖 抛出方法
 defineExpose({
   TableBaseComponents_Ref,

src/views/wms/productionManage/productrepair/productrepairRequestMain/index.vue

@@ -54,6 +54,7 @@
     @handleDeleteTable="handleDeleteTable"
     @searchTableSuccess="searchTableSuccess"
     @submitForm="submitForm"
+    @buttonOperationClick="buttonOperationClick"
   />
 
   <!-- 详情 -->
@@ -67,10 +68,30 @@
     :apiUpdate="ProductrepairRequestDetailApi.updateProductrepairRequestDetaila"
     :apiPage="ProductrepairRequestDetailApi.getProductrepairRequestDetailaPage"
     :apiDelete="ProductrepairRequestDetailApi.deleteProductrepairRequestDetaila"
-    :Echo="Echo"
     @searchTableSuccessDetail="searchTableSuccessDetail"
   />
 
+  <!-- bom列表 -->
+  <Dialog
+    :title="DialogTitle"
+    v-model="bomModelVisible"
+    width="80%"
+    :scroll="true"
+    max-height="450px"
+  >
+      <TableForm
+        ref="tableFormRef"
+        class="w-[100%]"
+        :tableFields="BomDismantle.allSchemas.tableColumns"
+        :tableData="detatableDataBom.tableList"
+        :isShowButton="false"
+        :isShowReduceButton="false"
+      />
+    <template #footer>
+      <ButtonBase :Butttondata="ButttondataBom" @button-base-click="buttonBaseClickBom" />
+    </template>
+  </Dialog>
+
   <!-- 导入 -->
   <ImportForm ref="importFormRef" url="/wms/productrepair-request-main/import" :importTemplateData="importTemplateData" 
   @success="importSuccess" :updateIsDisable="true" :coverIsDisable="true" :mode="2" />
@@ -78,10 +99,12 @@
 
 <script setup lang="ts">
 import download from '@/utils/download'
-import { ProductrepairRequestMain,ProductrepairRequestMainRules,ProductrepairRequestDetaila,ProductrepairRequestDetailaRules } from './productrepairRequestMain.data'
+import { ProductrepairRequestMain,ProductrepairRequestMainRules,ProductrepairRequestDetaila,ProductrepairRequestDetailaRules, ConsumereRequestDetailb, BomDismantle } from './productrepairRequestMain.data'
 import * as ProductrepairRequestMainApi from '@/api/wms/productrepairRequestMain'
 import * as ProductrepairRequestDetailApi from '@/api/wms/productrepairRequestDetaila'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
+import * as BomDismantleApi from '@/api/wms/bomDismantle'
+
 
 // 制品返修申请
 defineOptions({ name: 'ProductrepairRequestMain' })
@@ -94,6 +117,61 @@ const routeName = ref()
 routeName.value = route.name
 const tableColumns = ref(ProductrepairRequestMain.allSchemas.tableColumns)
 
+// Bom 窗口
+const DialogTitle = ref('Bom信息')
+const bomModelVisible = ref(false)
+const tableListBom = ref()
+const { tableObject: detatableDataBom, tableMethods: detatableMethodsBom } =useTable({
+  getListApi: BomDismantleApi.getBomDismantlePage
+})
+const { getList:getDetailListBom } = detatableMethodsBom
+/** bom 列表 表单 按钮 */
+const ButttondataBom = [
+  defaultButtons.formSaveBtn(null), // 保存
+  defaultButtons.formCloseBtn(null) // 关闭
+]
+// bom 列表 表单 按钮
+const buttonBaseClickBom = (val) => {
+  // 保存
+  if (val == 'save') {
+    // 根据 填写的数量 为基准 不填写数量的忽略
+    tableListBom.value = detatableDataBom.tableList.filter(item => (item.qty!=0))
+    tableData.value.forEach((item, index) => {
+      if(tableListBom.value[0].rowId == index) {
+        item.childList = tableListBom.value
+      }
+    })
+    console.log(157, tableData.value)
+    bomModelVisible.value = false
+  }
+  // 关闭
+  else if (val == 'close') {
+    bomModelVisible.value = false
+  }
+}
+// 新增 tableform 按钮
+const buttonOperationClick = async (row, label, index)=> {
+  if (row.itemCode == '') {
+    message.warning('请选择物品代码！')
+    return
+  }
+  detatableDataBom.params.itemCode = row.itemCode
+  DialogTitle.value = '物品代码:【' + row.itemCode + '】 Bom 信息'
+  bomModelVisible.value = true
+  await getDetailListBom()
+  detatableDataBom.tableList.map(item => {
+    item.rowId = index
+    if(tableData.value[index].childList) {
+      tableData.value[index].childList.forEach(itemChild => {
+        if (itemChild.itemCode == item.itemCode) {
+          item.qty = itemChild.qty
+        }
+      })
+    }
+  })
+}
+
+
 // 字段设置 更新主列表字段
 const updataTableColumns = (val) => {
   tableColumns.value = val
@@ -138,10 +216,6 @@ const searchTableSuccessDetail = (formField, searchField, val, formRef ) => {
   })
 }
 
-// 子表新增的时候选择表格之后需要会显得字段
-// const Echo = ['ppNumber','poLine', 'batch', 'altBatch', 'itemCode', 'itemName', 'itemDesc1', 'itemDesc2', 'projectCode', 'qty', 'uom']
-const Echo =  []
-
 const { tableObject, tableMethods } = useTable({
   getListApi: ProductrepairRequestMainApi.getProductrepairRequestMainPage // 分页接口
 })
@@ -195,18 +269,17 @@ const isShowMainButton = (row,val) => {
 // 列表-操作按钮
 const butttondata = (row) => {
     return [
-        defaultButtons.mainListCloseBtn({hide:isShowMainButton(row,['1','2','3','4','6'])}), // 关闭
-        defaultButtons.mainListReAddBtn({hide:isShowMainButton(row,['4','5'])}), // 重新添加
-        defaultButtons.mainListSubmitBtn({hide:isShowMainButton(row,['1'])}), // 提交审批
-        defaultButtons.mainListTurnDownBtn({hide:isShowMainButton(row,['2'])}), // 驳回
-        defaultButtons.mainListApproveBtn({hide:isShowMainButton(row,['2'])}), // 审批通过
-        defaultButtons.mainListEditBtn({hasPermi:'wms:productrepair-request-main:update'}), // 编辑
-        defaultButtons.mainListDeleteBtn({hasPermi:'wms:productrepair-request-main:delete'}), // 删除
+      defaultButtons.mainListCloseBtn({hide:isShowMainButton(row,['1','2','3','4']), hasPermi:'wms:productrepair-request-main:close'}), // 关闭
+      defaultButtons.mainListReAddBtn({hide:isShowMainButton(row,['4','5']), hasPermi:'wms:productrepair-request-main:reAdd'}), // 重新添加
+      defaultButtons.mainListSubmitBtn({hide:isShowMainButton(row,['1']), hasPermi:'wms:productrepair-request-main:submit'}), // 提交审批
+      defaultButtons.mainListTurnDownBtn({hide:isShowMainButton(row,['2']), hasPermi:'wms:productrepair-request-main:refused'}), // 驳回
+      defaultButtons.mainListApproveBtn({hide:isShowMainButton(row,['2']), hasPermi:'wms:productrepair-request-main:handle'}), // 审批通过
+      defaultButtons.mainListHandleBtn({hide:isShowMainButton(row,['3']), hasPermi:'wms:productrepair-request-main:update'}), // 处理
+      defaultButtons.mainListEditBtn({hide:isShowMainButton(row,['1']), hasPermi:'wms:productrepair-request-main:update'}), // 编辑
+      // defaultButtons.mainListDeleteBtn({hasPermi:'wms:issue-request-main:delete'}), // 删除
     ]
 }
 
-
-
 // 列表-操作按钮事件
 const buttonTableClick = async (val, row) => {
   if (val == 'mainClose') { // 关闭
@@ -331,6 +404,8 @@ const searchFormClick = (searchData) => {
   getList() // 刷新当前列表
 }
 
+
+
 /** 初始化 **/
 onMounted(async () => {
   getList()

src/views/wms/productionManage/productrepair/productrepairRequestMain/productrepairRequestMain.data.ts

@@ -839,7 +839,12 @@ export const ProductrepairRequestDetaila = useCrudSchemas(reactive<CrudSchema[]>
       width: 150,
       fixed: 'right'
     },
-    isTableForm:false,
+    isTableForm:true,
+    tableForm: {
+      type: 'action',
+      buttonText: 'Bom',
+      buttonName: 'Bom'
+    }
   }
 ]))
 
@@ -1037,6 +1042,17 @@ export const ConsumereRequestDetailb = useCrudSchemas(reactive<CrudSchema[]>([
     table: {
       width: 150
     },
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isDetail: false,
+    isForm: false ,
+    table: {
+      width: 150,
+      fixed: 'right'
+    },
+    isTableForm:true,
   }
 ]))
 
@@ -1067,3 +1083,45 @@ export const ConsumereRequestDetailbRules = reactive({
     { required: true, message: '请输入创建者', trigger: 'blur' }
   ],
 })
+
+
+/**
+ * @returns {Array} bom 拆解
+ */
+export const BomDismantle = useCrudSchemas(reactive<CrudSchema[]>([
+  {
+    label: '行标记',
+    field: 'rowId',
+    isTableForm: false,
+    isForm: false,
+    tableForm:{
+      disabled: true
+    }
+  },
+  {
+    label: '物品代码',
+    field: 'itemCode',
+    tableForm:{
+      disabled: true
+    }
+  },
+  {
+    label: '数量',
+    field: 'qty',
+    tableForm: {
+      type: 'InputNumber',
+      min: 0,
+      precision: 6
+    }
+  },
+  {
+    label: '计量单位',
+    field: 'uom',
+    dictType: DICT_TYPE.UOM,
+    dictClass: 'string',
+    tableForm:{
+      type: 'Select',
+      disabled: true
+    }
+  },
+]))