|
@@ -2,49 +2,57 @@
|
|
|
<div class="common-dialog">
|
|
|
<div class="common-dialog-content">
|
|
|
<div class="common-dialog-title-box">
|
|
|
- <h3 class="common-dialog-title">查看详情</h3>
|
|
|
+ <i class="common-dialog-title-icon" />
|
|
|
+ <div>物资调度详情</div>
|
|
|
</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="专家类型:" prop="expert_type">
|
|
|
- <el-input v-model="formData.expert_type" style="width: 468px !important" disabled />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="职位:" prop="position">
|
|
|
- <el-input v-model="formData.position" style="width: 468px !important" disabled />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="单位:" prop="unit">
|
|
|
- <el-input v-model="formData.unit" style="width: 468px !important" disabled />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系电话:" 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>
|
|
|
- <div class="common-dialog-footer">
|
|
|
- <el-button type="primary" @click="closeDialog">返回</el-button>
|
|
|
+ <el-row :gutter="24" style="width: 100%">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text1">调度目的:</div>
|
|
|
+ <div v-show="!!detailData.dispatch_purpose" class="text2">{{ detailData.dispatch_purpose }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text1">调度日期:</div>
|
|
|
+ <div v-show="!!detailData.dispatch_date" class="text2">{{ detailData.dispatch_date }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="24" style="width: 100%">
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text1">申报单位:</div>
|
|
|
+ <div v-show="!!detailData.dispatch_unit_name" class="text2">{{ detailData.dispatch_unit_name }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="text-box">
|
|
|
+ <div class="text1">申请人:</div>
|
|
|
+ <div v-show="!!detailData.dispatch_person_name" class="text2">{{ detailData.dispatch_person_name }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-table :data="detailData.detail" border :height="height">
|
|
|
+ <el-table-column label="序号" width="80" align="center">
|
|
|
+ <template #default="{ $index }">
|
|
|
+ <span>{{ $index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="仓库" prop="warehouse_name" align="center" />
|
|
|
+ <el-table-column label="物资类型" prop="material_type" align="center" />
|
|
|
+ <el-table-column label="物资代码" prop="material_code" align="center" />
|
|
|
+ <el-table-column label="物资名称" prop="material_name" align="center" />
|
|
|
+ <el-table-column label="物资数量(件)" prop="material_quantity" align="center" />
|
|
|
+ <el-table-column label="物资用途" prop="material_purpose" align="center" />
|
|
|
+ </el-table>
|
|
|
+ <div class="common-dialog-footer" style="margin-top: 18px">
|
|
|
+ <el-row :span="24" :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleReturn">返回</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -52,32 +60,62 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, watch } from 'vue';
|
|
|
+import { getDispatchInfo } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDistribution';
|
|
|
|
|
|
-const emits = defineEmits(['close']);
|
|
|
-const props = defineProps<{
|
|
|
- eventId: string | number;
|
|
|
-}>();
|
|
|
+const props = defineProps({
|
|
|
+ id: String
|
|
|
+});
|
|
|
|
|
|
-// 模拟的数据
|
|
|
-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 { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const emits = defineEmits(['close']);
|
|
|
+let detailData = reactive({
|
|
|
+ dispatch_date: '',
|
|
|
+ dispatch_purpose: '',
|
|
|
+ dispatch_unit_name: '',
|
|
|
+ dispatch_person_name: '',
|
|
|
+ dispatch_status: '',
|
|
|
+ detail: []
|
|
|
});
|
|
|
|
|
|
-const closeDialog = () => {
|
|
|
+const handleReturn = () => {
|
|
|
emits('close');
|
|
|
};
|
|
|
+
|
|
|
+let height = ref(300);
|
|
|
+// 计算表格高度
|
|
|
+const calcHeight = () => {
|
|
|
+ const el = document.getElementsByClassName('common-dialog-content')[0];
|
|
|
+ height.value = el && el.clientHeight - 173 > 400 ? el.clientHeight - 173 : 300;
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ getDispatchInfo(props.id).then((res) => {
|
|
|
+ detailData.dispatch_date = res.data.dispatch_date;
|
|
|
+ detailData.dispatch_purpose = res.data.dispatch_purpose;
|
|
|
+ detailData.dispatch_unit_name = res.data.dispatch_unit_name;
|
|
|
+ detailData.dispatch_person_name = res.data.dispatch_person_name;
|
|
|
+ detailData.dispatch_status = res.data.dispatch_status;
|
|
|
+ detailData.detail = res.data.detail;
|
|
|
+ });
|
|
|
+ calcHeight();
|
|
|
+ window.addEventListener('resize', calcHeight);
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('resize', calcHeight);
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.text-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ .text1 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|