Browse Source

展开树:tableDetail

master_hella_20240701
yufei0306 8 months ago
parent
commit
07d4cd2261
  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

@ -1,41 +1,7 @@
<template> <template>
<!-- 详情 --> <!-- 详情 -->
<div class="expandTable" :style="{width:width}" style="padding:10px"> <!-- 列表头部 --> <div class="expandTable" :style="{width:width}" style="padding:10px"> <!-- 列表头部 -->
<!-- <TableHead <Table style="width:100%;border:1px solid red"
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'"
:columns="detailAllSchemasRef.tableColumns" :columns="detailAllSchemasRef.tableColumns"
:data="tableObjectRef.tableList" :data="tableObjectRef.tableList"
:loading="tableObjectRef.loading" :loading="tableObjectRef.loading"
@ -43,65 +9,21 @@
v-model:currentPage="tableObjectRef.currentPage" v-model:currentPage="tableObjectRef.currentPage"
> >
<template #photos="{ row }"> <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> <div v-for="(item,index) in row.photos.split(',')" :key="index" style="color:#409eff ; cursor: pointer;" @click="openImage(item)">{{ item }}</div>
<template #action="{ row }">
<ButtonBase
:Butttondata="buttondata"
@button-base-click="buttonTableClick($event, row)"
/>
</template> </template>
</Table> </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> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
defineOptions({ name: 'TableDetail' })
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() //
const route = useRoute() // const route = useRoute() //
const routeName = ref() const routeName = ref()
routeName.value = route.name routeName.value = route.name
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail' routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
const updateKey = ref(0)
const props = defineProps({ const props = defineProps({
//
tabs: {
type: Object,
required: true,
default: null
},
width:{ width:{
type: String, type: String,
required: false, required: false,
@ -112,23 +34,6 @@ const props = defineProps({
required: false, required: false,
default: null default: null
}, },
//tab
annexTable: {
type: Array,
required: false,
default: ()=>[]
},
isExpandDetail: {
type: Boolean,
required: false,
default: false
},
//
isBasic: {
type: Boolean,
required: false,
default: false
},
// //
allSchemas: { allSchemas: {
type: Object, type: Object,
@ -141,267 +46,30 @@ const props = defineProps({
required: true, required: true,
default: null 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 // API
apiPage: { apiPage: {
type: Function, type: Function,
required: false, required: false,
default: null 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(() => { onMounted(() => {
openDetail(props.openDetailParams) openDetail(props.openDetailParams)
detailAllSchemasRef.value.tableColumns = detailAllSchemasRef.value.tableColumns.filter((item)=>{ // detailAllSchemasRef.value.tableColumns = []
if(item.field=='action'){ // detailAllSchemasRef.value.tableColumns.forEach((item)=>{
return false // if(item.field!='action'){
} // detailAllSchemasRef.value.tableColumns.pus
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>>([])
// // })
const remarksData = reactive({
remarksList: [],
data: {}
})
// // detailAllSchemasRef.value.tableColumns = detailAllSchemasRef.value.tableColumns.filter((item)=>{
const changeRecordData = reactive({ // if(item.field=='action'){
changeRecordList: [] // return false
}) // }
const detailData = ref({}) // // return true
// // })
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
})
}
}) })
}
/** 添加附件 */
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({ const masterParmas = ref({
@ -410,47 +78,8 @@ const masterParmas = ref({
status: '' // 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 openDetail = async ({row}) => {
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) {
// id // id
masterParmas.value.masterId = row.id masterParmas.value.masterId = row.id
masterParmas.value.number = row.number masterParmas.value.number = row.number
@ -460,87 +89,7 @@ const openDetail = async ({row, titleName, titleValue, tableName}) => {
} }
await getList() await getList()
} }
isShowDrawer.value = true defineExpose({ openDetail }) // open
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)
}
const tableObjectRef = ref() const tableObjectRef = ref()
const tableMethodsRef = ref() const tableMethodsRef = ref()
@ -554,260 +103,20 @@ tableObjectRef.value = tableObject
tableMethodsRef.value = tableMethods tableMethodsRef.value = tableMethods
detailAllSchemasRef.value = props.detailAllSchemas detailAllSchemasRef.value = props.detailAllSchemas
//
const isShowMainButton = (row, val) => {
if (val.indexOf(row.status) > -1) {
return false
} else {
return true
}
}
// //
const { getList } = tableMethodsRef.value 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([ const emit = defineEmits([
'searchTableSuccessDetail',
'changeTabs',
'selectChangeDetail',
'detailOpenForm',
'tableFormButton',
'openImage', '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)=>{ const openImage=(item)=>{
emit('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( watch(
() => props.apiPage, () => props.apiPage,
@ -817,11 +126,6 @@ watch(
}) })
tableObject.params.masterId = masterParmas.value.masterId tableObject.params.masterId = masterParmas.value.masterId
detailAllSchemasRef.value = props.detailAllSchemas detailAllSchemasRef.value = props.detailAllSchemas
if (props.tableObjectExtend) {
props.tableObjectExtend.forEach(item => {
tableObject.params[item.key] = item.value
})
}
tableObjectRef.value = tableObject tableObjectRef.value = tableObject
tableMethodsRef.value = tableMethods tableMethodsRef.value = tableMethods
const { getList } = tableMethods const { getList } = tableMethods

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

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

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

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

Loading…
Cancel
Save