wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

罐检管理

dev
277151821@qq.com 2024-05-13 17:55:54 +08:00
parent aacd9b0881
commit 46487fb9c1
8 changed files with 1577 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/request/mechanical_files.js
View File

@ -54,3 +54,16 @@ export const setBeidouEdit2 = (params) => post("/beidou/edit2", params); // 维
export const getTrailerListCompass = (params) =>
post("/beidou/vehicleList", params);
export const getTankTruckInspectionList = (params) => post("/tankTruckInspection/list", params); // 罐检项配置列表
export const getTankTruckInspectionListAll = (params) => post("/tankTruckInspection/tankTruckInspectionListAll", params); // 罐检项配置不分页列表
export const getTankTruckInspectionView = (params) => post("/tankTruckInspection/goEdit", params); // 罐检项配置查看
export const setTankTruckInspectionAdd = (params) => post("/tankTruckInspection/add", params); // 罐检项配置新增
export const setTankTruckInspectionEdit = (params) => post("/tankTruckInspection/edit", params); // 罐检项配置修改
export const setTankTruckInspectionDelete = (params) => post("/tankTruckInspection/delete", params); // 罐检项配置删除
export const getTankTruckInspectionRecordList = (params) => post("/tankTruckInspectionRecord/list", params); // 罐检项检查列表
export const getTankTruckInspectionRecordView = (params) => post("/tankTruckInspectionRecord/goEdit", params); // 罐检项检查查看
export const setTankTruckInspectionRecordAdd = (params) => post("/tankTruckInspectionRecord/add", params); // 罐检项检查新增
export const setTankTruckInspectionRecordEdit = (params) => post("/tankTruckInspectionRecord/edit", params); // 罐检项检查修改
export const setTankTruckInspectionRecordDelete = (params) => post("/tankTruckInspectionRecord/delete", params); // 罐检项检查删除

112
src/views/mechanical_files/tank_truck/tank_truck_inspection/components/add.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<el-dialog
v-model="visible"
:title="type === 'edit' ? '修改' : '新增'"
:before-close="fnClose"
width="600px"
>
<el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
<el-form-item label="检查部位" prop="INSPECTION_SITE">
<el-input
v-model="form.INSPECTION_SITE"
placeholder="请输入"
maxlength="100"
style="width: 300px"
></el-input>
</el-form-item>
<el-form-item label="规定状态" prop="REGULATORY_STATUS">
<el-input
v-model="form.REGULATORY_STATUS"
placeholder="请输入"
maxlength="100"
style="width: 300px"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="fnClose">取消</el-button>
<el-button type="primary" @click="fnSubmit">确定</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, toRaw } from "vue";
import { useVModels } from "@vueuse/core";
import { ElMessage } from "element-plus";
import {
setTankTruckInspectionAdd,
setTankTruckInspectionEdit,
} from "@/request/mechanical_files.js";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
form: {
type: {},
required: false,
default: false,
},
loading: {
type: Boolean,
required: true,
default: false,
},
options: {
type: Array,
required: true,
default: () => [],
},
type: {
type: String,
required: true,
default: "",
},
});
const emits = defineEmits(["update:visible", "update:form", "get-data"]);
const { visible, form } = useVModels(props, emits);
const rules = {
INSPECTION_SITE: [{ required: true, message: "请输入", trigger: "blur" },],
REGULATORY_STATUS: [{ required: true, message: "请输入", trigger: "blur" },],
};
const formRef = ref(null);
const fnClose = () => {
formRef.value.resetFields();
visible.value = false;
};
const fnSubmit = async () => {
await formRef.value.validate();
const rawFormValue = toRaw(form.value);
const formData = new FormData();
Object.keys(rawFormValue).forEach((key) => {
formData.append(key, rawFormValue[key]);
});
console.log(rawFormValue,formData)
// 执行添加或编辑操作
if (props.type === "add") {
await setTankTruckInspectionAdd(rawFormValue);
} else {
await setTankTruckInspectionEdit(rawFormValue);
}
// 操作成功提示
ElMessage.success("操作成功");
// 关闭表单对话框
fnClose();
// 触发更新数据的事件
emits("get-data");
};
</script>
<style scoped lang="scss"></style>

42
src/views/mechanical_files/tank_truck/tank_truck_inspection/components/view.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<el-dialog v-model="visible" title="查看" width="600px">
<el-descriptions :column="1" border>
<el-descriptions-item label="检查部位">
{{ info.INSPECTION_SITE }}
</el-descriptions-item>
<el-descriptions-item label="规定状态">
{{ info.REGULATORY_STATUS }}
</el-descriptions-item>
</el-descriptions>
<template #footer>
<el-button @click="visible = false">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { useVModel } from "@vueuse/core";
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
info: {
type: Object,
required: true,
default: () => ({}),
},
labelName: {
type: String,
required: true,
default: "",
},
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
</script>
<style scoped lang="scss"></style>

