物料库区配置管理主子表页面展示

src/views/wms/basicDataManage/itemManage/itemarea/index.vue

@@ -28,58 +28,71 @@
       v-model:sort="tableObject.sort"
     >
       <template #itemCode="{row}">
-        <el-button type="primary" link @click="openDetail(row, '代码', row.itemCode)">
+        <el-button type="primary" link @click="openDetail(row, '物料号', row.itemCode)">
           <span>{{ row.itemCode }}</span>
         </el-button>
         
       </template>
       <template #action="{ row }">
-        <ButtonBase :Butttondata="butttondata" @button-base-click="buttonTableClick($event,row)" />
+        <ButtonBase :Butttondata="butttondata(row)" @button-base-click="buttonTableClick($event,row)" />
       </template>
     </Table>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
   <BasicForm
-    ref="basicFormRef"
+    ref="formRef"
-    @success="formsSuccess"
+    @success="getList"
     :rules="ItemareaRules"
     :formAllSchemas="Itemarea.allSchemas"
+    :tableAllSchemas="ItemareaDetail.allSchemas"
+    :tableFormRules="ItemareaDetailRules"
+    :tableData="tableData"
     :apiUpdate="ItemareaApi.updateItemarea"
     :apiCreate="ItemareaApi.createItemarea"
+    :isBusiness="true"
+    @handleAddTable="handleAddTable"
+    @handleDeleteTable="handleDeleteTable"
     @searchTableSuccess="searchTableSuccess"
-    :isBusiness="false"
+    @submitForm="submitForm"
-    :basicFormWidth="'60%'"
+    :isShowButton = isShowButton
   />
 
   <!-- 详情 -->
   <Detail
     ref="detailRef"
-    :isBasic="true" 
+    :isBasic="false"
     :allSchemas="Itemarea.allSchemas"
     :detailAllSchemas="ItemareaDetail.allSchemas"
+    :detailAllSchemasRules="ItemareaDetailRules"
     :apiCreate="ItemareaDetailApi.createItemareaDetail"
     :apiUpdate="ItemareaDetailApi.updateItemareaDetail"
     :apiPage="ItemareaDetailApi.getItemareaDetailPage"
     :apiDelete="ItemareaDetailApi.deleteItemareaDetail"
-
     @searchTableSuccessDetail="searchTableSuccessDetail"
-    />
+    :detailButtonIsShowAdd="true"
+    :detailButtonIsShowDelete="true"
+    @detailOpenForm="detailOpenForm"
+  />
 
   <!-- 导入 -->
-  <ImportForm ref="importFormRef" url="/wms/itemarea/import" :importTemplateData="importTemplateData" @success="importSuccess" />
+  <ImportForm ref="importFormRef" url="/wms/itemarea/import" :importTemplateData="importTemplateData" 
+  @success="importSuccess" :updateIsDisable="true" :coverIsDisable="true" :mode="2" />
 </template>
 
-<script setup lang="ts">
+  <script setup lang="ts">
-import download from '@/utils/download'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import { Itemarea,ItemareaRules,ItemareaDetail } from './itemarea.data'
+  import download from '@/utils/download'
-import * as ItemareaApi from '@/api/wms/itemarea'
+  import { Itemarea,ItemareaRules,ItemareaDetail,ItemareaDetailRules } from './itemarea.data'
-import * as ItemareaDetailApi from '@/api/wms/itemareaDetail'
+  import * as ItemareaApi from '@/api/wms/itemarea'
-import * as defaultButtons from '@/utils/disposition/defaultButtons'
+  import * as ItemareaDetailApi from '@/api/wms/itemareaDetail'
-import TableHead from '@/components/TableHead/src/TableHead.vue'
+  import * as defaultButtons from '@/utils/disposition/defaultButtons'
-import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
+  import TableHead from '@/components/TableHead/src/TableHead.vue'
-import Detail from '@/components/Detail/src/Detail.vue'
+  import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
+  import Detail from '@/components/Detail/src/Detail.vue'
+  
 
+// 发货申请
 defineOptions({ name: 'Itemarea' })
 
 const message = useMessage() // 消息弹窗
@@ -90,29 +103,31 @@ const routeName = ref()
 routeName.value = route.name
 const tableColumns = ref(Itemarea.allSchemas.tableColumns)
 
+const isShowButton = ref(true)
+
+// 字段设置 更新主列表字段
+const updataTableColumns = (val) => {
+  tableColumns.value = val
+}
+
 // 查询页面返回
