Browse Source

详情

master
zhangli 1 year ago
parent
commit
828c3b79f1
  1. 3
      src/components/Detail/index.ts
  2. 204
      src/components/Detail/src/Detail.vue
  3. 1
      src/main.ts
  4. 21
      src/views/wms/itembasic/index.vue

3
src/components/Detail/index.ts

@ -0,0 +1,3 @@
import Detail from './src/Detail.vue'
export { Detail }

204
src/components/Detail/src/Detail.vue

@ -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)//formlabel
//
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>

1
src/main.ts

@ -65,6 +65,7 @@ const setupAll = async () => {
app.use(VueDOMPurifyHTML) app.use(VueDOMPurifyHTML)
app.mount('#app') app.mount('#app')
app.config.warnHandler = () => null;
} }
setupAll() setupAll()

21
src/views/wms/itembasic/index.vue

@ -417,12 +417,15 @@
<!-- 表单弹窗添加/修改 --> <!-- 表单弹窗添加/修改 -->
<ItembasicForm ref="formRef" @success="getList" /> <ItembasicForm ref="formRef" @success="getList" />
<ImportForm ref="importFormRef" :url="ItembasicApi.importUrl" :importTemplateData="importTemplateData" @success="importSuccess" /> <ImportForm ref="importFormRef" :url="ItembasicApi.importUrl" :importTemplateData="importTemplateData" @success="importSuccess" />
<!-- 详情 -->
<Detail ref="detailRef"/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import download from '@/utils/download' import download from '@/utils/download'
import * as ItembasicApi from '@/api/wms/itembasic' import * as ItembasicApi from '@/api/wms/itembasic'
import ItembasicForm from './ItembasicForm.vue' import ItembasicForm from './ItembasicForm.vue'
import Detail from '@/components/Detail/src/Detail.vue'
import ItembasicDetail from './ItembasicDetail.vue' import ItembasicDetail from './ItembasicDetail.vue'
import ImportForm from '@/components/ImportForm/src/ImportForm.vue' import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
import { ItemBasic } from '@/utils/disposition/tableColumns' import { ItemBasic } from '@/utils/disposition/tableColumns'
@ -550,15 +553,19 @@ const formRef = ref()
const openForm = (type: string, id?: number) => { const openForm = (type: string, id?: number) => {
formRef.value.open(type, id) formRef.value.open(type, id)
} }
const detailRef = ref()
const openDetail = (id?: number) => { const openDetail = (id?: number) => {
// detailRef.value.open(id) detailRef.value.openDetail(id)
router.push({
path: '/wms/itembasic-manage/itembasic-detail',
query:{
id
}
})
} }
// const openDetail = (id?: number) => {
// // detailRef.value.open(id)
// router.push({
// path: '/wms/itembasic-manage/itembasic-detail',
// query:{
// id
// }
// })
// }
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {

Loading…
Cancel
Save