165
src/views/mechanical_files/tank_truck/tank_truck_inspection/index.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<div>
<el-card>
<el-form
:model="searchForm"
label-width="100px"
@submit.prevent="fnResetPagination"
>
<el-row>
<el-col :span="6">
<el-form-item label="检查部位" prop="INSPECTION_SITE">
<el-input
v-model="searchForm.INSPECTION_SITE"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="规定状态" prop="REGULATORY_STATUS">
<el-input
v-model="searchForm.REGULATORY_STATUS"
placeholder="请输入"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label-width="10px">
<el-button type="primary" native-type="submit">搜索</el-button>
<el-button native-type="reset" @click="fnResetPagination">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<layout-card>
<layout-table
ref="tableRef"
v-model:pagination="pagination"
:data="list"
row-key="MANAGEMENTAGREEMENT_ID"
@get-data="fnGetData"
>
<el-table-column label="序号" width="60">
<template #default="{ $index }">
{{ serialNumber(pagination, $index) }}
</template>
</el-table-column>
<el-table-column prop="INSPECTION_SITE" label="检查部位"/>
<el-table-column prop="REGULATORY_STATUS" label="规定状态"/>
<el-table-column label="操作" width="180">
<template #default="{ row }">
<el-button
type="primary"
text
link
@click="fnView(row.TANKTRUCKINSPECTION_ID)"
>
查看
</el-button>
<el-button
type="primary"
text
link
@click="fnAddOrEdit(row.TANKTRUCKINSPECTION_ID, 'edit')"
>
编辑
</el-button>
<el-button
text
link
type="danger"
@click="deleteItem(row.TANKTRUCKINSPECTION_ID)"
>
删除
</el-button>
</template>
</el-table-column>
<template #button>
<el-button type="primary" @click="fnAddOrEdit('', 'add')">
新增
</el-button>
</template>
</layout-table>
</layout-card>
<add
v-model:visible="data.addOrEditDialog.visible"
v-model:form="data.addOrEditDialog.form"
:type="data.addOrEditDialog.type"
:options="[]"
:loading="false"
@get-data="fnResetPagination"
/>
<view-info
v-model:visible="data.viewDialog.visible"
:info="data.viewDialog.info"
label-name="详情"
/>
</div>
</template>
<script setup>
import {serialNumber} from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import Add from "./components/add.vue";
import {nextTick, reactive} from "vue";
import ViewInfo from "./components/view.vue";
import {
setTankTruckInspectionDelete,
getTankTruckInspectionList,
getTankTruckInspectionView,
} from "@/request/mechanical_files.js";
import {ElMessage, ElMessageBox} from "element-plus";
const {list, pagination, searchForm, fnGetData, fnResetPagination} =
useListData(getTankTruckInspectionList);
const data = reactive({
addOrEditDialog: {
visible: false,
type: "",
form: {},
},
viewDialog: {
visible: false,
info: {},
},
});
const fnAddOrEdit = async (TANKTRUCKINSPECTION_ID = "", type = "add") => {
data.addOrEditDialog.visible = true;
data.addOrEditDialog.type = type;
if (type === "edit" && TANKTRUCKINSPECTION_ID) {
const resData = await getTankTruckInspectionView({
TANKTRUCKINSPECTION_ID,
});
data.addOrEditDialog.form = resData.pd
} else {
data.addOrEditDialog.form = {
INSPECTION_SITE:'',
REGULATORY_STATUS:'',
}; // 新增时清空表单
}
await nextTick();
};
// 删除事件
const deleteItem = async (value) => {
await ElMessageBox.confirm(`确定要删除吗？`, {
type: "warning",
});
await setTankTruckInspectionDelete({TANKTRUCKINSPECTION_ID: value});
ElMessage.success("删除成功");
fnGetData();
};
const fnView = async (TANKTRUCKINSPECTION_ID) => {
const resData = await getTankTruckInspectionView({
TANKTRUCKINSPECTION_ID,
});
data.viewDialog.info = resData.pd;
data.viewDialog.visible = true;
};
</script>
<style scoped></style>

450
src/views/mechanical_files/tank_truck_record/tank_truck_inspection_record/add.vue Normal file
View File

