Cold_erp_web/src/views/storehouse/inventory/InStorageDetail.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { GlobalStore } from '@/stores/index'
import { useRoute, useRouter } from 'vue-router'
import Drawer from '@/components/Drawer/index.vue'
import { InStorageInfoType } from '@/hooks/useDepot'
import { Storehouse_StockIn_Get } from '@/api/storehouse/index'
import ImageCom from '@/components/Image/index.vue'

const tableData = ref<any[]>([])
const tableSnData = ref<any[]>([])
const globalStore = GlobalStore()
const info = ref<InStorageInfoType | undefined>()
const drawerSnRef = ref<InstanceType<typeof Drawer> | null>(null)
const route = useRoute()
const router = useRouter()

const columns = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: '产品图片', prop: 'T_product_img', align: 'center ', name: 'T_product_img' },
  { label: '产品名称', prop: 'T_product_name', align: 'center ' },
  { label: '产品分类', prop: 'T_product_class_name', align: 'center ' },
  { label: '产品型号', prop: 'T_product_model', align: 'center ', name: 'T_product_model' },
  { label: '产品规格', prop: 'T_product_spec', align: 'center ' },
  { label: '是否关联SN', prop: 'T_product_relation_sn', align: 'center ', width: 120, name: 'T_product_relation_sn' },
  { label: '数量', prop: 'T_num', align: 'center ' },
  { prop: 'operation', label: '关联设备', width: 100, fixed: 'right', align: 'center ' }
]

const snColumns = [
  { type: 'index', label: '序号', width: 80, align: 'center ' },
  { label: 'SN', prop: 'sn', align: 'center ' }
]

const getStorehouseContractGet = async () => {
  const res: any = await Storehouse_StockIn_Get({ User_tokey: globalStore.GET_User_tokey, T_number: route.params.id })
  if (res.Code === 200) {
    info.value = res.Data
    tableData.value = res.Data.T_Product
  }
}

/**
 * 回调
 */
const callbackSnDrawer = (done: () => void) => done()

const previewSn = (devicelist: string[]) => {
  drawerSnRef.value?.openDrawer()
  if (!devicelist) return
  tableSnData.value = devicelist.map((item: string) => {
    return {
      sn: item
    }
  })
}
onMounted(() => {
  getStorehouseContractGet()
})
</script>
<template>
  <div class="contract-detail">
    <div class="info">
      <h1>入库详情</h1>
      <el-divider />
      <div class="content">
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>入库单号：</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
            ><span>{{ info?.T_number! }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>入库仓库：</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
            ><span>{{ info?.T_depot_name! }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"> <span>入库日期：</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
            ><span>{{ info?.T_date! }}</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>入库明细：</span></el-col>
          <el-col :span="21">
            <el-table
              :data="tableData"
              style="width: 100%"
              border
              stripe
              :header-cell-style="{
                background: '#909399',
                height: '50px',
                color: '#fff'
              }"
            >
              <template v-for="item in columns" :key="item.prop">
                <el-table-column v-bind="item" v-if="item.fixed !== 'right'">
                  <template #default="{ row }" v-if="item.prop === item.name">
                    <span v-if="item.prop === 'T_product_relation_sn'">
                      <el-tag v-if="row.T_product_relation_sn === 1" effect="dark">是</el-tag>
                      <el-tag v-else type="success" effect="dark">否</el-tag>
                    </span>
                    <ImageCom v-if="item.prop === 'T_product_img'" :src="row.T_product_img" />
                    <el-tooltip
                      v-if="item.prop === 'T_product_model'"
                      effect="dark"
                      :content="row.T_product_model"
                      placement="bottom"
                    >
                      {{ row.T_product_model }}
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column v-bind="item" v-if="item.fixed === 'right'">
                  <template #default="{ row }">
                    <el-button
                      type="primary"
                      :disabled="!row.T_product_relation_sn"
                      @click="previewSn(row.T_device_list)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2"><span>备注：</span></el-col>
          <el-col :xs="11" :sm="9" :md="7" :lg="6" :xl="5"
            ><span>{{ info?.T_remark! }}</span></el-col
          >
        </el-row>
      </div>
      <el-divider />
      <div class="submit">
        <el-button type="primary" round @click="router.back()">返回</el-button>
      </div>
    </div>
    <Drawer ref="drawerSnRef" :handleClose="callbackSnDrawer" size="30%">
      <el-table
        :data="tableSnData"
        style="width: 100%; height: 99%"
        :header-cell-style="{
          background: '#dedfe0',
          height: '50px'
        }"
      >
        <template v-for="item in snColumns" :key="item">
          <el-table-column v-if="item.type === 'index'" v-bind="item" />
          <el-table-column v-if="item.prop" v-bind="item" />
        </template>
      </el-table>
    </Drawer>
  </div>
</template>

<style scoped lang="scss">
.contract-detail {
  height: 100%;
  font-weight: bold;
  color: var(--el-text-color-secondary);
  .info {
    height: 100%;
    padding: 20px;
    & .content {
      height: calc(100% - 72px - 25px - 40px);
      overflow-y: scroll;
      .el-row {
        margin-bottom: 16px;
      }
    }
    .submit {
      display: flex;
      justify-content: center;
    }
  }
}
</style>