heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/storagein/detail.vue

<template>
  <el-card class="hl-card" style="position: relative">
    <template #header>
      <span>详情页</span>
    </template>
    <el-form ref="formRef" :model="formData"  label-width="160px" v-loading="formLoading">
      <!--  基础信息   -->
      <el-card class="hl-card-info">
        <template #header>
          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
        </template>

        <el-row>
          <el-col :span="24">
            <el-row>

              <el-col :span="6">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="入库单号" prop="purchaseNo">
                      <el-input class="!w-300px" placeholder="系统自动生成" v-model="formData.storageNo" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入库日期" prop="ordDate">
                  <el-date-picker
                    v-model="formData.ordDate"
                    type="date"
                    value-format="x"
                    placeholder="入库日期"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <!--  采购单信息   -->
      <el-card class="hl-card-info">
        <template #header>
          <div class="hl-card-info-icona"></div><span class="hl-card-info-text">采购单信息</span>
        </template>
        <el-row>
          <el-col>
            <el-card class="hl-incard">
              <el-form  ref="multipleTable" :model="formData.list"  v-loading="loading" label-width="0">
              <el-table :data="formData.list" class="hl-table"   >
                <el-table-column prop="projectSubCode" min-width="150" label="子项目编码" align="center"/>
                <el-table-column prop="boomName" min-width="150" label="标准件名称" align="center"/>
                <el-table-column prop="materialCode" min-width="150" label="物料编码" align="center"/>
                <el-table-column prop="boomSpec" min-width="100" label="规格型号" align="center"/>
                <el-table-column prop="purchaseAmount" min-width="100" label="采购数量" align="center" />
                <el-table-column prop="storageAmount" min-width="100" label="入库数量" align="center"/>
                <el-table-column prop="supplierName" min-width="150" label="供应商" align="center" />
                <el-table-column prop="estimatedPrice" min-width="100" label="预估总价" align="center"/>
              </el-table>
              </el-form>
              <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
                          @pagination="getList" />
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div class="hl-footer text-center">
      <el-button @click="isPrint()" type="primary" size="large" >打印</el-button>
      <el-button @click="deleteForm()" type="danger" size="large" >删除</el-button>
    </div>
  </el-card>

</template>
<script setup lang="ts">

import {ElTable} from 'element-plus'

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

import { useTagsViewStore } from '@/store/modules/tagsView'

const reload: any = inject('reload')
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const tagsViewStore = useTagsViewStore()
import * as StorageinApi from '@/api/heli/storagein'
import * as StorageinDetailApi from '@/api/heli/storageindetail'
import {ref} from "vue";

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  storageNo: undefined,
  ordDate: undefined,
  projectId: undefined,
  projectPlanId: undefined,
  projectPlanNo: undefined,
  projectCode: undefined,
  auditor: undefined,
  createTime: new Date(),
  status: undefined,
  description: undefined,
  boomItemDOList: [],
  boomItemRemoveList: [],
  matBoomDOList: [],
  matItemRemoveList: [],
  attachments: [],
  supplierName:undefined,
  list:[]
})

const formRef = ref() // 表单 Ref
const subFormRef = ref() // 表单 Ref
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const subBoomFormLoading = ref(false)
const subBoomFormRef = ref()







const userList = ref<UserApi.UserVO[]>([]) // 用户列表

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  storageId: query.id
})
// 页面数据加载初始化
onMounted(async () => {
  // 获取物料需求计划信息
  formData.value = await StorageinApi.getStorageIn(query.id)
  getList();
})
const isPrint = async () => {
  var newVar = await StorageinApi.isPrint(query.id);
  console.log(newVar)
}
const deleteForm = async () => {
  // 删除的二次确认
  await message.delConfirm()
  // 发起删除
  await StorageinApi.deleteStorageIn(query.id)
  message.success(t('common.delSuccess'))
  router.push({ path: '/inventory/storagein' })
  tagsViewStore.delVisitedView(router.currentRoute.value)
}

const getList = async () => {
  loading.value = true
  try {
    const data = await StorageinDetailApi.getByStorageId(queryParams)
    formData.value.list = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

</script>