@ -0,0 +1,450 @@
<template>
<layout-card>
<el-form ref="formRef" :rules="rules" :model="form" label-width="140px">
<el-row :gutter="20">
<el-col :span="24">
<el-divider content-position="left">车辆选择</el-divider>
</el-col>
<el-col :span="12">
<el-form-item label="罐检车辆" prop="VEHICLE">
<el-select
v-model="form.VEHICLE"
@change="getBusInfo"
>
<el-option
v-for="item in data.vehicleList"
:key="item.ID"
:label="item.PLATE_NUMBER"
:value="item.ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-divider content-position="left">基本信息</el-divider>
</el-col>
<el-col :span="13">
<el-form-item label="行驶证照片" prop="DRIVING_LICENSE_IMG">
<layout-upload
v-model:file-list="data.busInfo.DRIVING_LICENSE_IMG"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
delete-to-server
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车牌号" prop="PLATE_NUMBER">
<el-input v-model="data.busInfo.PLATE_NUMBER" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车架号" prop="VIN">
<el-input v-model="data.busInfo.VIN" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车辆类型" prop="TRAILER_TYPE">
<el-input v-model="data.busInfo.TRAILER_TYPE" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车主/业户" prop="CAR_OWNERS ">
<el-input v-model="data.busInfo.CAR_OWNERS" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车主电话" prop="CAR_OWNERS_TEL">
<el-input v-model="data.busInfo.CAR_OWNERS_TEL" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="初登日期" prop="INITIAL_REGISTRATION_DATE">
<el-date-picker
v-model="data.busInfo.INITIAL_REGISTRATION_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属区域" prop="COMPANY_AREA">
<el-input v-model="data.busInfo.COMPANY_AREA" disabled/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-divider content-position="left">罐检信息</el-divider>
</el-col>
<el-col :span="24">
<layout-table :data="data.childList" :show-pagination="false">
<el-table-column type="index" label="序号" width="50"/>
<el-table-column prop="INSPECTION_SITE" label="检查部位"/>
<el-table-column prop="REGULATORY_STATUS" label="规定状态"/>
<el-table-column label="操作" width="300">
<template #default="{ row }">
<el-radio-group v-model="row.INSPECTION_STATUS">
<el-radio value="1">合格</el-radio>
<el-radio value="2">不合格</el-radio>
<el-radio value="3">不涉及</el-radio>
</el-radio-group>
</template>
</el-table-column>
</layout-table>
</el-col>
<el-col :span="12">
<el-form-item label="检查日期" prop="INSPECTION_DATE">
<el-date-picker
v-model="form.INSPECTION_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
@change="getDueDate"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查人" prop="INSPECTIONTOR">
<el-select v-model="form.INSPECTIONTOR" multiple filterable>
<el-option
v-for="item in data.userList"
:key="item.USER_ID"
:label="item.NAME"
:value="item.USER_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查周期（天）" prop="INSPECTION_CYCLE">
<el-input
v-model.number="form.INSPECTION_CYCLE"
type="number"
maxlength="50"
show-word-limit
@change="getDueDate"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="到期日期" prop="DUE_DATE">
<el-date-picker
v-model="form.DUE_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
@change="getRemiderDate"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提醒天数" prop="REMINDER_DAYS">
<el-select v-model="form.REMINDER_DAYS" @change="getRemiderDate">
<el-option
v-for="item in REMIND_DAYS"
:key="item.NAME"
:label="item.NAME"
:value="item.NUM"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提醒日期" prop="REMINDER_DATE">
<el-date-picker
v-model="form.REMINDER_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="提醒状态" prop="REMINDER_STATUS">
<el-switch
v-model="form.REMINDER_STATUS"
inline-prompt
active-text="开"
inactive-text="关"
active-value="1"
inactive-value="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查附件" prop="INSPECTION_ATTACHMENT">
<layout-upload
v-model:file-list="form.INSPECTION_ATTACHMENT"
accept=".pdf"
delete-to-server
:limit="99"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查图片" prop="INSPECTION_IMG">
<layout-upload
v-model:file-list="form.INSPECTION_IMG"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
:limit="99"
delete-to-server
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="NOTES">
<el-input
v-model="form.NOTES"
type="textarea"
:autosize="{ minRows: 3 }"
maxlength="250"
show-word-limit
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mt-10 tc">
<el-button type="primary" @click="fnSubmit">保存</el-button>
</div>
</layout-card>
</template>
<script setup>
import {getUserListAll} from "@/request/data_dictionary.js";
import LayoutUpload from "@/components/upload/index.vue";
import {ref, reactive} from "vue";
import {debounce} from "throttle-debounce";
import {
getTankTruckInspectionRecordView,
setTankTruckInspectionRecordAdd,
setTankTruckInspectionRecordEdit,
getTankTruckInspectionListAll,
getTrailerList,
} from "@/request/mechanical_files.js";
import {setUploadImg} from "@/request/api.js";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import useFormValidate from "@/assets/js/useFormValidate.js";
import {addingPrefixToFile, subtractDaysFromDate} from "@/assets/js/utils.js";
import {REMIND_DAYS} from "@/assets/js/constant.js";
const route = useRoute();
const router = useRouter();
const TANKTRUCKINSPECTIONRECORD_ID = route.query.TANKTRUCKINSPECTIONRECORD_ID;
const formRef = ref(null);
const form = ref({
VEHICLE: '',
INSPECTION_DATE: '',
INSPECTIONTOR: [],
DUE_DATE: '',
INSPECTION_CYCLE: '',
REMINDER_DAYS: '',
REMINDER_DATE: '',
REMINDER_STATUS: '',
INSPECTION_ATTACHMENT: [],
INSPECTION_IMG: [],
NOTES: ''
});
const data = reactive({
vehicleList: [],
busInfo: {
DRIVING_LICENSE_IMG: [],
PLATE_NUMBER: "",
VIN: "",
TRAILER_TYPE: "",
CAR_OWNERS: "",
CAR_OWNERS_TEL: "",
INITIAL_REGISTRATION_DATE: "",
COMPANY_AREA: "",
},
userList: [],
childList: []
});
const rules = {
VEHICLE: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTION_DATE: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTIONTOR: [{required: true, message: "请输入", trigger: "blur"}],
DUE_DATE: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTION_CYCLE: [{required: true, message: "请输入", trigger: "blur"}],
REMINDER_DAYS: [{required: true, message: "请输入", trigger: "blur"}],
REMINDER_DATE: [{required: true, message: "请输入", trigger: "blur"}],
REMINDER_STATUS: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTION_ATTACHMENT: [{required: true, message: "请添加附件", trigger: "blur"}],
INSPECTION_IMG: [{required: true, message: "请添加图片", trigger: "blur"}],
};
const getDueDate = () => {
if (form.value.INSPECTION_DATE && form.value.INSPECTION_CYCLE) {
form.value.DUE_DATE = subtractDaysFromDate(
form.value.INSPECTION_DATE,
form.value.INSPECTION_CYCLE,
true
);
if (form.value.REMINDER_DAYS) {
form.value.REMINDER_DATE = subtractDaysFromDate(
form.value.DUE_DATE,
form.value.REMINDER_DAYS
);
}
} else {
form.value.DUE_DATE = "";
form.value.REMINDER_DATE = "";
}
};
const getRemiderDate = (val) => {
if (val) {
if (form.value.DUE_DATE) {
// 计算提醒日期
const reminderDateStr = subtractDaysFromDate(form.value.DUE_DATE, val);
const reminderDate = new Date(reminderDateStr);
const today = new Date();
// 检查计算出的提醒日期是否早于当前时间
if (reminderDate < today) {
// 如果提醒日期早于当前日期，显示错误提示并重置提醒日期
ElMessage.error("输入的提醒天数错误，提醒日期不能早于当前日期。");
form.value.REMINDER_DATE = ""; // 重置提醒日期
} else {
// 如果提醒日期正常，更新表单值
form.value.REMINDER_DATE = reminderDateStr;
}
}
} else {
form.value.REMINDER_DATE = "";
}
};
const getUserList = async () => {
const resData = await getUserListAll();
data.userList = resData.userList;
};
getUserList()
const getVehicle = async (event) => {
const resData = await getTrailerList({TRAFFIC_TYPE: event});
data.vehicleList = resData.list;
form.value.VEHICLE = "";
data.busInfo.DRIVING_LICENSE_IMG = [];
data.busInfo.PLATE_NUMBER = "";
data.busInfo.VIN = "";
data.busInfo.TRAILER_TYPE = "";
data.busInfo.CAR_OWNERS = "";
data.busInfo.CAR_OWNERS_TEL = "";
data.busInfo.INITIAL_REGISTRATION_DATE = "";
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile([]);
};
getVehicle("2");
const fnBusChange = async (event) => {
const resData = await getTrailerList({ID: event});
data.busInfo = resData.list[0];
if (form.value.TELEPHONE === "") {
form.value.TELEPHONE = data.busInfo.CAR_OWNERS_TEL;
}
if (form.value.CAR_OWNERS === "") {
form.value.CAR_OWNERS = data.busInfo.CAR_OWNERS;
}
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile(
resData.drivingLicenseImgs
);
};
const getBusInfo = (val) => {
if (val) {
fnBusChange(val);
} else {
data.busInfo.DRIVING_LICENSE_IMG = [];
data.busInfo.PLATE_NUMBER = "";
data.busInfo.VIN = "";
data.busInfo.TRAILER_TYPE = "";
data.busInfo.CAR_OWNERS = "";
data.busInfo.CAR_OWNERS_TEL = "";
data.busInfo.INITIAL_REGISTRATION_DATE = "";
data.busInfo.COMPANY_AREA = "";
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile([]);
}
};
const fnGetData = async () => {
if (!TANKTRUCKINSPECTIONRECORD_ID) {
const tableData = await getTankTruckInspectionListAll()
const childList = []
tableData.list.forEach(item => {
const _obj = {
INSPECTION_SITE: item.INSPECTION_SITE,
REGULATORY_STATUS: item.REGULATORY_STATUS,
INSPECTION_STATUS: '1'
}
childList.push(_obj)
})
data.childList = childList
return;
}
const resData = await getTankTruckInspectionRecordView({TANKTRUCKINSPECTIONRECORD_ID});
resData.pd.INSPECTIONTOR = resData.pd.INSPECTIONTOR.split(",")
form.value = resData.pd;
data.childList = resData.detail
form.value.INSPECTION_ATTACHMENT = [];
form.value.INSPECTION_IMG = [];
fnBusChange(form.value.VEHICLE);
form.value.INSPECTION_ATTACHMENT = addingPrefixToFile(resData.inspectionAttachmentImgs);
form.value.INSPECTION_IMG = addingPrefixToFile(resData.inspectionImgs);
};
fnGetData();
const fnUploadImage = async (currentId, FFILE, TYPE) => {
const formData = new FormData();
formData.append("FOREIGN_KEY", currentId);
formData.append("TYPE", TYPE); // 这里的TYPE根据调用函数时传入的值决定
formData.append("FFILE", FFILE);
await setUploadImg(formData);
};
const fnSubmit = debounce(
1000,
async () => {
await useFormValidate(formRef);
const formData = {};
Object.keys(form.value).forEach((key) => {
if(key!=='INSPECTIONTOR'&&key!=='INSPECTION_ATTACHMENT'&&key!=='INSPECTION_IMG'){
formData[key] = form.value[key]
}
});
formData.INSPECTIONTOR = form.value.INSPECTIONTOR.join(',')
const DETAILS =[]
data.childList.forEach(item=>{
DETAILS.push({
INSPECTION_SITE: item.INSPECTION_SITE,
REGULATORY_STATUS: item.REGULATORY_STATUS,
INSPECTION_STATUS: item.INSPECTION_STATUS
})
})
formData.DETAILS = JSON.stringify(DETAILS)
const resData = !TANKTRUCKINSPECTIONRECORD_ID
? await setTankTruckInspectionRecordAdd({...formData})
: await setTankTruckInspectionRecordEdit({...formData, TANKTRUCKINSPECTIONRECORD_ID});
const currentId = resData.pd.TANKTRUCKINSPECTIONRECORD_ID;
// 附件上传
for (let i = 0; i < form.value.INSPECTION_ATTACHMENT.length; i++) {
if (form.value.INSPECTION_ATTACHMENT[i].raw) {
await fnUploadImage(currentId, form.value.INSPECTION_ATTACHMENT[i].raw, "130"); // 附件上传
}
}
// 图片上传
for (let i = 0; i < form.value.INSPECTION_IMG.length; i++) {
if (form.value.INSPECTION_IMG[i].raw) {
await fnUploadImage(currentId, form.value.INSPECTION_IMG[i].raw, "131"); // 图片上传
}
}
ElMessage.success("保存成功");
router.back();
},
{atBegin: true}
);
</script>
<style scoped lang="scss"></style>

