物料库区配置管理字段展示

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

@@ -51,7 +51,18 @@
   />
 
   <!-- 详情 -->
-  <Detail ref="detailRef" :isBasic="true" :allSchemas="Itemarea.allSchemas" />
+  <Detail 
+    ref="detailRef" 
+    :isBasic="true" 
+    :allSchemas="Itemarea.allSchemas" 
+    :detailAllSchemas="ItemareaDetail.allSchemas"
+    :apiCreate="ItemareaDetailApi.createItemareaDetail"
+    :apiUpdate="ItemareaDetailApi.updateItemareaDetail"
+    :apiPage="ItemareaDetailApi.getItemareaDetailPage"
+    :apiDelete="ItemareaDetailApi.deleteItemareaDetail"
+
+    @searchTableSuccessDetail="searchTableSuccessDetail"
+    />
 
   <!-- 导入 -->
   <ImportForm ref="importFormRef" url="/wms/itemarea/import" :importTemplateData="importTemplateData" @success="importSuccess" />
@@ -59,8 +70,9 @@
 
 <script setup lang="ts">
 import download from '@/utils/download'
-import { Itemarea,ItemareaRules } from './itemarea.data'
+import { Itemarea,ItemareaRules,ItemareaDetail } from './itemarea.data'
 import * as ItemareaApi from '@/api/wms/itemarea'
+import * as ItemareaDetailApi from '@/api/wms/itemareaDetail'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import TableHead from '@/components/TableHead/src/TableHead.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
@@ -85,6 +97,15 @@ const searchTableSuccess = (formField, searchField, val, formRef) => {
   })
 }
 
