fix bug
This commit is contained in:
@@ -60,6 +60,9 @@
|
||||
<template #parentCode="{ row }">
|
||||
<span>{{ row.category === '港口' ? '-' : row.parentCode }}</span>
|
||||
</template>
|
||||
<template #name-header>
|
||||
<span>港口/码头</span>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
@@ -71,7 +74,7 @@
|
||||
clearable
|
||||
filterable
|
||||
:disabled="isParentRegionLocked"
|
||||
placeholder="请选择国家"
|
||||
:placeholder="isParentRegionLocked ? '自动带出' : '请选择国家'"
|
||||
style="width: 100%"
|
||||
@change="handleCountryChange"
|
||||
>
|
||||
@@ -83,6 +86,32 @@
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #category-form>
|
||||
<el-radio-group v-model="form.category" @change="handleCategoryChange">
|
||||
<el-radio label="港口">港口</el-radio>
|
||||
<el-radio label="码头">码头</el-radio>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template #code-form>
|
||||
<el-input
|
||||
v-if="form.category !== '码头'"
|
||||
v-model="form.code"
|
||||
clearable
|
||||
maxlength="5"
|
||||
placeholder="请输入5位大写字母"
|
||||
@input="handleCodeChange"
|
||||
@blur="handleCodeChange(form.code)"
|
||||
/>
|
||||
<div v-else>
|
||||
<el-input
|
||||
v-model="form.terminalCode"
|
||||
clearable
|
||||
maxlength="24"
|
||||
placeholder="请输入码头标识"
|
||||
@input="handleTerminalCodeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
@@ -103,27 +132,72 @@
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #regionCode-form>
|
||||
<el-cascader
|
||||
:key="regionCascaderKey"
|
||||
v-model="form.regionCode"
|
||||
:props="regionProps"
|
||||
<template #cityCode-form>
|
||||
<el-select
|
||||
v-model="form.cityCode"
|
||||
clearable
|
||||
filterable
|
||||
:disabled="isRegionDisabled"
|
||||
:loading="cityLoading"
|
||||
:disabled="isCityDisabled"
|
||||
:placeholder="isParentRegionLocked ? '自动带出' : '请先选择国家'"
|
||||
style="width: 100%"
|
||||
@change="handleRegionChange"
|
||||
@change="handleCityChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cityOptions"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #districtCode-form>
|
||||
<el-select
|
||||
v-model="form.districtCode"
|
||||
clearable
|
||||
filterable
|
||||
:loading="districtLoading"
|
||||
:disabled="isDistrictDisabled"
|
||||
:placeholder="
|
||||
isParentRegionLocked ? '自动带出' : form.cityCode ? '请选择区县' : '请先选择城市'
|
||||
"
|
||||
style="width: 100%"
|
||||
@change="handleDistrictChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in districtOptions"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #longitude-form>
|
||||
<el-input
|
||||
v-model="form.longitude"
|
||||
clearable
|
||||
placeholder="请输入经度"
|
||||
@input="handleCoordinateInput('longitude', $event)"
|
||||
/>
|
||||
</template>
|
||||
<template #latitude-form>
|
||||
<el-input
|
||||
v-model="form.latitude"
|
||||
clearable
|
||||
placeholder="请输入纬度"
|
||||
@input="handleCoordinateInput('latitude', $event)"
|
||||
/>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<empty-pagination
|
||||
:page="page"
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"
|
||||
@load="onLoad(page, query)"
|
||||
/>
|
||||
|
||||
<el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form
|
||||
:option="excelOption"
|
||||
v-model="excelForm"
|
||||
:upload-before="uploadBefore"
|
||||
:upload-after="uploadAfter"
|
||||
>
|
||||
<avue-form :option="excelOption" v-model="excelForm">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
@@ -147,8 +221,10 @@ import { getLazyTree } from '@/api/base/region';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { openImportDialog } from '@/utils/import-excel';
|
||||
import { formatUpdateUserName } from '@/utils/audit';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getCoordinateValidationMessage, normalizeCoordinateInput } from '@/utils/coordinate';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
@@ -179,19 +255,17 @@ export default {
|
||||
callback();
|
||||
};
|
||||
const validateLongitude = (rule, value, callback) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
callback();
|
||||
} else if (Number(value) < -180 || Number(value) > 180) {
|
||||
callback(new Error('经度范围为 -180 到 180'));
|
||||
const message = getCoordinateValidationMessage(value, 'longitude');
|
||||
if (message) {
|
||||
callback(new Error(message));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validateLatitude = (rule, value, callback) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
callback();
|
||||
} else if (Number(value) < -90 || Number(value) > 90) {
|
||||
callback(new Error('纬度范围为 -90 到 90'));
|
||||
const message = getCoordinateValidationMessage(value, 'latitude');
|
||||
if (message) {
|
||||
callback(new Error(message));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
@@ -205,17 +279,12 @@ export default {
|
||||
excelForm: {},
|
||||
portOptions: [],
|
||||
countryOptions: [],
|
||||
regionCascaderKey: 0,
|
||||
regionNodeMap: {},
|
||||
regionNameMap: {},
|
||||
regionProps: {
|
||||
lazy: true,
|
||||
lazyLoad: this.loadRegionNode,
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
checkStrictly: false,
|
||||
emitPath: true,
|
||||
},
|
||||
cityOptions: [],
|
||||
cityLoading: false,
|
||||
cityOptionCache: {},
|
||||
districtOptions: [],
|
||||
districtLoading: false,
|
||||
districtOptionCache: {},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
@@ -227,10 +296,15 @@ export default {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 980,
|
||||
labelPosition: 'right',
|
||||
labelWidth: 'auto',
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchLabelWidth: 120,
|
||||
searchMenuSpan: 6,
|
||||
searchLabelWidth: 160,
|
||||
searchIcon: true,
|
||||
searchIndex: 8,
|
||||
searchMenuSpan: 24,
|
||||
searchMenuPosition: 'right',
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
@@ -242,31 +316,13 @@ export default {
|
||||
dialogClickModal: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
{
|
||||
label: '编码',
|
||||
prop: 'code',
|
||||
search: true,
|
||||
width: 140,
|
||||
placeholder: '港口如 CNSHG，码头如 CNSHG-CT1',
|
||||
rules: [
|
||||
{ required: true, message: '请输入编码', trigger: 'blur' },
|
||||
{ validator: validateCode, trigger: 'blur' },
|
||||
],
|
||||
change: ({ value }) => this.handleCodeChange(value),
|
||||
blur: ({ value }) => this.handleCodeChange(value),
|
||||
},
|
||||
{
|
||||
label: '港口/码头名称',
|
||||
prop: 'name',
|
||||
minWidth: 140,
|
||||
search: true,
|
||||
rules: [{ required: true, message: '请输入港口/码头名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
prop: 'category',
|
||||
type: 'select',
|
||||
search: true,
|
||||
formslot: true,
|
||||
span: 24,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '港口', value: '港口' },
|
||||
@@ -285,6 +341,8 @@ export default {
|
||||
},
|
||||
dicData: [],
|
||||
hide: true,
|
||||
span: 12,
|
||||
placeholder: '请选择',
|
||||
rules: [{ required: false, message: '请选择上级港口', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleParentChange(value),
|
||||
},
|
||||
@@ -301,50 +359,147 @@ export default {
|
||||
prop: 'parentCode',
|
||||
minWidth: 120,
|
||||
slot: true,
|
||||
disabled: true,
|
||||
span: 12,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
placeholder: '自动带出',
|
||||
rules: [{ required: false, message: '请选择上级港口', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '港口/码头名称',
|
||||
prop: 'name',
|
||||
minWidth: 140,
|
||||
search: true,
|
||||
span: 12,
|
||||
placeholder: '请输入',
|
||||
rules: [{ required: true, message: '请输入港口/码头名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '编码',
|
||||
prop: 'code',
|
||||
search: true,
|
||||
formslot: true,
|
||||
width: 140,
|
||||
span: 12,
|
||||
placeholder: '请输入编码',
|
||||
rules: [
|
||||
{ required: true, message: '请输入编码', trigger: 'blur' },
|
||||
{ validator: validateCode, trigger: 'blur' },
|
||||
],
|
||||
change: ({ value }) => this.handleCodeChange(value),
|
||||
blur: ({ value }) => this.handleCodeChange(value),
|
||||
},
|
||||
{
|
||||
label: '国家',
|
||||
prop: 'country',
|
||||
type: 'select',
|
||||
search: true,
|
||||
formslot: true,
|
||||
filterable: true,
|
||||
dicData: [],
|
||||
span: 12,
|
||||
minWidth: 100,
|
||||
minWidth: 140,
|
||||
overHidden: false,
|
||||
placeholder: '自动带出',
|
||||
searchPlaceholder: '请选择 国家',
|
||||
change: ({ value }) => this.handleCountryNameChange(value),
|
||||
rules: [{ required: true, message: '请选择国家', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '城市',
|
||||
prop: 'regionCode',
|
||||
prop: 'cityCode',
|
||||
formslot: true,
|
||||
hide: true,
|
||||
span: 12,
|
||||
placeholder: '自动带出',
|
||||
rules: [{ required: true, message: '请选择所属城市', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '城市',
|
||||
prop: 'city',
|
||||
type: 'select',
|
||||
search: true,
|
||||
filterable: true,
|
||||
dicData: [],
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 100,
|
||||
change: ({ value }) => this.handleCityNameChange(value),
|
||||
},
|
||||
{
|
||||
label: '区县',
|
||||
prop: 'districtCode',
|
||||
type: 'select',
|
||||
formslot: true,
|
||||
hide: true,
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
dicData: [],
|
||||
span: 12,
|
||||
placeholder: '选择城市后再选择区县',
|
||||
rules: [{ required: true, message: '请选择区县', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '区县',
|
||||
prop: 'districtName',
|
||||
type: 'select',
|
||||
search: true,
|
||||
filterable: true,
|
||||
dicData: [],
|
||||
minWidth: 100,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '行政区划编号',
|
||||
prop: 'regionCode',
|
||||
minWidth: 140,
|
||||
span: 12,
|
||||
placeholder: '选择区县后自动填写',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
rules: [{ max: 32, message: '行政区划编码不能超过32字', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '详细地址',
|
||||
prop: 'detailAddress',
|
||||
type: 'textarea',
|
||||
minRows: 3,
|
||||
span: 24,
|
||||
minWidth: 220,
|
||||
overHidden: false,
|
||||
placeholder: '请输入',
|
||||
maxlength: 255,
|
||||
showWordLimit: true,
|
||||
rules: [{ max: 255, message: '详细地址不能超过255字', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '经度',
|
||||
prop: 'longitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
formslot: true,
|
||||
minWidth: 130,
|
||||
span: 12,
|
||||
placeholder: '请输入',
|
||||
overHidden: false,
|
||||
rules: [{ validator: validateLongitude, trigger: 'blur' }],
|
||||
rules: [
|
||||
{ required: true, message: '请输入经度', trigger: 'blur' },
|
||||
{ validator: validateLongitude, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '纬度',
|
||||
prop: 'latitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
formslot: true,
|
||||
minWidth: 130,
|
||||
span: 12,
|
||||
placeholder: '请输入',
|
||||
overHidden: false,
|
||||
rules: [{ validator: validateLatitude, trigger: 'blur' }],
|
||||
rules: [
|
||||
{ required: true, message: '请输入纬度', trigger: 'blur' },
|
||||
{ validator: validateLatitude, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '数据来源',
|
||||
@@ -353,6 +508,8 @@ export default {
|
||||
search: true,
|
||||
minWidth: 120,
|
||||
overHidden: false,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '初始化导入', value: '初始化导入' },
|
||||
@@ -369,6 +526,8 @@ export default {
|
||||
dataType: 'number',
|
||||
minWidth: 110,
|
||||
overHidden: false,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '启用', value: 1 },
|
||||
@@ -418,6 +577,7 @@ export default {
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
labelPosition: 'right',
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
@@ -459,11 +619,14 @@ export default {
|
||||
: String(authority || '').includes('admin');
|
||||
},
|
||||
isParentRegionLocked() {
|
||||
return this.form.category === '码头' && !!this.form.parentId;
|
||||
return this.form.category === '码头';
|
||||
},
|
||||
isRegionDisabled() {
|
||||
isCityDisabled() {
|
||||
return this.isParentRegionLocked || !this.form.countryCode;
|
||||
},
|
||||
isDistrictDisabled() {
|
||||
return this.isParentRegionLocked || !this.form.cityCode;
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
@@ -487,36 +650,52 @@ export default {
|
||||
return;
|
||||
}
|
||||
if (this.form.category === '码头') {
|
||||
this.form.code = code.replace(/[^A-Z0-9-]/g, '');
|
||||
const terminalCode = this.getTerminalCodePart(code).replace(/[^A-Z0-9]/g, '');
|
||||
if (this.form.parentCode) {
|
||||
this.handleTerminalCodeChange(terminalCode);
|
||||
} else {
|
||||
this.form.terminalCode = terminalCode;
|
||||
this.form.code = code.replace(/[^A-Z0-9-]/g, '');
|
||||
}
|
||||
}
|
||||
},
|
||||
loadRegionNode(node, resolve) {
|
||||
const parentCode = node.level === 0 ? this.form.countryCode : node.value;
|
||||
if (!parentCode) {
|
||||
resolve([]);
|
||||
return;
|
||||
handleTerminalCodeChange(value) {
|
||||
const terminalCode = String(value || '')
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z0-9]/g, '');
|
||||
this.form.terminalCode = terminalCode;
|
||||
this.form.code =
|
||||
this.form.parentCode && terminalCode ? `${this.form.parentCode}-${terminalCode}` : '';
|
||||
},
|
||||
getTerminalCodePart(code) {
|
||||
const value = String(code || '').toUpperCase();
|
||||
if (this.form.parentCode && value.startsWith(`${this.form.parentCode}-`)) {
|
||||
return value.slice(this.form.parentCode.length + 1);
|
||||
}
|
||||
getLazyTree(parentCode).then(res => {
|
||||
const regionList = res.data.data || [];
|
||||
const nodes = regionList.map(region => {
|
||||
this.regionNodeMap[region.id] = region;
|
||||
this.regionNameMap[region.title] = region.id;
|
||||
return {
|
||||
id: region.id,
|
||||
title: region.title,
|
||||
leaf: node.level >= 1,
|
||||
};
|
||||
});
|
||||
resolve(nodes);
|
||||
});
|
||||
return value.split('-').slice(1).join('-');
|
||||
},
|
||||
syncTerminalCode() {
|
||||
if (this.form.category !== '码头') return;
|
||||
this.form.terminalCode = this.getTerminalCodePart(this.form.code);
|
||||
this.handleTerminalCodeChange(this.form.terminalCode);
|
||||
},
|
||||
setColumnDisplay(prop, display) {
|
||||
const column = this.findColumn(this.option.column, prop);
|
||||
if (!column) return;
|
||||
column.display = display;
|
||||
column.addDisplay = display;
|
||||
column.editDisplay = display;
|
||||
column.viewDisplay = display;
|
||||
},
|
||||
loadCountryOptions() {
|
||||
return getLazyTree('0').then(res => {
|
||||
this.countryOptions = res.data.data || [];
|
||||
this.countryOptions.forEach(country => {
|
||||
this.regionNodeMap[country.id] = country;
|
||||
this.regionNameMap[country.title] = country.id;
|
||||
});
|
||||
this.countryOptions = (res.data.data || []).map(this.normalizeRegionOption);
|
||||
const countryColumn = this.findColumn(this.option.column, 'country');
|
||||
countryColumn.dicData = this.countryOptions.map(country => ({
|
||||
label: country.title,
|
||||
value: country.title,
|
||||
id: country.id,
|
||||
}));
|
||||
});
|
||||
},
|
||||
loadPortOptions() {
|
||||
@@ -525,22 +704,39 @@ export default {
|
||||
this.findColumn(this.option.column, 'parentId').dicData = this.portOptions;
|
||||
});
|
||||
},
|
||||
handleCategoryChange(value) {
|
||||
clearParentPortFields() {
|
||||
this.form.parentId = undefined;
|
||||
this.form.parentCode = '';
|
||||
this.form.parentName = '';
|
||||
this.form.countryCode = '';
|
||||
this.form.country = '';
|
||||
this.clearCityValue();
|
||||
},
|
||||
handleCategoryChange(value, reset = true) {
|
||||
const parentColumn = this.findColumn(this.option.column, 'parentId');
|
||||
parentColumn.rules[0].required = value === '码头';
|
||||
this.setColumnDisplay('parentId', value === '码头');
|
||||
if (value === '港口') {
|
||||
this.form.parentId = undefined;
|
||||
this.form.parentCode = '';
|
||||
this.form.parentName = '';
|
||||
this.form.terminalCode = '';
|
||||
this.form.code = reset ? '' : String(this.form.code || '').split('-')[0];
|
||||
} else if (reset) {
|
||||
this.clearParentPortFields();
|
||||
}
|
||||
this.handleCodeChange(this.form.code);
|
||||
},
|
||||
handleCountryChange(value) {
|
||||
const country = this.countryOptions.find(item => item.id === value);
|
||||
this.form.country = country ? country.title : '';
|
||||
this.form.regionCode = [];
|
||||
this.form.city = '';
|
||||
this.regionCascaderKey += 1;
|
||||
this.clearCityValue();
|
||||
this.loadCityOptions(value);
|
||||
},
|
||||
handleCountryNameChange(value) {
|
||||
const country = this.countryOptions.find(item => item.title === value);
|
||||
this.setDistrictOptions([]);
|
||||
this.loadCityOptions(country ? country.id : '');
|
||||
},
|
||||
syncCountryName(countryCode) {
|
||||
const country = this.countryOptions.find(item => item.id === countryCode);
|
||||
@@ -548,37 +744,177 @@ export default {
|
||||
this.form.country = country.title;
|
||||
}
|
||||
},
|
||||
normalizeRegionOption(region) {
|
||||
return {
|
||||
...region,
|
||||
id: region.id === undefined || region.id === null ? region.id : String(region.id),
|
||||
parentCode:
|
||||
region.parentCode === undefined || region.parentCode === null
|
||||
? region.parentCode
|
||||
: String(region.parentCode),
|
||||
};
|
||||
},
|
||||
setCityOptions(cityOptions) {
|
||||
this.cityOptions = cityOptions;
|
||||
const cityCodeColumn = this.findColumn(this.option.column, 'cityCode');
|
||||
if (cityCodeColumn) {
|
||||
cityCodeColumn.dicData = cityOptions;
|
||||
}
|
||||
const cityColumn = this.findColumn(this.option.column, 'city');
|
||||
if (cityColumn) {
|
||||
cityColumn.dicData = cityOptions.map(city => ({
|
||||
label: city.title,
|
||||
value: city.title,
|
||||
id: city.id,
|
||||
}));
|
||||
}
|
||||
},
|
||||
clearCityValue() {
|
||||
this.form.cityCode = undefined;
|
||||
this.form.city = '';
|
||||
this.clearDistrictValue();
|
||||
},
|
||||
clearDistrictValue() {
|
||||
this.form.districtCode = undefined;
|
||||
this.form.districtName = '';
|
||||
this.form.regionCode = '';
|
||||
},
|
||||
loadCityOptions(countryCode) {
|
||||
if (!countryCode) {
|
||||
this.setCityOptions([]);
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
if (this.cityOptionCache[countryCode]) {
|
||||
this.setCityOptions(this.cityOptionCache[countryCode]);
|
||||
return Promise.resolve(this.cityOptionCache[countryCode]);
|
||||
}
|
||||
this.cityLoading = true;
|
||||
return getLazyTree(countryCode)
|
||||
.then(res => {
|
||||
const firstLevelList = (res.data.data || []).map(this.normalizeRegionOption);
|
||||
return Promise.all(
|
||||
firstLevelList.map(parent => {
|
||||
return getLazyTree(parent.id).then(childRes => {
|
||||
const childList = (childRes.data.data || []).map(this.normalizeRegionOption);
|
||||
return childList.map(child => ({
|
||||
...child,
|
||||
parentCode: child.parentCode || parent.id,
|
||||
}));
|
||||
});
|
||||
})
|
||||
).then(cityGroups => {
|
||||
const cityList = cityGroups.flat();
|
||||
const options = cityList.length > 0 ? cityList : firstLevelList;
|
||||
this.cityOptionCache[countryCode] = options;
|
||||
this.setCityOptions(options);
|
||||
return options;
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.cityLoading = false;
|
||||
});
|
||||
},
|
||||
resolveCityCode(cityName, regionCode) {
|
||||
const city = this.cityOptions.find(item => item.title === cityName || item.id === regionCode);
|
||||
return city ? city.id : '';
|
||||
},
|
||||
setDistrictOptions(districtOptions) {
|
||||
this.districtOptions = districtOptions;
|
||||
const districtCodeColumn = this.findColumn(this.option.column, 'districtCode');
|
||||
if (districtCodeColumn) {
|
||||
districtCodeColumn.dicData = districtOptions;
|
||||
}
|
||||
const districtNameColumn = this.findColumn(this.option.column, 'districtName');
|
||||
if (districtNameColumn) {
|
||||
districtNameColumn.dicData = districtOptions.map(district => ({
|
||||
label: district.title,
|
||||
value: district.title,
|
||||
id: district.id,
|
||||
}));
|
||||
}
|
||||
},
|
||||
loadDistrictOptions(cityCode) {
|
||||
if (!cityCode) {
|
||||
this.setDistrictOptions([]);
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
if (this.districtOptionCache[cityCode]) {
|
||||
this.setDistrictOptions(this.districtOptionCache[cityCode]);
|
||||
return Promise.resolve(this.districtOptionCache[cityCode]);
|
||||
}
|
||||
this.districtLoading = true;
|
||||
return getLazyTree(cityCode)
|
||||
.then(res => {
|
||||
const options = (res.data.data || []).map(this.normalizeRegionOption);
|
||||
this.districtOptionCache[cityCode] = options;
|
||||
this.setDistrictOptions(options);
|
||||
return options;
|
||||
})
|
||||
.finally(() => {
|
||||
this.districtLoading = false;
|
||||
});
|
||||
},
|
||||
resolveDistrictCode(districtName, regionCode) {
|
||||
const district = this.districtOptions.find(
|
||||
item => item.id === regionCode || item.title === districtName
|
||||
);
|
||||
return district ? district.id : regionCode || '';
|
||||
},
|
||||
handleParentChange(value) {
|
||||
const parent = this.portOptions.find(item => item.id === value);
|
||||
if (!parent) return;
|
||||
const terminalCode = String(this.form.code || '')
|
||||
.split('-')
|
||||
.slice(1)
|
||||
.join('-');
|
||||
if (!parent) {
|
||||
this.clearParentPortFields();
|
||||
this.syncTerminalCode();
|
||||
return;
|
||||
}
|
||||
const terminalCode =
|
||||
this.form.terminalCode ||
|
||||
String(this.form.code || '')
|
||||
.split('-')
|
||||
.slice(1)
|
||||
.join('-');
|
||||
this.form.parentCode = parent.code;
|
||||
this.form.parentName = parent.name;
|
||||
if (this.form.category === '码头' && terminalCode) {
|
||||
this.form.code = `${parent.code}-${terminalCode}`;
|
||||
}
|
||||
this.form.terminalCode = terminalCode;
|
||||
this.handleTerminalCodeChange(terminalCode);
|
||||
this.form.country = parent.country;
|
||||
this.form.city = parent.city;
|
||||
this.form.districtCode = parent.districtCode;
|
||||
this.form.districtName = parent.districtName;
|
||||
this.form.regionCode = parent.regionCode;
|
||||
this.resolveCountryCode(parent.country)
|
||||
.then(countryCode => {
|
||||
this.form.countryCode = countryCode;
|
||||
this.syncCountryName(countryCode);
|
||||
this.regionCascaderKey += 1;
|
||||
return this.resolveRegionCode(parent.country, parent.city);
|
||||
return this.loadCityOptions(countryCode);
|
||||
})
|
||||
.then(regionCode => {
|
||||
this.form.regionCode = regionCode;
|
||||
.then(() => {
|
||||
this.form.cityCode = this.resolveCityCode(parent.city, parent.regionCode);
|
||||
return this.loadDistrictOptions(this.form.cityCode);
|
||||
})
|
||||
.then(() => {
|
||||
this.form.districtCode = this.resolveDistrictCode(parent.districtName, parent.regionCode);
|
||||
this.handleDistrictChange(this.form.districtCode);
|
||||
});
|
||||
},
|
||||
handleRegionChange(value) {
|
||||
const regionCode = Array.isArray(value) ? value : [];
|
||||
const provinceCode = regionCode[0];
|
||||
const cityCode = regionCode[1];
|
||||
const city = this.regionNodeMap[cityCode];
|
||||
handleCityChange(value) {
|
||||
const city = this.cityOptions.find(item => item.id === value);
|
||||
this.form.city = city ? city.title : '';
|
||||
this.clearDistrictValue();
|
||||
this.loadDistrictOptions(value);
|
||||
},
|
||||
handleCityNameChange(value) {
|
||||
const city = this.cityOptions.find(item => item.title === value);
|
||||
this.setDistrictOptions([]);
|
||||
this.loadDistrictOptions(city ? city.id : '');
|
||||
},
|
||||
handleDistrictChange(value) {
|
||||
const district = this.districtOptions.find(item => item.id === value);
|
||||
this.form.districtName = district ? district.title : '';
|
||||
this.form.regionCode = value || '';
|
||||
},
|
||||
handleCoordinateInput(prop, value) {
|
||||
this.form[prop] = normalizeCoordinateInput(value);
|
||||
},
|
||||
resolveCountryCode(country) {
|
||||
if (!country) {
|
||||
@@ -597,55 +933,26 @@ export default {
|
||||
return option ? option.id : DEFAULT_COUNTRY_CODE;
|
||||
});
|
||||
},
|
||||
resolveRegionCode(country, city) {
|
||||
if (!country || !city) {
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
const countryCode = this.form.countryCode || this.regionNameMap[country];
|
||||
if (!countryCode) {
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
return this.loadRegionList(countryCode).then(provinceList => {
|
||||
const province = provinceList.find(item => item.title === country || item.title === city);
|
||||
if (province) {
|
||||
return this.loadRegionList(province.id).then(cityList => {
|
||||
const cityNode = cityList.find(item => item.title === city);
|
||||
return cityNode ? [province.id, cityNode.id] : [province.id];
|
||||
});
|
||||
}
|
||||
return provinceList.reduce((promise, item) => {
|
||||
return promise.then(result => {
|
||||
if (result.length > 0) {
|
||||
return result;
|
||||
}
|
||||
return this.loadRegionList(item.id).then(cityList => {
|
||||
const cityNode = cityList.find(child => child.title === city);
|
||||
return cityNode ? [item.id, cityNode.id] : [];
|
||||
});
|
||||
});
|
||||
}, Promise.resolve([]));
|
||||
});
|
||||
},
|
||||
loadRegionList(parentCode) {
|
||||
return getLazyTree(parentCode).then(res => {
|
||||
const regionList = res.data.data || [];
|
||||
regionList.forEach(region => {
|
||||
this.regionNodeMap[region.id] = region;
|
||||
this.regionNameMap[region.title] = region.id;
|
||||
});
|
||||
return regionList;
|
||||
});
|
||||
},
|
||||
normalizeRow(row) {
|
||||
row.code = String(row.code || '').toUpperCase();
|
||||
if (row.category === '港口') {
|
||||
row.parentId = undefined;
|
||||
row.parentCode = undefined;
|
||||
row.parentName = undefined;
|
||||
const submitRow = { ...row };
|
||||
submitRow.code = String(submitRow.code || '').toUpperCase();
|
||||
submitRow.regionCode = String(submitRow.regionCode || '').trim();
|
||||
submitRow.districtCode = String(submitRow.districtCode || '').trim();
|
||||
submitRow.districtName = String(submitRow.districtName || '').trim();
|
||||
submitRow.detailAddress = String(submitRow.detailAddress || '').trim();
|
||||
submitRow.longitude = normalizeCoordinateInput(submitRow.longitude);
|
||||
submitRow.latitude = normalizeCoordinateInput(submitRow.latitude);
|
||||
if (submitRow.category === '港口') {
|
||||
submitRow.parentId = undefined;
|
||||
submitRow.parentCode = undefined;
|
||||
submitRow.parentName = undefined;
|
||||
}
|
||||
if (!row.dataSource) row.dataSource = '手工导入';
|
||||
if (!row.status) row.status = 1;
|
||||
return row;
|
||||
if (!submitRow.dataSource) submitRow.dataSource = '手工导入';
|
||||
if (!submitRow.status) submitRow.status = 1;
|
||||
delete submitRow.terminalCode;
|
||||
delete submitRow.cityCode;
|
||||
delete submitRow.countryCode;
|
||||
return submitRow;
|
||||
},
|
||||
validateRequiredFields(row) {
|
||||
const isBlank = value => value === undefined || value === null || String(value).trim() === '';
|
||||
@@ -665,8 +972,26 @@ export default {
|
||||
this.$message.warning('请选择上级港口');
|
||||
return false;
|
||||
}
|
||||
if (!Array.isArray(row.regionCode) || row.regionCode.length < 2) {
|
||||
this.$message.warning('请选择所属城市');
|
||||
if (isBlank(row.regionCode)) {
|
||||
this.$message.warning('请选择区县');
|
||||
return false;
|
||||
}
|
||||
if (isBlank(row.longitude)) {
|
||||
this.$message.warning('请输入经度');
|
||||
return false;
|
||||
}
|
||||
const longitudeMessage = getCoordinateValidationMessage(row.longitude, 'longitude');
|
||||
if (longitudeMessage) {
|
||||
this.$message.warning(longitudeMessage);
|
||||
return false;
|
||||
}
|
||||
if (isBlank(row.latitude)) {
|
||||
this.$message.warning('请输入纬度');
|
||||
return false;
|
||||
}
|
||||
const latitudeMessage = getCoordinateValidationMessage(row.latitude, 'latitude');
|
||||
if (latitudeMessage) {
|
||||
this.$message.warning(latitudeMessage);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
@@ -770,37 +1095,57 @@ export default {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
this.form.terminalCode = this.getTerminalCodePart(this.form.code);
|
||||
this.resolveCountryCode(this.form.country)
|
||||
.then(countryCode => {
|
||||
this.form.countryCode = countryCode;
|
||||
this.syncCountryName(countryCode);
|
||||
this.regionCascaderKey += 1;
|
||||
return this.resolveRegionCode(this.form.country, this.form.city);
|
||||
return this.loadCityOptions(countryCode);
|
||||
})
|
||||
.then(regionCode => {
|
||||
this.form.regionCode = regionCode;
|
||||
this.handleCategoryChange(this.form.category);
|
||||
.then(() => {
|
||||
this.form.cityCode = this.resolveCityCode(this.form.city, this.form.regionCode);
|
||||
return this.loadDistrictOptions(this.form.cityCode);
|
||||
})
|
||||
.then(() => {
|
||||
this.form.districtCode = this.resolveDistrictCode(
|
||||
this.form.districtName,
|
||||
this.form.regionCode
|
||||
);
|
||||
if (!this.form.regionCode) {
|
||||
this.handleDistrictChange(this.form.districtCode);
|
||||
}
|
||||
this.handleCategoryChange(this.form.category, false);
|
||||
this.syncTerminalCode();
|
||||
done();
|
||||
});
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
this.resolveCountryCode(this.form.country)
|
||||
.then(countryCode => {
|
||||
this.form.countryCode = countryCode;
|
||||
this.syncCountryName(countryCode);
|
||||
this.regionCascaderKey += 1;
|
||||
return this.resolveRegionCode(this.form.country, this.form.city);
|
||||
})
|
||||
.then(regionCode => {
|
||||
this.form.regionCode = regionCode;
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.resolveCountryCode(this.form.country)
|
||||
.then(countryCode => {
|
||||
this.form.countryCode = countryCode;
|
||||
this.syncCountryName(countryCode);
|
||||
return this.loadCityOptions(countryCode);
|
||||
})
|
||||
.then(() => {
|
||||
this.form.cityCode = this.resolveCityCode(this.form.city, this.form.regionCode);
|
||||
return this.loadDistrictOptions(this.form.cityCode);
|
||||
})
|
||||
.then(() => {
|
||||
this.form.districtCode = this.resolveDistrictCode(
|
||||
this.form.districtName,
|
||||
this.form.regionCode
|
||||
);
|
||||
if (!this.form.regionCode) {
|
||||
this.handleDistrictChange(this.form.districtCode);
|
||||
}
|
||||
done();
|
||||
});
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.setCityOptions([]);
|
||||
this.setDistrictOptions([]);
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
@@ -839,24 +1184,9 @@ export default {
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadBefore(file, done) {
|
||||
const fileName = file && file.name ? file.name.toLowerCase() : '';
|
||||
if (!/\.(xls|xlsx)$/.test(fileName)) {
|
||||
this.$message.error('请上传 .xls,.xlsx 标准格式文件');
|
||||
return false;
|
||||
}
|
||||
if (typeof done === 'function') {
|
||||
done();
|
||||
}
|
||||
return true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
this.loadPortOptions();
|
||||
done();
|
||||
openImportDialog(this, '港口码头主数据', () => {
|
||||
this.loadPortOptions();
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出港口码头主数据?', '提示', {
|
||||
@@ -894,13 +1224,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.port-terminal-page {
|
||||
:deep(.avue-crud__header),
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user