448
src/views/mechanical_files/tank_truck_record/tank_truck_inspection_record/edit.vue Normal file
View File

@ -0,0 +1,448 @@
<template>
<layout-card>
<el-form ref="formRef" :rules="rules" :model="form" label-width="140px">
<el-row :gutter="20">
<el-col :span="24">
<el-divider content-position="left">车辆选择</el-divider>
</el-col>
<el-col :span="12">
<el-form-item label="罐检车辆" prop="VEHICLE">
<el-select
v-model="form.VEHICLE"
@change="getBusInfo"
>
<el-option
v-for="item in data.vehicleList"
:key="item.ID"
:label="item.PLATE_NUMBER"
:value="item.ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-divider content-position="left">基本信息</el-divider>
</el-col>
<el-col :span="13">
<el-form-item label="行驶证照片" prop="DRIVING_LICENSE_IMG">
<layout-upload
v-model:file-list="data.busInfo.DRIVING_LICENSE_IMG"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
delete-to-server
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车牌号" prop="PLATE_NUMBER">
<el-input v-model="data.busInfo.PLATE_NUMBER" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车架号" prop="VIN">
<el-input v-model="data.busInfo.VIN" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车辆类型" prop="TRAILER_TYPE">
<el-input v-model="data.busInfo.TRAILER_TYPE" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车主/业户" prop="CAR_OWNERS ">
<el-input v-model="data.busInfo.CAR_OWNERS" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="车主电话" prop="CAR_OWNERS_TEL">
<el-input v-model="data.busInfo.CAR_OWNERS_TEL" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="初登日期" prop="INITIAL_REGISTRATION_DATE">
<el-date-picker
v-model="data.busInfo.INITIAL_REGISTRATION_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属区域" prop="COMPANY_AREA">
<el-input v-model="data.busInfo.COMPANY_AREA" disabled/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-divider content-position="left">罐检信息</el-divider>
</el-col>
<el-col :span="24">
<layout-table :data="data.childList" :show-pagination="false">
<el-table-column type="index" label="序号" width="50"/>
<el-table-column prop="INSPECTION_SITE" label="检查部位"/>
<el-table-column prop="REGULATORY_STATUS" label="规定状态"/>
<el-table-column label="操作" width="300">
<template #default="{ row }">
<el-radio-group v-model="row.INSPECTION_STATUS">
<el-radio :value="1">合格</el-radio>
<el-radio :value="2">不合格</el-radio>
<el-radio :value="3">不涉及</el-radio>
</el-radio-group>
</template>
</el-table-column>
</layout-table>
</el-col>
<el-col :span="12">
<el-form-item label="检查日期" prop="INSPECTION_DATE">
<el-date-picker
v-model="form.INSPECTION_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
@change="getDueDate"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查人" prop="INSPECTIONTOR">
<el-select v-model="form.INSPECTIONTOR" multiple filterable>
<el-option
v-for="item in data.userList"
:key="item.USER_ID"
:label="item.NAME"
:value="item.USER_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查周期（天）" prop="INSPECTION_CYCLE">
<el-input
v-model.number="form.INSPECTION_CYCLE"
type="number"
maxlength="50"
show-word-limit
@change="getDueDate"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="到期日期" prop="DUE_DATE">
<el-date-picker
v-model="form.DUE_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
@change="getRemiderDate"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提醒天数" prop="REMINDER_DAYS">
<el-select v-model="form.REMINDER_DAYS" @change="getRemiderDate">
<el-option
v-for="item in REMIND_DAYS"
:key="item.NAME"
:label="item.NAME"
:value="item.NUM"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="提醒日期" prop="REMINDER_DATE">
<el-date-picker
v-model="form.REMINDER_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="提醒状态" prop="REMINDER_STATUS">
<el-switch
v-model="form.REMINDER_STATUS"
inline-prompt
active-text="开"
inactive-text="关"
active-value="1"
inactive-value="0"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查附件" prop="INSPECTION_ATTACHMENT">
<layout-upload
v-model:file-list="form.INSPECTION_ATTACHMENT"
accept=".pdf"
delete-to-server
:limit="99"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="检查图片" prop="INSPECTION_IMG">
<layout-upload
v-model:file-list="form.INSPECTION_IMG"
list-type="picture-card"
accept=".jpg,.jpeg,.png"
:limit="99"
delete-to-server
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="NOTES">
<el-input
v-model="form.NOTES"
type="textarea"
:autosize="{ minRows: 3 }"
maxlength="250"
show-word-limit
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="mt-10 tc">
<el-button type="primary" @click="fnSubmit">保存</el-button>
</div>
</layout-card>
</template>
<script setup>
import {getUserListAll} from "@/request/data_dictionary.js";
import LayoutUpload from "@/components/upload/index.vue";
import {ref, reactive} from "vue";
import {debounce} from "throttle-debounce";
import {
getTankTruckInspectionRecordView,
setTankTruckInspectionRecordAdd,
setTankTruckInspectionRecordEdit,
getTankTruckInspectionListAll,
getTrailerList,
} from "@/request/mechanical_files.js";
import {setUploadImg} from "@/request/api.js";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import useFormValidate from "@/assets/js/useFormValidate.js";
import {addingPrefixToFile, subtractDaysFromDate} from "@/assets/js/utils.js";
import {REMIND_DAYS} from "@/assets/js/constant.js";
const route = useRoute();
const router = useRouter();
const TANKTRUCKINSPECTIONRECORD_ID = route.query.TANKTRUCKINSPECTIONRECORD_ID;
const formRef = ref(null);
const form = ref({
VEHICLE: '',
INSPECTION_DATE: '',
INSPECTIONTOR: [],
DUE_DATE: '',
INSPECTION_CYCLE: '',
REMINDER_DAYS: '',
REMINDER_DATE: '',
REMINDER_STATUS: '',
INSPECTION_ATTACHMENT: [],
INSPECTION_IMG: [],
NOTES: ''
});
const data = reactive({
vehicleList: [],
busInfo: {
DRIVING_LICENSE_IMG: [],
PLATE_NUMBER: "",
VIN: "",
TRAILER_TYPE: "",
CAR_OWNERS: "",
CAR_OWNERS_TEL: "",
INITIAL_REGISTRATION_DATE: "",
COMPANY_AREA: "",
},
userList: [],
childList: []
});
const rules = {
VEHICLE: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTION_DATE: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTIONTOR: [{required: true, message: "请输入", trigger: "blur"}],
DUE_DATE: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTION_CYCLE: [{required: true, message: "请输入", trigger: "blur"}],
REMINDER_DAYS: [{required: true, message: "请输入", trigger: "blur"}],
REMINDER_DATE: [{required: true, message: "请输入", trigger: "blur"}],
REMINDER_STATUS: [{required: true, message: "请输入", trigger: "blur"}],
INSPECTION_ATTACHMENT: [{required: true, message: "请添加附件", trigger: "blur"}],
INSPECTION_IMG: [{required: true, message: "请添加图片", trigger: "blur"}],
};
const getDueDate = () => {
if (form.value.INSPECTION_DATE && form.value.INSPECTION_CYCLE) {
form.value.DUE_DATE = subtractDaysFromDate(
form.value.INSPECTION_DATE,
form.value.INSPECTION_CYCLE,
true
);
if (form.value.REMINDER_DAYS) {
form.value.REMINDER_DATE = subtractDaysFromDate(
form.value.DUE_DATE,
form.value.REMINDER_DAYS
);
}
} else {
form.value.DUE_DATE = "";
form.value.REMINDER_DATE = "";
}
};
const getRemiderDate = (val) => {
if (val) {
if (form.value.DUE_DATE) {
// 计算提醒日期
const reminderDateStr = subtractDaysFromDate(form.value.DUE_DATE, val);
const reminderDate = new Date(reminderDateStr);
const today = new Date();
// 检查计算出的提醒日期是否早于当前时间
if (reminderDate < today) {
// 如果提醒日期早于当前日期，显示错误提示并重置提醒日期
ElMessage.error("输入的提醒天数错误，提醒日期不能早于当前日期。");
form.value.REMINDER_DATE = ""; // 重置提醒日期
} else {
// 如果提醒日期正常，更新表单值
form.value.REMINDER_DATE = reminderDateStr;
}
}
} else {
form.value.REMINDER_DATE = "";
}
};
const getUserList = async () => {
const resData = await getUserListAll();
data.userList = resData.userList;
};
getUserList()
const getVehicle = async (event) => {
const resData = await getTrailerList({TRAFFIC_TYPE: event});
data.vehicleList = resData.list;
form.value.VEHICLE = "";
data.busInfo.DRIVING_LICENSE_IMG = [];
data.busInfo.PLATE_NUMBER = "";
data.busInfo.VIN = "";
data.busInfo.TRAILER_TYPE = "";
data.busInfo.CAR_OWNERS = "";
data.busInfo.CAR_OWNERS_TEL = "";
data.busInfo.INITIAL_REGISTRATION_DATE = "";
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile([]);
};
getVehicle("2");
const fnBusChange = async (event) => {
const resData = await getTrailerList({ID: event});
data.busInfo = resData.list[0];
if (form.value.TELEPHONE === "") {
form.value.TELEPHONE = data.busInfo.CAR_OWNERS_TEL;
}
if (form.value.CAR_OWNERS === "") {
form.value.CAR_OWNERS = data.busInfo.CAR_OWNERS;
}
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile(
resData.drivingLicenseImgs
);
};
const getBusInfo = (val) => {
if (val) {
fnBusChange(val);
} else {
data.busInfo.DRIVING_LICENSE_IMG = [];
data.busInfo.PLATE_NUMBER = "";
data.busInfo.VIN = "";
data.busInfo.TRAILER_TYPE = "";
data.busInfo.CAR_OWNERS = "";
data.busInfo.CAR_OWNERS_TEL = "";
data.busInfo.INITIAL_REGISTRATION_DATE = "";
data.busInfo.COMPANY_AREA = "";
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile([]);
}
};
const fnGetData = async () => {
if (!TANKTRUCKINSPECTIONRECORD_ID) {
const tableData = await getTankTruckInspectionListAll()
const childList = []
tableData.list.forEach(item => {
const _obj = {
INSPECTION_SITE: item.INSPECTION_SITE,
REGULATORY_STATUS: item.REGULATORY_STATUS,
INSPECTION_STATUS: 1
}
childList.push(_obj)
})
data.childList = childList
return;
}
const resData = await getTankTruckInspectionRecordView({TANKTRUCKINSPECTIONRECORD_ID});
form.value = resData.pd;
form.value.INSPECTION_ATTACHMENT = [];
form.value.INSPECTION_IMG = [];
fnBusChange(form.value.VEHICLE);
form.value.INSPECTION_ATTACHMENT = addingPrefixToFile(resData.inspectionAttachmentImgs);
form.value.INSPECTION_IMG = addingPrefixToFile(resData.inspectionImgs);
};
fnGetData();
const fnUploadImage = async (currentId, FFILE, TYPE) => {
const formData = new FormData();
formData.append("FOREIGN_KEY", currentId);
formData.append("TYPE", TYPE); // 这里的TYPE根据调用函数时传入的值决定
formData.append("FFILE", FFILE);
await setUploadImg(formData);
};
const fnSubmit = debounce(
1000,
async () => {
await useFormValidate(formRef);
const formData = {};
Object.keys(form.value).forEach((key) => {
if(key!=='INSPECTIONTOR'&&key!=='INSPECTION_ATTACHMENT'&&key!=='INSPECTION_IMG'){
formData[key] = form.value[key]
}
});
formData.INSPECTIONTOR = form.value.INSPECTIONTOR.join(',')
const DETAILS =[]
data.childList.forEach(item=>{
DETAILS.push({
INSPECTION_SITE: item.INSPECTION_SITE,
REGULATORY_STATUS: item.REGULATORY_STATUS,
INSPECTION_STATUS: item.INSPECTION_STATUS
})
})
formData.DETAILS = JSON.stringify(DETAILS)
const resData = !TANKTRUCKINSPECTIONRECORD_ID
? await setTankTruckInspectionRecordAdd({...formData})
: await setTankTruckInspectionRecordEdit({...formData, TANKTRUCKINSPECTIONRECORD_ID});
const currentId = resData.pd.TANKTRUCKINSPECTIONRECORD_ID;
// 附件上传
for (let i = 0; i < form.value.INSPECTION_ATTACHMENT.length; i++) {
if (form.value.INSPECTION_ATTACHMENT[i].raw) {
await fnUploadImage(currentId, form.value.INSPECTION_ATTACHMENT[i].raw, "130"); // 附件上传
}
}
// 图片上传
for (let i = 0; i < form.value.INSPECTION_IMG.length; i++) {
if (form.value.INSPECTION_IMG[i].raw) {
await fnUploadImage(currentId, form.value.INSPECTION_IMG[i].raw, "131"); // 图片上传
}
}
ElMessage.success("保存成功");
router.back();
},
{atBegin: true}
);
</script>
<style scoped lang="scss"></style>

