截止‘运力管理’模块
This commit is contained in:
665
src/views/base/airport-master.vue
Normal file
665
src/views/base/airport-master.vue
Normal file
@@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<basic-container class="airport-master-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('airport_master_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('airport_master_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('airport_master_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('airport_master_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('airport_master_edit')"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('airport_master_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog title="空港机场主数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form
|
||||
:option="excelOption"
|
||||
v-model="excelForm"
|
||||
:upload-before="uploadBefore"
|
||||
:upload-after="uploadAfter"
|
||||
>
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getDetail, submit, remove, changeStatus } from '@/api/base/airport-master';
|
||||
import { getLazyTree } from '@/api/base/region';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { formatUpdateUserName } from '@/utils/audit';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateIataCode = (rule, value, callback) => {
|
||||
if (!/^[A-Z]{3}$/.test(String(value || '').toUpperCase())) {
|
||||
callback(new Error('IATA编码为3位大写字母'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validateIcaoCode = (rule, value, callback) => {
|
||||
if (!/^[A-Z]{4}$/.test(String(value || '').toUpperCase())) {
|
||||
callback(new Error('ICAO代码为4位大写字母'));
|
||||
} else {
|
||||
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'));
|
||||
} 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'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
provinceOptions: [],
|
||||
cityOptions: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 980,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 70,
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
{
|
||||
label: '编码',
|
||||
prop: 'code',
|
||||
search: true,
|
||||
addDisabled: true,
|
||||
editDisabled: true,
|
||||
placeholder: '系统自动生成',
|
||||
searchPlaceholder: '请输入编码',
|
||||
},
|
||||
{
|
||||
label: 'IATA编码',
|
||||
prop: 'iataCode',
|
||||
minWidth: 120,
|
||||
maxlength: 3,
|
||||
rules: [
|
||||
{ required: true, message: '请输入IATA编码', trigger: 'blur' },
|
||||
{ validator: validateIataCode, trigger: 'blur' },
|
||||
],
|
||||
change: ({ value }) => this.handleIataChange(value),
|
||||
blur: ({ value }) => this.handleIataChange(value),
|
||||
},
|
||||
{
|
||||
label: 'ICAO代码',
|
||||
prop: 'icaoCode',
|
||||
minWidth: 100,
|
||||
maxlength: 4,
|
||||
rules: [
|
||||
{ required: true, message: '请输入ICAO代码', trigger: 'blur' },
|
||||
{ validator: validateIcaoCode, trigger: 'blur' },
|
||||
],
|
||||
change: ({ value }) => this.handleIcaoChange(value),
|
||||
blur: ({ value }) => this.handleIcaoChange(value),
|
||||
},
|
||||
{
|
||||
label: '机场标准名称',
|
||||
prop: 'name',
|
||||
minWidth: 180,
|
||||
search: true,
|
||||
rules: [{ required: true, message: '请输入机场标准名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '机场简称',
|
||||
prop: 'shortName',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
label: '所属省份',
|
||||
prop: 'provinceCode',
|
||||
type: 'select',
|
||||
minWidth: 120,
|
||||
hide: true,
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
dicData: [],
|
||||
filterable: true,
|
||||
rules: [{ required: true, message: '请选择省份', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleProvinceChange(value),
|
||||
},
|
||||
{
|
||||
label: '所属省份',
|
||||
prop: 'provinceName',
|
||||
minWidth: 140,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '所属城市',
|
||||
prop: 'cityCode',
|
||||
type: 'select',
|
||||
minWidth: 120,
|
||||
hide: true,
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
dicData: [],
|
||||
filterable: true,
|
||||
rules: [{ required: true, message: '请选择城市', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleCityChange(value),
|
||||
},
|
||||
{
|
||||
label: '所属城市',
|
||||
prop: 'cityName',
|
||||
minWidth: 140,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '经度',
|
||||
prop: 'longitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
rules: [{ validator: validateLongitude, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '纬度',
|
||||
prop: 'latitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
rules: [{ validator: validateLatitude, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '数据来源',
|
||||
prop: 'dataSource',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '初始导入', value: '初始导入' },
|
||||
{ label: '批量导入', value: '批量导入' },
|
||||
{ label: '手动录入', value: '手动录入' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '启停状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
type: 'textarea',
|
||||
minRows: 4,
|
||||
span: 24,
|
||||
hide: true,
|
||||
maxlength: 200,
|
||||
showWordLimit: true,
|
||||
rules: [{ max: 200, message: '备注不能超过200字', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '更新人',
|
||||
prop: 'updateUserName',
|
||||
formatter: formatUpdateUserName,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
accept: '.xls,.xlsx',
|
||||
action: '/blade-system/airport-master/import-airport-master',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('airport_master_add'),
|
||||
};
|
||||
},
|
||||
isAdmin() {
|
||||
const authority = this.userInfo && this.userInfo.authority;
|
||||
return Array.isArray(authority) ? authority.includes('admin') : String(authority || '').includes('admin');
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadProvinceOptions();
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission && this.permission[code], false);
|
||||
},
|
||||
findColumn(prop) {
|
||||
return this.option.column.find(item => item.prop === prop);
|
||||
},
|
||||
loadProvinceOptions() {
|
||||
getLazyTree('00').then(res => {
|
||||
this.provinceOptions = res.data.data;
|
||||
this.findColumn('provinceCode').dicData = this.provinceOptions;
|
||||
});
|
||||
},
|
||||
loadCityOptions(provinceCode) {
|
||||
if (!provinceCode) {
|
||||
this.cityOptions = [];
|
||||
this.findColumn('cityCode').dicData = [];
|
||||
return Promise.resolve();
|
||||
}
|
||||
return getLazyTree(provinceCode).then(res => {
|
||||
this.cityOptions = res.data.data;
|
||||
this.findColumn('cityCode').dicData = this.cityOptions;
|
||||
});
|
||||
},
|
||||
handleIataChange(value) {
|
||||
this.form.iataCode = String(value || '')
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z]/g, '')
|
||||
.slice(0, 3);
|
||||
this.form.code = this.form.iataCode ? `JC-${this.form.iataCode}` : '';
|
||||
},
|
||||
handleIcaoChange(value) {
|
||||
this.form.icaoCode = String(value || '')
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z]/g, '')
|
||||
.slice(0, 4);
|
||||
},
|
||||
handleProvinceChange(value) {
|
||||
const province = this.provinceOptions.find(item => item.id === value);
|
||||
this.form.provinceName = province ? province.title : '';
|
||||
this.form.cityCode = undefined;
|
||||
this.form.cityName = '';
|
||||
this.loadCityOptions(value);
|
||||
},
|
||||
handleCityChange(value) {
|
||||
const city = this.cityOptions.find(item => item.id === value);
|
||||
this.form.cityName = city ? city.title : '';
|
||||
},
|
||||
normalizeRow(row) {
|
||||
row.code = row.iataCode ? `JC-${row.iataCode}` : row.code;
|
||||
if (!row.dataSource) row.dataSource = '手动录入';
|
||||
if (!row.status) row.status = 1;
|
||||
return row;
|
||||
},
|
||||
validateUnique(row) {
|
||||
const rowId = String(row.id || '');
|
||||
const hasDuplicate = (params, prop) => {
|
||||
return getList(1, 10, params).then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
return records.some(item => item[prop] === row[prop] && String(item.id || '') !== rowId);
|
||||
});
|
||||
};
|
||||
return Promise.all([
|
||||
hasDuplicate({ iataCode: row.iataCode }, 'iataCode'),
|
||||
hasDuplicate({ icaoCode: row.icaoCode }, 'icaoCode'),
|
||||
]).then(([iataExists, icaoExists]) => {
|
||||
if (iataExists) {
|
||||
return Promise.reject(new Error('该IATA编码已存在'));
|
||||
}
|
||||
if (icaoExists) {
|
||||
return Promise.reject(new Error('该ICAO代码已存在'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
},
|
||||
handleSubmitError(error, loading) {
|
||||
const uniqueMessages = ['该IATA编码已存在', '该ICAO代码已存在'];
|
||||
if (uniqueMessages.includes(error.message)) {
|
||||
this.$message.warning(error.message);
|
||||
}
|
||||
window.console.log(error);
|
||||
loading();
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
this.validateUnique(submitRow)
|
||||
.then(() => submit(submitRow))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
})
|
||||
.catch(error => this.handleSubmitError(error, loading));
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
this.validateUnique(submitRow)
|
||||
.then(() => submit(submitRow))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
})
|
||||
.catch(error => this.handleSubmitError(error, loading));
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该条数据？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
this.loadCityOptions(this.form.provinceCode).then(() => done());
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.form.code = '';
|
||||
this.form.dataSource = '手动录入';
|
||||
this.form.status = 1;
|
||||
this.loadCityOptions(this.form.provinceCode).then(() => done());
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
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);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出空港机场主数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-system/airport-master/export-airport-master', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(
|
||||
res.data,
|
||||
`空港机场主数据${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-system/airport-master/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '空港机场主数据模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.airport-master-page {
|
||||
:deep(.avue-crud__header),
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
815
src/views/base/common-address.vue
Normal file
815
src/views/base/common-address.vue
Normal file
@@ -0,0 +1,815 @@
|
||||
<template>
|
||||
<basic-container class="common-address-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
v-if="hasPermission('common_address_add')"
|
||||
@click="$refs.crud.rowAdd()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('common_address_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('common_address_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
<el-switch
|
||||
v-if="canViewAllDept"
|
||||
v-model="allDept"
|
||||
class="common-address-page__scope"
|
||||
active-text="全部组织"
|
||||
inactive-text="当前组织"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="handleScopeChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #siteCodeDisplay="{ row }">
|
||||
<span>{{ row.addressType === '常规地址' ? '/' : row.siteCodeDisplay || row.siteCode }}</span>
|
||||
</template>
|
||||
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-view"
|
||||
v-if="hasPermission('common_address_view')"
|
||||
@click="$refs.crud.rowView(row, index)"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('common_address_edit') && !row.readonly"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-delete"
|
||||
v-if="hasPermission('common_address_delete') && !row.readonly"
|
||||
@click="rowDel(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<template #sourceId-form>
|
||||
<el-select
|
||||
v-model="form.sourceId"
|
||||
filterable
|
||||
remote
|
||||
clearable
|
||||
:remote-method="loadSourceOptions"
|
||||
:loading="sourceLoading"
|
||||
:disabled="dialogReadonly || form.addressType === '常规地址'"
|
||||
placeholder="请选择来源主数据"
|
||||
style="width: 100%"
|
||||
@change="handleSourceChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in sourceOptions"
|
||||
:key="item.sourceId"
|
||||
:label="`${item.addressName}（${item.siteCode}）`"
|
||||
:value="item.sourceId"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<template #detailAddress-form>
|
||||
<div class="common-address-page__address">
|
||||
<el-input
|
||||
v-model="form.detailAddress"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
maxlength="255"
|
||||
show-word-limit
|
||||
:disabled="dialogReadonly || form.addressType !== '常规地址'"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-location"
|
||||
plain
|
||||
:disabled="dialogReadonly || form.addressType !== '常规地址'"
|
||||
@click="handleMapPick"
|
||||
>
|
||||
地图选点
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog
|
||||
title="地图选点"
|
||||
append-to-body
|
||||
v-model="mapBox"
|
||||
width="920px"
|
||||
class="common-address-page__map-dialog"
|
||||
@opened="initTiandituMap"
|
||||
>
|
||||
<div class="common-address-page__map-toolbar">
|
||||
<el-input
|
||||
v-model="mapKeyword"
|
||||
clearable
|
||||
placeholder="输入地址关键词"
|
||||
@keyup.enter="searchMapKeyword"
|
||||
/>
|
||||
<el-button type="primary" icon="el-icon-search" :loading="mapLoading" @click="searchMapKeyword">
|
||||
搜索
|
||||
</el-button>
|
||||
</div>
|
||||
<div ref="tiandituMap" class="common-address-page__map"></div>
|
||||
<div class="common-address-page__map-info">
|
||||
<span>{{ mapStatus }}</span>
|
||||
<span v-if="mapSelected.longitude">
|
||||
经度：{{ mapSelected.longitude }}，纬度：{{ mapSelected.latitude }}
|
||||
</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="mapBox = false">取消</el-button>
|
||||
<el-button type="primary" :disabled="!mapSelected.longitude" @click="confirmMapPick">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDetail, getList, getSourceOptions, remove, submit } from '@/api/base/common-address';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { createOption } from '@/option/base/common-address';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
const TIANDITU_KEY = '71f234f251d4cb1feeb3c293a0f21709';
|
||||
let tiandituLoader;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
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'));
|
||||
} 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'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
allDept: 0,
|
||||
dialogReadonly: false,
|
||||
sourceLoading: false,
|
||||
sourceOptions: [],
|
||||
deptOptions: [],
|
||||
mapBox: false,
|
||||
mapLoading: false,
|
||||
mapKeyword: '',
|
||||
mapStatus: '可搜索地址或点击地图选点',
|
||||
mapSelected: {},
|
||||
tiandituMap: null,
|
||||
tiandituMarker: null,
|
||||
tiandituGeocoder: null,
|
||||
tiandituClickHandler: null,
|
||||
option: createOption({ validateLongitude, validateLatitude }),
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('common_address_add'),
|
||||
};
|
||||
},
|
||||
isAdmin() {
|
||||
const authority = this.userInfo && this.userInfo.authority;
|
||||
return Array.isArray(authority) ? authority.includes('admin') : String(authority || '').includes('admin');
|
||||
},
|
||||
canViewAllDept() {
|
||||
return this.isAdmin;
|
||||
},
|
||||
ids() {
|
||||
return this.selectionList.map(item => item.id).join(',');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission && this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
this.deptOptions = this.flattenDept(res.data.data || []);
|
||||
const deptColumn = this.findColumn(this.option.column, 'deptId');
|
||||
deptColumn.dicData = this.deptOptions;
|
||||
});
|
||||
},
|
||||
flattenDept(tree, level = 0) {
|
||||
const result = [];
|
||||
tree.forEach(item => {
|
||||
result.push({
|
||||
label: `${' '.repeat(level)}${item.title || item.deptName || item.name}`,
|
||||
value: item.id,
|
||||
rawLabel: item.title || item.deptName || item.name,
|
||||
});
|
||||
if (item.children && item.children.length) {
|
||||
result.push(...this.flattenDept(item.children, level + 1));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
handleScopeChange() {
|
||||
if (!this.canViewAllDept) {
|
||||
this.allDept = 0;
|
||||
}
|
||||
if (!this.allDept) {
|
||||
this.query.deptId = undefined;
|
||||
}
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
loadSourceOptions(keyword = '') {
|
||||
if (!this.form.addressType || this.form.addressType === '常规地址') {
|
||||
this.sourceOptions = [];
|
||||
return;
|
||||
}
|
||||
this.sourceLoading = true;
|
||||
getSourceOptions(this.form.addressType, keyword)
|
||||
.then(res => {
|
||||
this.sourceOptions = res.data.data || [];
|
||||
})
|
||||
.finally(() => {
|
||||
this.sourceLoading = false;
|
||||
});
|
||||
},
|
||||
handleSourceChange(value) {
|
||||
const source = this.sourceOptions.find(item => item.sourceId === value);
|
||||
if (!source) return;
|
||||
this.form.addressName = this.form.addressName || source.addressName;
|
||||
this.form.siteCode = source.siteCode;
|
||||
this.form.siteCodeDisplay = source.siteCode;
|
||||
this.form.detailAddress = source.detailAddress;
|
||||
this.form.regionName = source.regionName;
|
||||
this.form.longitude = source.longitude;
|
||||
this.form.latitude = source.latitude;
|
||||
},
|
||||
handleAddressTypeChange(value, reset = true) {
|
||||
const sourceColumn = this.findColumn(this.option.column, 'sourceId');
|
||||
sourceColumn.rules = value === '常规地址' ? [] : [{ required: true, message: '请选择来源主数据', trigger: 'change' }];
|
||||
const sourceDisabled = value === '常规地址';
|
||||
this.findColumn(this.option.column, 'longitude').disabled = !sourceDisabled;
|
||||
this.findColumn(this.option.column, 'latitude').disabled = !sourceDisabled;
|
||||
if (value === '常规地址') {
|
||||
if (reset) {
|
||||
this.form.sourceId = undefined;
|
||||
this.form.siteCode = '/';
|
||||
this.form.siteCodeDisplay = '/';
|
||||
this.sourceOptions = [];
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (reset) {
|
||||
this.form.sourceId = undefined;
|
||||
this.form.siteCode = '';
|
||||
this.form.siteCodeDisplay = '';
|
||||
}
|
||||
this.loadSourceOptions();
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const submitRow = {
|
||||
...row,
|
||||
addressName: String(row.addressName || '').trim(),
|
||||
addressType: String(row.addressType || '').trim(),
|
||||
detailAddress: String(row.detailAddress || '').trim(),
|
||||
regionName: String(row.regionName || '').trim(),
|
||||
contactName: String(row.contactName || '').trim(),
|
||||
contactPhone: String(row.contactPhone || '').trim(),
|
||||
remark: String(row.remark || '').trim(),
|
||||
};
|
||||
if (submitRow.addressType === '常规地址') {
|
||||
submitRow.siteCode = '/';
|
||||
submitRow.sourceId = undefined;
|
||||
}
|
||||
return submitRow;
|
||||
},
|
||||
validateRequiredFields(row) {
|
||||
if (!row.addressType) {
|
||||
this.$message.warning('请选择类型');
|
||||
return false;
|
||||
}
|
||||
if (!row.addressName) {
|
||||
this.$message.warning('请输入地址名称');
|
||||
return false;
|
||||
}
|
||||
if (!row.detailAddress) {
|
||||
this.$message.warning('请输入详细地址');
|
||||
return false;
|
||||
}
|
||||
if (row.addressType !== '常规地址' && !row.sourceId) {
|
||||
this.$message.warning('请选择来源主数据');
|
||||
return false;
|
||||
}
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注不能超过200个字');
|
||||
return false;
|
||||
}
|
||||
if (row.longitude !== undefined && row.longitude !== null && row.longitude !== '') {
|
||||
if (Number(row.longitude) < -180 || Number(row.longitude) > 180) {
|
||||
this.$message.warning('经度范围为 -180 到 180');
|
||||
return false;
|
||||
}
|
||||
row.longitude = Number(row.longitude).toFixed(6);
|
||||
}
|
||||
if (row.latitude !== undefined && row.latitude !== null && row.latitude !== '') {
|
||||
if (Number(row.latitude) < -90 || Number(row.latitude) > 90) {
|
||||
this.$message.warning('纬度范围为 -90 到 90');
|
||||
return false;
|
||||
}
|
||||
row.latitude = Number(row.latitude).toFixed(6);
|
||||
}
|
||||
return true;
|
||||
},
|
||||
stopSubmitLoading(loading) {
|
||||
if (typeof loading === 'function') {
|
||||
loading();
|
||||
}
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
if (!this.validateRequiredFields(submitRow)) {
|
||||
this.stopSubmitLoading(loading);
|
||||
return;
|
||||
}
|
||||
submit(submitRow).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
if (!this.validateRequiredFields(submitRow)) {
|
||||
this.stopSubmitLoading(loading);
|
||||
return;
|
||||
}
|
||||
submit(submitRow).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(res => {
|
||||
this.afterRemove(res.data.data);
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
const editableSelection = this.selectionList.filter(item => !item.readonly);
|
||||
if (!editableSelection.length) {
|
||||
this.$message.warning('所选数据均为只读组织数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(editableSelection.map(item => item.id).join(',')))
|
||||
.then(res => {
|
||||
this.afterRemove(res.data.data);
|
||||
});
|
||||
},
|
||||
afterRemove(result = {}) {
|
||||
this.onLoad(this.page);
|
||||
const successCount = result.successCount || 0;
|
||||
const skippedCount = result.skippedCount || 0;
|
||||
if (skippedCount) {
|
||||
this.$message.warning(`成功删除${successCount}条，${skippedCount}条因业务引用已跳过`);
|
||||
} else {
|
||||
this.$message({ type: 'success', message: '删除成功!' });
|
||||
}
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
this.dialogReadonly = type === 'view';
|
||||
const addressTypeColumn = this.findColumn(this.option.column, 'addressType');
|
||||
addressTypeColumn.change = ({ value }) => this.handleAddressTypeChange(value);
|
||||
if (type === 'add') {
|
||||
this.form.addressType = this.form.addressType || '常规地址';
|
||||
this.form.siteCode = '/';
|
||||
this.form.siteCodeDisplay = '/';
|
||||
this.handleAddressTypeChange(this.form.addressType);
|
||||
done();
|
||||
return;
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
this.handleAddressTypeChange(this.form.addressType, false);
|
||||
if (this.form.addressType !== '常规地址' && this.form.sourceId) {
|
||||
this.sourceOptions = [
|
||||
{
|
||||
sourceId: this.form.sourceId,
|
||||
addressName: this.form.addressName,
|
||||
siteCode: this.form.siteCode,
|
||||
detailAddress: this.form.detailAddress,
|
||||
regionName: this.form.regionName,
|
||||
longitude: this.form.longitude,
|
||||
latitude: this.form.latitude,
|
||||
},
|
||||
];
|
||||
}
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query, allDept: this.allDept })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出常用地址?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/common-address/export-common-address', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `常用地址${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
allDept: this.allDept,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleMapPick() {
|
||||
if (this.dialogReadonly || this.form.addressType !== '常规地址') {
|
||||
return;
|
||||
}
|
||||
this.mapKeyword = this.form.detailAddress || this.form.regionName || '';
|
||||
this.mapSelected = this.buildMapSelection({
|
||||
lng: this.form.longitude,
|
||||
lat: this.form.latitude,
|
||||
address: this.form.detailAddress,
|
||||
regionName: this.form.regionName,
|
||||
});
|
||||
this.mapStatus = this.mapSelected.longitude ? '已加载当前经纬度，可重新选点' : '可搜索地址或点击地图选点';
|
||||
this.mapBox = true;
|
||||
},
|
||||
loadTianditu() {
|
||||
if (window.T && window.T.Map) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
if (!tiandituLoader) {
|
||||
tiandituLoader = new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${TIANDITU_KEY}`;
|
||||
script.async = true;
|
||||
script.onload = resolve;
|
||||
script.onerror = () => reject(new Error('天地图组件加载失败'));
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
return tiandituLoader;
|
||||
},
|
||||
initTiandituMap() {
|
||||
this.loadTianditu()
|
||||
.then(() => {
|
||||
this.$nextTick(() => {
|
||||
if (!this.tiandituMap) {
|
||||
const center = this.toLngLat(
|
||||
this.mapSelected.longitude || 116.40769,
|
||||
this.mapSelected.latitude || 39.89945
|
||||
);
|
||||
this.tiandituMap = new window.T.Map(this.$refs.tiandituMap);
|
||||
this.tiandituMap.centerAndZoom(center, this.mapSelected.longitude ? 14 : 11);
|
||||
this.tiandituMap.addControl(new window.T.Control.Zoom());
|
||||
this.tiandituClickHandler = event => this.pickMapPoint(event.lnglat);
|
||||
this.tiandituMap.addEventListener('click', this.tiandituClickHandler);
|
||||
this.tiandituGeocoder = new window.T.Geocoder();
|
||||
} else {
|
||||
if (typeof this.tiandituMap.checkResize === 'function') {
|
||||
this.tiandituMap.checkResize();
|
||||
}
|
||||
}
|
||||
if (this.mapSelected.longitude) {
|
||||
this.renderMapMarker(this.toLngLat(this.mapSelected.longitude, this.mapSelected.latitude));
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('天地图组件加载失败，请稍后重试或重新打开弹窗');
|
||||
this.mapBox = false;
|
||||
});
|
||||
},
|
||||
searchMapKeyword() {
|
||||
const keyword = String(this.mapKeyword || '').trim();
|
||||
if (!keyword) {
|
||||
this.$message.warning('请输入地址关键词');
|
||||
return;
|
||||
}
|
||||
this.loadTianditu()
|
||||
.then(() => {
|
||||
this.mapLoading = true;
|
||||
if (!this.tiandituGeocoder) {
|
||||
this.tiandituGeocoder = new window.T.Geocoder();
|
||||
}
|
||||
this.tiandituGeocoder.getPoint(keyword, result => {
|
||||
this.mapLoading = false;
|
||||
const point = this.resolveMapPoint(result);
|
||||
if (!point) {
|
||||
this.mapStatus = '未找到匹配地址';
|
||||
this.$message.warning('地图搜索无匹配地址');
|
||||
return;
|
||||
}
|
||||
this.pickMapPoint(point, keyword);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('天地图组件加载失败，请稍后重试或重新打开弹窗');
|
||||
});
|
||||
},
|
||||
pickMapPoint(lnglat, keyword) {
|
||||
const longitude = this.getPointLng(lnglat);
|
||||
const latitude = this.getPointLat(lnglat);
|
||||
if (longitude === undefined || latitude === undefined) {
|
||||
this.$message.warning('选点坐标无效');
|
||||
return;
|
||||
}
|
||||
const point = this.toLngLat(longitude, latitude);
|
||||
this.renderMapMarker(point);
|
||||
this.mapSelected = this.buildMapSelection({ lng: longitude, lat: latitude, address: keyword });
|
||||
this.mapStatus = '正在反查地址...';
|
||||
if (!this.tiandituGeocoder) {
|
||||
this.tiandituGeocoder = new window.T.Geocoder();
|
||||
}
|
||||
this.tiandituGeocoder.getLocation(point, result => {
|
||||
const address = this.resolveMapAddress(result);
|
||||
this.mapSelected = {
|
||||
...this.mapSelected,
|
||||
detailAddress: address.detailAddress || this.mapSelected.detailAddress,
|
||||
regionName: address.regionName || this.mapSelected.regionName,
|
||||
regionCode: address.regionCode || this.mapSelected.regionCode,
|
||||
};
|
||||
this.mapKeyword = this.mapSelected.detailAddress || this.mapKeyword;
|
||||
this.mapStatus = this.mapSelected.detailAddress || '已选点，可确认回填';
|
||||
});
|
||||
},
|
||||
renderMapMarker(point) {
|
||||
if (!this.tiandituMap || !window.T) return;
|
||||
if (this.tiandituMarker) {
|
||||
this.tiandituMap.removeOverLay(this.tiandituMarker);
|
||||
}
|
||||
this.tiandituMarker = new window.T.Marker(point);
|
||||
this.tiandituMap.addOverLay(this.tiandituMarker);
|
||||
this.tiandituMap.panTo(point);
|
||||
},
|
||||
confirmMapPick() {
|
||||
if (!this.mapSelected.longitude) {
|
||||
this.$message.warning('请先搜索或点击地图完成选点');
|
||||
return;
|
||||
}
|
||||
this.form.detailAddress = this.mapSelected.detailAddress || this.form.detailAddress;
|
||||
this.form.regionName = this.mapSelected.regionName || this.form.regionName;
|
||||
this.form.regionCode = this.mapSelected.regionCode || this.form.regionCode;
|
||||
this.form.longitude = this.mapSelected.longitude;
|
||||
this.form.latitude = this.mapSelected.latitude;
|
||||
this.mapBox = false;
|
||||
},
|
||||
buildMapSelection({ lng, lat, address, regionName, regionCode }) {
|
||||
const longitude = lng === undefined || lng === null || lng === '' ? '' : Number(lng).toFixed(6);
|
||||
const latitude = lat === undefined || lat === null || lat === '' ? '' : Number(lat).toFixed(6);
|
||||
return {
|
||||
longitude,
|
||||
latitude,
|
||||
detailAddress: address || '',
|
||||
regionName: regionName || '',
|
||||
regionCode: regionCode || '',
|
||||
};
|
||||
},
|
||||
toLngLat(lng, lat) {
|
||||
return new window.T.LngLat(Number(lng), Number(lat));
|
||||
},
|
||||
getPointLng(point) {
|
||||
if (!point) return undefined;
|
||||
if (typeof point.getLng === 'function') return point.getLng();
|
||||
return point.lng ?? point.lon;
|
||||
},
|
||||
getPointLat(point) {
|
||||
if (!point) return undefined;
|
||||
if (typeof point.getLat === 'function') return point.getLat();
|
||||
return point.lat;
|
||||
},
|
||||
resolveMapPoint(result) {
|
||||
if (!result) return null;
|
||||
if (typeof result.getLocationPoint === 'function') return result.getLocationPoint();
|
||||
if (Array.isArray(result)) return result[0] || null;
|
||||
if (result.location) return result.location;
|
||||
if (result.lnglat) return result.lnglat;
|
||||
if (result.lonlat) return result.lonlat;
|
||||
if (result.getLng || result.lng || result.lon) return result;
|
||||
return null;
|
||||
},
|
||||
resolveMapAddress(result = {}) {
|
||||
const component =
|
||||
(typeof result.getAddressComponent === 'function' && result.getAddressComponent()) ||
|
||||
result.addressComponent ||
|
||||
{};
|
||||
const detailAddress =
|
||||
(typeof result.getAddress === 'function' && result.getAddress()) ||
|
||||
result.formatted_address ||
|
||||
result.address ||
|
||||
result.formattedAddress ||
|
||||
'';
|
||||
const regionName = [component.province, component.city, component.county || component.district]
|
||||
.filter(Boolean)
|
||||
.join('');
|
||||
return {
|
||||
detailAddress,
|
||||
regionName,
|
||||
regionCode: component.countyCode || component.adcode || component.cityCode || '',
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.common-address-page {
|
||||
&__scope {
|
||||
margin-left: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__address {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__map-toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.el-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__map {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
&__map-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 22px;
|
||||
margin-top: 10px;
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
580
src/views/base/currency.vue
Normal file
580
src/views/base/currency.vue
Normal file
@@ -0,0 +1,580 @@
|
||||
<template>
|
||||
<basic-container class="currency-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="permission.currency_import"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="permission.currency_template"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="permission.currency_export"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
</template>
|
||||
<template #codeForm>
|
||||
<el-autocomplete
|
||||
v-model="form.code"
|
||||
:fetch-suggestions="fetchCurrencyOptions"
|
||||
clearable
|
||||
placeholder="请输入币种编码查询选择"
|
||||
value-key="code"
|
||||
class="currency-page__input"
|
||||
@select="handleCurrencySelect"
|
||||
@change="handleCodeChange"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<span>{{ item.code }}</span>
|
||||
<span class="currency-page__option-name">{{ item.name }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="permission.currency_edit"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="permission.currency_status"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog title="币种汇率导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { changeStatus, getDetail, getList, submit } from '@/api/base/currency';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
const statusDic = [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
];
|
||||
|
||||
const sourceDic = [
|
||||
{ label: '手工录入', value: '手工录入' },
|
||||
{ label: '批量导入', value: '批量导入' },
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateCurrencyCode = (rule, value, callback) => {
|
||||
if (!/^[A-Z]{3}$/.test(value || '')) {
|
||||
callback(new Error('币种编码为3位大写字母'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validateExchangeRate = (rule, value, callback) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
callback(new Error('请输入汇率'));
|
||||
} else if (Number(value) <= 0) {
|
||||
callback(new Error('汇率必须大于0'));
|
||||
} else if (!/^\d+(\.\d{1,6})?$/.test(String(value))) {
|
||||
callback(new Error('汇率最多保留6位小数'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 860,
|
||||
labelPosition: 'top',
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 170,
|
||||
menuFixed: 'right',
|
||||
column: [
|
||||
{
|
||||
label: '币种编码',
|
||||
prop: 'code',
|
||||
search: true,
|
||||
formslot: true,
|
||||
minWidth: 120,
|
||||
maxlength: 3,
|
||||
rules: [
|
||||
{ required: true, message: '请选择币种编码', trigger: 'blur' },
|
||||
{ validator: validateCurrencyCode, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '币种名称',
|
||||
prop: 'name',
|
||||
minWidth: 150,
|
||||
search: true,
|
||||
disabled: true,
|
||||
rules: [{ required: true, message: '请选择币种编码带出币种名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '汇率',
|
||||
prop: 'exchangeRate',
|
||||
type: 'number',
|
||||
search: true,
|
||||
minWidth: 120,
|
||||
precision: 6,
|
||||
rules: [{ validator: validateExchangeRate, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '生效日期',
|
||||
prop: 'effectiveDate',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
minWidth: 130,
|
||||
rules: [{ required: true, message: '请选择生效日期', trigger: 'click' }],
|
||||
},
|
||||
{
|
||||
label: '生效日期',
|
||||
prop: 'effectiveDateRange',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
searchRange: true,
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '失效日期',
|
||||
prop: 'expiryDate',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
minWidth: 130,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '失效日期',
|
||||
prop: 'expiryDateRange',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
searchRange: true,
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: statusDic,
|
||||
value: 1,
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '来源',
|
||||
prop: 'dataSource',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: sourceDic,
|
||||
value: '手工录入',
|
||||
minWidth: 120,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
type: 'textarea',
|
||||
minRows: 4,
|
||||
span: 24,
|
||||
hide: true,
|
||||
maxlength: 200,
|
||||
showWordLimit: true,
|
||||
rules: [{ max: 200, message: '最多 200 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTimeRange',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
searchRange: true,
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
action: '/blade-system/currency/import-currency',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.validData(this.permission.currency_add, false),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
return this.selectionList.map(ele => ele.id).join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleCodeChange(value) {
|
||||
this.form.code = String(value || '').toUpperCase().replace(/[^A-Z]/g, '').slice(0, 3);
|
||||
const matched = this.data.find(item => item.code === this.form.code);
|
||||
if (matched) {
|
||||
this.form.name = matched.name;
|
||||
}
|
||||
},
|
||||
fetchCurrencyOptions(queryString, callback) {
|
||||
getList(1, 20, { code: String(queryString || '').toUpperCase() })
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
const exists = new Map();
|
||||
records.forEach(item => {
|
||||
if (!exists.has(item.code)) {
|
||||
exists.set(item.code, {
|
||||
code: item.code,
|
||||
value: item.code,
|
||||
name: item.name,
|
||||
});
|
||||
}
|
||||
});
|
||||
callback(Array.from(exists.values()));
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
handleCurrencySelect(item) {
|
||||
this.form.code = item.code;
|
||||
this.form.name = item.name;
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.code = String(values.code || '').toUpperCase();
|
||||
values.dataSource = values.dataSource || '手工录入';
|
||||
values.status = values.status || 1;
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注不能超过 200 字');
|
||||
return false;
|
||||
}
|
||||
if (Number(row.exchangeRate) <= 0) {
|
||||
this.$message.warning('汇率必须大于0');
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(\.\d{1,6})?$/.test(String(row.exchangeRate))) {
|
||||
this.$message.warning('汇率最多保留6位小数');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
submit(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
submit(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该条汇率？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.form = {
|
||||
status: 1,
|
||||
dataSource: '手工录入',
|
||||
};
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
buildQuery(params = {}) {
|
||||
const values = { ...params, ...this.query };
|
||||
const rangeMap = {
|
||||
effectiveDateRange: ['effectiveDateStart', 'effectiveDateEnd'],
|
||||
expiryDateRange: ['expiryDateStart', 'expiryDateEnd'],
|
||||
updateTimeRange: ['updateTimeStart', 'updateTimeEnd'],
|
||||
};
|
||||
Object.keys(rangeMap).forEach(key => {
|
||||
const range = values[key];
|
||||
if (range && range.length === 2) {
|
||||
values[rangeMap[key][0]] = range[0];
|
||||
values[rangeMap[key][1]] = range[1];
|
||||
}
|
||||
values[key] = null;
|
||||
});
|
||||
return values;
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, this.buildQuery(params))
|
||||
.then(res => {
|
||||
const result = res.data.data;
|
||||
this.page.total = result.total;
|
||||
this.data = result.records;
|
||||
if (result.records.length === 0 && result.total > 0 && page.currentPage > 1) {
|
||||
this.page.currentPage = page.currentPage - 1;
|
||||
this.onLoad(this.page, this.query);
|
||||
}
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出币种汇率数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-system/currency/export-currency', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `币种汇率${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.buildQuery(),
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(`/blade-system/currency/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
|
||||
downloadXls(res.data, '币种汇率模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.currency-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__option-name {
|
||||
float: right;
|
||||
color: #8492a6;
|
||||
font-size: 13px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
290
src/views/base/customer-type.vue
Normal file
290
src/views/base/customer-type.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="permission.customer_type_delete"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="permission.customer_type_edit"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="permission.customer_type_status"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getDetail, submit, remove, changeStatus } from '@/api/base/customer-type';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 680,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
{
|
||||
label: '中文名称',
|
||||
prop: 'name',
|
||||
minWidth: 140,
|
||||
search: true,
|
||||
maxlength: 50,
|
||||
rules: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '英文名称',
|
||||
prop: 'englishName',
|
||||
minWidth: 160,
|
||||
search: true,
|
||||
maxlength: 100,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
],
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.validData(this.permission.customer_type_add, false),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
normalizeRow(row) {
|
||||
row.name = String(row.name || '').trim();
|
||||
row.englishName = String(row.englishName || '').trim();
|
||||
if (!row.status) row.status = 1;
|
||||
return row;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
submit(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
submit(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该条数据？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.form.status = 1;
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.loading = false;
|
||||
this.selectionClear();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
290
src/views/base/fee-item.vue
Normal file
290
src/views/base/fee-item.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="permission.fee_item_delete"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="permission.fee_item_edit"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="permission.fee_item_status"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getDetail, submit, remove, changeStatus } from '@/api/base/fee-item';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 680,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
{
|
||||
label: '中文名称',
|
||||
prop: 'name',
|
||||
minWidth: 140,
|
||||
search: true,
|
||||
maxlength: 50,
|
||||
rules: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '英文名称',
|
||||
prop: 'englishName',
|
||||
minWidth: 160,
|
||||
search: true,
|
||||
maxlength: 100,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: [
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
],
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.validData(this.permission.fee_item_add, false),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
normalizeRow(row) {
|
||||
row.name = String(row.name || '').trim();
|
||||
row.englishName = String(row.englishName || '').trim();
|
||||
if (!row.status) row.status = 1;
|
||||
return row;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
submit(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
submit(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该条数据？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.form.status = 1;
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.loading = false;
|
||||
this.selectionClear();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
804
src/views/base/port-terminal.vue
Normal file
804
src/views/base/port-terminal.vue
Normal file
@@ -0,0 +1,804 @@
|
||||
<template>
|
||||
<basic-container class="port-terminal-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('port_terminal_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('port_terminal_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('port_terminal_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('port_terminal_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #parentName="{ row }">
|
||||
<span>{{ row.category === '港口' ? '-' : row.parentName }}</span>
|
||||
</template>
|
||||
<template #parentCode="{ row }">
|
||||
<span>{{ row.category === '港口' ? '-' : row.parentCode }}</span>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('port_terminal_edit')"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('port_terminal_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #regionCode-form>
|
||||
<el-cascader
|
||||
v-model="form.regionCode"
|
||||
:props="regionProps"
|
||||
clearable
|
||||
filterable
|
||||
:disabled="isParentRegionLocked"
|
||||
style="width: 100%"
|
||||
@change="handleRegionChange"
|
||||
/>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form
|
||||
:option="excelOption"
|
||||
v-model="excelForm"
|
||||
:upload-before="uploadBefore"
|
||||
:upload-after="uploadAfter"
|
||||
>
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getList,
|
||||
getDetail,
|
||||
submit,
|
||||
remove,
|
||||
changeStatus,
|
||||
getPortSelect,
|
||||
} from '@/api/base/port-terminal';
|
||||
import { getLazyTree } from '@/api/base/region';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { formatUpdateUserName } from '@/utils/audit';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateCode = (rule, value, callback) => {
|
||||
const code = String(value || '').toUpperCase();
|
||||
if (this.form.category === '港口') {
|
||||
if (!/^[A-Z]{5}$/.test(code)) {
|
||||
callback(new Error('港口编码为5位大写字母，如：CNSHG'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (this.form.category === '码头') {
|
||||
if (!/^[A-Z]{5}-[A-Z0-9]+$/.test(code)) {
|
||||
callback(new Error('码头编码格式为“港口编码-码头标识”，如：CNSHG-CT1'));
|
||||
} else if (this.form.parentCode && !code.startsWith(`${this.form.parentCode}-`)) {
|
||||
callback(new Error(`码头编码须以所选上级港口编码 ${this.form.parentCode}- 开头`));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
return;
|
||||
}
|
||||
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'));
|
||||
} 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'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
portOptions: [],
|
||||
regionNodeMap: {},
|
||||
regionNameMap: {},
|
||||
regionProps: {
|
||||
lazy: true,
|
||||
lazyLoad: this.loadRegionNode,
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
checkStrictly: false,
|
||||
emitPath: true,
|
||||
},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 980,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 70,
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
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,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '港口', value: '港口' },
|
||||
{ label: '码头', value: '码头' },
|
||||
],
|
||||
rules: [{ required: true, message: '请选择类型', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleCategoryChange(value),
|
||||
},
|
||||
{
|
||||
label: '上级港口',
|
||||
prop: 'parentId',
|
||||
type: 'select',
|
||||
props: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
dicData: [],
|
||||
hide: true,
|
||||
rules: [{ required: false, message: '请选择上级港口', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleParentChange(value),
|
||||
},
|
||||
{
|
||||
label: '上级港口',
|
||||
prop: 'parentName',
|
||||
minWidth: 120,
|
||||
slot: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '上级港口编码',
|
||||
prop: 'parentCode',
|
||||
minWidth: 120,
|
||||
slot: true,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
label: '城市',
|
||||
prop: 'regionCode',
|
||||
formslot: true,
|
||||
hide: true,
|
||||
span: 12,
|
||||
rules: [{ required: true, message: '请选择所属城市', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '国家',
|
||||
prop: 'country',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '城市',
|
||||
prop: 'city',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
label: '经度',
|
||||
prop: 'longitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
minWidth: 130,
|
||||
rules: [{ validator: validateLongitude, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '纬度',
|
||||
prop: 'latitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
minWidth: 130,
|
||||
rules: [{ validator: validateLatitude, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '数据来源',
|
||||
prop: 'dataSource',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '初始化导入', value: '初始化导入' },
|
||||
{ label: '批量导入', value: '批量导入' },
|
||||
{ label: '手工导入', value: '手工导入' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '启停状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
type: 'textarea',
|
||||
minRows: 4,
|
||||
span: 24,
|
||||
hide: true,
|
||||
maxlength: 200,
|
||||
showWordLimit: true,
|
||||
rules: [{ max: 200, message: '备注不能超过200个字', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '更新人',
|
||||
prop: 'updateUserName',
|
||||
formatter: formatUpdateUserName,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
accept: '.xls,.xlsx',
|
||||
action: '/blade-system/port-terminal/import-port-terminal',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('port_terminal_add'),
|
||||
};
|
||||
},
|
||||
isAdmin() {
|
||||
const authority = this.userInfo && this.userInfo.authority;
|
||||
return Array.isArray(authority) ? authority.includes('admin') : String(authority || '').includes('admin');
|
||||
},
|
||||
isParentRegionLocked() {
|
||||
return this.form.category === '码头' && !!this.form.parentId;
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadPortOptions();
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission && this.permission[code], false);
|
||||
},
|
||||
handleCodeChange(value) {
|
||||
const code = String(value || '').toUpperCase();
|
||||
if (this.form.category === '港口') {
|
||||
this.form.code = code.replace(/[^A-Z]/g, '').slice(0, 5);
|
||||
return;
|
||||
}
|
||||
if (this.form.category === '码头') {
|
||||
this.form.code = code.replace(/[^A-Z0-9-]/g, '');
|
||||
}
|
||||
},
|
||||
loadRegionNode(node, resolve) {
|
||||
const parentCode = node.level === 0 ? '00' : node.value;
|
||||
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);
|
||||
});
|
||||
},
|
||||
loadPortOptions() {
|
||||
getPortSelect().then(res => {
|
||||
this.portOptions = res.data.data;
|
||||
this.findColumn(this.option.column, 'parentId').dicData = this.portOptions;
|
||||
});
|
||||
},
|
||||
handleCategoryChange(value) {
|
||||
const parentColumn = this.findColumn(this.option.column, 'parentId');
|
||||
parentColumn.rules[0].required = value === '码头';
|
||||
if (value === '港口') {
|
||||
this.form.parentId = undefined;
|
||||
this.form.parentCode = '';
|
||||
this.form.parentName = '';
|
||||
}
|
||||
this.handleCodeChange(this.form.code);
|
||||
},
|
||||
handleParentChange(value) {
|
||||
const parent = this.portOptions.find(item => item.id === value);
|
||||
if (!parent) return;
|
||||
const 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.country = parent.country;
|
||||
this.form.city = parent.city;
|
||||
this.resolveRegionCode(parent.country, parent.city).then(regionCode => {
|
||||
this.form.regionCode = regionCode;
|
||||
});
|
||||
},
|
||||
handleRegionChange(value) {
|
||||
const regionCode = Array.isArray(value) ? value : [];
|
||||
const provinceCode = regionCode[0];
|
||||
const cityCode = regionCode[1];
|
||||
const province = this.regionNodeMap[provinceCode];
|
||||
const city = this.regionNodeMap[cityCode];
|
||||
this.form.country = province ? province.title : '';
|
||||
this.form.city = city ? city.title : '';
|
||||
},
|
||||
resolveRegionCode(country, city) {
|
||||
if (!country || !city) {
|
||||
return Promise.resolve([]);
|
||||
}
|
||||
const provinceCode = this.regionNameMap[country];
|
||||
if (provinceCode) {
|
||||
const cityCode = this.regionNameMap[city];
|
||||
if (cityCode) {
|
||||
return Promise.resolve([provinceCode, cityCode]);
|
||||
}
|
||||
return this.loadRegionList(provinceCode).then(cityList => {
|
||||
const cityNode = cityList.find(item => item.title === city);
|
||||
return cityNode ? [provinceCode, cityNode.id] : [provinceCode];
|
||||
});
|
||||
}
|
||||
return this.loadRegionList('00').then(provinceList => {
|
||||
const province = provinceList.find(item => item.title === country);
|
||||
if (!province) {
|
||||
return [];
|
||||
}
|
||||
return this.loadRegionList(province.id).then(cityList => {
|
||||
const cityNode = cityList.find(item => item.title === city);
|
||||
return cityNode ? [province.id, cityNode.id] : [province.id];
|
||||
});
|
||||
});
|
||||
},
|
||||
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;
|
||||
}
|
||||
if (!row.dataSource) row.dataSource = '手工导入';
|
||||
if (!row.status) row.status = 1;
|
||||
return row;
|
||||
},
|
||||
validateRequiredFields(row) {
|
||||
const isBlank = value => value === undefined || value === null || String(value).trim() === '';
|
||||
if (isBlank(row.code)) {
|
||||
this.$message.warning('请输入编码');
|
||||
return false;
|
||||
}
|
||||
if (isBlank(row.name)) {
|
||||
this.$message.warning('请输入港口/码头名称');
|
||||
return false;
|
||||
}
|
||||
if (isBlank(row.category)) {
|
||||
this.$message.warning('请选择类型');
|
||||
return false;
|
||||
}
|
||||
if (row.category === '码头' && isBlank(row.parentId)) {
|
||||
this.$message.warning('请选择上级港口');
|
||||
return false;
|
||||
}
|
||||
if (!Array.isArray(row.regionCode) || row.regionCode.length < 2) {
|
||||
this.$message.warning('请选择所属城市');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
stopSubmitLoading(loading) {
|
||||
if (typeof loading === 'function') {
|
||||
loading();
|
||||
}
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
if (!this.validateRequiredFields(submitRow)) {
|
||||
this.stopSubmitLoading(loading);
|
||||
return;
|
||||
}
|
||||
submit(submitRow).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.loadPortOptions();
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
if (!this.validateRequiredFields(submitRow)) {
|
||||
this.stopSubmitLoading(loading);
|
||||
return;
|
||||
}
|
||||
submit(submitRow).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.loadPortOptions();
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.loadPortOptions();
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.loadPortOptions();
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该条数据？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.loadPortOptions();
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form.category = this.form.category || '港口';
|
||||
this.form.dataSource = this.form.dataSource || '手工导入';
|
||||
this.form.status = this.form.status || 1;
|
||||
}
|
||||
this.handleCategoryChange(this.form.category || '港口');
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
this.resolveRegionCode(this.form.country, this.form.city).then(regionCode => {
|
||||
this.form.regionCode = regionCode;
|
||||
this.handleCategoryChange(this.form.category);
|
||||
done();
|
||||
});
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
this.resolveRegionCode(this.form.country, this.form.city).then(regionCode => {
|
||||
this.form.regionCode = regionCode;
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
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();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出港口码头主数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-system/port-terminal/export-port-terminal', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(
|
||||
res.data,
|
||||
`港口码头主数据${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-system/port-terminal/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '港口码头主数据模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
663
src/views/base/railway-station.vue
Normal file
663
src/views/base/railway-station.vue
Normal file
@@ -0,0 +1,663 @@
|
||||
<template>
|
||||
<basic-container class="railway-station-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('railway_station_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('railway_station_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('railway_station_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('railway_station_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row, index }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('railway_station_edit')"
|
||||
@click="$refs.crud.rowEdit(row, index)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('railway_station_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog title="铁路车站主数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form
|
||||
:option="excelOption"
|
||||
v-model="excelForm"
|
||||
:upload-before="uploadBefore"
|
||||
:upload-after="uploadAfter"
|
||||
>
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getDetail, submit, remove, changeStatus } from '@/api/base/railway-station';
|
||||
import { getLazyTree } from '@/api/base/region';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { formatUpdateUserName } from '@/utils/audit';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateTmisCode = (rule, value, callback) => {
|
||||
if (!/^\d{5}$/.test(value || '')) {
|
||||
callback(new Error('TMIS国标编码为5位数字'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validateTelegraphCode = (rule, value, callback) => {
|
||||
if (!/^[A-Z]{3}$/.test(String(value || '').toUpperCase())) {
|
||||
callback(new Error('电报码为3位大写字母'));
|
||||
} else {
|
||||
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'));
|
||||
} 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'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
provinceOptions: [],
|
||||
cityOptions: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 980,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
indexWidth: 70,
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 160,
|
||||
column: [
|
||||
{
|
||||
label: '编码',
|
||||
prop: 'code',
|
||||
search: true,
|
||||
addDisabled: true,
|
||||
editDisabled: true,
|
||||
placeholder: '系统自动生成',
|
||||
searchPlaceholder: '请输入编码',
|
||||
},
|
||||
{
|
||||
label: 'TMIS国标编码',
|
||||
prop: 'tmisCode',
|
||||
minWidth: 120,
|
||||
maxlength: 5,
|
||||
rules: [
|
||||
{ required: true, message: '请输入TMIS国标编码', trigger: 'blur' },
|
||||
{ validator: validateTmisCode, trigger: 'blur' },
|
||||
],
|
||||
change: ({ value }) => this.handleTmisChange(value),
|
||||
},
|
||||
{
|
||||
label: '电报码',
|
||||
prop: 'telegraphCode',
|
||||
minWidth: 100,
|
||||
maxlength: 3,
|
||||
rules: [
|
||||
{ required: true, message: '请输入电报码', trigger: 'blur' },
|
||||
{ validator: validateTelegraphCode, trigger: 'blur' },
|
||||
],
|
||||
change: ({ value }) => this.handleTelegraphChange(value),
|
||||
blur: ({ value }) => this.handleTelegraphChange(value),
|
||||
},
|
||||
{
|
||||
label: '车站名称',
|
||||
prop: 'name',
|
||||
minWidth: 120,
|
||||
search: true,
|
||||
rules: [{ required: true, message: '请输入车站名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '所属铁路线路',
|
||||
prop: 'railwayLine',
|
||||
minWidth: 130,
|
||||
},
|
||||
{
|
||||
label: '所属省份',
|
||||
prop: 'provinceCode',
|
||||
type: 'select',
|
||||
hide: true,
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
dicData: [],
|
||||
filterable: true,
|
||||
span: 12,
|
||||
rules: [{ required: true, message: '请选择所属省份', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleProvinceChange(value),
|
||||
},
|
||||
{
|
||||
label: '所属城市',
|
||||
prop: 'cityCode',
|
||||
type: 'select',
|
||||
hide: true,
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
dicData: [],
|
||||
filterable: true,
|
||||
span: 12,
|
||||
rules: [{ required: true, message: '请选择所属城市', trigger: 'change' }],
|
||||
change: ({ value }) => this.handleCityChange(value),
|
||||
},
|
||||
{
|
||||
label: '所属省份',
|
||||
prop: 'provinceName',
|
||||
minWidth: 140,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '所属城市',
|
||||
prop: 'cityName',
|
||||
minWidth: 140,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '经度',
|
||||
prop: 'longitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
rules: [{ validator: validateLongitude, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '纬度',
|
||||
prop: 'latitude',
|
||||
type: 'number',
|
||||
precision: 6,
|
||||
rules: [{ validator: validateLatitude, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '数据来源',
|
||||
prop: 'dataSource',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '初始化导入', value: '初始化导入' },
|
||||
{ label: '批量', value: '批量' },
|
||||
{ label: '手动', value: '手动' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '启停状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '启用', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
type: 'textarea',
|
||||
minRows: 4,
|
||||
span: 24,
|
||||
hide: true,
|
||||
maxlength: 200,
|
||||
showWordLimit: true,
|
||||
rules: [{ max: 200, message: '备注不能超过200字', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '更新人',
|
||||
prop: 'updateUserName',
|
||||
formatter: formatUpdateUserName,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 160,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
accept: '.xls,.xlsx',
|
||||
action: '/blade-system/railway-station/import-railway-station',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('railway_station_add'),
|
||||
};
|
||||
},
|
||||
isAdmin() {
|
||||
const authority = this.userInfo && this.userInfo.authority;
|
||||
return Array.isArray(authority) ? authority.includes('admin') : String(authority || '').includes('admin');
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadProvinceOptions();
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission && this.permission[code], false);
|
||||
},
|
||||
findColumn(prop) {
|
||||
return this.option.column.find(item => item.prop === prop);
|
||||
},
|
||||
loadProvinceOptions() {
|
||||
getLazyTree('00').then(res => {
|
||||
this.provinceOptions = res.data.data;
|
||||
this.findColumn('provinceCode').dicData = this.provinceOptions;
|
||||
});
|
||||
},
|
||||
loadCityOptions(provinceCode) {
|
||||
if (!provinceCode) {
|
||||
this.cityOptions = [];
|
||||
this.findColumn('cityCode').dicData = [];
|
||||
return Promise.resolve();
|
||||
}
|
||||
return getLazyTree(provinceCode).then(res => {
|
||||
this.cityOptions = res.data.data;
|
||||
this.findColumn('cityCode').dicData = this.cityOptions;
|
||||
});
|
||||
},
|
||||
handleTmisChange(value) {
|
||||
this.form.tmisCode = String(value || '')
|
||||
.replace(/\D/g, '')
|
||||
.slice(0, 5);
|
||||
this.form.code = this.form.tmisCode ? `TL${this.form.tmisCode}` : '';
|
||||
},
|
||||
handleTelegraphChange(value) {
|
||||
this.form.telegraphCode = String(value || '')
|
||||
.toUpperCase()
|
||||
.replace(/[^A-Z]/g, '')
|
||||
.slice(0, 3);
|
||||
},
|
||||
handleProvinceChange(value) {
|
||||
const province = this.provinceOptions.find(item => item.id === value);
|
||||
this.form.provinceName = province ? province.title : '';
|
||||
this.form.cityCode = undefined;
|
||||
this.form.cityName = '';
|
||||
this.loadCityOptions(value);
|
||||
},
|
||||
handleCityChange(value) {
|
||||
const city = this.cityOptions.find(item => item.id === value);
|
||||
this.form.cityName = city ? city.title : '';
|
||||
},
|
||||
normalizeRow(row) {
|
||||
row.code = row.tmisCode ? `TL${row.tmisCode}` : row.code;
|
||||
if (!row.dataSource) row.dataSource = '手动';
|
||||
if (!row.status) row.status = 1;
|
||||
return row;
|
||||
},
|
||||
validateUnique(row) {
|
||||
const rowId = String(row.id || '');
|
||||
const hasDuplicate = (params, prop) => {
|
||||
return getList(1, 10, params).then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
return records.some(item => item[prop] === row[prop] && String(item.id || '') !== rowId);
|
||||
});
|
||||
};
|
||||
return Promise.all([
|
||||
hasDuplicate({ tmisCode: row.tmisCode }, 'tmisCode'),
|
||||
hasDuplicate({ telegraphCode: row.telegraphCode }, 'telegraphCode'),
|
||||
]).then(([tmisExists, telegraphExists]) => {
|
||||
if (tmisExists) {
|
||||
return Promise.reject(new Error('该TMIS编码已存在'));
|
||||
}
|
||||
if (telegraphExists) {
|
||||
return Promise.reject(new Error('该电报码已存在'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
});
|
||||
},
|
||||
handleSubmitError(error, loading) {
|
||||
const uniqueMessages = ['该TMIS编码已存在', '该电报码已存在'];
|
||||
if (uniqueMessages.includes(error.message)) {
|
||||
this.$message.warning(error.message);
|
||||
}
|
||||
window.console.log(error);
|
||||
loading();
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
this.validateUnique(submitRow)
|
||||
.then(() => submit(submitRow))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
})
|
||||
.catch(error => this.handleSubmitError(error, loading));
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const submitRow = this.normalizeRow(row);
|
||||
this.validateUnique(submitRow)
|
||||
.then(() => submit(submitRow))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
})
|
||||
.catch(error => this.handleSubmitError(error, loading));
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该条数据？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
this.loadCityOptions(this.form.provinceCode).then(() => done());
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.form.code = '';
|
||||
this.form.dataSource = '手动';
|
||||
this.form.status = 1;
|
||||
this.loadCityOptions(this.form.provinceCode).then(() => done());
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
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);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出铁路车站主数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-system/railway-station/export-railway-station', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(
|
||||
res.data,
|
||||
`铁路车站主数据${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`
|
||||
);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-system/railway-station/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '铁路车站主数据模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.railway-station-page {
|
||||
:deep(.avue-crud__header),
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -40,6 +40,14 @@
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="permission.region_sync"
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
:loading="syncLoading"
|
||||
@click="handleSync"
|
||||
>同步
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="permission.region_debug"
|
||||
type="primary"
|
||||
@@ -75,7 +83,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLazyTree, getDetail, submit, remove } from '@/api/base/region';
|
||||
import { getLazyTree, getDetail, submit, remove, sync } from '@/api/base/region';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { validatenull } from '@/utils/validate';
|
||||
@@ -91,6 +99,7 @@ export default {
|
||||
treeCode: '',
|
||||
treeParentCode: '',
|
||||
treeData: [],
|
||||
syncLoading: false,
|
||||
treeOption: {
|
||||
nodeKey: 'id',
|
||||
lazy: true,
|
||||
@@ -431,6 +440,28 @@ export default {
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
handleSync() {
|
||||
this.$confirm('确定同步最新行政区划数据？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.syncLoading = true;
|
||||
return sync();
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '同步成功!',
|
||||
});
|
||||
this.initTree();
|
||||
this.regionForm = {};
|
||||
})
|
||||
.finally(() => {
|
||||
this.syncLoading = false;
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出行政区划数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
|
||||
@@ -216,10 +216,34 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '是否显示',
|
||||
prop: 'isDisplay',
|
||||
type: 'radio',
|
||||
dicData: [
|
||||
{
|
||||
label: '显示',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '不显示',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
value: 1,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择是否显示',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '菜单排序',
|
||||
prop: 'sort',
|
||||
type: 'number',
|
||||
value: 1,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
@@ -248,9 +272,15 @@ export default {
|
||||
if (item.prop === 'path') {
|
||||
item.rules[0].required = category === 1;
|
||||
}
|
||||
if (item.prop === 'source') {
|
||||
item.rules[0].required = category === 1;
|
||||
}
|
||||
if (item.prop === 'isOpen') {
|
||||
item.disabled = category === 2;
|
||||
}
|
||||
if (item.prop === 'isDisplay') {
|
||||
item.disabled = category === 2;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
@@ -389,6 +419,10 @@ export default {
|
||||
if (['add', 'edit'].includes(type)) {
|
||||
this.initData();
|
||||
}
|
||||
if (type === 'add') {
|
||||
this.form.sort = 1;
|
||||
this.form.isDisplay = 1;
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getMenu(this.form.id).then(res => {
|
||||
this.form = Object.assign(res.data.data, {
|
||||
|
||||
@@ -172,6 +172,10 @@
|
||||
<el-icon><refresh /></el-icon>
|
||||
密码重置
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="setPassword" v-if="permission.user_reset">
|
||||
<el-icon><key /></el-icon>
|
||||
修改密码
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" v-if="this.permission.user_delete">
|
||||
<el-icon><delete /></el-icon>
|
||||
删除用户
|
||||
@@ -265,6 +269,32 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 管理员修改密码 -->
|
||||
<el-dialog title="修改密码" append-to-body v-model="passwordBox" width="460px">
|
||||
<el-form
|
||||
ref="passwordFormRef"
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
label-width="90px"
|
||||
>
|
||||
<el-form-item label="登录账号">
|
||||
<el-input v-model="passwordForm.account" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input v-model="passwordForm.password" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="password2">
|
||||
<el-input v-model="passwordForm.password2" type="password" show-password />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="passwordBox = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submitPassword">确 定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 认证日志组件 -->
|
||||
<auth-log ref="authLog" />
|
||||
<!-- 认证锁定配置组件 -->
|
||||
@@ -285,6 +315,7 @@ import {
|
||||
add,
|
||||
grant,
|
||||
resetPassword,
|
||||
setPassword,
|
||||
auditPass,
|
||||
auditRefuse,
|
||||
setLeader,
|
||||
@@ -295,6 +326,7 @@ import { getDeptTree } from '@/api/system/dept';
|
||||
import { getRoleTree } from '@/api/system/role';
|
||||
import { getPostList } from '@/api/system/post';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { h } from 'vue';
|
||||
import website from '@/config/website';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
@@ -318,6 +350,7 @@ export default {
|
||||
grantUserId: '',
|
||||
excelBox: false,
|
||||
platformBox: false,
|
||||
passwordBox: false,
|
||||
initFlag: true,
|
||||
auditMode: false,
|
||||
selectionList: [],
|
||||
@@ -341,6 +374,17 @@ export default {
|
||||
platformFormOption: platformFormOption,
|
||||
data: [],
|
||||
platformForm: {},
|
||||
passwordForm: {},
|
||||
passwordRules: {
|
||||
password: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 32, message: '密码长度在6到32个字符', trigger: 'blur' },
|
||||
],
|
||||
password2: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{ validator: this.validatePassword2, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
excelForm: {},
|
||||
excelOption: excelOption,
|
||||
};
|
||||
@@ -409,12 +453,14 @@ export default {
|
||||
this.handlePlatformForRow(row);
|
||||
} else if (command === 'resetPassword') {
|
||||
this.handleResetForRow(row);
|
||||
} else if (command === 'setPassword') {
|
||||
this.handlePasswordForRow(row);
|
||||
} else if (command === 'delete') {
|
||||
this.$refs.crud.rowDel(row, index);
|
||||
}
|
||||
},
|
||||
handleResetForRow(row) {
|
||||
this.$confirm(`确定将账号【${row.account}】的密码重置为初始密码?`, '提示', {
|
||||
this.$confirm(`确定将账号【${row.account}】的密码重置为随机密码?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
@@ -422,11 +468,8 @@ export default {
|
||||
.then(() => {
|
||||
return resetPassword(row.id);
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '密码重置成功!',
|
||||
});
|
||||
.then(res => {
|
||||
this.showResetPassword(res.data.data);
|
||||
});
|
||||
},
|
||||
handleDataManageCommand(command) {
|
||||
@@ -642,7 +685,7 @@ export default {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择账号密码重置为初始密码?', {
|
||||
this.$confirm('确定将选择账号密码重置为随机密码?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
@@ -650,14 +693,20 @@ export default {
|
||||
.then(() => {
|
||||
return resetPassword(this.ids);
|
||||
})
|
||||
.then(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '操作成功!',
|
||||
});
|
||||
.then(res => {
|
||||
this.showResetPassword(res.data.data);
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
showResetPassword(passwordMap) {
|
||||
const passwordList = Object.keys(passwordMap || {}).map(account =>
|
||||
h('div', null, `${account}：${passwordMap[account]}`)
|
||||
);
|
||||
this.$alert(h('div', null, passwordList), '密码重置成功，请立即保存', {
|
||||
confirmButtonText: '我已保存',
|
||||
type: 'success',
|
||||
});
|
||||
},
|
||||
handleGrant() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
@@ -759,6 +808,40 @@ export default {
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handlePasswordForRow(row) {
|
||||
this.passwordForm = {
|
||||
userId: row.id,
|
||||
account: row.account,
|
||||
password: '',
|
||||
password2: '',
|
||||
};
|
||||
this.passwordBox = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.passwordFormRef && this.$refs.passwordFormRef.clearValidate();
|
||||
});
|
||||
},
|
||||
validatePassword2(rule, value, callback) {
|
||||
if (value !== this.passwordForm.password) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
submitPassword() {
|
||||
this.$refs.passwordFormRef.validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
setPassword(
|
||||
this.passwordForm.userId,
|
||||
this.passwordForm.password,
|
||||
this.passwordForm.password2
|
||||
).then(() => {
|
||||
this.passwordBox = false;
|
||||
this.$message({ type: 'success', message: '密码修改成功!' });
|
||||
});
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
|
||||
875
src/views/transportCapacity/driver.vue
Normal file
875
src/views/transportCapacity/driver.vue
Normal file
@@ -0,0 +1,875 @@
|
||||
<template>
|
||||
<basic-container class="driver-page">
|
||||
<div class="driver-toolbar">
|
||||
<div class="driver-toolbar__actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
v-if="hasPermission('driver_add')"
|
||||
@click="openDriver()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('driver_export')"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('driver_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-radio-group v-model="query.expireStatus" class="driver-stat" @change="handleExpireChange">
|
||||
<el-radio-button label="">全部（{{ expiryStat.total }}）</el-radio-button>
|
||||
<el-radio-button label="within30">30天内到期（{{ expiryStat.within30 }}）</el-radio-button>
|
||||
<el-radio-button label="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #driverName="{ row }">
|
||||
<el-button type="primary" link @click="openDriver(row, true)">
|
||||
{{ row.driverName }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #drivingLicenseEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'drivingLicenseEndDate', 'drivingLicenseLongTerm')">
|
||||
{{ formatEndDate(row.drivingLicenseEndDate, row.drivingLicenseLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #qualificationEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'qualificationEndDate', 'qualificationLongTerm')">
|
||||
{{ formatEndDate(row.qualificationEndDate, row.qualificationLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-view"
|
||||
v-if="hasPermission('driver_view')"
|
||||
@click="openDriver(row, true)"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('driver_edit')"
|
||||
@click="openDriver(row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('driver_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
append-to-body
|
||||
v-model="driverBox"
|
||||
width="92%"
|
||||
top="4vh"
|
||||
class="driver-dialog"
|
||||
@closed="resetDriver"
|
||||
>
|
||||
<el-form
|
||||
ref="driverForm"
|
||||
:model="driverForm"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
:disabled="readonly"
|
||||
class="driver-form"
|
||||
>
|
||||
<div class="section-title">基础身份信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="司机姓名" prop="driverName">
|
||||
<el-input v-model="driverForm.driverName" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="身份证号" prop="idCardNo">
|
||||
<el-input
|
||||
v-model="driverForm.idCardNo"
|
||||
maxlength="18"
|
||||
show-word-limit
|
||||
@input="driverForm.idCardNo = String(driverForm.idCardNo || '').toUpperCase()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="出生年月" prop="birthday">
|
||||
<el-date-picker v-model="driverForm.birthday" type="date" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="性别" prop="gender">
|
||||
<el-select v-model="driverForm.gender" clearable>
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="民族" prop="nation">
|
||||
<el-input v-model="driverForm.nation" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="学历" prop="education">
|
||||
<el-select v-model="driverForm.education" clearable filterable>
|
||||
<el-option v-for="item in educationOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="住址" prop="addressRegion">
|
||||
<el-input v-model="driverForm.addressRegion" maxlength="100" placeholder="省 / 市 / 区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="详细地址" prop="address">
|
||||
<el-input v-model="driverForm.address" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="driverForm.status">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位" prop="postList">
|
||||
<el-checkbox-group v-model="driverForm.postList">
|
||||
<el-checkbox label="司机" />
|
||||
<el-checkbox label="押运员" />
|
||||
<el-checkbox label="装卸管理员" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证正面照"
|
||||
prop="idCardFront"
|
||||
:value="driverForm.idCardFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
@success="url => setImage('idCardFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="身份证反面照"
|
||||
prop="idCardBack"
|
||||
:value="driverForm.idCardBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
@success="url => setImage('idCardBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<image-upload-field
|
||||
label="大头照"
|
||||
prop="headPhoto"
|
||||
:value="driverForm.headPhoto"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
@success="url => setImage('headPhoto', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">驾驶证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="准驾车型" prop="drivingType">
|
||||
<el-select v-model="driverForm.drivingType" clearable filterable allow-create default-first-option>
|
||||
<el-option v-for="item in drivingTypeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="档案编号" prop="drivingLicenseNo">
|
||||
<el-input v-model="driverForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-range">
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseStartDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="起"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="driverForm.drivingLicenseEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="driverForm.drivingLicenseLongTerm === 1"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="drivingLicenseLongTerm">
|
||||
<el-checkbox v-model="driverForm.drivingLicenseLongTerm" :true-label="1" :false-label="0">
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="驾驶证主页"
|
||||
prop="drivingLicenseFront"
|
||||
:value="driverForm.drivingLicenseFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('drivingLicenseFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="驾驶证副页"
|
||||
prop="drivingLicenseBack"
|
||||
:value="driverForm.drivingLicenseBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('drivingLicenseBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">从业资格证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="从业资格证类型" prop="qualificationType">
|
||||
<el-select v-model="driverForm.qualificationType" clearable filterable allow-create default-first-option>
|
||||
<el-option label="道路运输从业资格证" value="道路运输从业资格证" />
|
||||
<el-option label="危险货物运输从业资格证" value="危险货物运输从业资格证" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="资格证号" prop="qualificationNo">
|
||||
<el-input v-model="driverForm.qualificationNo" maxlength="50" placeholder="默认身份证号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="有效期" prop="qualificationEndDate">
|
||||
<el-date-picker
|
||||
v-model="driverForm.qualificationEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="driverForm.qualificationLongTerm === 1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="qualificationLongTerm">
|
||||
<el-checkbox v-model="driverForm.qualificationLongTerm" :true-label="1" :false-label="0">
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="封面页"
|
||||
prop="qualificationFront"
|
||||
:value="driverForm.qualificationFront"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('qualificationFront', url)"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="内容页"
|
||||
prop="qualificationBack"
|
||||
:value="driverForm.qualificationBack"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('qualificationBack', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">司机联系信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="司机类型" prop="driverType">
|
||||
<el-select v-model="driverForm.driverType">
|
||||
<el-option label="自有" value="自有" />
|
||||
<el-option label="外协" value="外协" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="driverForm.mobile" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="紧急联系人姓名" prop="emergencyContactName">
|
||||
<el-input v-model="driverForm.emergencyContactName" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="紧急联系人手机号" prop="emergencyContactMobile">
|
||||
<el-input v-model="driverForm.emergencyContactMobile" maxlength="20" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="与联系人关系" prop="contactRelation">
|
||||
<el-select v-model="driverForm.contactRelation" clearable filterable allow-create default-first-option>
|
||||
<el-option v-for="item in relationOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-input v-model="driverForm.organizationName" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="driverForm.remark" type="textarea" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="driverBox = false">取消</el-button>
|
||||
<el-button type="primary" v-if="!readonly" :loading="submitLoading" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NProgress from 'nprogress';
|
||||
import { option } from '@/option/transportCapacity/driver';
|
||||
import { getList, getDetail, submit, remove, changeStatus, getExpiryStat } from '@/api/transportCapacity/driver';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
driverName: '',
|
||||
idCardNo: '',
|
||||
birthday: '',
|
||||
gender: '',
|
||||
nation: '',
|
||||
education: '',
|
||||
addressRegion: '',
|
||||
address: '',
|
||||
postList: ['司机'],
|
||||
posts: '',
|
||||
idCardFront: '',
|
||||
idCardBack: '',
|
||||
headPhoto: '',
|
||||
drivingType: '',
|
||||
drivingLicenseNo: '',
|
||||
drivingLicenseStartDate: '',
|
||||
drivingLicenseEndDate: '',
|
||||
drivingLicenseLongTerm: 0,
|
||||
drivingLicenseFront: '',
|
||||
drivingLicenseBack: '',
|
||||
qualificationType: '',
|
||||
qualificationNo: '',
|
||||
qualificationEndDate: '',
|
||||
qualificationLongTerm: 0,
|
||||
qualificationFront: '',
|
||||
qualificationBack: '',
|
||||
driverType: '自有',
|
||||
mobile: '',
|
||||
contactRelation: '',
|
||||
organizationName: '',
|
||||
emergencyContactName: '',
|
||||
emergencyContactMobile: '',
|
||||
remark: '',
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const imageUploadField = {
|
||||
name: 'ImageUploadField',
|
||||
props: {
|
||||
label: String,
|
||||
prop: String,
|
||||
value: String,
|
||||
readonly: Boolean,
|
||||
headers: Object,
|
||||
large: Boolean,
|
||||
},
|
||||
emits: ['success'],
|
||||
methods: {
|
||||
handleSuccess(res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.$emit('success', res.data.link || res.data.url || res.data.domain || '');
|
||||
} else {
|
||||
this.$message.error(res.msg || '上传失败');
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const validType = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp'].includes(file.type);
|
||||
const validSize = file.size / 1024 / 1024 < 5;
|
||||
if (!validType) {
|
||||
this.$message.error('仅支持 JPG、PNG、BMP 图片');
|
||||
}
|
||||
if (!validSize) {
|
||||
this.$message.error('图片大小不能超过 5MB');
|
||||
}
|
||||
return validType && validSize;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<el-form-item :label="label" :prop="prop">
|
||||
<el-upload
|
||||
class="driver-uploader"
|
||||
:class="{ 'driver-uploader--large': large }"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<img v-if="value" :src="value" class="driver-uploader__image" />
|
||||
<div v-else class="driver-uploader__empty">上传证件图片</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
`,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ImageUploadField: imageUploadField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option,
|
||||
form: {},
|
||||
query: {
|
||||
expireStatus: '',
|
||||
},
|
||||
searchForm: {},
|
||||
loading: true,
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
ids: '',
|
||||
selectionList: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
expiryStat: {
|
||||
total: 0,
|
||||
within30: 0,
|
||||
expired: 0,
|
||||
},
|
||||
driverBox: false,
|
||||
readonly: false,
|
||||
driverForm: emptyForm(),
|
||||
uploadHeaders: {
|
||||
'Blade-Auth': `bearer ${getToken()}`,
|
||||
'Blade-Requested-With': 'BladeHttpRequest',
|
||||
},
|
||||
educationOptions: ['初中', '高中', '中专', '大专', '本科', '硕士及以上'],
|
||||
drivingTypeOptions: ['A1', 'A2', 'A3', 'B1', 'B2', 'C1', 'C2'],
|
||||
relationOptions: ['父母', '配偶', '子女', '兄弟姐妹', '朋友', '同事'],
|
||||
formRules: {
|
||||
driverName: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }],
|
||||
idCardNo: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
|
||||
drivingType: [{ required: true, message: '请选择准驾车型', trigger: 'change' }],
|
||||
drivingLicenseEndDate: [{ validator: this.validateDrivingLicenseEndDate, trigger: 'change' }],
|
||||
driverType: [{ required: true, message: '请选择司机类型', trigger: 'change' }],
|
||||
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
||||
emergencyContactName: [{ required: true, message: '请输入紧急联系人姓名', trigger: 'blur' }],
|
||||
emergencyContactMobile: [{ required: true, message: '请输入紧急联系人手机号', trigger: 'blur' }],
|
||||
organizationName: [{ required: true, message: '请输入所属组织', trigger: 'blur' }],
|
||||
idCardFront: [{ required: true, message: '请上传身份证正面照', trigger: 'change' }],
|
||||
idCardBack: [{ required: true, message: '请上传身份证反面照', trigger: 'change' }],
|
||||
drivingLicenseFront: [{ required: true, message: '请上传驾驶证主页', trigger: 'change' }],
|
||||
drivingLicenseBack: [{ required: true, message: '请上传驾驶证副页', trigger: 'change' }],
|
||||
remark: [{ max: 200, message: '备注最多200字', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('driver_add'),
|
||||
viewBtn: this.hasPermission('driver_view'),
|
||||
delBtn: this.hasPermission('driver_delete'),
|
||||
editBtn: this.hasPermission('driver_edit'),
|
||||
};
|
||||
},
|
||||
dialogTitle() {
|
||||
if (this.readonly) {
|
||||
return '查看司机';
|
||||
}
|
||||
return this.driverForm.id ? '修改司机' : '新增司机';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.permission?.[code] === true;
|
||||
},
|
||||
validateDrivingLicenseEndDate(rule, value, callback) {
|
||||
if (this.driverForm.drivingLicenseLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择驾驶证有效期止'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
openDriver(row, readonly = false) {
|
||||
this.readonly = readonly;
|
||||
if (!row?.id) {
|
||||
this.driverForm = emptyForm();
|
||||
this.driverBox = true;
|
||||
return;
|
||||
}
|
||||
getDetail(row.id).then(res => {
|
||||
const detail = res.data.data || {};
|
||||
this.driverForm = {
|
||||
...emptyForm(),
|
||||
...detail,
|
||||
postList: detail.posts ? detail.posts.split(',').filter(Boolean) : [],
|
||||
};
|
||||
this.driverBox = true;
|
||||
});
|
||||
},
|
||||
resetDriver() {
|
||||
this.driverForm = emptyForm();
|
||||
this.readonly = false;
|
||||
this.submitLoading = false;
|
||||
this.$refs.driverForm?.clearValidate();
|
||||
},
|
||||
setImage(prop, url) {
|
||||
this.driverForm[prop] = url;
|
||||
this.$refs.driverForm?.validateField(prop);
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.driverForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
const row = {
|
||||
...this.driverForm,
|
||||
qualificationNo: this.driverForm.qualificationNo || this.driverForm.idCardNo,
|
||||
posts: this.driverForm.postList.join(','),
|
||||
};
|
||||
this.submitLoading = true;
|
||||
submit(row)
|
||||
.then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.driverBox = false;
|
||||
this.onLoad(this.page);
|
||||
})
|
||||
.finally(() => {
|
||||
this.submitLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const status = row.status === 1 ? 2 : 1;
|
||||
const text = status === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否${text}该司机?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
changeStatus(row.id, status).then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.onLoad(this.page);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('是否删除选中的司机数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
remove(this.ids).then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.onLoad(this.page);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleExpireChange() {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
refreshStat() {
|
||||
getExpiryStat(this.buildQuery(false)).then(res => {
|
||||
this.expiryStat = {
|
||||
total: res.data.data?.total || 0,
|
||||
within30: res.data.data?.within30 || 0,
|
||||
expired: res.data.data?.expired || 0,
|
||||
};
|
||||
});
|
||||
},
|
||||
searchReset() {
|
||||
this.searchForm = {};
|
||||
this.query = {
|
||||
expireStatus: this.query.expireStatus,
|
||||
};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.searchForm = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
this.ids = list.map(item => item.id).join(',');
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.ids = '';
|
||||
this.$refs.crud?.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.searchForm);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, this.buildQuery(true, params))
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
this.refreshStat();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
buildQuery(includeExpire = true, params = {}) {
|
||||
const query = {
|
||||
...params,
|
||||
...this.searchForm,
|
||||
};
|
||||
if (includeExpire && this.query.expireStatus) {
|
||||
query.expireStatus = this.query.expireStatus;
|
||||
}
|
||||
return query;
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出司机数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/driver/export-driver', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `司机管理${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.buildQuery(true),
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
formatEndDate(date, longTerm) {
|
||||
if (longTerm === 1) {
|
||||
return '长期有效';
|
||||
}
|
||||
return date || '-';
|
||||
},
|
||||
getDateClass(row, dateProp, longTermProp) {
|
||||
if (row[longTermProp] === 1 || !row[dateProp]) {
|
||||
return '';
|
||||
}
|
||||
const today = this.$dayjs();
|
||||
const endDate = this.$dayjs(row[dateProp]);
|
||||
if (endDate.isBefore(today, 'day')) {
|
||||
return 'date-danger';
|
||||
}
|
||||
if (endDate.diff(today, 'day') <= 30) {
|
||||
return 'date-warning';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.driver-page {
|
||||
.driver-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.driver-toolbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.driver-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.driver-form {
|
||||
.section-title {
|
||||
margin: 18px 0 14px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #e74b5f;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor.el-input),
|
||||
:deep(.el-date-editor.el-input__wrapper),
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.driver-uploader .el-upload) {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
border: 1px dashed #c0c4cc;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader--large .el-upload) {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader__image) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep(.driver-uploader__empty) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.date-warning {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date-danger {
|
||||
color: #d40000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.driver-page {
|
||||
.driver-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
603
src/views/transportCapacity/ship.vue
Normal file
603
src/views/transportCapacity/ship.vue
Normal file
@@ -0,0 +1,603 @@
|
||||
<template>
|
||||
<basic-container class="transport-ship-page">
|
||||
<div class="ship-toolbar">
|
||||
<div class="ship-toolbar__actions">
|
||||
<el-button type="primary" icon="el-icon-plus" plain v-if="hasPermission('transport_ship_add')" @click="openShip()">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" plain v-if="hasPermission('transport_ship_export')" @click="handleExport">
|
||||
导出
|
||||
</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" plain v-if="hasPermission('transport_ship_delete')" @click="handleDelete">
|
||||
批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-radio-group v-model="query.expireStatus" class="ship-stat" @change="handleExpireChange">
|
||||
<el-radio-button label="">全部（{{ expiryStat.total }}）</el-radio-button>
|
||||
<el-radio-button label="within30">30天内到期（{{ expiryStat.within30 }}）</el-radio-button>
|
||||
<el-radio-button label="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #shipName="{ row }">
|
||||
<el-button type="primary" link @click="openShip(row, true)">
|
||||
{{ row.shipName }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #nationalityCertEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'nationalityCertEndDate', 'nationalityCertLongTerm')">
|
||||
{{ formatEndDate(row.nationalityCertEndDate, row.nationalityCertLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #safeManningCertEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'safeManningCertEndDate', 'safeManningCertLongTerm')">
|
||||
{{ formatEndDate(row.safeManningCertEndDate, row.safeManningCertLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #businessTransportCertEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'businessTransportCertEndDate', 'businessTransportCertLongTerm')">
|
||||
{{ formatEndDate(row.businessTransportCertEndDate, row.businessTransportCertLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #leaseEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'leaseEndDate', 'leaseLongTerm')">
|
||||
{{ formatEndDate(row.leaseEndDate, row.leaseLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button type="primary" text icon="el-icon-edit" v-if="hasPermission('transport_ship_edit')" @click="openShip(row)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="primary" text icon="el-icon-view" v-if="hasPermission('transport_ship_view')" @click="openShip(row, true)">
|
||||
综合台账
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('transport_ship_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog :title="dialogTitle" append-to-body v-model="shipBox" width="92%" top="4vh" @closed="resetShip">
|
||||
<el-form ref="shipForm" :model="shipForm" :rules="formRules" label-position="top" :disabled="readonly" class="ship-form">
|
||||
<div class="section-title">基础船舶信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶名" prop="shipName">
|
||||
<el-input v-model="shipForm.shipName" maxlength="50" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶识别号" prop="shipIdentifierNo">
|
||||
<el-input v-model="shipForm.shipIdentifierNo" maxlength="50" show-word-limit @input="shipForm.shipIdentifierNo = String(shipForm.shipIdentifierNo || '').toUpperCase()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-input v-model="shipForm.organizationName" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船检登记号" prop="shipInspectionNo">
|
||||
<el-input v-model="shipForm.shipInspectionNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="船舶类型" prop="shipType">
|
||||
<el-select v-model="shipForm.shipType" filterable allow-create default-first-option>
|
||||
<el-option v-for="item in shipTypeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="shipForm.status">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="shipForm.remark" type="textarea" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">国籍证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="国籍证有效期至" prop="nationalityCertEndDate">
|
||||
<el-date-picker v-model="shipForm.nationalityCertEndDate" type="date" value-format="YYYY-MM-DD" :disabled="shipForm.nationalityCertLongTerm === 1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="nationalityCertLongTerm">
|
||||
<el-checkbox v-model="shipForm.nationalityCertLongTerm" :true-label="1" :false-label="0">是</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field label="国籍证图片" prop="nationalityCertImage" :value="shipForm.nationalityCertImage" :readonly="readonly" :headers="uploadHeaders" large @success="url => setImage('nationalityCertImage', url)" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">安全配员证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="最低安全配员证书有效期至" prop="safeManningCertEndDate">
|
||||
<el-date-picker v-model="shipForm.safeManningCertEndDate" type="date" value-format="YYYY-MM-DD" :disabled="shipForm.safeManningCertLongTerm === 1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="safeManningCertLongTerm">
|
||||
<el-checkbox v-model="shipForm.safeManningCertLongTerm" :true-label="1" :false-label="0">是</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field label="最低安全配员证书图片" prop="safeManningCertImage" :value="shipForm.safeManningCertImage" :readonly="readonly" :headers="uploadHeaders" large @success="url => setImage('safeManningCertImage', url)" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">营业运输证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="营业运输证有效期至" prop="businessTransportCertEndDate">
|
||||
<el-date-picker v-model="shipForm.businessTransportCertEndDate" type="date" value-format="YYYY-MM-DD" :disabled="shipForm.businessTransportCertLongTerm === 1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="businessTransportCertLongTerm">
|
||||
<el-checkbox v-model="shipForm.businessTransportCertLongTerm" :true-label="1" :false-label="0">是</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field label="营业运输证图片" prop="businessTransportCertImage" :value="shipForm.businessTransportCertImage" :readonly="readonly" :headers="uploadHeaders" large @success="url => setImage('businessTransportCertImage', url)" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">承租信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="承租有效期至" prop="leaseEndDate">
|
||||
<el-date-picker v-model="shipForm.leaseEndDate" type="date" value-format="YYYY-MM-DD" :disabled="shipForm.leaseLongTerm === 1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="leaseLongTerm">
|
||||
<el-checkbox v-model="shipForm.leaseLongTerm" :true-label="1" :false-label="0">是</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field label="承租合同图片" prop="leaseContractImage" :value="shipForm.leaseContractImage" :readonly="readonly" :headers="uploadHeaders" large @success="url => setImage('leaseContractImage', url)" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="shipBox = false">取消</el-button>
|
||||
<el-button type="primary" v-if="!readonly" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NProgress from 'nprogress';
|
||||
import { option } from '@/option/transportCapacity/transport-ship';
|
||||
import { getList, getDetail, submit, remove, changeStatus, getExpiryStat } from '@/api/transportCapacity/transport-ship';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
shipName: '',
|
||||
shipIdentifierNo: '',
|
||||
organizationName: '',
|
||||
shipInspectionNo: '',
|
||||
shipType: '',
|
||||
nationalityCertEndDate: '',
|
||||
nationalityCertLongTerm: 0,
|
||||
nationalityCertImage: '',
|
||||
safeManningCertEndDate: '',
|
||||
safeManningCertLongTerm: 0,
|
||||
safeManningCertImage: '',
|
||||
businessTransportCertEndDate: '',
|
||||
businessTransportCertLongTerm: 0,
|
||||
businessTransportCertImage: '',
|
||||
leaseEndDate: '',
|
||||
leaseLongTerm: 0,
|
||||
leaseContractImage: '',
|
||||
remark: '',
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const imageUploadField = {
|
||||
name: 'ImageUploadField',
|
||||
props: {
|
||||
label: String,
|
||||
prop: String,
|
||||
value: String,
|
||||
readonly: Boolean,
|
||||
headers: Object,
|
||||
large: Boolean,
|
||||
},
|
||||
emits: ['success'],
|
||||
methods: {
|
||||
handleSuccess(res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.$emit('success', res.data.link || res.data.url || res.data.domain || '');
|
||||
} else {
|
||||
this.$message.error(res.msg || '上传失败');
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const validType = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp'].includes(file.type);
|
||||
const validSize = file.size / 1024 / 1024 < 5;
|
||||
if (!validType) this.$message.error('仅支持 JPG、PNG、BMP 图片');
|
||||
if (!validSize) this.$message.error('图片大小不能超过 5MB');
|
||||
return validType && validSize;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<el-form-item :label="label" :prop="prop">
|
||||
<el-upload
|
||||
class="ship-uploader"
|
||||
:class="{ 'ship-uploader--large': large }"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<img v-if="value" :src="value" class="ship-uploader__image" />
|
||||
<div v-else class="ship-uploader__empty">上传证件图片</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
`,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { ImageUploadField: imageUploadField },
|
||||
data() {
|
||||
return {
|
||||
option,
|
||||
form: {},
|
||||
query: { expireStatus: '' },
|
||||
searchForm: {},
|
||||
loading: true,
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
ids: '',
|
||||
selectionList: [],
|
||||
page: { pageSize: 10, currentPage: 1, total: 0 },
|
||||
expiryStat: { total: 0, within30: 0, expired: 0 },
|
||||
shipBox: false,
|
||||
readonly: false,
|
||||
shipForm: emptyForm(),
|
||||
uploadHeaders: {
|
||||
'Blade-Auth': `bearer ${getToken()}`,
|
||||
'Blade-Requested-With': 'BladeHttpRequest',
|
||||
},
|
||||
shipTypeOptions: ['干货船', '集装箱船', '散货船', '油船', '拖轮', '驳船'],
|
||||
formRules: {
|
||||
shipName: [{ required: true, message: '请输入船舶名', trigger: 'blur' }],
|
||||
shipIdentifierNo: [{ required: true, message: '请输入船舶识别号', trigger: 'blur' }],
|
||||
organizationName: [{ required: true, message: '请输入所属组织', trigger: 'blur' }],
|
||||
shipType: [{ required: true, message: '请选择船舶类型', trigger: 'change' }],
|
||||
nationalityCertEndDate: [{ validator: this.validateNationalityCertEndDate, trigger: 'change' }],
|
||||
safeManningCertEndDate: [{ validator: this.validateSafeManningCertEndDate, trigger: 'change' }],
|
||||
businessTransportCertEndDate: [{ validator: this.validateBusinessTransportCertEndDate, trigger: 'change' }],
|
||||
remark: [{ max: 200, message: '备注最多200字', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('transport_ship_add'),
|
||||
viewBtn: this.hasPermission('transport_ship_view'),
|
||||
delBtn: this.hasPermission('transport_ship_delete'),
|
||||
editBtn: this.hasPermission('transport_ship_edit'),
|
||||
};
|
||||
},
|
||||
dialogTitle() {
|
||||
if (this.readonly) return '船舶综合台账';
|
||||
return this.shipForm.id ? '修改船舶' : '新增船舶';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.permission?.[code] === true;
|
||||
},
|
||||
validateNationalityCertEndDate(rule, value, callback) {
|
||||
if (this.shipForm.nationalityCertLongTerm !== 1 && !value) return callback(new Error('请选择国籍证有效期至'));
|
||||
callback();
|
||||
},
|
||||
validateSafeManningCertEndDate(rule, value, callback) {
|
||||
if (this.shipForm.safeManningCertLongTerm !== 1 && !value) return callback(new Error('请选择最低安全配员证书有效期至'));
|
||||
callback();
|
||||
},
|
||||
validateBusinessTransportCertEndDate(rule, value, callback) {
|
||||
if (this.shipForm.businessTransportCertLongTerm !== 1 && !value) return callback(new Error('请选择营业运输证有效期至'));
|
||||
callback();
|
||||
},
|
||||
openShip(row, readonly = false) {
|
||||
this.readonly = readonly;
|
||||
if (!row?.id) {
|
||||
this.shipForm = emptyForm();
|
||||
this.shipBox = true;
|
||||
return;
|
||||
}
|
||||
getDetail(row.id).then(res => {
|
||||
this.shipForm = { ...emptyForm(), ...(res.data.data || {}) };
|
||||
this.shipBox = true;
|
||||
});
|
||||
},
|
||||
resetShip() {
|
||||
this.shipForm = emptyForm();
|
||||
this.readonly = false;
|
||||
this.submitLoading = false;
|
||||
this.$refs.shipForm?.clearValidate();
|
||||
},
|
||||
setImage(prop, url) {
|
||||
this.shipForm[prop] = url;
|
||||
this.$refs.shipForm?.validateField(prop);
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.shipForm.validate(valid => {
|
||||
if (!valid) return;
|
||||
this.submitLoading = true;
|
||||
submit(this.shipForm)
|
||||
.then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.shipBox = false;
|
||||
this.onLoad(this.page);
|
||||
})
|
||||
.finally(() => {
|
||||
this.submitLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const status = row.status === 1 ? 2 : 1;
|
||||
const text = status === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否${text}该船舶?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
||||
changeStatus(row.id, status).then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.onLoad(this.page);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('是否删除选中的船舶数据?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
||||
remove(this.ids).then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.onLoad(this.page);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleExpireChange() {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
refreshStat() {
|
||||
getExpiryStat(this.buildQuery(false)).then(res => {
|
||||
this.expiryStat = {
|
||||
total: res.data.data?.total || 0,
|
||||
within30: res.data.data?.within30 || 0,
|
||||
expired: res.data.data?.expired || 0,
|
||||
};
|
||||
});
|
||||
},
|
||||
searchReset() {
|
||||
this.searchForm = {};
|
||||
this.query = { expireStatus: this.query.expireStatus };
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.searchForm = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
this.ids = list.map(item => item.id).join(',');
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.ids = '';
|
||||
this.$refs.crud?.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.searchForm);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, this.buildQuery(true, params))
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
this.refreshStat();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
buildQuery(includeExpire = true, params = {}) {
|
||||
const query = { ...params, ...this.searchForm };
|
||||
if (includeExpire && this.query.expireStatus) query.expireStatus = this.query.expireStatus;
|
||||
return query;
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出船舶数据?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/transport-ship/export-transport-ship', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `船舶管理${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return { ...this.buildQuery(true), ids: this.ids, [this.website.tokenHeader]: getToken() };
|
||||
},
|
||||
formatEndDate(date, longTerm) {
|
||||
if (longTerm === 1) return '长期有效';
|
||||
return date || '-';
|
||||
},
|
||||
getDateClass(row, dateProp, longTermProp) {
|
||||
if (row[longTermProp] === 1 || !row[dateProp]) return '';
|
||||
const today = this.$dayjs();
|
||||
const endDate = this.$dayjs(row[dateProp]);
|
||||
if (endDate.isBefore(today, 'day')) return 'date-danger';
|
||||
if (endDate.diff(today, 'day') <= 30) return 'date-warning';
|
||||
return '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transport-ship-page {
|
||||
.ship-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ship-toolbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ship-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ship-form {
|
||||
.section-title {
|
||||
margin: 18px 0 14px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #e74b5f;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor.el-input),
|
||||
:deep(.el-date-editor.el-input__wrapper),
|
||||
:deep(.el-select),
|
||||
:deep(.el-input) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ship-uploader .el-upload) {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
border: 1px dashed #c0c4cc;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ship-uploader--large .el-upload) {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
:deep(.ship-uploader__image) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep(.ship-uploader__empty) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.date-warning {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date-danger {
|
||||
color: #d40000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.transport-ship-page {
|
||||
.ship-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
852
src/views/transportCapacity/vehicle.vue
Normal file
852
src/views/transportCapacity/vehicle.vue
Normal file
@@ -0,0 +1,852 @@
|
||||
<template>
|
||||
<basic-container class="transport-vehicle-page">
|
||||
<div class="vehicle-toolbar">
|
||||
<div class="vehicle-toolbar__actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
v-if="hasPermission('transport_vehicle_add')"
|
||||
@click="openVehicle()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('transport_vehicle_export')"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('transport_vehicle_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-radio-group v-model="query.expireStatus" class="vehicle-stat" @change="handleExpireChange">
|
||||
<el-radio-button label="">全部（{{ expiryStat.total }}）</el-radio-button>
|
||||
<el-radio-button label="within30">30天内到期（{{ expiryStat.within30 }}）</el-radio-button>
|
||||
<el-radio-button label="expired">已到期（{{ expiryStat.expired }}）</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #plateNo="{ row }">
|
||||
<el-button type="primary" link @click="openVehicle(row, true)">
|
||||
{{ row.plateNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'primary' : 'info'">
|
||||
{{ row.status === 1 ? '启用' : '停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #drivingLicenseEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'drivingLicenseEndDate', 'drivingLicenseLongTerm')">
|
||||
{{ formatEndDate(row.drivingLicenseEndDate, row.drivingLicenseLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #roadTransportCertEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'roadTransportCertEndDate', 'roadTransportCertLongTerm')">
|
||||
{{ formatEndDate(row.roadTransportCertEndDate, row.roadTransportCertLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #annualReviewEndDate="{ row }">
|
||||
<span :class="getDateClass(row, 'annualReviewEndDate', 'annualReviewLongTerm')">
|
||||
{{ formatEndDate(row.annualReviewEndDate, row.annualReviewLongTerm) }}
|
||||
</span>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-view"
|
||||
v-if="hasPermission('transport_vehicle_view')"
|
||||
@click="openVehicle(row, true)"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('transport_vehicle_edit')"
|
||||
@click="openVehicle(row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('transport_vehicle_status')"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
append-to-body
|
||||
v-model="vehicleBox"
|
||||
width="92%"
|
||||
top="4vh"
|
||||
class="vehicle-dialog"
|
||||
@closed="resetVehicle"
|
||||
>
|
||||
<el-form
|
||||
ref="vehicleForm"
|
||||
:model="vehicleForm"
|
||||
:rules="formRules"
|
||||
label-position="top"
|
||||
:disabled="readonly"
|
||||
class="vehicle-form"
|
||||
>
|
||||
<div class="section-title">基础车辆信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="所属组织" prop="organizationName">
|
||||
<el-input v-model="vehicleForm.organizationName" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车牌号" prop="plateNo">
|
||||
<el-input
|
||||
v-model="vehicleForm.plateNo"
|
||||
maxlength="16"
|
||||
show-word-limit
|
||||
@input="vehicleForm.plateNo = String(vehicleForm.plateNo || '').toUpperCase()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="车辆类型" prop="vehicleType">
|
||||
<el-select v-model="vehicleForm.vehicleType" filterable allow-create default-first-option>
|
||||
<el-option v-for="item in vehicleTypeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="业务关系" prop="businessRelation">
|
||||
<el-select v-model="vehicleForm.businessRelation">
|
||||
<el-option v-for="item in businessRelationOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="能源类型" prop="energyType">
|
||||
<el-select v-model="vehicleForm.energyType" filterable allow-create default-first-option>
|
||||
<el-option v-for="item in energyTypeOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="核定载质量(KG)" prop="approvedLoadKg">
|
||||
<el-input-number v-model="vehicleForm.approvedLoadKg" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="准牵引总质量(KG)" prop="tractionMassKg">
|
||||
<el-input-number v-model="vehicleForm.tractionMassKg" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="vehicleForm.status">
|
||||
<el-option label="启用" :value="1" />
|
||||
<el-option label="停用" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓长度(mm)" prop="outerLength">
|
||||
<el-input-number v-model="vehicleForm.outerLength" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓宽度(mm)" prop="outerWidth">
|
||||
<el-input-number v-model="vehicleForm.outerWidth" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="外廓高度(mm)" prop="outerHeight">
|
||||
<el-input-number v-model="vehicleForm.outerHeight" :min="0" :precision="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="海关备案号" prop="customsRecordNo">
|
||||
<el-input v-model="vehicleForm.customsRecordNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="强制报废日期" prop="compulsoryScrapDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.compulsoryScrapDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.compulsoryScrapLongTerm === 1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="compulsoryScrapLongTerm">
|
||||
<el-checkbox v-model="vehicleForm.compulsoryScrapLongTerm" :true-label="1" :false-label="0">
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">行驶证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="行驶证档案编号" prop="drivingLicenseNo">
|
||||
<el-input v-model="vehicleForm.drivingLicenseNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="行驶证有效期" prop="drivingLicenseEndDate">
|
||||
<div class="date-range">
|
||||
<el-date-picker v-model="vehicleForm.drivingLicenseStartDate" type="date" value-format="YYYY-MM-DD" placeholder="起" />
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.drivingLicenseEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="vehicleForm.drivingLicenseLongTerm === 1"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="drivingLicenseLongTerm">
|
||||
<el-checkbox v-model="vehicleForm.drivingLicenseLongTerm" :true-label="1" :false-label="0">
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="行驶证图片"
|
||||
prop="drivingLicenseImage"
|
||||
:value="vehicleForm.drivingLicenseImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('drivingLicenseImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">道路运输证信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="道路运输证号" prop="roadTransportCertNo">
|
||||
<el-input v-model="vehicleForm.roadTransportCertNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="道路运输证有效期" prop="roadTransportCertEndDate">
|
||||
<div class="date-range">
|
||||
<el-date-picker v-model="vehicleForm.roadTransportCertStartDate" type="date" value-format="YYYY-MM-DD" placeholder="起" />
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.roadTransportCertEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="止"
|
||||
:disabled="vehicleForm.roadTransportCertLongTerm === 1"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="长期有效" prop="roadTransportCertLongTerm">
|
||||
<el-checkbox v-model="vehicleForm.roadTransportCertLongTerm" :true-label="1" :false-label="0">
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="道路运输年审有效期" prop="annualReviewEndDate">
|
||||
<el-date-picker
|
||||
v-model="vehicleForm.annualReviewEndDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="vehicleForm.annualReviewLongTerm === 1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="年审长期有效" prop="annualReviewLongTerm">
|
||||
<el-checkbox v-model="vehicleForm.annualReviewLongTerm" :true-label="1" :false-label="0">
|
||||
是
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="道路运输证图片"
|
||||
prop="roadTransportCertImage"
|
||||
:value="vehicleForm.roadTransportCertImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('roadTransportCertImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="section-title">机动车登记本信息</div>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="机动车登记编号" prop="registrationNo">
|
||||
<el-input v-model="vehicleForm.registrationNo" maxlength="50" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="机动车登记日期" prop="registrationDate">
|
||||
<el-date-picker v-model="vehicleForm.registrationDate" type="date" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="vehicleForm.remark" type="textarea" maxlength="200" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<image-upload-field
|
||||
label="机动车登记本图片"
|
||||
prop="registrationImage"
|
||||
:value="vehicleForm.registrationImage"
|
||||
:readonly="readonly"
|
||||
:headers="uploadHeaders"
|
||||
large
|
||||
@success="url => setImage('registrationImage', url)"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="vehicleBox = false">取消</el-button>
|
||||
<el-button type="primary" v-if="!readonly" :loading="submitLoading" @click="handleSubmit">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NProgress from 'nprogress';
|
||||
import { option } from '@/option/transportCapacity/transport-vehicle';
|
||||
import {
|
||||
getList,
|
||||
getDetail,
|
||||
submit,
|
||||
remove,
|
||||
changeStatus,
|
||||
getExpiryStat,
|
||||
} from '@/api/transportCapacity/transport-vehicle';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
organizationName: '',
|
||||
plateNo: '',
|
||||
vehicleType: '',
|
||||
outerLength: undefined,
|
||||
outerWidth: undefined,
|
||||
outerHeight: undefined,
|
||||
approvedLoadKg: undefined,
|
||||
tractionMassKg: undefined,
|
||||
businessRelation: '自有',
|
||||
energyType: '',
|
||||
compulsoryScrapDate: '',
|
||||
compulsoryScrapLongTerm: 0,
|
||||
customsRecordNo: '',
|
||||
drivingLicenseNo: '',
|
||||
drivingLicenseStartDate: '',
|
||||
drivingLicenseEndDate: '',
|
||||
drivingLicenseLongTerm: 0,
|
||||
drivingLicenseImage: '',
|
||||
roadTransportCertNo: '',
|
||||
roadTransportCertStartDate: '',
|
||||
roadTransportCertEndDate: '',
|
||||
roadTransportCertLongTerm: 0,
|
||||
roadTransportCertImage: '',
|
||||
annualReviewEndDate: '',
|
||||
annualReviewLongTerm: 0,
|
||||
registrationNo: '',
|
||||
registrationDate: '',
|
||||
registrationImage: '',
|
||||
remark: '',
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const imageUploadField = {
|
||||
name: 'ImageUploadField',
|
||||
props: {
|
||||
label: String,
|
||||
prop: String,
|
||||
value: String,
|
||||
readonly: Boolean,
|
||||
headers: Object,
|
||||
large: Boolean,
|
||||
},
|
||||
emits: ['success'],
|
||||
methods: {
|
||||
handleSuccess(res) {
|
||||
if (res.code === 200 && res.data) {
|
||||
this.$emit('success', res.data.link || res.data.url || res.data.domain || '');
|
||||
} else {
|
||||
this.$message.error(res.msg || '上传失败');
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const validType = ['image/jpeg', 'image/png', 'image/jpg', 'image/bmp'].includes(file.type);
|
||||
const validSize = file.size / 1024 / 1024 < 5;
|
||||
if (!validType) {
|
||||
this.$message.error('仅支持 JPG、PNG、BMP 图片');
|
||||
}
|
||||
if (!validSize) {
|
||||
this.$message.error('图片大小不能超过 5MB');
|
||||
}
|
||||
return validType && validSize;
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<el-form-item :label="label" :prop="prop">
|
||||
<el-upload
|
||||
class="vehicle-uploader"
|
||||
:class="{ 'vehicle-uploader--large': large }"
|
||||
action="/api/blade-resource/oss/endpoint/put-file"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:disabled="readonly"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<img v-if="value" :src="value" class="vehicle-uploader__image" />
|
||||
<div v-else class="vehicle-uploader__empty">上传证件图片</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
`,
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ImageUploadField: imageUploadField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option,
|
||||
form: {},
|
||||
query: {
|
||||
expireStatus: '',
|
||||
},
|
||||
searchForm: {},
|
||||
loading: true,
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
ids: '',
|
||||
selectionList: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
expiryStat: {
|
||||
total: 0,
|
||||
within30: 0,
|
||||
expired: 0,
|
||||
},
|
||||
vehicleBox: false,
|
||||
readonly: false,
|
||||
vehicleForm: emptyForm(),
|
||||
uploadHeaders: {
|
||||
'Blade-Auth': `bearer ${getToken()}`,
|
||||
'Blade-Requested-With': 'BladeHttpRequest',
|
||||
},
|
||||
vehicleTypeOptions: ['厢式', '高栏', '平板', '仓栅', '牵引车', '冷藏车'],
|
||||
businessRelationOptions: ['自有', '业务合作', '管理挂靠'],
|
||||
energyTypeOptions: ['柴油', '汽油', '新能源', '天然气'],
|
||||
formRules: {
|
||||
organizationName: [{ required: true, message: '请输入所属组织', trigger: 'blur' }],
|
||||
plateNo: [
|
||||
{ required: true, message: '请输入车牌号', trigger: 'blur' },
|
||||
{ pattern: /^[\u4e00-\u9fa5][A-Z][A-Z0-9挂学警港澳]{5,6}$/, message: '请输入标准车牌号', trigger: 'blur' },
|
||||
],
|
||||
vehicleType: [{ required: true, message: '请选择车辆类型', trigger: 'change' }],
|
||||
approvedLoadKg: [{ required: true, message: '请输入核定载质量', trigger: 'blur' }],
|
||||
businessRelation: [{ required: true, message: '请选择业务关系', trigger: 'change' }],
|
||||
energyType: [{ required: true, message: '请选择能源类型', trigger: 'change' }],
|
||||
drivingLicenseNo: [{ required: true, message: '请输入行驶证档案编号', trigger: 'blur' }],
|
||||
drivingLicenseEndDate: [{ validator: this.validateDrivingLicenseEndDate, trigger: 'change' }],
|
||||
roadTransportCertNo: [{ required: true, message: '请输入道路运输证号', trigger: 'blur' }],
|
||||
roadTransportCertEndDate: [{ validator: this.validateRoadTransportCertEndDate, trigger: 'change' }],
|
||||
annualReviewEndDate: [{ validator: this.validateAnnualReviewEndDate, trigger: 'change' }],
|
||||
registrationNo: [{ required: true, message: '请输入机动车登记编号', trigger: 'blur' }],
|
||||
remark: [{ max: 200, message: '备注最多200字', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('transport_vehicle_add'),
|
||||
viewBtn: this.hasPermission('transport_vehicle_view'),
|
||||
delBtn: this.hasPermission('transport_vehicle_delete'),
|
||||
editBtn: this.hasPermission('transport_vehicle_edit'),
|
||||
};
|
||||
},
|
||||
dialogTitle() {
|
||||
if (this.readonly) {
|
||||
return '查看车辆';
|
||||
}
|
||||
return this.vehicleForm.id ? '修改车辆' : '新增车辆';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.permission?.[code] === true;
|
||||
},
|
||||
validateDrivingLicenseEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.drivingLicenseLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择行驶证有效期止'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
validateRoadTransportCertEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.roadTransportCertLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择道路运输证有效期止'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
validateAnnualReviewEndDate(rule, value, callback) {
|
||||
if (this.vehicleForm.annualReviewLongTerm !== 1 && !value) {
|
||||
callback(new Error('请选择道路运输年审有效期'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
openVehicle(row, readonly = false) {
|
||||
this.readonly = readonly;
|
||||
if (!row?.id) {
|
||||
this.vehicleForm = emptyForm();
|
||||
this.vehicleBox = true;
|
||||
return;
|
||||
}
|
||||
getDetail(row.id).then(res => {
|
||||
this.vehicleForm = {
|
||||
...emptyForm(),
|
||||
...(res.data.data || {}),
|
||||
};
|
||||
this.vehicleBox = true;
|
||||
});
|
||||
},
|
||||
resetVehicle() {
|
||||
this.vehicleForm = emptyForm();
|
||||
this.readonly = false;
|
||||
this.submitLoading = false;
|
||||
this.$refs.vehicleForm?.clearValidate();
|
||||
},
|
||||
setImage(prop, url) {
|
||||
this.vehicleForm[prop] = url;
|
||||
this.$refs.vehicleForm?.validateField(prop);
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.vehicleForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
this.submitLoading = true;
|
||||
submit(this.vehicleForm)
|
||||
.then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.vehicleBox = false;
|
||||
this.onLoad(this.page);
|
||||
})
|
||||
.finally(() => {
|
||||
this.submitLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const status = row.status === 1 ? 2 : 1;
|
||||
const text = status === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否${text}该车辆?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
changeStatus(row.id, status).then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.onLoad(this.page);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('是否删除选中的车辆数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
remove(this.ids).then(() => {
|
||||
this.$message.success('操作成功');
|
||||
this.onLoad(this.page);
|
||||
});
|
||||
});
|
||||
},
|
||||
handleExpireChange() {
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
refreshStat() {
|
||||
getExpiryStat(this.buildQuery(false)).then(res => {
|
||||
this.expiryStat = {
|
||||
total: res.data.data?.total || 0,
|
||||
within30: res.data.data?.within30 || 0,
|
||||
expired: res.data.data?.expired || 0,
|
||||
};
|
||||
});
|
||||
},
|
||||
searchReset() {
|
||||
this.searchForm = {};
|
||||
this.query = {
|
||||
expireStatus: this.query.expireStatus,
|
||||
};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.searchForm = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
this.ids = list.map(item => item.id).join(',');
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.ids = '';
|
||||
this.$refs.crud?.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.searchForm);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, this.buildQuery(true, params))
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
this.refreshStat();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
buildQuery(includeExpire = true, params = {}) {
|
||||
const query = {
|
||||
...params,
|
||||
...this.searchForm,
|
||||
};
|
||||
if (includeExpire && this.query.expireStatus) {
|
||||
query.expireStatus = this.query.expireStatus;
|
||||
}
|
||||
return query;
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出车辆数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/transport-vehicle/export-transport-vehicle', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `车辆管理${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.buildQuery(true),
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
formatEndDate(date, longTerm) {
|
||||
if (longTerm === 1) {
|
||||
return '长期有效';
|
||||
}
|
||||
return date || '-';
|
||||
},
|
||||
getDateClass(row, dateProp, longTermProp) {
|
||||
if (row[longTermProp] === 1 || !row[dateProp]) {
|
||||
return '';
|
||||
}
|
||||
const today = this.$dayjs();
|
||||
const endDate = this.$dayjs(row[dateProp]);
|
||||
if (endDate.isBefore(today, 'day')) {
|
||||
return 'date-danger';
|
||||
}
|
||||
if (endDate.diff(today, 'day') <= 30) {
|
||||
return 'date-warning';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transport-vehicle-page {
|
||||
.vehicle-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vehicle-toolbar__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vehicle-stat {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.vehicle-form {
|
||||
.section-title {
|
||||
margin: 18px 0 14px;
|
||||
padding-left: 10px;
|
||||
border-left: 3px solid #e74b5f;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor.el-input),
|
||||
:deep(.el-date-editor.el-input__wrapper),
|
||||
:deep(.el-select),
|
||||
:deep(.el-input),
|
||||
:deep(.el-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader .el-upload) {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
border: 1px dashed #c0c4cc;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader--large .el-upload) {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader__image) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep(.vehicle-uploader__empty) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.date-warning {
|
||||
color: #f56c6c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date-danger {
|
||||
color: #d40000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.transport-vehicle-page {
|
||||
.vehicle-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
426
src/views/vehicle/accident-record.vue
Normal file
426
src/views/vehicle/accident-record.vue
Normal file
@@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<basic-container class="accident-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('accident_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('accident_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('accident_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('accident_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号查询选择"
|
||||
value-key="value"
|
||||
class="accident-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="事故记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/accident-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
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 { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/accident-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('accident_record_add'),
|
||||
viewBtn: this.hasPermission('accident_record_view'),
|
||||
delBtn: this.hasPermission('accident_record_delete'),
|
||||
editBtn: this.hasPermission('accident_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'form.vehicleType': {
|
||||
handler(value) {
|
||||
this.updateVehicleTypeDisplays(value || '车辆');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
updateVehicleTypeDisplays(vehicleType) {
|
||||
const vehicleTypeColumn = this.findColumn(this.option.column, 'vehicleType');
|
||||
vehicleTypeColumn.disabled = Boolean(this.form.id);
|
||||
if (!this.form.id && this.form.vehicleNo) {
|
||||
this.form.vehicleNo = '';
|
||||
}
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.vehicleType = values.vehicleType || '车辆';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (Number(row.directEconomicLoss) < 0) {
|
||||
this.$message.warning('直接经济损失不能小于 0');
|
||||
return false;
|
||||
}
|
||||
if (Number(row.insuranceClaimAmount) < 0) {
|
||||
this.$message.warning('保险理赔金额不能小于 0');
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
row.directEconomicLoss !== undefined &&
|
||||
row.directEconomicLoss !== null &&
|
||||
row.directEconomicLoss !== '' &&
|
||||
row.insuranceClaimAmount !== undefined &&
|
||||
row.insuranceClaimAmount !== null &&
|
||||
row.insuranceClaimAmount !== '' &&
|
||||
Number(row.insuranceClaimAmount) > Number(row.directEconomicLoss)
|
||||
) {
|
||||
this.$message.warning('保险理赔金额不能超过直接经济损失金额');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = {
|
||||
vehicleType: '车辆',
|
||||
};
|
||||
this.updateVehicleTypeDisplays('车辆');
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
this.updateVehicleTypeDisplays(detail.vehicleType);
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出事故记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/accident-record/export-accident-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `事故记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/accident-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '事故记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.accident-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
441
src/views/vehicle/annual-inspection-record.vue
Normal file
441
src/views/vehicle/annual-inspection-record.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<basic-container class="annual-inspection-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('annual_inspection_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('annual_inspection_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('annual_inspection_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('annual_inspection_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号查询选择"
|
||||
value-key="value"
|
||||
class="annual-inspection-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="年检记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/annual-inspection-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
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 { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/annual-inspection-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('annual_inspection_record_add'),
|
||||
viewBtn: this.hasPermission('annual_inspection_record_view'),
|
||||
delBtn: this.hasPermission('annual_inspection_record_delete'),
|
||||
editBtn: this.hasPermission('annual_inspection_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'form.vehicleType': {
|
||||
handler(value) {
|
||||
this.updateVehicleTypeDisplays(value || '车辆');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
updateVehicleTypeDisplays(vehicleType) {
|
||||
const vehicleTypeColumn = this.findColumn(this.option.column, 'vehicleType');
|
||||
const vehicleLevelColumn = this.findColumn(this.option.column, 'vehicleTechnicalLevel');
|
||||
const shipTypeColumn = this.findColumn(this.option.column, 'shipInspectionType');
|
||||
const passengerColumn = this.findColumn(this.option.column, 'passengerTypeLevel');
|
||||
vehicleTypeColumn.disabled = Boolean(this.form.id);
|
||||
vehicleLevelColumn.display = vehicleType !== '船舶';
|
||||
shipTypeColumn.display = vehicleType === '船舶';
|
||||
passengerColumn.display = vehicleType !== '船舶';
|
||||
if (vehicleType === '船舶') {
|
||||
this.form.vehicleTechnicalLevel = undefined;
|
||||
this.form.passengerTypeLevel = undefined;
|
||||
} else {
|
||||
this.form.shipInspectionType = undefined;
|
||||
}
|
||||
if (!this.form.id && this.form.vehicleNo) {
|
||||
this.form.vehicleNo = '';
|
||||
}
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.vehicleType = values.vehicleType || '车辆';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
if (values.vehicleType === '船舶') {
|
||||
values.vehicleTechnicalLevel = undefined;
|
||||
values.passengerTypeLevel = undefined;
|
||||
} else {
|
||||
values.shipInspectionType = undefined;
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (Number(row.fee) < 0) {
|
||||
this.$message.warning('费用不能小于 0');
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
row.inspectionAssessmentDate &&
|
||||
row.validUntilDate &&
|
||||
new Date(row.validUntilDate.replace(/-/g, '/')).getTime() <=
|
||||
new Date(row.inspectionAssessmentDate.replace(/-/g, '/')).getTime()
|
||||
) {
|
||||
this.$message.warning('有效期截止日应大于检测评定日期');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = {
|
||||
vehicleType: '车辆',
|
||||
inspectionAssessmentDate: this.$dayjs().format('YYYY-MM-DD'),
|
||||
};
|
||||
this.updateVehicleTypeDisplays('车辆');
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
this.updateVehicleTypeDisplays(detail.vehicleType);
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出年检记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob(
|
||||
'/blade-transport/annual-inspection-record/export-annual-inspection-record',
|
||||
this.buildExportParams()
|
||||
)
|
||||
.then(res => {
|
||||
downloadXls(res.data, `年检记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/annual-inspection-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '年检记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.annual-inspection-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
862
src/views/vehicle/credit-score-quantification.vue
Normal file
862
src/views/vehicle/credit-score-quantification.vue
Normal file
@@ -0,0 +1,862 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
:permission="permissionList"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
v-if="hasPermission('credit_score_quantification_add')"
|
||||
@click="openConfig()"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('credit_score_quantification_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('credit_score_quantification_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('credit_score_quantification_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('credit_score_quantification_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #name="{ row }">
|
||||
<el-button type="primary" link @click="openConfig(row, true)">
|
||||
{{ row.name }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #status="{ row }">
|
||||
<el-tag :type="statusMap[row.status].type">
|
||||
{{ statusMap[row.status].label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-edit"
|
||||
v-if="hasPermission('credit_score_quantification_edit')"
|
||||
@click="openConfig(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
icon="el-icon-position"
|
||||
v-if="hasPermission('credit_score_quantification_publish') && row.status !== 1"
|
||||
@click="handlePublish(row)"
|
||||
>
|
||||
发布
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
text
|
||||
:icon="row.status === 1 ? 'el-icon-close' : 'el-icon-check'"
|
||||
v-if="hasPermission('credit_score_quantification_status') && row.status !== 3"
|
||||
@click="handleStatus(row)"
|
||||
>
|
||||
{{ row.status === 1 ? '停用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
text
|
||||
icon="el-icon-delete"
|
||||
v-if="hasPermission('credit_score_quantification_delete') && row.status === 3"
|
||||
@click="rowDel(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog title="评分量化表数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:title="readonly ? '查看评分量化表' : configForm.id ? '编辑评分量化表' : '新增评分量化表'"
|
||||
append-to-body
|
||||
v-model="configBox"
|
||||
width="88%"
|
||||
class="score-dialog"
|
||||
@closed="resetConfig"
|
||||
>
|
||||
<div class="score-config">
|
||||
<div class="section-title">评分量化表</div>
|
||||
<el-form :model="configForm" label-width="110px" class="base-form" :disabled="readonly">
|
||||
<el-form-item label="评定表名称" required>
|
||||
<el-input v-model="configForm.name" maxlength="30" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="configForm.remark" type="textarea" maxlength="500" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="section-head">
|
||||
<div class="section-title">评分表</div>
|
||||
</div>
|
||||
<el-table :data="configForm.categories" border class="config-table">
|
||||
<el-table-column label="序号" type="index" width="70" align="center" />
|
||||
<el-table-column label="评分类目" prop="categoryName" min-width="180" />
|
||||
<el-table-column label="评分项目数" width="140" align="center">
|
||||
<template #default="{ row }">{{ row.items.length }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" text @click="openCategory(row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="section-head standard-head">
|
||||
<div class="section-title">评估标准</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
v-if="!readonly"
|
||||
@click="openStandard()"
|
||||
>
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="configForm.standards" border class="config-table">
|
||||
<el-table-column label="序号" type="index" width="70" align="center" />
|
||||
<el-table-column label="信用等级" prop="creditLevel" width="120" align="center" />
|
||||
<el-table-column label="得分率" width="160" align="center">
|
||||
<template #default="{ row }">{{ row.scoreRateLower }}% - {{ row.scoreRateUpper }}%</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最大资金使用额度(万元)" width="210" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.creditLimitLower }} - {{ row.creditLimitUpper }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标准说明" prop="standardDescription" min-width="320" />
|
||||
<el-table-column label="操作" width="160" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-button type="primary" text @click="openStandard(row, $index)">编辑</el-button>
|
||||
<el-button type="danger" text v-if="!readonly" @click="removeStandard($index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="configBox = false">{{ readonly ? '关闭' : '取消' }}</el-button>
|
||||
<el-button type="primary" v-if="!readonly" @click="saveConfig">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="评分类目详情"
|
||||
append-to-body
|
||||
v-model="categoryBox"
|
||||
width="82%"
|
||||
class="score-dialog"
|
||||
>
|
||||
<div class="category-detail">
|
||||
<div class="category-line">评分类目：{{ currentCategory.categoryName }}</div>
|
||||
<div class="section-head">
|
||||
<span></span>
|
||||
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openItem()">
|
||||
添加
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table :data="currentCategory.items" border class="config-table">
|
||||
<el-table-column label="序号" type="index" width="70" align="center" />
|
||||
<el-table-column label="评分项目" prop="itemName" width="180" />
|
||||
<el-table-column label="得分说明" prop="scoreDescription" min-width="260" />
|
||||
<el-table-column label="选项数" width="100" align="center">
|
||||
<template #default="{ row }">{{ row.options.length }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-button type="primary" text @click="openItem(row, $index)">编辑</el-button>
|
||||
<el-button type="danger" text v-if="!readonly" @click="removeItem($index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="categoryBox = false">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="评分项目详情" append-to-body v-model="itemBox" width="76%">
|
||||
<el-form :model="itemForm" label-width="100px" :disabled="readonly">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="评分项目" required>
|
||||
<el-input v-model="itemForm.itemName" maxlength="20" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="得分说明">
|
||||
<el-input v-model="itemForm.scoreDescription" maxlength="300" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="选项描述">
|
||||
<el-input v-model="itemForm.optionDescription" maxlength="100" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="选项" required>
|
||||
<div class="option-editor">
|
||||
<div class="option-row" v-for="(option, index) in itemForm.options" :key="index">
|
||||
<el-input v-model="option.optionName" maxlength="100" placeholder="选项描述" />
|
||||
<el-input-number v-model="option.score" :min="0" :precision="2" placeholder="分值" />
|
||||
<span class="score-unit">分</span>
|
||||
<el-button type="danger" text v-if="!readonly && itemForm.options.length > 1" @click="removeOption(index)">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" text v-if="!readonly" @click="addOption">+添加选项</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="itemBox = false">取消</el-button>
|
||||
<el-button type="primary" v-if="!readonly" @click="saveItem">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="评估标准设置" append-to-body v-model="standardBox" width="76%">
|
||||
<el-form :model="standardForm" label-width="170px" :disabled="readonly">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="信用等级" required>
|
||||
<el-input v-model="standardForm.creditLevel" maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="得分率(%)" required>
|
||||
<div class="range-input">
|
||||
<el-input-number v-model="standardForm.scoreRateLower" :min="0" :max="100" :precision="0" />
|
||||
<span>至</span>
|
||||
<el-input-number v-model="standardForm.scoreRateUpper" :min="0" :max="100" :precision="0" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="得分率每增加" required>
|
||||
<el-input-number v-model="standardForm.scoreRateIncrease" :min="0" :precision="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="最大资金使用额度(万元)" required>
|
||||
<div class="range-input">
|
||||
<el-input-number v-model="standardForm.creditLimitLower" :min="0" :precision="2" />
|
||||
<span>至</span>
|
||||
<el-input-number v-model="standardForm.creditLimitUpper" :min="0" :precision="2" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="额度增加" required>
|
||||
<el-input-number v-model="standardForm.creditLimitIncrease" :min="0" :precision="2" />
|
||||
<span class="score-unit">万元</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="标准说明">
|
||||
<el-input v-model="standardForm.standardDescription" type="textarea" maxlength="500" show-word-limit />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="standardBox = false">取消</el-button>
|
||||
<el-button type="primary" v-if="!readonly" @click="saveStandard">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getList,
|
||||
getDetail,
|
||||
submit,
|
||||
remove,
|
||||
publish,
|
||||
changeStatus,
|
||||
} from '@/api/vehicle/credit-score-quantification';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
data: [],
|
||||
page: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
configBox: false,
|
||||
categoryBox: false,
|
||||
itemBox: false,
|
||||
standardBox: false,
|
||||
excelBox: false,
|
||||
readonly: false,
|
||||
excelForm: {},
|
||||
configForm: this.emptyConfig(),
|
||||
currentCategory: { items: [] },
|
||||
currentItemIndex: -1,
|
||||
currentStandardIndex: -1,
|
||||
itemForm: this.emptyItem(),
|
||||
standardForm: this.emptyStandard(),
|
||||
statusMap: {
|
||||
1: { label: '正常', type: 'success' },
|
||||
2: { label: '停用', type: 'info' },
|
||||
3: { label: '草稿', type: 'warning' },
|
||||
},
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 760,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
addBtn: false,
|
||||
viewBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 300,
|
||||
column: [
|
||||
{
|
||||
label: '评定表名称',
|
||||
prop: 'name',
|
||||
slot: true,
|
||||
minWidth: 180,
|
||||
search: true,
|
||||
maxlength: 30,
|
||||
rules: [{ required: true, message: '请输入评定表名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
minWidth: 260,
|
||||
overHidden: true,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
type: 'select',
|
||||
search: true,
|
||||
slot: true,
|
||||
dataType: 'number',
|
||||
dicData: [
|
||||
{ label: '正常', value: 1 },
|
||||
{ label: '停用', value: 2 },
|
||||
{ label: '草稿', value: 3 },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
minWidth: 160,
|
||||
},
|
||||
{
|
||||
label: '创建开始时间',
|
||||
prop: 'createTimeStart',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD 00:00:00',
|
||||
valueFormat: 'YYYY-MM-DD 00:00:00',
|
||||
search: true,
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '创建结束时间',
|
||||
prop: 'createTimeEnd',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD 23:59:59',
|
||||
valueFormat: 'YYYY-MM-DD 23:59:59',
|
||||
search: true,
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
action: '/blade-transport/credit-score-quantification/import-credit-score-quantification',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: false,
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
emptyConfig() {
|
||||
return {
|
||||
name: '',
|
||||
remark: '',
|
||||
standardDescription: '',
|
||||
status: 3,
|
||||
categories: this.defaultCategories(),
|
||||
standards: [],
|
||||
};
|
||||
},
|
||||
defaultCategories() {
|
||||
return [
|
||||
{ categoryCode: 'basic', categoryName: '基础得分项', sort: 1, items: [] },
|
||||
{ categoryCode: 'plus', categoryName: '加分项目', sort: 2, items: [] },
|
||||
{ categoryCode: 'minus', categoryName: '减分项目', sort: 3, items: [] },
|
||||
];
|
||||
},
|
||||
emptyItem() {
|
||||
return {
|
||||
itemName: '',
|
||||
scoreDescription: '',
|
||||
optionDescription: '',
|
||||
options: [{ optionName: '', score: 0 }],
|
||||
};
|
||||
},
|
||||
emptyStandard() {
|
||||
return {
|
||||
creditLevel: '',
|
||||
scoreRateLower: undefined,
|
||||
scoreRateUpper: undefined,
|
||||
scoreRateIncrease: undefined,
|
||||
creditLimitLower: undefined,
|
||||
creditLimitUpper: undefined,
|
||||
creditLimitIncrease: undefined,
|
||||
standardDescription: '',
|
||||
};
|
||||
},
|
||||
normalizeDetail(detail) {
|
||||
const categories = this.defaultCategories();
|
||||
const map = {};
|
||||
(detail.categories || []).forEach(category => {
|
||||
map[category.categoryCode] = {
|
||||
...category,
|
||||
items: (category.items || []).map(item => ({
|
||||
...item,
|
||||
options: item.options && item.options.length ? item.options : [{ optionName: '', score: 0 }],
|
||||
})),
|
||||
};
|
||||
});
|
||||
return {
|
||||
...detail,
|
||||
categories: categories.map(category => map[category.categoryCode] || category),
|
||||
standards: detail.standards || [],
|
||||
};
|
||||
},
|
||||
openConfig(row, readonly = false) {
|
||||
this.readonly = readonly;
|
||||
if (row && row.id) {
|
||||
getDetail(row.id).then(res => {
|
||||
this.configForm = this.normalizeDetail(res.data.data);
|
||||
this.configBox = true;
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.configForm = this.emptyConfig();
|
||||
if (row && row.name) {
|
||||
this.configForm.name = row.name;
|
||||
}
|
||||
this.configBox = true;
|
||||
},
|
||||
resetConfig() {
|
||||
this.readonly = false;
|
||||
this.configForm = this.emptyConfig();
|
||||
},
|
||||
openCategory(category) {
|
||||
this.currentCategory = category;
|
||||
this.categoryBox = true;
|
||||
},
|
||||
openItem(row, index = -1) {
|
||||
this.currentItemIndex = index;
|
||||
this.itemForm = row ? JSON.parse(JSON.stringify(row)) : this.emptyItem();
|
||||
this.itemBox = true;
|
||||
},
|
||||
saveItem() {
|
||||
if (!this.itemForm.itemName || !this.itemForm.itemName.trim()) {
|
||||
this.$message.warning('请输入评分项目');
|
||||
return;
|
||||
}
|
||||
if (!this.itemForm.options.length) {
|
||||
this.$message.warning('至少添加1条档位选项');
|
||||
return;
|
||||
}
|
||||
const item = JSON.parse(JSON.stringify(this.itemForm));
|
||||
if (this.currentItemIndex >= 0) {
|
||||
this.currentCategory.items.splice(this.currentItemIndex, 1, item);
|
||||
} else {
|
||||
this.currentCategory.items.push(item);
|
||||
}
|
||||
this.itemBox = false;
|
||||
},
|
||||
removeItem(index) {
|
||||
this.currentCategory.items.splice(index, 1);
|
||||
},
|
||||
addOption() {
|
||||
this.itemForm.options.push({ optionName: '', score: 0 });
|
||||
},
|
||||
removeOption(index) {
|
||||
this.itemForm.options.splice(index, 1);
|
||||
},
|
||||
openStandard(row, index = -1) {
|
||||
this.currentStandardIndex = index;
|
||||
this.standardForm = row ? JSON.parse(JSON.stringify(row)) : this.emptyStandard();
|
||||
this.standardBox = true;
|
||||
},
|
||||
saveStandard() {
|
||||
if (!this.standardForm.creditLevel || !this.standardForm.creditLevel.trim()) {
|
||||
this.$message.warning('请输入信用等级');
|
||||
return;
|
||||
}
|
||||
if (
|
||||
[
|
||||
this.standardForm.scoreRateLower,
|
||||
this.standardForm.scoreRateUpper,
|
||||
this.standardForm.scoreRateIncrease,
|
||||
this.standardForm.creditLimitLower,
|
||||
this.standardForm.creditLimitUpper,
|
||||
this.standardForm.creditLimitIncrease,
|
||||
].some(value => value === undefined || value === null || value === '')
|
||||
) {
|
||||
this.$message.warning('请完整填写评估标准必填项');
|
||||
return;
|
||||
}
|
||||
if (Number(this.standardForm.scoreRateLower) >= Number(this.standardForm.scoreRateUpper)) {
|
||||
this.$message.warning('得分率下限必须小于上限');
|
||||
return;
|
||||
}
|
||||
const standard = JSON.parse(JSON.stringify(this.standardForm));
|
||||
if (this.currentStandardIndex >= 0) {
|
||||
this.configForm.standards.splice(this.currentStandardIndex, 1, standard);
|
||||
} else {
|
||||
this.configForm.standards.push(standard);
|
||||
}
|
||||
this.standardBox = false;
|
||||
},
|
||||
removeStandard(index) {
|
||||
this.configForm.standards.splice(index, 1);
|
||||
},
|
||||
validateConfig() {
|
||||
if (!this.configForm.name || !this.configForm.name.trim()) {
|
||||
this.$message.warning('请输入评定表名称');
|
||||
return false;
|
||||
}
|
||||
const basic = this.configForm.categories.find(item => item.categoryCode === 'basic');
|
||||
if (!basic || basic.items.length === 0) {
|
||||
this.$message.warning('至少配置1个基础得分项目');
|
||||
return false;
|
||||
}
|
||||
for (const category of this.configForm.categories) {
|
||||
for (const item of category.items) {
|
||||
if (!item.options || item.options.length === 0) {
|
||||
this.$message.warning(`${item.itemName}至少存在1条档位选项`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
saveConfig() {
|
||||
if (!this.validateConfig()) return;
|
||||
submit(this.configForm).then(() => {
|
||||
this.configBox = false;
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('仅草稿状态量表可删除，确定删除所选数据?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
handlePublish(row) {
|
||||
this.$confirm('发布前将校验所有评分项目、档位选项和评估标准，是否继续？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => publish(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '发布成功!' });
|
||||
});
|
||||
},
|
||||
handleStatus(row) {
|
||||
const nextStatus = row.status === 1 ? 2 : 1;
|
||||
const actionName = nextStatus === 1 ? '启用' : '停用';
|
||||
this.$confirm(`是否确认${actionName}该量表？`, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => changeStatus(row.id, nextStatus))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出评分量化表数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob(
|
||||
'/blade-transport/credit-score-quantification/export-credit-score-quantification',
|
||||
this.buildExportParams()
|
||||
)
|
||||
.then(res => {
|
||||
downloadXls(res.data, `评分量化表${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/credit-score-quantification/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '评分量化表模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.score-config {
|
||||
padding: 4px 12px 12px;
|
||||
}
|
||||
|
||||
.base-form {
|
||||
max-width: 1080px;
|
||||
margin: 10px auto 28px;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 18px 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.standard-head {
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.config-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.category-line {
|
||||
margin: 0 0 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.option-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1fr) 190px 32px 70px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.range-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.score-unit {
|
||||
margin-left: 8px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.score-dialog .el-dialog__body) {
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
1243
src/views/vehicle/customer-archive.vue
Normal file
1243
src/views/vehicle/customer-archive.vue
Normal file
File diff suppressed because it is too large
Load Diff
413
src/views/vehicle/etc-record.vue
Normal file
413
src/views/vehicle/etc-record.vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<basic-container class="etc-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('etc_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('etc_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('etc_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('etc_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号模糊查询选择"
|
||||
value-key="value"
|
||||
class="etc-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="ETC记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/etc-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/etc-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('etc_record_add'),
|
||||
viewBtn: this.hasPermission('etc_record_view'),
|
||||
delBtn: this.hasPermission('etc_record_delete'),
|
||||
editBtn: this.hasPermission('etc_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
getVehicleList(1, 20, { plateNo: queryString })
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
isEmpty(value) {
|
||||
return value === undefined || value === null || value === '';
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.dataSource = values.dataSource || '手工录入';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
if (values.etcCardNo) {
|
||||
values.etcCardNo = values.etcCardNo.trim();
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateDecimal(value, label, required = false) {
|
||||
if (this.isEmpty(value)) {
|
||||
if (required) {
|
||||
this.$message.warning(`请输入${label}`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
if (Number(value) < 0) {
|
||||
this.$message.warning(`${label}不能小于 0`);
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(String(value))) {
|
||||
this.$message.warning(`${label}最多保留 2 位小数`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (row.entryTime && row.exitTime && new Date(row.exitTime) <= new Date(row.entryTime)) {
|
||||
this.$message.warning('出口时间应大于入口时间');
|
||||
return false;
|
||||
}
|
||||
if (!this.validateDecimal(row.transactionAmount, '交易金额', true)) return false;
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注不能超过 200 字');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = { dataSource: '手工录入' };
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出ETC记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/etc-record/export-etc-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `ETC记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(`/blade-transport/etc-record/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
|
||||
downloadXls(res.data, 'ETC记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.etc-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
449
src/views/vehicle/insurance-record.vue
Normal file
449
src/views/vehicle/insurance-record.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<basic-container class="insurance-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('insurance_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('insurance_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('insurance_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('insurance_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号模糊查询选择"
|
||||
value-key="value"
|
||||
class="insurance-record-page__vehicle-input"
|
||||
/>
|
||||
</template>
|
||||
<template #policyFileForm>
|
||||
<div class="insurance-record-page__upload">
|
||||
<div class="insurance-record-page__upload-icon">OCR</div>
|
||||
<div class="insurance-record-page__upload-text">
|
||||
<strong>上传图片,自动识别填写</strong>
|
||||
<span>支持JPG、PNG、PDF上传</span>
|
||||
</div>
|
||||
<el-upload
|
||||
:action="recognizeUrl"
|
||||
:data="recognizeData"
|
||||
:headers="uploadHeaders"
|
||||
:show-file-list="false"
|
||||
:on-success="handleRecognizeSuccess"
|
||||
:on-error="handleRecognizeError"
|
||||
accept=".jpg,.jpeg,.png,.pdf"
|
||||
v-if="hasPermission('insurance_record_ocr')"
|
||||
>
|
||||
<el-button type="primary" plain>上传文件</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="保险记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/insurance-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
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 { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/insurance-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('insurance_record_add'),
|
||||
viewBtn: this.hasPermission('insurance_record_view'),
|
||||
delBtn: this.hasPermission('insurance_record_delete'),
|
||||
editBtn: this.hasPermission('insurance_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
recognizeUrl() {
|
||||
return '/blade-transport/insurance-record/recognize';
|
||||
},
|
||||
recognizeData() {
|
||||
return {
|
||||
vehicleType: this.form.vehicleType || '车辆',
|
||||
ocrTemplate: this.form.ocrTemplate,
|
||||
};
|
||||
},
|
||||
uploadHeaders() {
|
||||
return {
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶'
|
||||
? { shipIdentifierNo: queryString }
|
||||
: { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
if (values.policyNo) {
|
||||
values.policyNo = values.policyNo.trim();
|
||||
}
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (row.startDate && row.endDate && row.endDate < row.startDate) {
|
||||
this.$message.warning('结束日期不能早于开始日期');
|
||||
return false;
|
||||
}
|
||||
if (Number(row.insuredAmount) < 0 || Number(row.premium) < 0) {
|
||||
this.$message.warning('保额、保费不能小于 0');
|
||||
return false;
|
||||
}
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注最多 200 个字');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form.vehicleType = '车辆';
|
||||
this.form.ocrTemplate = '紫金-机动车交强险';
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
this.form = res.data.data;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出保险记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
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`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/insurance-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '保险记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
handleRecognizeSuccess(res) {
|
||||
if (res && res.success && res.data) {
|
||||
this.form = {
|
||||
...this.form,
|
||||
...res.data,
|
||||
vehicleType: res.data.vehicleType || this.form.vehicleType || '车辆',
|
||||
};
|
||||
this.$message.success('识别完成');
|
||||
} else {
|
||||
this.$message.warning((res && res.msg) || '识别失败，请手动填写');
|
||||
}
|
||||
},
|
||||
handleRecognizeError() {
|
||||
this.$message.warning('识别失败，请手动填写');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.insurance-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__upload-text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
color: #303133;
|
||||
|
||||
span {
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
602
src/views/vehicle/maintenance-plan.vue
Normal file
602
src/views/vehicle/maintenance-plan.vue
Normal file
@@ -0,0 +1,602 @@
|
||||
<template>
|
||||
<basic-container class="maintenance-plan-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_plan_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_plan_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_plan_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_plan_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #mileage="{ row }">
|
||||
<span>{{ formatMileage(row.mileage, row.mileageUnit) }}</span>
|
||||
</template>
|
||||
<template #nextMaintenanceMileage="{ row }">
|
||||
<span>{{ formatMileage(row.nextMaintenanceMileage, row.mileageUnit) }}</span>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="保养记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getDetail, add, update, remove } from '@/api/vehicle/maintenance-plan';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { formatUpdateUserName } from '@/utils/audit';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateNonNegative = (rule, value, callback) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
callback();
|
||||
} else if (Number(value) < 0) {
|
||||
callback(new Error('不能小于 0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 980,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
viewBtn: true,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 220,
|
||||
column: [
|
||||
{
|
||||
label: '车船类型',
|
||||
prop: 'vehicleType',
|
||||
type: 'radio',
|
||||
minWidth: 110,
|
||||
dicData: [
|
||||
{ label: '车辆', value: '车辆' },
|
||||
{ label: '船舶', value: '船舶' },
|
||||
],
|
||||
value: '车辆',
|
||||
search: true,
|
||||
rules: [{ required: true, message: '请选择车船类型', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '车牌号/船号',
|
||||
prop: 'vehicleNo',
|
||||
slot: true,
|
||||
search: true,
|
||||
minWidth: 130,
|
||||
rules: [
|
||||
{ required: true, message: '请输入车牌号/船号', trigger: 'blur' },
|
||||
{ max: 30, message: '最多 30 个字符', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '保养人',
|
||||
prop: 'maintainer',
|
||||
rules: [{ max: 20, message: '最多 20 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '保养时间',
|
||||
prop: 'maintenanceTime',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
minWidth: 170,
|
||||
rules: [{ required: true, message: '请选择保养时间', trigger: 'click' }],
|
||||
},
|
||||
{
|
||||
label: '里程/航程数',
|
||||
prop: 'mileage',
|
||||
type: 'number',
|
||||
precision: 2,
|
||||
minWidth: 130,
|
||||
slot: true,
|
||||
rules: [{ validator: validateNonNegative, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '里程单位',
|
||||
prop: 'mileageUnit',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{ label: '公里', value: '公里' },
|
||||
{ label: '海里', value: '海里' },
|
||||
],
|
||||
value: '公里',
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
label: '保养项目',
|
||||
prop: 'maintenanceItem',
|
||||
minWidth: 160,
|
||||
rules: [{ max: 100, message: '最多 100 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '费用',
|
||||
prop: 'cost',
|
||||
type: 'number',
|
||||
precision: 2,
|
||||
rules: [
|
||||
{ required: true, message: '请输入费用', trigger: 'blur' },
|
||||
{ validator: validateNonNegative, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '店名',
|
||||
prop: 'storeName',
|
||||
rules: [{ max: 50, message: '最多 50 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '联系电话',
|
||||
prop: 'contactPhone',
|
||||
minWidth: 150,
|
||||
rules: [{ max: 20, message: '最多 20 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
prop: 'address',
|
||||
minWidth: 180,
|
||||
overHidden: true,
|
||||
span: 24,
|
||||
rules: [{ max: 100, message: '最多 100 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '下次保养时间',
|
||||
prop: 'nextMaintenanceTime',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
minWidth: 170,
|
||||
},
|
||||
{
|
||||
label: '下次保养里程/航程',
|
||||
prop: 'nextMaintenanceMileage',
|
||||
type: 'number',
|
||||
precision: 2,
|
||||
minWidth: 170,
|
||||
slot: true,
|
||||
rules: [{ validator: validateNonNegative, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '附件',
|
||||
prop: 'attachments',
|
||||
type: 'upload',
|
||||
listType: 'text',
|
||||
multiple: true,
|
||||
accept: '.jpg,.jpeg,.png,.pdf',
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
url: 'link',
|
||||
name: 'name',
|
||||
},
|
||||
action: '/blade-resource/oss/endpoint/put-file',
|
||||
span: 24,
|
||||
minWidth: 100,
|
||||
slot: true,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
type: 'textarea',
|
||||
minRows: 4,
|
||||
span: 24,
|
||||
hide: true,
|
||||
rules: [{ max: 500, message: '最多 500 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
display: false,
|
||||
minWidth: 170,
|
||||
},
|
||||
{
|
||||
label: '创建开始时间',
|
||||
prop: 'createTimeStart',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD 00:00:00',
|
||||
valueFormat: 'YYYY-MM-DD 00:00:00',
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '创建结束时间',
|
||||
prop: 'createTimeEnd',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD 23:59:59',
|
||||
valueFormat: 'YYYY-MM-DD 23:59:59',
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '组织',
|
||||
prop: 'createDept',
|
||||
type: 'tree',
|
||||
dicData: [],
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
checkStrictly: true,
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '更新人',
|
||||
prop: 'updateUserName',
|
||||
formatter: formatUpdateUserName,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 170,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
action: '/blade-transport/maintenance-plan/import-maintenance-plan',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('maintenance_plan_add'),
|
||||
viewBtn: this.hasPermission('maintenance_plan_view'),
|
||||
delBtn: this.hasPermission('maintenance_plan_delete'),
|
||||
editBtn: this.hasPermission('maintenance_plan_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
formatMileage(value, unit) {
|
||||
if (value === undefined || value === null || value === '') return '';
|
||||
return `${Math.max(Number(value), 0)} ${unit || '公里'}`;
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个';
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
if (!values.mileageUnit) {
|
||||
values.mileageUnit = values.vehicleType === '船舶' ? '海里' : '公里';
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
add(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出保养记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/maintenance-plan/export-maintenance-plan', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `保养记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/maintenance-plan/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '保养记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.maintenance-plan-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
598
src/views/vehicle/maintenance-record.vue
Normal file
598
src/views/vehicle/maintenance-record.vue
Normal file
@@ -0,0 +1,598 @@
|
||||
<template>
|
||||
<basic-container class="maintenance-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('maintenance_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #mileage="{ row }">
|
||||
<span>{{ formatMileage(row.mileage, row.mileageUnit) }}</span>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="维修记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getDetail, add, update, remove } from '@/api/vehicle/maintenance-record';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { formatUpdateUserName } from '@/utils/audit';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateNonNegative = (rule, value, callback) => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
callback();
|
||||
} else if (Number(value) < 0) {
|
||||
callback(new Error('不能小于 0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
option: {
|
||||
height: 'auto',
|
||||
calcHeight: 32,
|
||||
dialogWidth: 980,
|
||||
tip: false,
|
||||
searchShow: true,
|
||||
searchMenuSpan: 6,
|
||||
border: true,
|
||||
index: true,
|
||||
viewBtn: true,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 220,
|
||||
column: [
|
||||
{
|
||||
label: '车船类型',
|
||||
prop: 'vehicleType',
|
||||
type: 'radio',
|
||||
minWidth: 110,
|
||||
dicData: [
|
||||
{ label: '车辆', value: '车辆' },
|
||||
{ label: '船舶', value: '船舶' },
|
||||
],
|
||||
value: '车辆',
|
||||
search: true,
|
||||
rules: [{ required: true, message: '请选择车船类型', trigger: 'change' }],
|
||||
},
|
||||
{
|
||||
label: '车牌号/船号',
|
||||
prop: 'vehicleNo',
|
||||
slot: true,
|
||||
search: true,
|
||||
minWidth: 130,
|
||||
rules: [
|
||||
{ required: true, message: '请输入车牌号/船号', trigger: 'blur' },
|
||||
{ max: 30, message: '最多 30 个字符', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '维修人',
|
||||
prop: 'maintainer',
|
||||
rules: [{ max: 20, message: '最多 20 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '维修时间',
|
||||
prop: 'maintenanceTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
minWidth: 170,
|
||||
rules: [{ required: true, message: '请选择维修时间', trigger: 'click' }],
|
||||
},
|
||||
{
|
||||
label: '维修位置',
|
||||
prop: 'location',
|
||||
minWidth: 160,
|
||||
rules: [{ max: 100, message: '最多 100 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '更换零件',
|
||||
prop: 'replacedPart',
|
||||
minWidth: 160,
|
||||
overHidden: true,
|
||||
rules: [{ max: 200, message: '最多 200 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '费用',
|
||||
prop: 'cost',
|
||||
type: 'number',
|
||||
precision: 2,
|
||||
rules: [
|
||||
{ required: true, message: '请输入费用', trigger: 'blur' },
|
||||
{ validator: validateNonNegative, trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '维修单位',
|
||||
prop: 'company',
|
||||
minWidth: 180,
|
||||
rules: [{ max: 50, message: '最多 50 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '联系方式',
|
||||
prop: 'contact',
|
||||
minWidth: 150,
|
||||
rules: [{ max: 20, message: '最多 20 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '出厂时间',
|
||||
prop: 'factoryTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
minWidth: 170,
|
||||
},
|
||||
{
|
||||
label: '里程/航程数',
|
||||
prop: 'mileage',
|
||||
type: 'number',
|
||||
precision: 2,
|
||||
minWidth: 130,
|
||||
slot: true,
|
||||
rules: [{ validator: validateNonNegative, trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '里程单位',
|
||||
prop: 'mileageUnit',
|
||||
type: 'select',
|
||||
dicData: [
|
||||
{ label: '公里', value: '公里' },
|
||||
{ label: '海里', value: '海里' },
|
||||
],
|
||||
value: '公里',
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
label: '地址',
|
||||
prop: 'address',
|
||||
minWidth: 180,
|
||||
overHidden: true,
|
||||
span: 24,
|
||||
rules: [{ max: 100, message: '最多 100 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '附件',
|
||||
prop: 'attachments',
|
||||
type: 'upload',
|
||||
listType: 'text',
|
||||
multiple: true,
|
||||
accept: '.jpg,.jpeg,.png,.pdf',
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
url: 'link',
|
||||
name: 'name',
|
||||
},
|
||||
action: '/blade-resource/oss/endpoint/put-file',
|
||||
span: 24,
|
||||
minWidth: 100,
|
||||
slot: true,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remark',
|
||||
type: 'textarea',
|
||||
minRows: 4,
|
||||
span: 24,
|
||||
hide: true,
|
||||
rules: [{ max: 500, message: '最多 500 个字符', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
display: false,
|
||||
minWidth: 170,
|
||||
},
|
||||
{
|
||||
label: '创建开始时间',
|
||||
prop: 'createTimeStart',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD 00:00:00',
|
||||
valueFormat: 'YYYY-MM-DD 00:00:00',
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '创建结束时间',
|
||||
prop: 'createTimeEnd',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD 23:59:59',
|
||||
valueFormat: 'YYYY-MM-DD 23:59:59',
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '组织',
|
||||
prop: 'createDept',
|
||||
type: 'tree',
|
||||
dicData: [],
|
||||
props: {
|
||||
label: 'title',
|
||||
value: 'id',
|
||||
},
|
||||
checkStrictly: true,
|
||||
search: true,
|
||||
hide: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '更新人',
|
||||
prop: 'updateUserName',
|
||||
formatter: formatUpdateUserName,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
display: false,
|
||||
minWidth: 170,
|
||||
},
|
||||
],
|
||||
},
|
||||
excelOption: {
|
||||
submitBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '模板上传',
|
||||
prop: 'excelFile',
|
||||
type: 'upload',
|
||||
drag: true,
|
||||
loadText: '模板上传中，请稍等',
|
||||
span: 24,
|
||||
propsHttp: {
|
||||
res: 'data',
|
||||
},
|
||||
tip: '请上传 .xls,.xlsx 标准格式文件',
|
||||
action: '/blade-transport/maintenance-record/import-maintenance-record',
|
||||
},
|
||||
{
|
||||
label: '模板下载',
|
||||
prop: 'excelTemplate',
|
||||
formslot: true,
|
||||
span: 24,
|
||||
},
|
||||
],
|
||||
},
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('maintenance_record_add'),
|
||||
viewBtn: this.hasPermission('maintenance_record_view'),
|
||||
delBtn: this.hasPermission('maintenance_record_delete'),
|
||||
editBtn: this.hasPermission('maintenance_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
let ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
formatMileage(value, unit) {
|
||||
if (value === undefined || value === null || value === '') return '';
|
||||
return `${Math.max(Number(value), 0)} ${unit || '公里'}`;
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个';
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
if (!values.mileageUnit) {
|
||||
values.mileageUnit = values.vehicleType === '船舶' ? '海里' : '公里';
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
add(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
update(this.normalizeRow(row)).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出维修记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/maintenance-record/export-maintenance-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `维修记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/maintenance-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '维修记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.maintenance-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
431
src/views/vehicle/mileage-record.vue
Normal file
431
src/views/vehicle/mileage-record.vue
Normal file
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<basic-container class="mileage-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('mileage_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('mileage_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('mileage_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('mileage_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
:disabled="Boolean(form.id)"
|
||||
clearable
|
||||
placeholder="输入车牌号模糊查询选择"
|
||||
value-key="value"
|
||||
class="mileage-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="里程记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/mileage-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/mileage-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('mileage_record_add'),
|
||||
viewBtn: this.hasPermission('mileage_record_view'),
|
||||
delBtn: this.hasPermission('mileage_record_delete'),
|
||||
editBtn: this.hasPermission('mileage_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
getVehicleList(1, 20, { plateNo: queryString })
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(records.map(item => ({ value: item.plateNo })));
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
isEmpty(value) {
|
||||
return value === undefined || value === null || value === '';
|
||||
},
|
||||
toNumber(value) {
|
||||
return this.isEmpty(value) ? null : Number(value);
|
||||
},
|
||||
toMoney(value) {
|
||||
return Math.round(Number(value) * 100) / 100;
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
const previousMonthMileage = this.toNumber(values.previousMonthMileage);
|
||||
const currentMonthMileage = this.toNumber(values.currentMonthMileage);
|
||||
if (this.isEmpty(values.monthlyMileage) && previousMonthMileage !== null && currentMonthMileage !== null) {
|
||||
values.monthlyMileage = this.toMoney(currentMonthMileage - previousMonthMileage);
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateMileage(value, label) {
|
||||
if (this.isEmpty(value)) {
|
||||
return true;
|
||||
}
|
||||
if (Number(value) < 0) {
|
||||
this.$message.warning(`${label}不能小于 0`);
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(String(value))) {
|
||||
this.$message.warning(`${label}最多保留 2 位小数`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
validateRow(row) {
|
||||
const mileageFields = [
|
||||
['previousMonthMileage', '上月统计里程'],
|
||||
['currentMonthMileage', '本月统计里程'],
|
||||
['monthlyMileage', '本月行驶里程'],
|
||||
['totalMileage', '累计行驶里程'],
|
||||
];
|
||||
if (!mileageFields.every(([prop, label]) => this.validateMileage(row[prop], label))) {
|
||||
return false;
|
||||
}
|
||||
const previousMonthMileage = this.toNumber(row.previousMonthMileage);
|
||||
const currentMonthMileage = this.toNumber(row.currentMonthMileage);
|
||||
const monthlyMileage = this.toNumber(row.monthlyMileage);
|
||||
const totalMileage = this.toNumber(row.totalMileage);
|
||||
if (
|
||||
previousMonthMileage !== null &&
|
||||
currentMonthMileage !== null &&
|
||||
monthlyMileage !== null &&
|
||||
this.toMoney(currentMonthMileage - previousMonthMileage) !== this.toMoney(monthlyMileage)
|
||||
) {
|
||||
this.$message.warning('本月行驶里程应等于本月统计里程减去上月统计里程');
|
||||
return false;
|
||||
}
|
||||
if (totalMileage !== null && currentMonthMileage !== null && totalMileage < currentMonthMileage) {
|
||||
this.$message.warning('累计行驶里程应大于等于本月统计里程');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
const vehicleNoColumn = this.findColumn(this.option.column, 'vehicleNo');
|
||||
vehicleNoColumn.disabled = type !== 'add';
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出里程记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/mileage-record/export-mileage-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `里程记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(`/blade-transport/mileage-record/export-template?${this.website.tokenHeader}=${getToken()}`).then(
|
||||
res => {
|
||||
downloadXls(res.data, '里程记录模板.xlsx');
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mileage-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
450
src/views/vehicle/oil-electric-record.vue
Normal file
450
src/views/vehicle/oil-electric-record.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<basic-container class="oil-electric-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('oil_electric_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('oil_electric_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('oil_electric_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('oil_electric_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号查询选择"
|
||||
value-key="value"
|
||||
class="oil-electric-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="油电记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/oil-electric-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
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 { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/oil-electric-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('oil_electric_record_add'),
|
||||
viewBtn: this.hasPermission('oil_electric_record_view'),
|
||||
delBtn: this.hasPermission('oil_electric_record_delete'),
|
||||
editBtn: this.hasPermission('oil_electric_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'form.vehicleType': {
|
||||
handler() {
|
||||
this.updateVehicleType();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
'form.feeType': {
|
||||
handler(value) {
|
||||
this.updateFeeType(value || '加油');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
updateVehicleType() {
|
||||
if (!this.form.id && this.form.vehicleNo) {
|
||||
this.form.vehicleNo = '';
|
||||
}
|
||||
},
|
||||
updateFeeType(feeType) {
|
||||
const oilProductColumn = this.findColumn(this.option.column, 'oilProduct');
|
||||
const unitPriceColumn = this.findColumn(this.option.column, 'unitPrice');
|
||||
oilProductColumn.display = feeType !== '充电';
|
||||
unitPriceColumn.append = feeType === '充电' ? '元/度' : '元/升';
|
||||
if (feeType === '充电') {
|
||||
this.form.oilProduct = undefined;
|
||||
}
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
isEmpty(value) {
|
||||
return value === undefined || value === null || value === '';
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.vehicleType = values.vehicleType || '车辆';
|
||||
values.dataSource = values.dataSource || '手工录入';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleType === '船舶' ? values.vehicleNo.trim() : values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
if (values.feeType === '充电') {
|
||||
values.oilProduct = undefined;
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateDecimal(value, label, required = false) {
|
||||
if (this.isEmpty(value)) {
|
||||
if (required) {
|
||||
this.$message.warning(`请输入${label}`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
if (Number(value) < 0) {
|
||||
this.$message.warning(`${label}不能小于 0`);
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(String(value))) {
|
||||
this.$message.warning(`${label}最多保留 2 位小数`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (!this.validateDecimal(row.transactionAmount, '交易金额', true)) return false;
|
||||
if (!this.validateDecimal(row.quantity, '数量')) return false;
|
||||
if (!this.validateDecimal(row.unitPrice, '单价')) return false;
|
||||
if (!this.validateDecimal(row.balance, '余额')) return false;
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注不能超过 200 字');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = { vehicleType: '车辆', feeType: '加油', dataSource: '手工录入' };
|
||||
this.updateFeeType('加油');
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
this.updateFeeType(detail.feeType);
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出油电记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/oil-electric-record/export-oil-electric-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `油电记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(`/blade-transport/oil-electric-record/export-template?${this.website.tokenHeader}=${getToken()}`).then(
|
||||
res => {
|
||||
downloadXls(res.data, '油电记录模板.xlsx');
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.oil-electric-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
441
src/views/vehicle/other-expense-record.vue
Normal file
441
src/views/vehicle/other-expense-record.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<basic-container class="other-expense-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('other_expense_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('other_expense_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('other_expense_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('other_expense_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号查询选择"
|
||||
value-key="value"
|
||||
class="other-expense-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="其他费用记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/other-expense-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
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 { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/other-expense-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('other_expense_record_add'),
|
||||
viewBtn: this.hasPermission('other_expense_record_view'),
|
||||
delBtn: this.hasPermission('other_expense_record_delete'),
|
||||
editBtn: this.hasPermission('other_expense_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'form.vehicleType': {
|
||||
handler() {
|
||||
this.updateVehicleType();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
updateVehicleType() {
|
||||
if (!this.form.id && this.form.vehicleNo) {
|
||||
this.form.vehicleNo = '';
|
||||
}
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
isEmpty(value) {
|
||||
return value === undefined || value === null || value === '';
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.vehicleType = values.vehicleType || '车辆';
|
||||
values.dataSource = values.dataSource || '手工录入';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleType === '船舶' ? values.vehicleNo.trim() : values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateDecimal(value, label, required = false) {
|
||||
if (this.isEmpty(value)) {
|
||||
if (required) {
|
||||
this.$message.warning(`请输入${label}`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
if (Number(value) < 0) {
|
||||
this.$message.warning(`${label}不能小于 0`);
|
||||
return false;
|
||||
}
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(String(value))) {
|
||||
this.$message.warning(`${label}最多保留 2 位小数`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (!this.validateDecimal(row.amount, '金额', true)) return false;
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注不能超过 200 字');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = {
|
||||
vehicleType: '车辆',
|
||||
expenseDate: this.$dayjs().format('YYYY-MM-DD'),
|
||||
dataSource: '手工录入',
|
||||
};
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
buildQuery(params = {}) {
|
||||
const { expenseDateRange } = this.query;
|
||||
const values = { ...params, ...this.query };
|
||||
if (expenseDateRange) {
|
||||
values.expenseDateStart = expenseDateRange[0];
|
||||
values.expenseDateEnd = expenseDateRange[1];
|
||||
values.expenseDateRange = null;
|
||||
}
|
||||
return values;
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, this.buildQuery(params))
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出其他费用记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/other-expense-record/export-other-expense-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `其他费用记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.buildQuery(),
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(`/blade-transport/other-expense-record/export-template?${this.website.tokenHeader}=${getToken()}`).then(
|
||||
res => {
|
||||
downloadXls(res.data, '其他费用记录模板.xlsx');
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.other-expense-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
393
src/views/vehicle/tire-replacement-record.vue
Normal file
393
src/views/vehicle/tire-replacement-record.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<basic-container class="tire-replacement-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('tire_replacement_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('tire_replacement_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('tire_replacement_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('tire_replacement_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="请输入关键字"
|
||||
value-key="value"
|
||||
class="tire-replacement-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="换胎记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/tire-replacement-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/tire-replacement-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('tire_replacement_record_add'),
|
||||
viewBtn: this.hasPermission('tire_replacement_record_view'),
|
||||
delBtn: this.hasPermission('tire_replacement_record_delete'),
|
||||
editBtn: this.hasPermission('tire_replacement_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
getVehicleList(1, 20, { plateNo: queryString })
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(records.map(item => ({ value: item.plateNo })));
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (Number(row.replacementCost) < 0) {
|
||||
this.$message.warning('换胎费用不能小于 0');
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
row.tireQuantity !== undefined &&
|
||||
row.tireQuantity !== null &&
|
||||
row.tireQuantity !== '' &&
|
||||
(!Number.isInteger(Number(row.tireQuantity)) || Number(row.tireQuantity) <= 0)
|
||||
) {
|
||||
this.$message.warning('换胎数量必须为正整数');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = {};
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出换胎记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob(
|
||||
'/blade-transport/tire-replacement-record/export-tire-replacement-record',
|
||||
this.buildExportParams()
|
||||
)
|
||||
.then(res => {
|
||||
downloadXls(res.data, `换胎记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/tire-replacement-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '换胎记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tire-replacement-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
411
src/views/vehicle/transport-change-record.vue
Normal file
411
src/views/vehicle/transport-change-record.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<basic-container class="transport-change-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('transport_change_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('transport_change_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('transport_change_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('transport_change_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button v-if="row.vehicleNo" type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号模糊查询选择"
|
||||
value-key="value"
|
||||
class="transport-change-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="变更记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/transport-change-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
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 { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/transport-change-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('transport_change_record_add'),
|
||||
viewBtn: this.hasPermission('transport_change_record_view'),
|
||||
delBtn: this.hasPermission('transport_change_record_delete'),
|
||||
editBtn: this.hasPermission('transport_change_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'form.vehicleType': {
|
||||
handler(value) {
|
||||
this.updateVehicleType(value || '车辆');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
updateVehicleType() {
|
||||
if (!this.form.id && this.form.vehicleNo) {
|
||||
this.form.vehicleNo = '';
|
||||
}
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶' ? { shipIdentifierNo: queryString } : { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.vehicleType = values.vehicleType || '车辆';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleType === '船舶' ? values.vehicleNo.trim() : values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (row.changeContent && row.changeContent.length > 200) {
|
||||
this.$message.warning('变更内容不能超过 200 字');
|
||||
return false;
|
||||
}
|
||||
if (row.remark && row.remark.length > 200) {
|
||||
this.$message.warning('备注不能超过 200 字');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = { vehicleType: '车辆' };
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出变更记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob(
|
||||
'/blade-transport/transport-change-record/export-transport-change-record',
|
||||
this.buildExportParams()
|
||||
)
|
||||
.then(res => {
|
||||
downloadXls(res.data, `变更记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/transport-change-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '变更记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transport-change-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
490
src/views/vehicle/violation-record.vue
Normal file
490
src/views/vehicle/violation-record.vue
Normal file
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<basic-container class="violation-record-page">
|
||||
<avue-crud
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="data"
|
||||
v-model:page="page"
|
||||
:permission="permissionList"
|
||||
:before-open="beforeOpen"
|
||||
v-model="form"
|
||||
ref="crud"
|
||||
@row-update="rowUpdate"
|
||||
@row-save="rowSave"
|
||||
@row-del="rowDel"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@refresh-change="refreshChange"
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-upload"
|
||||
plain
|
||||
v-if="hasPermission('violation_record_import')"
|
||||
@click="handleImport"
|
||||
>批量导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('violation_record_template')"
|
||||
@click="handleTemplate"
|
||||
>下载模板
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
v-if="hasPermission('violation_record_export')"
|
||||
@click="handleExport"
|
||||
>批量导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
plain
|
||||
v-if="hasPermission('violation_record_delete')"
|
||||
@click="handleDelete"
|
||||
>批量删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNo="{ row, index }">
|
||||
<el-button type="primary" link @click="$refs.crud.rowView(row, index)">
|
||||
{{ row.vehicleNo }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #vehicleNoForm>
|
||||
<el-autocomplete
|
||||
v-model="form.vehicleNo"
|
||||
:fetch-suggestions="fetchVehicleOptions"
|
||||
clearable
|
||||
placeholder="输入车牌号/船号模糊查询选择"
|
||||
value-key="value"
|
||||
class="violation-record-page__input"
|
||||
/>
|
||||
</template>
|
||||
<template #driverNameForm>
|
||||
<el-autocomplete
|
||||
v-if="form.vehicleType !== '船舶'"
|
||||
v-model="form.driverName"
|
||||
:fetch-suggestions="fetchDriverOptions"
|
||||
clearable
|
||||
placeholder="输入驾驶人模糊查询选择"
|
||||
value-key="value"
|
||||
class="violation-record-page__input"
|
||||
/>
|
||||
<el-input v-else v-model="form.driverName" clearable maxlength="20" placeholder="请输入船长" />
|
||||
</template>
|
||||
<template #processStatus="{ row }">
|
||||
<span :class="row.processStatus === '未处理' ? 'violation-record-page__danger' : ''">
|
||||
{{ row.processStatus }}
|
||||
</span>
|
||||
</template>
|
||||
<template #attachments="{ row }">
|
||||
<span>{{ formatAttachments(row.attachments) }}</span>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<el-dialog title="违章记录数据导入" append-to-body v-model="excelBox" width="555px">
|
||||
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
|
||||
<template #excelTemplate>
|
||||
<el-button type="primary" @click="handleTemplate">
|
||||
点击下载<i class="el-icon-download el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-form>
|
||||
</el-dialog>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { add, getDetail, getList, remove, update } from '@/api/vehicle/violation-record';
|
||||
import { getList as getVehicleList } from '@/api/transportCapacity/transport-vehicle';
|
||||
import { getList as getShipList } from '@/api/transportCapacity/transport-ship';
|
||||
import { getList as getDriverList } from '@/api/transportCapacity/driver';
|
||||
import { getDeptTree } from '@/api/system/dept';
|
||||
import { exportBlob } from '@/api/common';
|
||||
import { downloadXls } from '@/utils/util';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { excelOption, option } from '@/option/vehicle/violation-record';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
query: {},
|
||||
loading: true,
|
||||
excelBox: false,
|
||||
excelForm: {},
|
||||
option,
|
||||
excelOption,
|
||||
page: {
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
currentPage: 1,
|
||||
total: 0,
|
||||
},
|
||||
selectionList: [],
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initDeptTree();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission', 'userInfo']),
|
||||
isAdmin() {
|
||||
const authority = this.userInfo.authority || '';
|
||||
return authority.includes('admin');
|
||||
},
|
||||
permissionList() {
|
||||
return {
|
||||
addBtn: this.hasPermission('violation_record_add'),
|
||||
viewBtn: this.hasPermission('violation_record_view'),
|
||||
delBtn: this.hasPermission('violation_record_delete'),
|
||||
editBtn: this.hasPermission('violation_record_edit'),
|
||||
};
|
||||
},
|
||||
ids() {
|
||||
const ids = [];
|
||||
this.selectionList.forEach(ele => {
|
||||
ids.push(ele.id);
|
||||
});
|
||||
return ids.join(',');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'form.vehicleType': {
|
||||
handler(value) {
|
||||
this.updateVehicleTypeDisplays(value || '车辆');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
'form.processStatus': {
|
||||
handler(value) {
|
||||
this.updateProcessResultDisplay(value || '已处理');
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasPermission(code) {
|
||||
return this.isAdmin || this.validData(this.permission[code], false);
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.userInfo.tenantId).then(res => {
|
||||
const column = this.findColumn(this.option.column, 'createDept');
|
||||
column.dicData = res.data.data;
|
||||
});
|
||||
},
|
||||
updateVehicleTypeDisplays(vehicleType) {
|
||||
const vehicleTypeColumn = this.findColumn(this.option.column, 'vehicleType');
|
||||
const driverColumn = this.findColumn(this.option.column, 'driverName');
|
||||
const typeColumn = this.findColumn(this.option.column, 'violationType');
|
||||
const itemColumn = this.findColumn(this.option.column, 'violationItem');
|
||||
driverColumn.label = vehicleType === '船舶' ? '船长' : '驾驶人';
|
||||
typeColumn.display = vehicleType !== '船舶';
|
||||
itemColumn.display = vehicleType === '船舶';
|
||||
vehicleTypeColumn.disabled = Boolean(this.form.id);
|
||||
if (vehicleType === '船舶') {
|
||||
this.form.violationType = undefined;
|
||||
} else {
|
||||
this.form.violationItem = undefined;
|
||||
}
|
||||
},
|
||||
updateProcessResultDisplay(processStatus) {
|
||||
const column = this.findColumn(this.option.column, 'processResult');
|
||||
column.display = processStatus !== '未处理';
|
||||
if (processStatus === '未处理') {
|
||||
this.form.processResult = undefined;
|
||||
}
|
||||
},
|
||||
fetchVehicleOptions(queryString, callback) {
|
||||
const vehicleType = this.form.vehicleType || '车辆';
|
||||
const request = vehicleType === '船舶' ? getShipList : getVehicleList;
|
||||
const params =
|
||||
vehicleType === '船舶'
|
||||
? { shipIdentifierNo: queryString }
|
||||
: { plateNo: queryString };
|
||||
request(1, 20, params)
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(
|
||||
records.map(item => ({
|
||||
value: vehicleType === '船舶' ? item.shipIdentifierNo || item.shipName : item.plateNo,
|
||||
}))
|
||||
);
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
fetchDriverOptions(queryString, callback) {
|
||||
getDriverList(1, 20, { driverName: queryString })
|
||||
.then(res => {
|
||||
const records = res.data.data.records || [];
|
||||
callback(records.map(item => ({ value: item.driverName })));
|
||||
})
|
||||
.catch(() => callback([]));
|
||||
},
|
||||
formatAttachments(value) {
|
||||
if (!value) return '';
|
||||
if (Array.isArray(value)) return `${value.length} 个`;
|
||||
if (typeof value !== 'string') return '1 个';
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? `${attachments.length} 个` : '1 个';
|
||||
} catch (error) {
|
||||
return (
|
||||
value
|
||||
.split(',')
|
||||
.map(item => item.trim())
|
||||
.filter(Boolean).length + ' 个'
|
||||
);
|
||||
}
|
||||
},
|
||||
parseAttachments(value) {
|
||||
if (!value || Array.isArray(value)) return value;
|
||||
if (typeof value !== 'string') return [];
|
||||
try {
|
||||
const attachments = JSON.parse(value);
|
||||
return Array.isArray(attachments) ? attachments : [];
|
||||
} catch (error) {
|
||||
return value
|
||||
.split(',')
|
||||
.map(item => ({ name: item.trim(), url: item.trim() }))
|
||||
.filter(item => item.url);
|
||||
}
|
||||
},
|
||||
stringifyAttachments(value) {
|
||||
if (!value || typeof value === 'string') return value;
|
||||
return JSON.stringify(value);
|
||||
},
|
||||
normalizeRow(row) {
|
||||
const values = { ...row };
|
||||
values.vehicleType = values.vehicleType || '车辆';
|
||||
values.processStatus = values.processStatus || '已处理';
|
||||
if (values.vehicleNo) {
|
||||
values.vehicleNo = values.vehicleNo.trim().toUpperCase();
|
||||
}
|
||||
if (values.processStatus === '未处理') {
|
||||
values.processResult = undefined;
|
||||
}
|
||||
if (values.vehicleType === '船舶') {
|
||||
values.violationType = undefined;
|
||||
} else {
|
||||
values.violationItem = undefined;
|
||||
}
|
||||
values.attachments = this.stringifyAttachments(values.attachments);
|
||||
return values;
|
||||
},
|
||||
validateRow(row) {
|
||||
if (row.violationTime && new Date(row.violationTime.replace(/-/g, '/')).getTime() > Date.now()) {
|
||||
this.$message.warning('时间不能超过当前时间');
|
||||
return false;
|
||||
}
|
||||
if (Number(row.fineAmount) < 0) {
|
||||
this.$message.warning('被罚金额不能小于 0');
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
row.deductPoints !== undefined &&
|
||||
row.deductPoints !== null &&
|
||||
row.deductPoints !== '' &&
|
||||
(!Number.isInteger(Number(row.deductPoints)) ||
|
||||
Number(row.deductPoints) < 0 ||
|
||||
Number(row.deductPoints) > 15)
|
||||
) {
|
||||
this.$message.warning('被扣分数范围为 0-15 分');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
rowSave(row, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
add(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowUpdate(row, index, done, loading) {
|
||||
const values = this.normalizeRow(row);
|
||||
if (!this.validateRow(values)) {
|
||||
loading();
|
||||
return;
|
||||
}
|
||||
update(values).then(
|
||||
() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
done();
|
||||
},
|
||||
error => {
|
||||
window.console.log(error);
|
||||
loading();
|
||||
}
|
||||
);
|
||||
},
|
||||
rowDel(row) {
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(row.id))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
});
|
||||
},
|
||||
handleDelete() {
|
||||
if (this.selectionList.length === 0) {
|
||||
this.$message.warning('请选择至少一条数据');
|
||||
return;
|
||||
}
|
||||
this.$confirm('确定将选择数据删除?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => remove(this.ids))
|
||||
.then(() => {
|
||||
this.onLoad(this.page);
|
||||
this.$message({ type: 'success', message: '操作成功!' });
|
||||
this.$refs.crud.toggleSelection();
|
||||
});
|
||||
},
|
||||
beforeOpen(done, type) {
|
||||
if (type === 'add') {
|
||||
this.form = {
|
||||
vehicleType: '车辆',
|
||||
processStatus: '已处理',
|
||||
};
|
||||
this.updateVehicleTypeDisplays('车辆');
|
||||
this.updateProcessResultDisplay('已处理');
|
||||
}
|
||||
if (['edit', 'view'].includes(type)) {
|
||||
getDetail(this.form.id).then(res => {
|
||||
const detail = res.data.data;
|
||||
detail.attachments = this.parseAttachments(detail.attachments);
|
||||
this.form = detail;
|
||||
this.updateVehicleTypeDisplays(detail.vehicleType);
|
||||
this.updateProcessResultDisplay(detail.processStatus);
|
||||
});
|
||||
}
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
this.query = {};
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
searchChange(params, done) {
|
||||
this.query = params;
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page, params);
|
||||
done();
|
||||
},
|
||||
selectionChange(list) {
|
||||
this.selectionList = list;
|
||||
},
|
||||
selectionClear() {
|
||||
this.selectionList = [];
|
||||
this.$refs.crud.toggleSelection();
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.page.pageSize = pageSize;
|
||||
},
|
||||
refreshChange() {
|
||||
this.onLoad(this.page, this.query);
|
||||
},
|
||||
onLoad(page, params = {}) {
|
||||
this.loading = true;
|
||||
getList(page.currentPage, page.pageSize, { ...params, ...this.query })
|
||||
.then(res => {
|
||||
const data = res.data.data;
|
||||
this.page.total = data.total;
|
||||
this.data = data.records;
|
||||
this.selectionClear();
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
this.excelBox = true;
|
||||
},
|
||||
uploadAfter(res, done) {
|
||||
this.excelBox = false;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
handleExport() {
|
||||
this.$confirm('是否导出违章记录数据?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
NProgress.start();
|
||||
exportBlob('/blade-transport/violation-record/export-violation-record', this.buildExportParams())
|
||||
.then(res => {
|
||||
downloadXls(res.data, `违章记录${this.$dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
|
||||
})
|
||||
.finally(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
});
|
||||
},
|
||||
buildExportParams() {
|
||||
return {
|
||||
...this.query,
|
||||
ids: this.ids,
|
||||
[this.website.tokenHeader]: getToken(),
|
||||
};
|
||||
},
|
||||
handleTemplate() {
|
||||
exportBlob(
|
||||
`/blade-transport/violation-record/export-template?${this.website.tokenHeader}=${getToken()}`
|
||||
).then(res => {
|
||||
downloadXls(res.data, '违章记录模板.xlsx');
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.violation-record-page {
|
||||
:deep(.el-table th .cell),
|
||||
:deep(.el-table td .cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user