sfms3.0-ui/src/views/wms/itembasic/ItembasicDetail.vue

<template>
  <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>
</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 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("")//详情数据
onMounted(async () => {
  // 获取详情
  detailData.value = await getItembasic(query.id)
})
// 导入附件弹窗所需的参数
const importTemplateData = reactive({
  templateUrl: UserApi.importUserTemplate(),
  templateTitle: '导入模版99.xls'
})
// 导入成功之后
const importSuccess = () => {

}
/** 搜索按钮操作 */
const handleQuery = () => {

}

/** 重置按钮操作 */
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 { tableObject, tableMethods } = useTable({
  getListApi: ItembasicApi.getItembasicPage // 分页接口
})
console.log(tableObject);
const change = (item, index) => {
  console.log(item);
  current.value = index
}

// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods
getList()

</script>