182
src/views/mechanical_files/tank_truck_record/tank_truck_inspection_record/index.vue Normal file
View File

@ -0,0 +1,182 @@
<template>
<div>
<el-card>
<el-form
:model="searchForm"
label-width="100px"
@submit.prevent="fnResetPaginationTransfer"
>
<el-row>
<el-col :span="6">
<el-form-item label="检查车辆" prop="VEHICLE">
<el-select v-model="searchForm.VEHICLE">
<el-option
v-for="item in data.vehicleList"
:key="item.ID"
:label="item.PLATE_NUMBER"
:value="item.ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检查日期" prop="INSPECTION_DATE">
<el-date-picker
v-model="searchForm.INSPECTION_DATE"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
type="date"
placeholder="请选择检查日期"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检查人" prop="INSPECTIONTOR">
<el-select v-model="searchForm.INSPECTIONTOR" filterable>
<el-option
v-for="item in data.userList"
:key="item.USER_ID"
:label="item.NAME"
:value="item.USER_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label-width="10px">
<el-button type="primary" native-type="submit">搜索</el-button>
<el-button native-type="reset" @click="fnResetPaginationTransfer">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<layout-card>
<layout-table
ref="tableRef"
v-model:pagination="pagination"
:data="list"
row-key="TANKTRUCKINSPECTIONRECORD_ID"
@get-data="fnGetDataTransfer"
>
<el-table-column reserve-selection type="selection" width="55" />
<el-table-column label="序号" width="60">
<template #default="{ $index }">
{{ serialNumber(pagination, $index) }}
</template>
</el-table-column>
<el-table-column prop="VEHICLE_NAME" label="罐检车辆" />
<el-table-column prop="INSPECTION_DATE" label="检查日期" />
<el-table-column prop="INSPECTIONTOR_NAME" label="检查人" />
<el-table-column prop="INSPECTION_CYCLE" label="检查周期" />
<el-table-column prop="DUE_DATE" label="到期日期" />
<el-table-column prop="REMINDER_DATE" label="提醒日期" />
<el-table-column prop="REMINDER_DAYS" label="提醒天数" />
<el-table-column prop="NOTES" label="备注" />
<el-table-column label="操作" width="200">
<template #default="{ row }">
<el-button
type="primary"
text
link
@click="
router.push({
path: '/mechanical_files/tank_truck_record/tank_truck_inspection_record/view',
query: { TANKTRUCKINSPECTIONRECORD_ID: row.TANKTRUCKINSPECTIONRECORD_ID },
})
"
>
查看
</el-button>
<el-button
type="primary"
text
link
@click="
router.push({
path: '/mechanical_files/tank_truck_record/tank_truck_inspection_record/edit',
query: { TANKTRUCKINSPECTIONRECORD_ID: row.TANKTRUCKINSPECTIONRECORD_ID },
})
"
>
编辑
</el-button>
<el-button type="danger" text link @click="fnDelete(row.TANKTRUCKINSPECTIONRECORD_ID)">
删除
</el-button>
</template>
</el-table-column>
<template #button>
<el-button
type="primary"
@click="router.push({ path: '/mechanical_files/tank_truck_record/tank_truck_inspection_record/add' })"
>
新增
</el-button>
</template>
</layout-table>
</layout-card>
</div>
</template>
<script setup>
import { reactive} from "vue";
import {getUserListAll} from "@/request/data_dictionary.js";
import { useRouter } from "vue-router";
import { serialNumber } from "@/assets/js/utils";
import useListData from "@/assets/js/useListData.js";
import {
getTankTruckInspectionRecordList,
setTankTruckInspectionRecordDelete,
getTrailerList,
} from "@/request/mechanical_files.js";
import { debounce } from "throttle-debounce";
import { ElMessageBox, ElMessage } from "element-plus";
const router = useRouter();
const data = reactive({
vehicleList: [],
userList: [],
});
const getUserList = async () => {
const resData = await getUserListAll();
data.userList = resData.userList;
};
getUserList()
const getVehicle = async (event) => {
const resData = await getTrailerList({TRAFFIC_TYPE: event});
data.vehicleList = resData.list;
};
getVehicle("2");
const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
useListData(getTankTruckInspectionRecordList);
const fnGetDataTransfer = () => {
fnGetData({
VEHICLE: searchForm.value.VEHICLE,
INSPECTION_DATE: searchForm.value.INSPECTION_DATE,
INSPECTIONTOR: searchForm.value.INSPECTIONTOR,
});
};
const fnResetPaginationTransfer = () => {
console.log()
fnResetPagination({
VEHICLE: searchForm.value.VEHICLE,
INSPECTION_DATE: searchForm.value.INSPECTION_DATE,
INSPECTIONTOR: searchForm.value.INSPECTIONTOR,
});
};
const fnDelete = debounce(
1000,
async (TANKTRUCKINSPECTIONRECORD_ID) => {
await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
await setTankTruckInspectionRecordDelete({ TANKTRUCKINSPECTIONRECORD_ID });
ElMessage.success("删除成功");
fnResetPaginationTransfer();
},
{ atBegin: true }
);
</script>
<style scoped></style>

