yjhtgl-web/src/views/comprehensiveGuarantee/MaterialReserveManagement/outboundDetails.vue

<template>
  <div class="common-dialog">
    <div class="common-dialog-content">
      <div class="common-dialog-title-box">
        <h3 class="common-dialog-title">查看详情</h3>
      </div>
      <div class="common-dialog-box">
        <el-form ref="formRef" :model="form" label-width="160px"  disabled class="custom-disabled" >
          <el-form-item label="仓库名称：" prop="warehouse_id">
            <el-input v-model="form.warehouse_id" style="width: 468px" />
          </el-form-item>
          <el-form-item label="出库单商品总体积(cm³)：" prop="total_volume">
            <el-input v-model="form.total_volume" style="width: 468px" />
          </el-form-item>
          <el-form-item label="出库单商品总重量(kg)：" prop="total_weight">
            <el-input v-model="form.total_weight" style="width: 468px" />
          </el-form-item>
          <el-form-item label="出库单发货总体积(cm³)：" prop="total_shipping_volume">
            <el-input v-model="form.total_shipping_volume" style="width: 468px" />
          </el-form-item>
          <el-form-item label="出库单发货总重量(kg)：" prop="total_shipping_weight">
            <el-input v-model="form.total_shipping_weight" style="width: 468px" />
          </el-form-item>
          <el-form-item label="出库单商品总数量：" prop="total_quantity">
            <el-input v-model="form.total_quantity" style="width: 468px" />
          </el-form-item>
          <el-form-item label="出库单发货时间：" prop="shipping_time">
            <el-input v-model="form.shipping_time" style="width: 468px" />
          </el-form-item>
          <el-form-item label="灾种名称：" prop="disaster_type">
            <el-input v-model="form.disaster_type" style="width: 468px" />
          </el-form-item>
          <el-form-item label="调运机构名称：" prop="dispatching_agency">
            <el-input v-model="form.dispatching_agency" style="width: 468px" />
          </el-form-item>
          <el-form-item label="发货人姓名：" prop="shipper_name">
            <el-input v-model="form.shipper_name" style="width: 468px" />
          </el-form-item>
          <el-form-item label="发货人手机：" prop="shipper_mobile">
            <el-input v-model="form.shipper_mobile" style="width: 468px" />
          </el-form-item>
          <el-form-item label="发货人地址：" prop="shipper_address">
            <el-input v-model="form.shipper_address" style="width: 468px" />
          </el-form-item>
          <el-form-item label="发货方备注：" prop="shipper_remark">
            <el-input v-model="form.shipper_remark" style="width: 468px" />
          </el-form-item>
          <el-form-item label="收货人姓名：" prop="receiver_name">
            <el-input v-model="form.receiver_name" style="width: 468px" />
          </el-form-item>
          <el-form-item label="收货人手机：" prop="receiver_mobile">
            <el-input v-model="form.receiver_mobile" style="width: 468px" />
          </el-form-item>
          <el-form-item label="收货人地址：" prop="receiver_address">
            <el-input v-model="form.receiver_address" style="width: 468px" />
          </el-form-item>
        </el-form>
        <div class="common-dialog-footer">
          <el-button type="primary" @click="closeDialog()">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMaterialWarehouseInfo } from '@/api/comprehensiveGuarantee/materialReserveManagement/godownManagement';
import { getOutboundOrderInfo } from '@/api/comprehensiveGuarantee/materialReserveManagement/OutboundManagement';
import { parseTime } from '@/utils/ruoyi';
const emits = defineEmits(['close']);

const closeDialog = () => {
  emits('close');
};
const props = defineProps({
  id: String
});

// 模拟的数据
const form = ref({
  outbound_number: '', // 出库单号
  warehouse_id: '', // 仓库名称
  total_volume: '', // 出库单商品总体积(cm³)
  total_weight: '', // 出库单商品总重量(kg)
  total_shipping_volume: '', // 出库单发货总体积(cm³)
  total_shipping_weight: '', // 出库单发货总重量(kg)
  total_quantity: '', // 出库单商品总数量
  shipping_time: '', // 出库单发货时间（注意：这里应该是日期格式，但el-input默认处理字符串）
  disaster_type: '', // 灾种名称
  dispatching_agency: '', // 调运机构名称
  shipper_name: '', // 发货人姓名
  shipper_mobile: '', // 发货人手机
  shipper_address: '', // 发货人地址
  shipper_remark: '', // 发货方备注
  receiver_name: '', // 收货人姓名
  receiver_mobile: '', // 收货人手机
  receiver_address: '' // 收货人地址
});

getOutboundOrderInfo(props.id).then((res) => {
  res.data.shipping_time = parseTime(res.data.shipping_time);
  form.value = res.data;
});
</script>

<style lang="scss" scoped>
.custom-disabled {
  :deep(.el-select__wrapper.is-disabled),
  :deep(.el-input__wrapper) {
    background-color: #ffffff !important;
  }
  :deep(.el-select__wrapper.is-disabled .el-select__selected-item),
  :deep(.el-input__inner) {
    color: rgba(0, 0, 0, 0.85) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.85) !important;
  }
}
</style>