-
OCR
-
-
上传图片,自动识别填写
-
支持JPG、PNG、PDF上传
+
+
+
+
+
+
+
+ 上传图片,自动识别填写
+ 支持JPG、PNG、PDF上传
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传图片,自动识别填写
+ 支持JPG、PNG、PDF上传
+
+
+
+
+ 上传文件
+
@@ -98,7 +137,7 @@
@load="onLoad(page, query)"
/>
-
+
点击下载
@@ -116,6 +155,7 @@ import { getList as getShipList } from '@/api/transportCapacity/transport-ship';
import { getDeptTree } from '@/api/system/dept';
import { exportBlob } from '@/api/common';
import { downloadXls } from '@/utils/util';
+import { openImportDialog } from '@/utils/import-excel';
import { getToken } from '@/utils/auth';
import { mapGetters } from 'vuex';
import { excelOption, option } from '@/option/vehicle/insurance-record';
@@ -130,6 +170,7 @@ export default {
loading: true,
excelBox: false,
excelForm: {},
+ isDetailLoading: false,
option,
excelOption,
page: {
@@ -159,6 +200,9 @@ export default {
editBtn: this.hasPermission('insurance_record_edit'),
};
},
+ vehicleNoPlaceholder() {
+ return this.form.vehicleType === '船舶' ? '输入船号模糊查询选择' : '输入车牌号模糊查询选择';
+ },
ids() {
const ids = [];
this.selectionList.forEach(ele => {
@@ -181,10 +225,26 @@ export default {
};
},
},
+ watch: {
+ 'form.vehicleType': {
+ handler(value, oldValue) {
+ this.updateVehicleTypeDisplays(value || '车辆', oldValue);
+ },
+ immediate: true,
+ },
+ },
methods: {
hasPermission(code) {
return this.isAdmin || this.validData(this.permission[code], false);
},
+ updateVehicleTypeDisplays(vehicleType, oldValue) {
+ const vehicleNoColumn = this.findColumn(this.option.column, 'vehicleNo');
+ vehicleNoColumn.placeholder =
+ vehicleType === '船舶' ? '输入船号模糊查询选择' : '输入车牌号模糊查询选择';
+ if (!this.isDetailLoading && oldValue && vehicleType !== oldValue && this.form.vehicleNo) {
+ this.form.vehicleNo = '';
+ }
+ },
initDeptTree() {
getDeptTree(this.userInfo.tenantId).then(res => {
const column = this.findColumn(this.option.column, 'createDept');
@@ -195,9 +255,7 @@ export default {
const vehicleType = this.form.vehicleType || '车辆';
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
const params =
- vehicleType === '船舶'
- ? { shipIdentifierNo: queryString }
- : { plateNo: queryString };
+ vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
request(1, 20, params)
.then(res => {
const records = res.data.data.records || [];
@@ -211,8 +269,12 @@ export default {
},
normalizeRow(row) {
const values = { ...row };
+ values.vehicleType = values.vehicleType || '车辆';
if (values.vehicleNo) {
- values.vehicleNo = values.vehicleNo.trim().toUpperCase();
+ values.vehicleNo =
+ values.vehicleType === '船舶'
+ ? values.vehicleNo.trim()
+ : values.vehicleNo.trim().toUpperCase();
}
if (values.policyNo) {
values.policyNo = values.policyNo.trim();
@@ -305,9 +367,17 @@ export default {
this.form.ocrTemplate = '紫金-机动车交强险';
}
if (['edit', 'view'].includes(type)) {
- getDetail(this.form.id).then(res => {
- this.form = res.data.data;
- });
+ this.isDetailLoading = true;
+ getDetail(this.form.id)
+ .then(res => {
+ this.form = {
+ ...res.data.data,
+ vehicleType: res.data.data.vehicleType || '车辆',
+ };
+ })
+ .finally(() => {
+ this.isDetailLoading = false;
+ });
}
done();
},
@@ -351,12 +421,7 @@ export default {
});
},
handleImport() {
- this.excelBox = true;
- },
- uploadAfter(res, done) {
- this.excelBox = false;
- this.onLoad(this.page);
- done();
+ openImportDialog(this, '保险记录');
},
handleExport() {
this.$confirm('是否导出保险记录数据?', '提示', {
@@ -365,7 +430,10 @@ export default {
type: 'warning',
}).then(() => {
NProgress.start();
- exportBlob('/blade-transport/insurance-record/export-insurance-record', this.buildExportParams())
+ exportBlob(
+ '/blade-transport/insurance-record/export-insurance-record',
+ this.buildExportParams()
+ )
.then(res => {
downloadXls(res.data, `保险记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
})
@@ -383,7 +451,9 @@ export default {
},
handleTemplate() {
exportBlob(
- `/blade-transport/insurance-record/export-template?${this.website.tokenHeader}=${getToken()}`
+ `/blade-transport/insurance-record/export-template?${
+ this.website.tokenHeader
+ }=${getToken()}`
).then(res => {
downloadXls(res.data, '保险记录模板.xlsx');
});
@@ -417,39 +487,153 @@ export default {
&__vehicle-input {
width: 100%;
}
+}
- &__upload {
- display: flex;
- align-items: center;
- gap: 18px;
- min-height: 88px;
- padding: 18px 24px;
- border: 1px dashed #8c8c8c;
- border-radius: 6px;
- }
+:global(.insurance-record-page__upload) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 116px;
+ padding: 26px 46px 26px 32px;
+ border: 2px dashed #8b8b8b;
+ border-radius: 12px;
+ background: #fff;
+}
- &__upload-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 44px;
- height: 44px;
- color: #606266;
- border: 2px solid #8c8c8c;
- border-radius: 6px;
- font-weight: 600;
- }
+:global(.insurance-record-page__upload-info) {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+}
- &__upload-text {
- display: flex;
- flex: 1;
+:global(.insurance-record-page__upload-icon) {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 56px;
+ height: 56px;
+ margin-right: 30px;
+ color: #707070;
+}
+
+:global(.insurance-record-page__upload-icon::before),
+:global(.insurance-record-page__upload-icon::after) {
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ content: '';
+}
+
+:global(.insurance-record-page__upload-icon::before) {
+ top: 0;
+ left: 0;
+ border-top: 4px solid currentColor;
+ border-left: 4px solid currentColor;
+ border-radius: 4px 0 0;
+}
+
+:global(.insurance-record-page__upload-icon::after) {
+ right: 0;
+ bottom: 0;
+ border-right: 4px solid currentColor;
+ border-bottom: 4px solid currentColor;
+ border-radius: 0 0 4px;
+}
+
+:global(.insurance-record-page__upload-card) {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 28px;
+ border: 4px solid currentColor;
+ border-radius: 4px;
+}
+
+:global(.insurance-record-page__upload-card::before),
+:global(.insurance-record-page__upload-card::after) {
+ position: absolute;
+ content: '';
+}
+
+:global(.insurance-record-page__upload-card::before) {
+ top: 7px;
+ left: 9px;
+ width: 8px;
+ height: 8px;
+ border: 3px solid currentColor;
+ border-radius: 2px;
+}
+
+:global(.insurance-record-page__upload-card::after) {
+ top: 8px;
+ right: 7px;
+ width: 8px;
+ height: 3px;
+ background: currentColor;
+ box-shadow: 0 8px 0 currentColor;
+}
+
+:global(.insurance-record-page__upload-card span) {
+ position: absolute;
+ right: 7px;
+ bottom: 5px;
+ width: 10px;
+ height: 3px;
+ background: currentColor;
+}
+
+:global(.insurance-record-page__upload-text) {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ color: #303133;
+ font-size: 20px;
+ line-height: 1.25;
+}
+
+:global(.insurance-record-page__upload-text strong) {
+ font-weight: 700;
+}
+
+:global(.insurance-record-page__upload-text span) {
+ color: #303133;
+ font-weight: 500;
+}
+
+:global(.insurance-record-page__upload-action) {
+ flex: 0 0 auto;
+ margin-left: 24px;
+}
+
+:global(.insurance-record-page__upload-action .el-upload) {
+ display: block;
+}
+
+:global(.insurance-record-page__upload-button) {
+ min-width: 156px;
+ height: 58px;
+ border-radius: 8px;
+ font-size: 20px;
+ font-weight: 500;
+}
+
+@media (max-width: 768px) {
+ :global(.insurance-record-page__upload) {
+ align-items: stretch;
flex-direction: column;
- gap: 6px;
- color: #303133;
+ gap: 18px;
+ padding: 22px;
+ }
- span {
- color: #606266;
- }
+ :global(.insurance-record-page__upload-action) {
+ margin-left: 0;
+ }
+
+ :global(.insurance-record-page__upload-button) {
+ width: 100%;
}
}
diff --git a/src/views/vehicle/maintenance-plan.vue b/src/views/vehicle/maintenance-plan.vue
index f25cc82..8c11f0c 100644
--- a/src/views/vehicle/maintenance-plan.vue
+++ b/src/views/vehicle/maintenance-plan.vue
@@ -59,6 +59,17 @@
{{ row.vehicleNo }}
+
+
+
{{ formatMileage(row.mileage, row.mileageUnit) }}
@@ -68,9 +79,27 @@
{{ formatAttachments(row.attachments) }}
+
+
+
+
+
+
-
+
点击下载
@@ -83,9 +112,12 @@