165
src/views/mechanical_files/tank_truck_record/tank_truck_inspection_record/view.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<layout-card>
<div id="printContainer">
<el-divider content-position="left"
>{{ data.busInfo.PLATE_NUMBER }}车辆档案</el-divider
>
<el-descriptions :column="2" border>
<el-descriptions-item label-class-name="width_200" label="车牌号">
{{ data.busInfo.PLATE_NUMBER }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车架号">
{{ data.busInfo.VIN }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车辆类型">
{{ data.busInfo.TRAILER_TYPE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="车主业户">
{{ data.busInfo.CAR_OWNERS }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="联系电话">
{{ data.busInfo.CAR_OWNERS_TEL }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="初登日期">
{{ data.busInfo.INITIAL_REGISTRATION_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="所属区域">
{{ data.busInfo.COMPANY_AREA }}
</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">罐检信息</el-divider>
<layout-table :data="data.childList" :show-pagination="false">
<el-table-column type="index" label="序号" width="50"/>
<el-table-column prop="INSPECTION_SITE" label="检查部位"/>
<el-table-column prop="REGULATORY_STATUS" label="规定状态"/>
<el-table-column label="操作" width="300">
<template #default="{ row }">
<span v-if="row.INSPECTION_STATUS==='1'">合格</span>
<span v-if="row.INSPECTION_STATUS==='2'">不合格</span>
<span v-if="row.INSPECTION_STATUS==='3'">不涉及</span>
</template>
</el-table-column>
</layout-table>
<el-descriptions :column="2" border>
<el-descriptions-item label-class-name="width_200" label="检查日期">
{{ info.INSPECTION_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="检查人">
{{ info.INSPECTIONTOR_NAME }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="到期日期">
{{ info.DUE_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="检查周期（天）">
{{ info.INSPECTION_CYCLE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="提醒天数">
{{ info.REMINDER_DAYS }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="提醒日期">
{{ info.REMINDER_DATE }}
</el-descriptions-item>
<el-descriptions-item label-class-name="width_200" label="提醒状态" span="2">
{{ info.REMINDER_STATUS === "1" ? "开启" : "关闭" }}
</el-descriptions-item>
<el-descriptions-item
label-class-name="width_200"
label="检查附件"
span="2"
>
<div v-for="item in info.INSPECTION_ATTACHMENT"
:key="item.FILEPATH">
<el-button
type="primary"
text
link
@click="useDownloadFile(item.FILEPATH)"
>
{{item.name}} 下载
</el-button>
</div>
</el-descriptions-item>
<el-descriptions-item
label-class-name="width_200"
label="检查图片"
span="2"
>
<img
v-for="item in info.INSPECTION_IMG"
:key="item.FILEPATH"
v-viewer
:src="item.url"
width="100"
height="100"
alt=""
class="ml-10"
/>
</el-descriptions-item>
<el-descriptions-item
label-class-name="width_200"
label="备注"
span="2"
>
{{ info.NOTES }}
</el-descriptions-item>
</el-descriptions>
</div>
<div class="mt-10 tc">
<el-button v-print="'#printContainer'" type="primary">打印</el-button>
</div>
<div v-html="PRINT_STYLE" />
</layout-card>
</template>
<script setup>
import useDownloadFile from "@/assets/js/useDownloadFile.js";
import { ref, reactive } from "vue";
import { getTankTruckInspectionRecordView, getTrailerList } from "@/request/mechanical_files.js";
import { useRoute } from "vue-router";
import { addingPrefixToFile } from "@/assets/js/utils.js";
const route = useRoute();
const TANKTRUCKINSPECTIONRECORD_ID = route.query.TANKTRUCKINSPECTIONRECORD_ID;
const info = ref({});
const data = reactive({
busInfo: {
NUM: "",
PLATE_NUMBER: "",
VIN: "",
TRAILER_TYPE: "",
VEHICLE_MODEL: "",
VEHICLE_BRAND: "",
CAR_OWNERS: "",
CAR_OWNERS_TEL: "",
INITIAL_REGISTRATION_DATE: "",
},
childList:[]
});
const fnBusChange = async (event) => {
const resData = await getTrailerList({ ID: event });
data.busInfo = resData.list[0];
data.busInfo.DRIVING_LICENSE_IMG = addingPrefixToFile(
resData.drivingLicenseImgs
);
};
const fnGetData = async () => {
if (!TANKTRUCKINSPECTIONRECORD_ID) return;
const resData = await getTankTruckInspectionRecordView({TANKTRUCKINSPECTIONRECORD_ID});
resData.pd.INSPECTIONTOR = resData.pd.INSPECTIONTOR.split(",")
info.value = resData.pd;
data.childList = resData.detail
info.value.INSPECTION_ATTACHMENT = [];
info.value.INSPECTION_IMG = [];
fnBusChange(info.value.VEHICLE);
info.value.INSPECTION_ATTACHMENT = addingPrefixToFile(resData.inspectionAttachmentImgs);
info.value.INSPECTION_IMG = addingPrefixToFile(resData.inspectionImgs);
};
fnGetData();
</script>
<style lang="scss" scoped>
.width_200 {
width: 200px;
}
</style>