Merge remote-tracking branch 'origin/dev' into dev

src/views/comprehensiveGuarantee/MaterialReserveManagement/OutboundManagement.vue

@@ -1,10 +1,10 @@
 <!--出库管理-->
 <template>
   <div>
-    <div v-show="!addOutboundState.show" class="app-container">
+    <div v-show="!addOutboundState.show && !outboundDetailsState.show" class="app-container">
       <div>
         <transition name="fade">
-          <el-row :gutter="30">
+          <el-row :gutter="30" style="height: 50px">
             <el-col :span="10">
               <el-button type="primary" @click="handleAdd">新增出库</el-button>
             </el-col>
@@ -30,8 +30,8 @@
           <el-table-column label="收货人地址" align="center" prop="status" width="120" show-overflow-tooltip/>
           <el-table-column label="操作" align="center" fixed="right" width="88" class-name="small-padding fixed-width">
             <template #default="scope">
-              <el-button v-if="scope.row.status === '待填报'" type="text" class="common-btn-text-primary" @click="handleWrite(scope.row)">查看</el-button>
-              <el-button type="text" class="common-btn-text-primary" @click="handleView(scope.row)">明细</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleWrite">查看</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleView">明细</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -45,11 +45,13 @@
       </div>
     </div>
     <addOutbound v-if="addOutboundState.show" @close="handleCancel" />
+    <outboundDetails v-if="outboundDetailsState.show" @close="handleCancel" />
   </div>
 </template>
 <script setup lang="ts">
 import addOutbound from "./addOutbound.vue";
-import { ref,reactive, onMounted, onBeforeUnmount, watch } from "vue";
+import outboundDetails from "./outboundDetails.vue";
+import { ref,reactive, onMounted, onBeforeUnmount } from "vue";
 // 定义响应式变量
 const loading = ref(false);
 const maxHeight = ref(window.innerHeight * 0.8);
@@ -146,6 +148,9 @@ const tableData = [
 const addOutboundState = reactive({
   show: false, // 初始化show为false
 });
+const outboundDetailsState = reactive({
+  show: false, // 初始化show为false
+});
 
 const handleAdd = () => {
   addOutboundState.show = true;
@@ -160,12 +165,12 @@ const handleCancel = () => {
   addOutboundState.show = false;
 };
 
-const handleWrite = (row) => {
-  // 实现查看逻辑
+const handleWrite = () => {
+  outboundDetailsState.show=true;
 };
 
-const handleView = (row) => {
-  // 实现明细逻辑
+const handleView = () => {
+  outboundDetailsState.show=true;
 };
 
 const handlePaginationChange = (page: number) => {

src/views/comprehensiveGuarantee/MaterialReserveManagement/outboundDetails.vue

@@ -0,0 +1,98 @@
+<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="form" :model="formData" :rules="rules" label-width="120px">
+          <el-form-item label="出库单号：" prop="name">
+            <el-input v-model="formData.name" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="仓库名称：" prop="county">
+            <el-input v-model="formData.county" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="出库单商品总体积(cm³)：" prop="expert_type">
+            <el-input v-model="formData.expert_type" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="出库单商品总重量(kg)：" prop="position">
+            <el-input v-model="formData.position" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="出库单发货总体积(cm³)：" prop="unit">
+            <el-input v-model="formData.unit" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="出库单发货总重量(kg)：" prop="phone">
+            <el-input v-model="formData.phone" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="出库单商品总数量：" prop="address">
+            <el-input v-model="formData.address" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="出库单发货时间：" prop="status">
+            <el-input v-model="formData.status" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="灾种名称：" prop="accident_type">
+            <el-input v-model="formData.accident_type" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="调运机构名称：" prop="rescue_experience">
+            <el-input v-model="formData.rescue_experience" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="发货人姓名：" prop="birthdate">
+            <el-input v-model="formData.birthdate" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="发货人手机：" prop="work_date">
+            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="发货人地址：" prop="work_date">
+            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="发货方备注：" prop="work_date">
+            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="收货人姓名：" prop="work_date">
+            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="收货人手机：" prop="work_date">
+            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="收货人地址：" prop="work_date">
+            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
+          </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 { ref, watch } from 'vue';
+
+const emits = defineEmits(['close']);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+
+// 模拟的数据
+const formData = ref({
+  name: '张三',
+  county: '朝阳区',
+  expert_type: '安全工程',
+  position: '高级工程师',
+  unit: '北京市应急管理局',
+  phone: '13800138000',
+  address: '北京市朝阳区XX路XX号',
+  status: '在职',
+  accident_type: '火灾、爆炸',
+  rescue_experience: '参与过多次重大事故救援，经验丰富。',
+  birthdate: '1975-05-20',
+  work_date: '2000-01-01'
+});
+
+const closeDialog = () => {
+  emits('close');
+};
+</script>
+
+<style scoped></style>