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

<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
      <el-form-item label="部门名称" prop="title">
        <el-input v-model="queryParams.name" placeholder="请输入部门名称" clearable class="!w-240px" />
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button type="info" plain @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <div class="flex">
    <!-- 详情 -->
    <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>
</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 { ItemBasic } from '@/utils/disposition/tableColumns.ts'
import { getItembasic } from '@/api/wms/itembasic'



import * as UserApi from '@/api/system/user'

// 搜索参数
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 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 detailData = ref()
const { query } = useRoute() // 路由的查询
console.log(query);
onMounted(async () => {
  // 获取详情
  detailData.value =await getItembasic(query.id)
})
</script>