+// 查询页面返回——详情
+const searchTableSuccessDetail = (formField, searchField, val, formRef ) => {
+  nextTick(() => {
+    const setV = {}
+      setV[formField] = val[0][searchField]
+    formRef.setValues(setV)
+  })
+}
+
 // 字段设置 更新主列表字段
 const updataTableColumns = (val) => {
   tableColumns.value = val

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

@@ -1,92 +1,295 @@
 import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
 import { dateFormatter } from '@/utils/formatTime'
-
+import * as ItembasicApi from '@/api/wms/itembasic'
-// 表单校验
+import { Itembasic } from '../itemManage/itembasic/itembasic.data'
-export const ItemareaRules = reactive({
+import * as AreaApi from '@/api/wms/areabasic'
-  itemCode: [required],
+import { Area } from '../factoryModeling/areabasic/areabasic.data'
-  areaCode: [required],
+import * as PackageunitApi from '@/api/wms/packageunit'
-  inPackUnit: [required],
+import { Packageunit } from '../itemManage/packageunit/packageunit.data'
-  outPackUnit: [required],
-  needReceive: [required],
-  available: [required],
-  manageMode: [required],
-})
 
 export const Itemarea = useCrudSchemas(reactive<CrudSchema[]>([
-  {
+  // {
-    label: 'id',
+  //   label: 'id',
-    field: 'id',
+  //   field: 'id',
-    sort: 'custom',
+  //   sort: 'custom',
-    isForm: false,
+  //   isForm: false,
-  },
+  // },
   {
     label: '物品代码',
     field: 'itemCode',
     sort: 'custom',
     isSearch: true,
+    table: {
+      width: 120,
+      fixed: 'left'
+    },
+    form: {
+      // labelMessage: '信息提示说明！！！',
+      componentProps: {
+        isSearchList: true, // 开启查询弹窗
+        searchListPlaceholder: '请选择物料代码', // 输入框占位文本
+        searchField: 'code', // 查询弹窗赋值字段
+        searchTitle: '物料基础信息', // 查询弹窗标题
+        searchAllSchemas: Itembasic.allSchemas, // 查询弹窗所需类
+        searchPage: ItembasicApi.getItembasicPage, // 查询弹窗所需分页方法
+        searchCondition: [{
+          key: 'available',
+          value: 'TRUE',
+          action: '==',
+          isSearch: true,
+          isMainValue: false
+        }]
+      }
+    }
   },
   {
     label: '区域代码',
     field: 'areaCode',
     sort: 'custom',
     isSearch: true,
+    table: {
+      width: 120,
+      fixed: 'left'
+    },
+    form: {
+      // labelMessage: '信息提示说明！！！',
+      componentProps: {
+        isSearchList: true, // 开启查询弹窗
+        searchListPlaceholder: '请选择库区代码', // 输入框占位文本
+        searchField: 'code', // 查询弹窗赋值字段
+        searchTitle: '库区基础信息', // 查询弹窗标题
+        searchAllSchemas: Area.allSchemas, // 查询弹窗所需类
+        searchPage: AreaApi.getAreaPage, // 查询弹窗所需分页方法
+        searchCondition: [{
+          key: 'available',
+          value: 'TRUE',
+          action: '==',
+          isSearch: true,
+          isMainValue: false
+        }]
+      }
+    }
   },
   {
     label: '入库包装规格',
     field: 'inPackUnit',
     sort: 'custom',
+    isSearch: true,
+    table: {
+      width: 140,
+      fixed: 'left'
+    },
+    form: {
+      // labelMessage: '信息提示说明！！！',
+      componentProps: {
+        isSearchList: true, // 开启查询弹窗
+        searchListPlaceholder: '请选择包装规格代码', // 输入框占位文本
+        searchField: 'code', // 查询弹窗赋值字段
+        searchTitle: '包装规格基础信息', // 查询弹窗标题
+        searchAllSchemas: Packageunit.allSchemas, // 查询弹窗所需类
+        searchPage: PackageunitApi.getPackageunitPage, // 查询弹窗所需分页方法
+        searchCondition: [{
+          key: 'available',
+          value: 'TRUE',
+          action: '==',
+          isSearch: true,
+          isMainValue: false
+        }]
+      }
+    }
   },
   {
     label: '出库包装规格',
     field: 'outPackUnit',
     sort: 'custom',
+    isSearch: true,
+    table: {
+      width: 140,
+      fixed: 'left'
+    },
+    form: {
+      // labelMessage: '信息提示说明！！！',
+      componentProps: {
+        isSearchList: true, // 开启查询弹窗
+        searchListPlaceholder: '请选择包装规格代码', // 输入框占位文本
+        searchField: 'code', // 查询弹窗赋值字段
+        searchTitle: '包装规格基础信息', // 查询弹窗标题
+        searchAllSchemas: Packageunit.allSchemas, // 查询弹窗所需类
+        searchPage: PackageunitApi.getPackageunitPage, // 查询弹窗所需分页方法
+        searchCondition: [{
+          key: 'available',
+          value: 'TRUE',
+          action: '==',
+          isSearch: true,
+          isMainValue: false
+        }]
+      }
+    }
   },
   {
-    label: '最高库存数量（0 为无限）',
+    label: '最高库存数量',
     field: 'maxQty',
     sort: 'custom',
+    table: {
+      width: 140,
+      fixed: 'left'
+    },
+    form: {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 6
+      }
+    },
   },
   {
     label: '最低库存数量',
     field: 'minQty',
     sort: 'custom',
+    table: {
+      width: 140,
+      fixed: 'left'
+    },
+    form: {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 6
+      }
+    },
   },
   {
     label: '安全预警库存数量',
     field: 'safeQty',
     sort: 'custom',
+    table: {
+      width: 170,
+      fixed: 'left'
+    },
+    form: {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 6
+      }
+    },
   },
   {
     label: '是否自动补料',
     field: 'autoRepleinsh',
     sort: 'custom',
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    // colorType: 'danger',
+    isTable: true,
+    table: {
+      width: 140
+    },
+    form: {
+      component: 'Switch',
+      value: 'TRUE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
   },
   {
     label: '补料来源库区',
     field: 'repleinshFromArea',
     sort: 'custom',
+    isSearch: true,
+    table: {
+      width: 140,
+      fixed: 'left'
+    },
+    form: {
+      // labelMessage: '信息提示说明！！！',
+      componentProps: {
+        isSearchList: true, // 开启查询弹窗
+        searchListPlaceholder: '请选择库区代码', // 输入框占位文本
+        searchField: 'code', // 查询弹窗赋值字段
+        searchTitle: '库区基础信息', // 查询弹窗标题
+        searchAllSchemas: Area.allSchemas, // 查询弹窗所需类
+        searchPage: AreaApi.getAreaPage, // 查询弹窗所需分页方法
+        searchCondition: [{
+          key: 'available',
+          value: 'TRUE',
+          action: '==',
+          isSearch: true,
+          isMainValue: false
+        }]
+      }
+    }
   },
   {
     label: '补料数量',
     field: 'repleinshQty',
     sort: 'custom',
+    table: {
+      width: 120,
+      fixed: 'left'
+    },
+    form: {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        precision: 6
+      }
+    },
   },
   {
     label: '需要接收确认',
     field: 'needReceive',
     sort: 'custom',
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    // colorType: 'danger',
+    isTable: true,
+    table: {
+      width: 140
+    },
+    form: {
+      component: 'Switch',
+      value: 'TRUE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
   },
   {
     label: '是否可用',
     field: 'available',
     sort: 'custom',
     isSearch: true,
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    // colorType: 'danger',
+    isTable: true,
+    table: {
+      width: 120
+    },
+    form: {
+      component: 'Switch',
+      value: 'TRUE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
   },
   {
     label: '生效时间',
     field: 'activeTime',
     sort: 'custom',
     formatter: dateFormatter,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
+    table: {
+      width: 180
+    } ,
     form: {
       component: 'DatePicker',
       componentProps: {
@@ -100,6 +303,12 @@ export const Itemarea = useCrudSchemas(reactive<CrudSchema[]>([
     field: 'expireTime',
     sort: 'custom',
     formatter: dateFormatter,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
+    table: {
+      width: 180
+    } ,
     form: {
       component: 'DatePicker',
       componentProps: {
@@ -112,6 +321,9 @@ export const Itemarea = useCrudSchemas(reactive<CrudSchema[]>([
     label: '备注',
     field: 'remark',
     sort: 'custom',
+    table: {
+      width: 120
+    } ,
   },
   {
     label: '创建时间',
@@ -119,12 +331,21 @@ export const Itemarea = useCrudSchemas(reactive<CrudSchema[]>([
     sort: 'custom',
     formatter: dateFormatter,
     isForm: false,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
+    table: {
+      width: 180
+    },
   },
   {
-    label: '创建者ID',
+    label: '创建者',
     field: 'creator',
     sort: 'custom',
     isForm: false,
+    table: {
+      width: 120
+    },
   },
   {
     label: '最后更新时间',
@@ -132,28 +353,170 @@ export const Itemarea = useCrudSchemas(reactive<CrudSchema[]>([
     sort: 'custom',
     formatter: dateFormatter,
     isForm: false,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
+    table: {
+      width: 180
+    },
   },
   {
-    label: '最后更新者ID',
+    label: '最后更新者',
     field: 'updater',
     sort: 'custom',
     isForm: false,
+    table: {
+      width: 120
+    },
   },
   {
     label: '管理精度',
     field: 'manageMode',
     sort: 'custom',
     isSearch: true,
+    dictType: DICT_TYPE.MANAGEMENT_MODE,
+    dictClass: 'string',
+    // colorType: 'danger',
+    isTable: true,
+    table: {
+      width: 120
+    },
   },
   {
     label: '入库后库存自动转换为出库包装规格',
     field: 'newlyToOutpackunit',
     sort: 'custom',
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    // colorType: 'danger',
+    isTable: true,
+    table: {
+      width: 120
+    },
+    form: {
+      component: 'Switch',
+      value: 'TRUE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
   },
   {
     label: '出库后剩余库存自动转换为出库包装规格',
     field: 'surplusToOutpackunit',
     sort: 'custom',
+    dictType: DICT_TYPE.TRUE_FALSE,
+    dictClass: 'string',
+    // colorType: 'danger',
+    isTable: true,
+    table: {
+      width: 120
+    },
+    form: {
+      component: 'Switch',
+      value: 'TRUE',
+      componentProps: {
+        inactiveValue: 'FALSE',
+        activeValue: 'TRUE'
+      }
+    },
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false,
+    table: {
+      width: 150,
+      fixed: 'right'
+    }
+  }
+]))
+
+// 表单校验
+export const ItemareaRules = reactive({
+  itemCode: [
+    { required: true, message: '请选择物料代码', trigger: 'change' }
+  ],
+  areaCode: [
+    { required: true, message: '请选择到区域代码', trigger: 'change' }
+  ],
+  inPackUnit: [
+    { required: true, message: '请选择入库包装规格', trigger: 'change' }
+  ],
+  outPackUnit: [
+    { required: true, message: '请选择出库包装规格', trigger: 'change' }
+  ],
+  needReceive: [
+    { required: true, message: '请选择需要接受确认', trigger: 'change' }
+  ],
+  available: [
+    { required: true, message: '请选择是否可用', trigger: 'change' }
+  ], 
+  manageMode: [
+    { required: true, message: '请选择管理精度', trigger: 'change' }
+  ],
+})
+
+/**
+ * @returns {Array} 库存转移申请子表
+ */
+export const ItemareaDetail = useCrudSchemas(reactive<CrudSchema[]>([
+  {
+    label: 'id',
+    field: 'id',
+    sort: 'custom',
+    isForm: false,
+  },
+  {
+    label: '主表ID',
+    field: 'masterId',
+    sort: 'custom',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    sort: 'custom',
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    sort: 'custom',
+    formatter: dateFormatter,
+    isForm: false,
+  },
+  {
+    label: '创建者Id',
+    field: 'creator',
+    sort: 'custom',
+    isForm: false,
+  },
+  {
+    label: '最后更新时间',
+    field: 'updateTime',
+    sort: 'custom',
+    formatter: dateFormatter,
+    isForm: false,
+  },
+  {
+    label: '最后更新者Id',
+    field: 'updater',
+    sort: 'custom',
+    isForm: false,
+  },
+  {
+    label: '库位组',
+    field: 'locationGroup',
+    sort: 'custom',
+  },
+  {
+    label: '库位代码',
+    field: 'locationCode',
+    sort: 'custom',
   },
   {
     label: '操作',