390 lines
11 KiB
Vue
390 lines
11 KiB
Vue
<template>
|
||
<div class="page-body">
|
||
|
||
<!-- <div class="page-header">
|
||
<a-descriptions title="User Info">
|
||
<a-descriptions-item label="UserName">
|
||
Zhou Maomao
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="Telephone">
|
||
1810000000
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="Live">
|
||
Hangzhou, Zhejiang
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="Remark">
|
||
empty
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="Address">
|
||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</div> -->
|
||
|
||
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
|
||
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
|
||
<!-- =========================== 自定义区域 Start ======================= -->
|
||
|
||
<!-- =========================== 自定义区域 End ======================= -->
|
||
</vxe-form>
|
||
|
||
<div class="mk-toolbar" v-if="isEdit">
|
||
|
||
</div>
|
||
|
||
<div class="footerbar">
|
||
<a-button type="primary" @click="ok">确定</a-button>
|
||
<a-button @click="cancel">取消</a-button>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import BASE_URL from '@/services/Middle/transport/Truck/api.js';
|
||
// import PageLayout from '@/layouts/PageLayout'
|
||
|
||
|
||
export default {
|
||
|
||
name: 'TruckUpdate',
|
||
i18n: require('./i18n'),
|
||
// components: {PageLayout},
|
||
props: {
|
||
pageMode: {
|
||
type: String,
|
||
default: "edit"
|
||
},
|
||
dataId: {}
|
||
|
||
},
|
||
|
||
data() {
|
||
|
||
// 页面数据变量
|
||
var pageData = {
|
||
// 当前项目名称
|
||
currentConfigName: "",
|
||
// 当前项目ID
|
||
currentBeid: 0,
|
||
|
||
uploadDefaultImg: null,
|
||
detailDataFieldName: "truck",
|
||
|
||
actions: {
|
||
// =============================== 接口地址 自动生成 Start ===============================
|
||
TruckList: `${this.$BASE_URL}/Truck/v1/truck/list`, // 货车列表
|
||
TruckSearch: `${this.$BASE_URL}/Truck/v1/truck/search`, // 货车搜索
|
||
TruckDetail: `${this.$BASE_URL}/Truck/v1/truck/detail`, // 货车详情
|
||
TruckCreate: `${this.$BASE_URL}/Truck/v1/truck/create`, // 创建货车
|
||
TruckUpdate: `${this.$BASE_URL}/Truck/v1/truck/update`, // 更新货车
|
||
TruckDelete: `${this.$BASE_URL}/Truck/v1/truck/detele`, // 删除货车
|
||
TruckBatchDelete: `${this.$BASE_URL}/Truck/v1/truck/batchDelete`, // 批量删除货车
|
||
TruckBatchUpdate: `${this.$BASE_URL}/Truck/v1/truck/batchUpdate`, // 批量更新货车
|
||
TruckBatchCreate: `${this.$BASE_URL}/Truck/v1/truck/batchCreate`, // 批量创建货车
|
||
TruckBatchHandle: `${this.$BASE_URL}/Truck/v1/truck/batchHandle`, // 批量处理货车
|
||
|
||
// =============================== 接口地址 自动生成 End ===============================
|
||
},
|
||
|
||
keyName: 'id',
|
||
// 是否编辑模式
|
||
isEdit: false,
|
||
// 表单数据
|
||
formOptions: {
|
||
data: {
|
||
// =============================== 表单数据 自动生成 Start ===============================
|
||
|
||
id: 0,
|
||
code: "",
|
||
name: "",
|
||
plate_number: "",
|
||
type: "",
|
||
length: "",
|
||
width: "",
|
||
height: "",
|
||
load: "",
|
||
volume: "",
|
||
manager_name: "",
|
||
manager_phone: "",
|
||
out_count: 0,
|
||
out_distance: 0,
|
||
repair_count: 0,
|
||
change_tyre_count: 0,
|
||
add_oil_count: 0,
|
||
add_oil_litre: 0,
|
||
photo: "",
|
||
remark: "",
|
||
create_uid: 0,
|
||
update_uid: 0,
|
||
current_distance:0,
|
||
|
||
// =============================== 表单数据 自动生成 End ===============================
|
||
},
|
||
// 标题宽度
|
||
titleWidth: 150,
|
||
// 标题对齐方式
|
||
titleAlign: 'right',
|
||
|
||
// 表单校验规则
|
||
rules: {
|
||
// =============================== 表单校验 自动生成 Start ===============================
|
||
|
||
code: [
|
||
{message: '请输入编码'}
|
||
],
|
||
name: [
|
||
{message: '请输入名称'}
|
||
],
|
||
plate_number: [
|
||
{message: '请输入车牌号'}
|
||
],
|
||
type: [
|
||
{message: '请输入车辆类型'}
|
||
],
|
||
length: [
|
||
{message: '请输入车辆长度'}
|
||
],
|
||
width: [
|
||
{message: '请输入车辆宽度'}
|
||
],
|
||
height: [
|
||
{message: '请输入车辆高度'}
|
||
],
|
||
load: [
|
||
{message: '请输入车辆载重'}
|
||
],
|
||
volume: [
|
||
{message: '请输入车辆体积'}
|
||
],
|
||
manager_name: [
|
||
{message: '请输入负责人姓名'}
|
||
],
|
||
manager_phone: [
|
||
{message: '请输入负责人电话'}
|
||
],
|
||
photo: [
|
||
{message: '请输入车辆照片'}
|
||
],
|
||
remark: [
|
||
{message: '请输入车辆备注'}
|
||
],
|
||
current_distance: [
|
||
{message: '请输入当前公里数'}
|
||
|
||
],
|
||
// =============================== 表单校验 自动生成 End ===============================
|
||
},
|
||
// 表单项
|
||
items: [
|
||
// =============================== 表单项 自动生成 Start ===============================
|
||
{field:'',title:'',span:24,isTitle:true,Htitle:'车辆信息',itemRender:{}},//分割线
|
||
{field: 'code', title: '编码', span: 12, itemRender: {name: '$input'}},
|
||
{field: 'name', title: '名称', span: 12, itemRender: {name: '$input'}},
|
||
{field: 'plate_number', title: '车牌号', span: 6, itemRender: {name: '$input'}},
|
||
{field: 'type', title: '类型', span: 6, itemRender: {name: '$input'}},
|
||
{field: 'manager_name', title: '负责人姓名', span: 6, itemRender: {name: '$input'}},
|
||
{field: 'manager_phone', title: '负责人电话', span: 6, itemRender: {name: '$input'}},
|
||
{field: 'current_distance', title: '车辆当前公里数', span: 6, itemRender: {name: '$input',props:{type:'number'}}},
|
||
{field: 'remark', title: '备注', span: 24, itemRender: {name: '$textarea'}},
|
||
|
||
// =============================== 表单项 自动生成 End ===============================
|
||
]
|
||
},
|
||
// 新增模式表单项
|
||
addModeItems: [],
|
||
|
||
|
||
};
|
||
|
||
pageData.actions.get = pageData.actions.TruckDetail;
|
||
pageData.actions.create = pageData.actions.TruckCreate;
|
||
pageData.actions.update = pageData.actions.TruckUpdate;
|
||
|
||
// 合并表单数据及配置
|
||
pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
|
||
|
||
return pageData;
|
||
},
|
||
|
||
computed: {
|
||
// desc() {
|
||
// return this.$t('editPageDesc')
|
||
// }
|
||
},
|
||
|
||
|
||
created() {
|
||
|
||
|
||
// 获取路由的id参数
|
||
let dataId = this.getDataId();
|
||
|
||
// 如果有id参数，说明是编辑模式
|
||
if (dataId) {
|
||
const json = `{"id":${dataId}}`;
|
||
this.$mk.post({
|
||
url: this.actions.get,
|
||
loading: "加载中...",
|
||
data: json,
|
||
config: {
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
}
|
||
}).then(a => {
|
||
// =============================== 时间字段判断 自动生成 Start ===============================
|
||
|
||
if (a.data[this.detailDataFieldName].create_time) {
|
||
a.data[this.detailDataFieldName].create_time = new Date(a.data[this.detailDataFieldName].create_time * 1000);
|
||
}
|
||
if (a.data[this.detailDataFieldName].update_time) {
|
||
a.data[this.detailDataFieldName].update_time = new Date(a.data[this.detailDataFieldName].update_time * 1000);
|
||
}
|
||
|
||
// =============================== 时间字段判断 自动生成 End ===============================
|
||
this.formOptions.data = a.data[this.detailDataFieldName];
|
||
}).catch((a) => {
|
||
this.$mk.error(a.data.msg);
|
||
});
|
||
|
||
this.isEdit = true;
|
||
} else {
|
||
// 如果没有id参数，说明是新增模式
|
||
this.addModeItems.forEach(item => {
|
||
this.formOptions.items.push(item);
|
||
})
|
||
|
||
}
|
||
|
||
},
|
||
// 函数
|
||
methods: {
|
||
|
||
|
||
// 获取路由的id参数
|
||
getDataId() {
|
||
let dataId = this.dataId;
|
||
if (this.$route.params.id) {
|
||
dataId = this.$route.params.id;
|
||
}
|
||
if (!dataId) {
|
||
dataId = 0;
|
||
}
|
||
return dataId;
|
||
},
|
||
|
||
|
||
// 返回
|
||
back() {
|
||
// 如果是新增模式，关闭当前页面
|
||
if (!this.isEdit) {
|
||
this.$closePage({
|
||
closeRoute: "/Truck/TruckCreate"
|
||
});
|
||
} else {
|
||
// 如果是编辑模式，关闭当前页面
|
||
this.$closePage({
|
||
closeRoute: "/Truck/TruckUpdate"
|
||
});
|
||
}
|
||
// 打开列表页面
|
||
this.$openPage('/Truck/TruckList')
|
||
},
|
||
|
||
// 保存
|
||
ok() {
|
||
|
||
let save = () => {
|
||
|
||
|
||
// 将this.formOptions.data.tire_count
|
||
this.formOptions.data.current_distance = Number(this.formOptions.data.current_distance);
|
||
|
||
|
||
// 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
|
||
let action = !this.isEdit ? this.actions.TruckCreate : this.actions.TruckUpdate;
|
||
// 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
|
||
let postdata = Object.assign({}, this.formOptions.data);
|
||
// 如果是编辑模式
|
||
if (this.isEdit) {
|
||
// postdata = { Truck: postdata }
|
||
}
|
||
// 格式化提交的数据
|
||
this.$mk.formatFormData({data: postdata, rules: this.formOptions.items});
|
||
|
||
|
||
// 提交数据
|
||
this.$mk.post({
|
||
url: action,
|
||
loading: "保存中...",
|
||
data: postdata,
|
||
useBigInt: true,
|
||
}).then(() => { // 成功回调
|
||
this.$mk.success("保存成功");
|
||
if (!this.isEdit) { // 如果是新增模式，关闭当前页面
|
||
this.back();
|
||
this.$forceUpdate()
|
||
}
|
||
}).catch((a) => { // 失败回调
|
||
this.$mk.error(a.data.msg); // 显示错误信息
|
||
});
|
||
|
||
|
||
};
|
||
|
||
|
||
// 验证表单
|
||
this.$mk.validateForm({form: this.$refs.xForm}).then(() => { // 验证表单
|
||
save(); // 提交保存
|
||
}).catch(count => { // 验证失败
|
||
this.$mk.error(`存在${count}项错误，请检查`);
|
||
});
|
||
|
||
|
||
},
|
||
|
||
|
||
// 取消 返回
|
||
cancel() {
|
||
this.back();
|
||
}
|
||
},
|
||
// 监听属性
|
||
watch: {}
|
||
};
|
||
|
||
</script>
|
||
|
||
|
||
<style scoped lang="less">
|
||
.page-body {
|
||
padding: 30px;
|
||
background: @base-bg-color;
|
||
}
|
||
|
||
.formtabs .ant-tabs-tabpane {
|
||
/* background: white; */
|
||
padding: 12px;
|
||
}
|
||
|
||
.gridPanel {
|
||
height: calc(100vh - 600px);
|
||
}
|
||
|
||
.footerbar {
|
||
padding-left: 10px;
|
||
}
|
||
|
||
.imagePanel {
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
width: 100px;
|
||
|
||
img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
}
|
||
</style>
|