sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

展开树：tableDetail

master_hella_20240701
yufei0306 8 months ago
parent
1870dcf6bc
commit
07d4cd2261
3 changed files with 30 additions and 727 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 732
      src/components/TableDetail/src/TableDetail.vue
  2. 1
      src/views/wms/inventoryjobManage/sparepartsrequisition/sparepartsrequisitionRequestMain/sparepartsrequisitionRequestMain.data.ts
  3. 4
      src/views/wms/purchasereceiptManage/purchasereceipt/purchasereceiptRequestMain/purchasereceiptRequestMain.data.ts

732
src/components/TableDetail/src/TableDetail.vue
View File

@ -1,41 +1,7 @@
<template>
<!-- 详情 -->
<div class="expandTable" :style="{width:width}" style="padding:10px"> <!-- 列表头部 -->
<!-- <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"
>
<!-- <template #action="{ row }">
<ButtonBase
:Butttondata="buttondata"
@button-base-click="buttonTableClick($event, row)"
/>
</template> -->
</Table>
<Table style="width:100%"
v-if="!isBasic && fromeWhere != 'countPlan'"
<Table style="width:100%;border:1px solid red"
:columns="detailAllSchemasRef.tableColumns"
:data="tableObjectRef.tableList"
:loading="tableObjectRef.loading"
@ -43,65 +9,21 @@
v-model:currentPage="tableObjectRef.currentPage"
>
<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)"
/>
<div v-for="(item,index) in row.photos.split(',')" :key="index" style="color:#409eff ; cursor: pointer;" @click="openImage(item)">{{ item }}</div>
</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>
</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() // 国际化
defineOptions({ name: 'TableDetail' })
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
},
width:{
type: String,
required: false,
@ -112,23 +34,6 @@ const props = defineProps({
required: false,
default: null
},
//展示附件组件的tab标签
annexTable: {
type: Array,
required: false,
default: ()=>[]
},
isExpandDetail: {
type: Boolean,
required: false,
default: false
},
// 是否是基础数据 展现详情顶部表单
isBasic: {
type: Boolean,
required: false,
default: false
},
// 表单，列表 相关信息
allSchemas: {
type: Object,
@ -141,267 +46,30 @@ const props = defineProps({
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 : '')))
onMounted(() => {
openDetail(props.openDetailParams)
detailAllSchemasRef.value.tableColumns = detailAllSchemasRef.value.tableColumns.filter((item)=>{
if(item.field=='action'){
return false
}
return true
})
})
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:'附件',
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'
})
}
// 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>>([])
// detailAllSchemasRef.value.tableColumns = []
// detailAllSchemasRef.value.tableColumns.forEach((item)=>{
// if(item.field!='action'){
// detailAllSchemasRef.value.tableColumns.pus
// }
// 备注数据
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 () => {
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({
label: item.label,
tableName: item?.tableName || '',
annexList
})
}
// detailAllSchemasRef.value.tableColumns = detailAllSchemasRef.value.tableColumns.filter((item)=>{
// if(item.field=='action'){
// return false
// }
// return true
// })
})
}
/** 添加附件 */
const handleAnnexSuccess = () => {
getFileList()
getChangeRecordList()
}
// 删除附件成功之后所走的方法
const deleteAnnexSuccess = async () => {
getFileList()
getChangeRecordList()
}
/** 追加的附件 */
const updateAnnexTableHandle = () => {
getAnnexFileList()
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({
@ -410,47 +78,8 @@ const masterParmas = ref({
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 openDetail = async ({row, titleName, titleValue, tableName}) => {
titleNameRef.value = titleName
titleValueRef.value = titleValue
remarksData.data = {
tableId: row.id,
tableName: tableName
}
// 加载明细列表
if (!props.isBasic) {
const openDetail = async ({row}) => {
// 设置主表id
masterParmas.value.masterId = row.id
masterParmas.value.number = row.number
@ -460,87 +89,7 @@ const openDetail = async ({row, titleName, titleValue, tableName}) => {
}
await getList()
}
isShowDrawer.value = true
if (row) {
detailLoading.value = true
try {
detailData.value = row
getRemarkList()
getFileList()
getAnnexFileList()
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)
}
defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗
const tableObjectRef = ref()
const tableMethodsRef = ref()
@ -554,260 +103,20 @@ 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,
@ -817,11 +126,6 @@ watch(
})
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

1
src/views/wms/inventoryjobManage/sparepartsrequisition/sparepartsrequisitionRequestMain/sparepartsrequisitionRequestMain.data.ts
View File

@ -279,7 +279,6 @@ export const UnplannedissueRequestMain = useCrudSchemas(reactive<CrudSchema[]>([
table: {
width: 150
},
isTable: false,
},
{
label: '创建时间',

4
src/views/wms/purchasereceiptManage/purchasereceipt/purchasereceiptRequestMain/purchasereceiptRequestMain.data.ts
View File

@ -758,6 +758,7 @@ export const PurchasereceiptRequestDetail = useCrudSchemas(reactive<CrudSchema[]
field: 'packUnit',
dictClass: 'string',
isTable: true,
isTableForm: false,
sort: 'custom',
table: {
width: 150,
@ -768,7 +769,6 @@ export const PurchasereceiptRequestDetail = useCrudSchemas(reactive<CrudSchema[]
tableForm:{
disabled:true
},
isTableForm: true,
isForm: true
},
{
@ -822,7 +822,7 @@ export const PurchasereceiptRequestDetail = useCrudSchemas(reactive<CrudSchema[]
isMainValue: false
}]
},
isTableForm: true,
isTableForm: false,
isForm: true
},
{

Write Preview
Loading…
Cancel
Save