-const searchTableSuccess = (formField, searchField, val, formRef) => {
+const searchTableSuccess = (formField, searchField, val, formRef, type, row ) => {
   nextTick(() => {
     const setV = {}
     setV[formField] = val[0][searchField]
     formRef.setValues(setV)
+    
   })
 }
-
 // 查询页面返回——详情
 const searchTableSuccessDetail = (formField, searchField, val, formRef ) => {
   nextTick(() => {
     const setV = {}
-      setV[formField] = val[0][searchField]
+    setV[formField] = val[0][searchField]
     formRef.setValues(setV)
   })
 }
 
-// 字段设置 更新主列表字段
-const updataTableColumns = (val) => {
-  tableColumns.value = val
-}
-
 const { tableObject, tableMethods } = useTable({
   getListApi: ItemareaApi.getItemareaPage // 分页接口
 })
@@ -147,22 +162,42 @@ const buttonBaseClick = (val, item) => {
   } else if (val == 'export') { // 导出
     handleExport()
   } else if (val == 'refresh') { // 刷新
-    getList()
+    if (tableObject.params.filters && tableObject.params.filters.length > 0 ) {
+      searchFormClick({
+        filters: tableObject.params.filters
+      })
+    } else {
+      getList()
+    }
   } else if (val == 'filtrate') { // 筛选
   } else { // 其他按钮
     console.log('其他按钮', item)
   }
 }
 
+// 根据状态返回该按钮是否显示
+const isShowMainButton = (row,val) => {
+  if (val.indexOf(row.status) > -1) {
+    return false
+  } else {
+    return true
+  }
+}
+
 // 列表-操作按钮
