zhangli
1 year ago
4 changed files with 222 additions and 7 deletions
@ -0,0 +1,3 @@ |
|||||
|
import Detail from './src/Detail.vue' |
||||
|
|
||||
|
export { Detail } |
@ -0,0 +1,204 @@ |
|||||
|
<template> |
||||
|
<el-drawer v-model="isShowDrawer" title="详情" direction="rtl" size="80%" v-loading="detailLoading"> |
||||
|
<ContentWrap> |
||||
|
<div class="font-size-18px"> |
||||
|
{{ detailData.code }} <span class="ml-20px font-size-16px">{{ detailData.name }}</span> |
||||
|
</div> |
||||
|
</ContentWrap> |
||||
|
<Tabs :tabsList="tabsList" :current="current" @change="change" /> |
||||
|
<div class="flex" v-if="current == 0"> |
||||
|
<!-- 详情 --> |
||||
|
<ContentWrap class="w-[73%]"> |
||||
|
<Descriptions :data="detailData" :schema="ItemBasic.allSchemas.detailSchema" :columns="2" /> |
||||
|
</ContentWrap> |
||||
|
<ContentWrap class="w-[27%] ml-16px"> |
||||
|
<!-- 附件组件 --> |
||||
|
<Annex :data="annexData" @handleImport="handleImport" @deleteAnnex="deleteAnnexSuccess" /> |
||||
|
<!-- 备注组件 --> |
||||
|
<Remarks :data="remarksData" class="mt-20px" @submitSucss="remarksSubmitSucss" /> |
||||
|
<!-- 变更记录组件 --> |
||||
|
<ChangeRecord :data="changeRecordData" class="mt-20px" /> |
||||
|
</ContentWrap> |
||||
|
<!-- 用户导入对话框 --> |
||||
|
<ImportForm ref="importFormRef" :importTemplateData="importTemplateData" @success="importSuccess" /> |
||||
|
</div> |
||||
|
<ContentWrap v-else> |
||||
|
<Table :columns="ItemBasic.allSchemas.tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" |
||||
|
:pagination="{ |
||||
|
total: tableObject.total |
||||
|
}" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage" /> |
||||
|
</ContentWrap> |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
defineOptions({ name: 'Detail' }) |
||||
|
import Annex from '@/components/Annex/src/Annex.vue' |
||||
|
import Remarks from '@/components/Remarks/src/Remarks.vue' |
||||
|
import ImportForm from '@/components/ImportForm/src/ImportForm.vue' |
||||
|
import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue' |
||||
|
import Tabs from '@/components/Tabs/src/Tabs.vue' |
||||
|
import { ItemBasic } from '@/utils/disposition/tableColumns.ts' |
||||
|
import { ItemBasicTabsList } from '@/utils/disposition/tabsList.ts' |
||||
|
import { getItembasic } from '@/api/wms/itembasic' |
||||
|
const { query } = useRoute() // 路由的查询 |
||||
|
import * as ItembasicApi from '@/api/wms/itembasic' |
||||
|
|
||||
|
import * as UserApi from '@/api/system/user' |
||||
|
|
||||
|
const isShowDrawer = ref(false) |
||||
|
|
||||
|
const tabsList = ref(JSON.parse(JSON.stringify(ItemBasicTabsList))) |
||||
|
tabsList.value.unshift({ |
||||
|
label: '详情', |
||||
|
prop: 'Detail' |
||||
|
}) |
||||
|
// 搜索参数 |
||||
|
const queryParams = reactive({ |
||||
|
title: '', |
||||
|
name: undefined, |
||||
|
status: undefined, |
||||
|
pageNo: 1, |
||||
|
pageSize: 100 |
||||
|
}) |
||||
|
const queryFormRef = ref() // 搜索的表单 |
||||
|
// const formLabel = ref(ItemBasic)//form表单label列表 |
||||
|
// 附件默认数据 |
||||
|
const annexData = reactive({ |
||||
|
annexList: [{ |
||||
|
title: '文件名文件名2023-12-12.docx', |
||||
|
size: '150.02KB', |
||||
|
people: '贾先生', |
||||
|
time: '2023年5月6日 17:16:00', |
||||
|
}, { |
||||
|
title: '文件名文件名2023-12-15.docx', |
||||
|
size: '242KB', |
||||
|
people: '张张', |
||||
|
time: '2022年12月12日 17:16:00', |
||||
|
}] |
||||
|
}) |
||||
|
// 备注默认数据 |
||||
|
const remarksData = reactive({ |
||||
|
remarksList: [{ |
||||
|
name: '诸葛亮', |
||||
|
text: '转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。', |
||||
|
time: '2023年5月6日 17:16:00', |
||||
|
}, { |
||||
|
name: '刘备', |
||||
|
text: '转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。', |
||||
|
time: '2022年12月12日 17:16:00', |
||||
|
}] |
||||
|
}) |
||||
|
|
||||
|
// 变更记录默认数据 |
||||
|
const changeRecordData = reactive({ |
||||
|
changeRecordList: [{ |
||||
|
name: '诸葛亮', |
||||
|
type: 1, |
||||
|
time: '2023年5月6日 17:16:00', |
||||
|
}, { |
||||
|
name: '刘备', |
||||
|
type: 2, |
||||
|
time: '2023年5月6日 17:16:00', |
||||
|
}, { |
||||
|
name: '曹操', |
||||
|
type: 3, |
||||
|
time: '2023年5月6日 17:16:00', |
||||
|
file: [{ |
||||
|
name: '这是个附件的名字.docx', |
||||
|
url: 'http://localhost:12080/admin-api/system/user/get-import-template' |
||||
|
}, { |
||||
|
name: '这是个附件的名字.docx', |
||||
|
url: 'http://localhost:12080/admin-api/system/user/get-import-template' |
||||
|
}] |
||||
|
}] |
||||
|
}) |
||||
|
const detailData = ref("")//详情数据 |
||||
|
// 导入附件弹窗所需的参数 |
||||
|
const importTemplateData = reactive({ |
||||
|
templateUrl: '', |
||||
|
templateTitle: '导入模版99.xls' |
||||
|
}) |
||||
|
onMounted(async () => { |
||||
|
// 获取详情 |
||||
|
detailData.value = await getItembasic(query.id) |
||||
|
importTemplateData.templateUrl = await UserApi.importUserTemplate() |
||||
|
}) |
||||
|
|
||||
|
// 导入成功之后 |
||||
|
const importSuccess = () => { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
/** 搜索按钮操作 */ |
||||
|
const handleQuery = () => { |
||||
|
|
||||
|
importFormRef.value.open() |
||||
|
} |
||||
|
|
||||
|
/** 重置按钮操作 */ |
||||
|
const resetQuery = () => { |
||||
|
queryParams.pageNo = 1 |
||||
|
queryFormRef.value.resetFields() |
||||
|
} |
||||
|
|
||||
|
/** 用户导入 */ |
||||
|
const importFormRef = ref() |
||||
|
const handleImport = () => { |
||||
|
importFormRef.value.open() |
||||
|
} |
||||
|
// 删除附件成功之后所走的方法 |
||||
|
const deleteAnnexSuccess = async () => { |
||||
|
console.log('删除成功'); |
||||
|
} |
||||
|
// 备注提交成功之后 |
||||
|
const remarksSubmitSucss = () => { |
||||
|
console.log('提交成功'); |
||||
|
} |
||||
|
// 供应商物品数据 |
||||
|
// const supplierItems = reactive({ |
||||
|
// supplierItemsList: [{ |
||||
|
// code: '646456', |
||||
|
// name: '978978' |
||||
|
// }], |
||||
|
// total: 20, |
||||
|
// pageSize: 1, |
||||
|
// currentPage: 2 |
||||
|
// }) |
||||
|
|
||||
|
|
||||
|
const current = ref(0) |
||||
|
const detailLoading = ref(false) |
||||
|
// 获取表格数据 |
||||
|
const { tableObject, tableMethods } = useTable({ |
||||
|
getListApi: ItembasicApi.getItembasicPage // 分页接口 |
||||
|
}) |
||||
|
const change = (item, index) => { |
||||
|
current.value = index |
||||
|
} |
||||
|
|
||||
|
// 获得表格的各种操作 |
||||
|
const { getList, setSearchParams } = tableMethods |
||||
|
getList() |
||||
|
|
||||
|
/** 打开弹窗 */ |
||||
|
const openDetail = async (id?: number) => { |
||||
|
isShowDrawer.value = true |
||||
|
if (id) { |
||||
|
detailLoading.value = true |
||||
|
try { |
||||
|
detailData.value = await ItembasicApi.getItembasic(id) |
||||
|
// detailRef.value.setValues(data) |
||||
|
|
||||
|
} finally { |
||||
|
detailLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
defineExpose({ openDetail }) // 提供 open 方法,用于打开弹窗 |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
::v-deep(.el-drawer__body){ |
||||
|
background: #f5f5f5!important; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue