<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>车辆同步管理</span>
|
<el-button
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="handleRefresh"
|
>
|
<i class="el-icon-refresh"></i> 刷新
|
</el-button>
|
</div>
|
|
<!-- 说明提示 -->
|
<el-alert
|
title="功能说明"
|
type="info"
|
:closable="false"
|
style="margin-bottom: 15px"
|
>
|
<div>
|
本页面用于查看旧系统中的车辆数据，并手动同步未同步的车辆到新系统。<br/>
|
<strong>已同步</strong>：车辆已存在于新系统中；<strong>未同步</strong>：车辆还未同步，可手动添加到新系统。
|
</div>
|
</el-alert>
|
|
<!-- 筛选条件 -->
|
<el-form :inline="true" class="filter-form">
|
<el-form-item label="同步状态">
|
<el-select v-model="filterSynced" placeholder="请选择" @change="handleFilter" clearable>
|
<el-option label="全部" :value="null" />
|
<el-option label="未同步" :value="false" />
|
<el-option label="已同步" :value="true" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
|
<!-- 数据表格 -->
|
<el-table
|
v-loading="loading"
|
:data="filteredVehicleList"
|
style="width: 100%"
|
border
|
>
|
<el-table-column label="车辆ID(CarID)" prop="carId" width="120" align="center" />
|
<el-table-column label="车牌号" prop="vehicleNo" width="150" align="center">
|
<template slot-scope="scope">
|
<el-tag>{{ scope.row.vehicleNo }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="单据类型编码" prop="carOrdClass" width="120" align="center" />
|
<el-table-column label="归属分公司" prop="deptName" width="150" align="center" />
|
<el-table-column label="同步状态" prop="synced" width="120" align="center">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.synced ? 'success' : 'warning'">
|
{{ scope.row.synced ? '已同步' : '未同步' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="新系统车辆ID" prop="vehicleId" width="130" align="center">
|
<template slot-scope="scope">
|
<span v-if="scope.row.vehicleId">{{ scope.row.vehicleId }}</span>
|
<span v-else style="color: #909399">-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<template slot-scope="scope">
|
<el-button
|
v-if="!scope.row.synced"
|
size="mini"
|
type="primary"
|
icon="el-icon-plus"
|
@click="handleSync(scope.row)"
|
v-hasPermi="['system:vehicleSync:sync']"
|
>
|
同步
|
</el-button>
|
<el-tag v-else type="info">已同步</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<!-- 同步对话框 -->
|
<el-dialog
|
title="手动同步车辆"
|
:visible.sync="syncDialogVisible"
|
width="500px"
|
append-to-body
|
>
|
<el-form ref="syncForm" :model="syncForm" :rules="syncRules" label-width="100px">
|
<el-form-item label="旧系统ID" prop="carId">
|
<el-input v-model="syncForm.carId" disabled />
|
</el-form-item>
|
<el-form-item label="车牌号" prop="vehicleNo">
|
<el-input v-model="syncForm.vehicleNo" disabled />
|
</el-form-item>
|
<el-form-item label="归属分公司" prop="deptId">
|
<el-select v-model="syncForm.deptId" placeholder="请选择归属分公司" clearable style="width: 100%">
|
<el-option
|
v-for="dept in deptOptions"
|
:key="dept.deptId"
|
:label="dept.deptName"
|
:value="dept.deptId"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="syncDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitSync" :loading="syncLoading">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { listVehicleSync, syncVehicle } from "@/api/system/vehicleSync";
|
import { listDept } from "@/api/system/dept";
|
|
export default {
|
name: "VehicleSync",
|
data() {
|
return {
|
// 加载状态
|
loading: true,
|
// 车辆列表（原始数据）
|
vehicleList: [],
|
// 筛选后的车辆列表
|
filteredVehicleList: [],
|
// 筛选条件：同步状态
|
filterSynced: null,
|
// 同步对话框显示状态
|
syncDialogVisible: false,
|
// 同步加载状态
|
syncLoading: false,
|
// 同步表单
|
syncForm: {
|
carId: null,
|
vehicleNo: null,
|
deptId: null
|
},
|
// 部门树选项
|
deptOptions: [],
|
// 表单校验规则
|
syncRules: {
|
deptId: [
|
{ required: true, message: "请选择归属分公司", trigger: "change" }
|
]
|
}
|
};
|
},
|
created() {
|
this.getList();
|
this.getDeptList();
|
},
|
methods: {
|
/** 查询车辆同步列表 */
|
getList() {
|
this.loading = true;
|
listVehicleSync().then(response => {
|
this.vehicleList = response.rows;
|
this.applyFilter();
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false;
|
});
|
},
|
/** 应用筛选条件 */
|
applyFilter() {
|
if (this.filterSynced === null) {
|
// 显示全部
|
this.filteredVehicleList = this.vehicleList;
|
} else {
|
// 根据同步状态筛选
|
this.filteredVehicleList = this.vehicleList.filter(
|
item => item.synced === this.filterSynced
|
);
|
}
|
},
|
/** 筛选条件变化 */
|
handleFilter() {
|
this.applyFilter();
|
},
|
/** 获取部门列表（只显示分公司：parent_id=100） */
|
getDeptList() {
|
listDept({ parentId: 100 }).then(response => {
|
// 过滤出分公司（parent_id=100的部门）
|
if (response.data) {
|
this.deptOptions = response.data.filter(dept => dept.parentId === "100");
|
} else {
|
this.deptOptions = [];
|
}
|
});
|
},
|
/** 刷新列表 */
|
handleRefresh() {
|
this.getList();
|
this.$modal.msgSuccess("刷新成功");
|
},
|
/** 同步按钮操作 */
|
handleSync(row) {
|
this.syncForm = {
|
carId: row.carId,
|
vehicleNo: row.vehicleNo,
|
deptId: row.deptId || null
|
};
|
this.syncDialogVisible = true;
|
this.$nextTick(() => {
|
this.$refs["syncForm"].clearValidate();
|
});
|
},
|
/** 提交同步 */
|
submitSync() {
|
this.$refs["syncForm"].validate(valid => {
|
if (valid) {
|
this.syncLoading = true;
|
syncVehicle(this.syncForm).then(response => {
|
this.$modal.msgSuccess("同步成功");
|
this.syncDialogVisible = false;
|
this.syncLoading = false;
|
this.getList();
|
}).catch(() => {
|
this.syncLoading = false;
|
});
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.box-card {
|
margin-bottom: 20px;
|
}
|
|
.filter-form {
|
margin-bottom: 15px;
|
padding: 10px;
|
background-color: #f5f7fa;
|
border-radius: 4px;
|
}
|
</style>
|