-const butttondata = [
+const butttondata = (row) => {
-  defaultButtons.mainListEditBtn({hasPermi:'wms:itemarea:update'}), // 编辑
+  row.status = "1"
-  defaultButtons.mainListDeleteBtn({hasPermi:'wms:itemarea:delete'}), // 删除
+    return [
-]
+        defaultButtons.mainListEditBtn({hide:isShowMainButton(row,['1']),hasPermi:'wms:itemarea:update'}), // 编辑
+        // defaultButtons.mainListDeleteBtn({hasPermi:'wms:itemarea:delete'}), // 删除
+    ]
+}
+
+
 
 // 列表-操作按钮事件
 const buttonTableClick = async (val, row) => {
-  if (val == 'edit') { // 编辑
+ if (val == 'edit') { // 编辑 
     openForm('update', row)
   } else if (val == 'delete') { // 删除
     handleDelete(row.id)
@@ -170,39 +205,29 @@ const buttonTableClick = async (val, row) => {
 }
 
 /** 添加/修改操作 */
-const basicFormRef = ref()
+const formRef = ref()
-const openForm = (type: string, row?: any) => {
+const openForm =async (type: string, row?: number) => {
-  basicFormRef.value.open(type, row)
+  tableData.value = [] // 重置明细数据
+  formRef.value.open(type, row)
 }
 
-// form表单提交
+/**
-const formsSuccess = async (formType,data) => {
+ * 详情 编辑页面打开
-  var isHave =Itemarea.allSchemas.formSchema.some(function (item) {
+ * @param row 
-    return item.field === 'activeTime' || item.field === 'expireTime';
+ */
-  });
+ const detailOpenForm = (type) => {
-  if(isHave){
+
-    if(data.activeTime && data.expireTime && data.activeTime >=data.expireTime){
-      message.error('失效时间要大于生效时间')
-      return;
-    }
-  }
-  if(data.activeTime==0)data.activeTime = null;
-  if(data.expireTime==0)data.expireTime = null;
-  if (formType === 'create') {
-    await ItemareaApi.createItemarea(data)
-    message.success(t('common.createSuccess'))
-  } else {
-    await ItemareaApi.updateItemarea(data)
-    message.success(t('common.updateSuccess'))
-  }
-  basicFormRef.value.dialogVisible = false
-  getList()
 }
 
+// 获取部门 用于详情 部门回显
+const { wsCache } = useCache()
 /** 详情操作 */
 const detailRef = ref()
 const openDetail = (row: any, titleName: any, titleValue: any) => {
-  detailRef.value.openDetail(row, titleName, titleValue, 'basicItemarea')
+  const departmentCode = wsCache.get(CACHE_KEY.DEPT).find((account) => account.id == row.departmentCode)?.name
+  if (departmentCode) row.departmentCode = JSON.parse(JSON.stringify(departmentCode))
+  row.status = "1";
+  detailRef.value.openDetail(row, titleName, titleValue,'itemarea')
 }
 
 /** 删除按钮操作 */
@@ -210,8 +235,10 @@ const handleDelete = async (id: number) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
+    tableObject.loading = true
     // 发起删除
-    await ItemareaApi.deleteItemarea(id)
+    await ItemareaDetailApi.deleteItemareaDetail(id)
+    tableObject.loading = false
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -227,23 +254,62 @@ const handleExport = async () => {
     // 发起导出
     exportLoading.value = true
     const data = await ItemareaApi.exportItemarea(tableObject.params)
-    download.excel(data, '物料库区配置.xlsx')
+    download.excel(data, '发货申请主.xlsx')
   } catch {
   } finally {
     exportLoading.value = false
   }
 }
 
+/**
+  * tableForm方法
+*/
+const tableFormKeys = {}
+ItemareaDetail.allSchemas.tableFormColumns.forEach(item => {
+  tableFormKeys[item.field] = item.default ? item.default : ''
+})
+const tableData = ref([])
+
+// 添加明细
+const handleAddTable = () => {
+  tableData.value.push(JSON.parse(JSON.stringify(tableFormKeys)))
+}
+// 删除明细
+const handleDeleteTable = (item, index) => {
+  tableData.value.splice(index, 1)
+}
+
+// 主子数据 提交
+const submitForm = async (formType, data) => {
+  data.subList = tableData.value // 拼接子表数据参数
+  try {
+    if (formType === 'create') {
+      await ItemareaApi.createItemarea(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ItemareaApi.updateItemarea(data)
+      message.success(t('common.updateSuccess'))
+    }
+    formRef.value.dialogVisible = false
+    // 刷新当前列表
+    getList()
+  } finally {
+    formRef.value.formLoading = false
+  }
+}
+
 /** 导入 */
 const importFormRef = ref()
 const handleImport = () => {
   importFormRef.value.open()
 }
+
 // 导入附件弹窗所需的参数
 const importTemplateData = reactive({
   templateUrl: '',
   templateTitle: '物料库区配置导入模版.xlsx'
 })
+
 // 导入成功之后
 const importSuccess = () => {
   getList()
@@ -263,5 +329,4 @@ onMounted(async () => {
   getList()
   importTemplateData.templateUrl = await ItemareaApi.importTemplate()
 })
-
 </script>

src/views/wms/basicDataManage/itemManage/itemarea/itemarea.data.ts

@@ -322,13 +322,31 @@ export const Itemarea = useCrudSchemas(reactive<CrudSchema[]>([
     label: '出库后剩余库存自动转换为出库包装规格',
     field: 'surplusToOutpackunit',
     sort: 'custom',
-    isSearch: false,
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    form: {
+      component: 'Switch',
+      value: 'FALSE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
   },
   {
     label: '超过高储是否允许叫料',
     field: 'allowIssueRequest',
     sort: 'custom',
-    isSearch: false,
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    form: {
+      component: 'Switch',
+      value: 'FALSE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
   },
   {
     label: '优先空库位',
@@ -618,19 +636,14 @@ export const ItemareaRules = reactive({
  */
 export const ItemareaDetail = useCrudSchemas(reactive<CrudSchema[]>([
   {
-    label: 'id',
+    label: '库位组',
-    field: 'id',
+    field: 'locationGroup',
     sort: 'custom',
-    isForm: false,
   },
   {
-    label: '主表ID',
+    label: '库位代码',
-    field: 'masterId',
+    field: 'locationCode',
     sort: 'custom',
-    form: {
-      component: 'InputNumber',
-      value: 0
-    },
   },
   {
     label: '备注',
@@ -663,16 +676,6 @@ export const ItemareaDetail = useCrudSchemas(reactive<CrudSchema[]>([
     sort: 'custom',
     isForm: false,
   },
-  {
-    label: '库位组',
-    field: 'locationGroup',
-    sort: 'custom',
-  },
-  {
-    label: '库位代码',
-    field: 'locationCode',
-    sort: 'custom',
-  },
   {
     label: '操作',
     field: 'action',
@@ -683,3 +686,8 @@ export const ItemareaDetail = useCrudSchemas(reactive<CrudSchema[]>([
     }
   }
 ]))
+
+// 表单校验
+export const ItemareaDetailRules = reactive({
+
+})