Skip to content

T
tsndu-web
Commit 389a9cef by weijiguang
Options

签合同时新增添加车辆

parent e9ff1f91
Showing with 560 additions and 338 deletions
src/api/invoke_methods.js
...@@ -38,6 +38,7 @@ import { ...@@ -38,6 +38,7 @@ import {
updateContract, updateContract,
terminateContract, terminateContract,
returnDeposit, returnDeposit,
listPlanning,
listDriver, listDriver,
createDriver, createDriver,
updateDriver, updateDriver,
...@@ -184,6 +185,9 @@ export default { ...@@ -184,6 +185,9 @@ export default {
asyncReturnDeposit(_, payload) { asyncReturnDeposit(_, payload) {
return returnDeposit(payload) return returnDeposit(payload)
}, },
asyncListPlanning(_, payload) {
return listPlanning(payload)
},
asyncListDriver(_, payload) { asyncListDriver(_, payload) {
return listDriver(payload) return listDriver(payload)
......
src/api/request_methods.js
...@@ -96,6 +96,8 @@ export const updateContract = data => axios.post(`${proxy}/contract/update`, dat ...@@ -96,6 +96,8 @@ export const updateContract = data => axios.post(`${proxy}/contract/update`, dat
export const terminateContract = data => axios.post(`${proxy}/contract/terminate`, data); export const terminateContract = data => axios.post(`${proxy}/contract/terminate`, data);
// 合同 / 车源合同 返还押金 // 合同 / 车源合同 返还押金
export const returnDeposit = data => axios.post(`${proxy}/contract/return/deposit`, data); export const returnDeposit = data => axios.post(`${proxy}/contract/return/deposit`, data);
// 合同 / 费用计划列表
export const listPlanning = data => axios.post(`${proxy}/contract/list/planning/${data.contractId}/${data.type}`);
// 司机 / 列表 // 司机 / 列表
export const listDriver = data => axios.post(`${proxy}/driver/list`, data); export const listDriver = data => axios.post(`${proxy}/driver/list`, data);
......
src/libs/constants.js 0 → 100644
// 费用项 收费时机
export const timingOption = [
{text: "一次性", value: 1},
{text: "周度", value: 2},
{text: "月度", value: 3},
{text: "季度", value: 4},
{text: "年度", value: 5},
];
// 合同 出租类型
export const leaseTypeOption = [
{text: "月租（30天）", value: 1},
{text: "月租（自然月）", value: 2},
{text: "周租", value: 3},
];
// 合同 押金状态
export const depositStatusOption = [
{text: "押金不全", value: -1},
{text: "正常（未退）", value: 0},
{text: "部分已退", value: 1},
{text: "全部已退", value: 2},
];
src/view/data/fee/add/index.js
import store from "@/store"; import store from "@/store";
const { dispatch } = store; const { dispatch } = store;
import { isInteger } from "@/libs/validator.js"; import { isInteger } from "@/libs/validator.js";
import { timingOption } from "../helper.js"; import { timingOption } from "@/libs/constants.js";
export default { export default {
components: { timingOption }, components: { timingOption },
......
src/view/data/fee/helper.js
export const timingOption = [ import {timingOption} from "@/libs/constants.js";
{text: "一次性", value: 1},
{text: "周度", value: 2},
{text: "月度", value: 3},
{text: "季度", value: 4},
{text: "年度", value: 5},
];
export const columns = (disable, enable) => [ export const columns = (disable, enable) => [
{ {
......
src/view/driver_contract/edit/helper.js
export const columns = () => [ export const logColumns = () => [
{ {
title: "序号", title: "序号",
key: "id", key: "id",
...@@ -30,3 +30,95 @@ export const columns = () => [ ...@@ -30,3 +30,95 @@ export const columns = () => [
align: "center", align: "center",
}, },
]; ];
export const rentColumns = () => [
{
title: "状态",
align: "center",
width: 120,
render(h, { row }) {
try {
const { paymentStatus } = row;
return h("span", {style: {color: paymentStatus == 2 ? 'green' : 'red' }}, paymentStatus == 2 ? '已付' : '未付');
} catch(e) {
console.log(e);
}
}
},
{
title: "类型",
key: "name",
align: "center",
width: 120,
},
{
title: "日期",
key: "planDate",
align: "center",
width: 120,
},
{
title: "应收金额",
key: "payableAmount",
align: "center",
width: 120,
},
{
title: "已收金额",
key: "paidAmount",
align: "center",
width: 120,
},
{
title: "备注",
key: "remark",
align: "center",
},
];
export const feeColumns = () => [
{
title: "状态",
align: "center",
width: 120,
render(h, { row }) {
try {
const { paymentStatus } = row;
return h("span", {style: {color: paymentStatus == 2 ? 'green' : 'red' }}, paymentStatus == 2 ? '已付' : '未付');
} catch(e) {
console.log(e);
}
}
},
{
title: "类型",
key: "name",
align: "center",
width: 120,
},
{
title: "日期",
key: "planDate",
align: "center",
width: 120,
},
{
title: "应收金额",
key: "payableAmount",
align: "center",
width: 120,
},
{
title: "已收金额",
key: "paidAmount",
align: "center",
width: 120,
},
{
title: "备注",
key: "remark",
align: "center",
},
];
src/view/driver_contract/edit/index.js
import store from "@/store"; import store from "@/store";
const { dispatch } = store; const { dispatch } = store;
import { columns } from "./helper.js"; import { logColumns, rentColumns, feeColumns } from "./helper.js";
import { isInteger } from "@/libs/validator.js"; import { leaseTypeOption } from "@/libs/constants.js";
export default { export default {
components: { }, components: { leaseTypeOption },
data() { data() {
return { return {
logLoading: false, logLoading: false,
logDatas: [], logDatas: [],
logColumns: [], logColumns: [],
leaseTypeOption: leaseTypeOption,
rentLoading: false,
rentDatas: [],
rentColumns: [],
feeLoading: false,
feeDatas: [],
feeColumns: [],
contract: null, contract: null,
readonly: false, readonly: false,
...@@ -19,13 +28,6 @@ export default { ...@@ -19,13 +28,6 @@ export default {
secondUploadStatus: false, secondUploadStatus: false,
selectTab: null, selectTab: null,
contractFormRule: {
odograph: [{ required: true, message: "请输入里程数", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
depositAmount: [{ required: true, message: "请输入押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
endDate: [{ type: "date", required: true, message: "请选择结束日期", trigger: "change" }],
},
contractForm: { contractForm: {
contractId: 0, contractId: 0,
type: 1, type: 1,
...@@ -33,7 +35,9 @@ export default { ...@@ -33,7 +35,9 @@ export default {
vehicle: null, vehicle: null,
driver: null, driver: null,
odograph: null, odograph: null,
odographEv: null, payableDepositAmount: null,
paidDepositAmount: null,
diffDepositAmount: null,
startDate: null, startDate: null,
endDate: null, endDate: null,
depositAmount: null, depositAmount: null,
...@@ -55,7 +59,9 @@ export default { ...@@ -55,7 +59,9 @@ export default {
this.contractForm.vehicle = null; this.contractForm.vehicle = null;
this.contractForm.driver = null; this.contractForm.driver = null;
this.contractForm.odograph = null; this.contractForm.odograph = null;
this.contractForm.odographEv = null; this.contractForm.payableDepositAmount = null;
this.contractForm.paidDepositAmount = null;
this.contractForm.diffDepositAmount = null;
this.contractForm.startDate = null; this.contractForm.startDate = null;
this.contractForm.endDate = null; this.contractForm.endDate = null;
this.contractForm.depositAmount = null; this.contractForm.depositAmount = null;
...@@ -73,14 +79,16 @@ export default { ...@@ -73,14 +79,16 @@ export default {
this.contractForm.code = this.contract.code; this.contractForm.code = this.contract.code;
this.contractForm.vehicle = vehicleInfo; this.contractForm.vehicle = vehicleInfo;
this.contractForm.driver = this.contract.driverVo.name + " / " + this.contract.driverVo.phone; this.contractForm.driver = this.contract.driverVo.name + " / " + this.contract.driverVo.phone;
this.contractForm.odograph = ""+this.contract.odograph; this.contractForm.odograph = this.contract.odograph;
this.contractForm.odographEv = ""+this.contract.odographEv; this.contractForm.payableDepositAmount = this.contract.payableDepositAmount;
this.contractForm.paidDepositAmount = this.contract.paidDepositAmount;
this.contractForm.diffDepositAmount = (this.contract.payableDepositAmount - this.contract.paidDepositAmount);
this.contractForm.startDate = this.contract.startDate; this.contractForm.startDate = this.contract.startDate;
this.contractForm.endDate = this.contract.endDate; this.contractForm.endDate = this.contract.endDate;
this.contractForm.leaseType = this.contract.leaseType; this.contractForm.leaseType = this.contract.leaseType;
this.contractForm.depositAmount = ""+this.contract.depositAmount; this.contractForm.depositAmount = this.contract.depositAmount;
this.contractForm.returnDepositAmount = ""+this.contract.returnDepositAmount; this.contractForm.returnDepositAmount = this.contract.returnDepositAmount;
this.contractForm.rentAmount = ""+this.contract.rentAmount; this.contractForm.rentAmount = this.contract.rentAmount;
this.contractForm.remark = this.contract.remark; this.contractForm.remark = this.contract.remark;
if(this.contract.files) { if(this.contract.files) {
...@@ -91,74 +99,18 @@ export default { ...@@ -91,74 +99,18 @@ export default {
} }
this.listLogs(); this.listLogs();
this.listRentPlanning();
this.listFeePlanning();
} else { } else {
this.logDatas = []; this.logDatas = [];
this.rentDatas = [];
this.feeDatas = [];
} }
// console.log(this.uploadList); // console.log(this.uploadList);
// console.log(this.contractForm); // console.log(this.contractForm);
}, },
}, },
methods: { methods: {
handleView(item) {
},
handleRemove(file) {
// const fileList = this.$refs.upload.fileList;
// this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
this.uploadList.splice(this.uploadList.indexOf(file), 1);
},
handleFormatError (file) {
this.$Notice.warning({
title: 'The file format is incorrect',
desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: 'Exceeding file size limit',
desc: 'File ' + file.name + ' is too large, no more than 2M.'
});
},
handleBeforeUpload(file) {
const formData = new FormData();
formData.append("file", file);
const item = {id: 0, url: "", status: ""};
this.uploadList.push(item);
dispatch("invoke/asyncUploadFile", formData).then(res => {
const { code, data, msg } = res;
if(code == 1) {
this.$Message.info("上传成功");
item.id = data.id;
item.url = data.filePath;
item.status = "finished";
} else {
this.$Message.info("上传失败");
}
});
return false;
},
saveVehicle() {
// console.log(this.contractForm);
// return;
this.$refs.contractForm.validate(valid => {
if (valid) {
this.uploadList.forEach(f => {
this.contractForm.files.push(f.id);
})
dispatch("invoke/asyncUpdateContract", this.contractForm).then(({ code }) => {
this.submitLoading = false;
if (code === 1) {
this.$Message.success("合同修改成功");
this.$emit("search");
this.visible = false;
}
});
}
});
},
listVehicles() { listVehicles() {
dispatch("invoke/asyncListNoSourceContractVehicles").then(({ data }) => { dispatch("invoke/asyncListNoSourceContractVehicles").then(({ data }) => {
this.vehicles = data; this.vehicles = data;
...@@ -170,13 +122,33 @@ export default { ...@@ -170,13 +122,33 @@ export default {
}); });
}, },
listLogs() { listLogs() {
this.logLoading = true;
const contractId = this.contract.id; const contractId = this.contract.id;
dispatch("invoke/asyncListLogs", contractId).then(({ data }) => { dispatch("invoke/asyncListLogs", contractId).then(({ data }) => {
this.logLoading = false;
this.logDatas = data; this.logDatas = data;
}); });
},
listRentPlanning() {
this.rentLoading = true;
const requestData = { contractId: this.contract.id, type: 1 };
dispatch("invoke/asyncListPlanning", requestData).then(({ data }) => {
this.rentLoading = false;
this.rentDatas = data;
});
},
listFeePlanning() {
this.feeLoading = true;
const requestData = { contractId: this.contract.id, type: 2 };
dispatch("invoke/asyncListPlanning", requestData).then(({ data }) => {
this.feeLoading = false;
this.feeDatas = data;
});
} }
}, },
mounted() { mounted() {
this.logColumns = columns(); this.logColumns = logColumns();
this.rentColumns = rentColumns();
this.feeColumns = feeColumns();
} }
}; };
src/view/driver_contract/edit/index.vue
...@@ -4,75 +4,57 @@ ...@@ -4,75 +4,57 @@
<Tabs v-model="selectTab"> <Tabs v-model="selectTab">
<TabPane label="合同信息" icon="md-document" name="contractTab"> <TabPane label="合同信息" icon="md-document" name="contractTab">
<div> <div>
<Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon> <Form ref="contractForm" :model="contractForm" :label-width="80" label-colon>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="车辆信息" prop="vehicle"> <FormItem label="车辆信息" prop="vehicle">{{ contractForm.vehicle }}</FormItem>
<Input v-model.trim="contractForm.vehicle" type="text" disabled />
</FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="司机信息" prop="driver"> <FormItem label="司机信息" prop="driver">{{ contractForm.driver }}</FormItem>
<Input v-model.trim="contractForm.driver" type="text" disabled />
</FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="租赁方式" prop="leaseType"> <FormItem label="里程数" prop="odograph">{{ contractForm.odograph }}</FormItem>
<Input v-model.trim="contractForm.leaseType" type="text" :disabled="readonly"/>
</FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="月租金" prop="rentAmount"> <FormItem label="应付押金" prop="payableDepositAmount">{{ contractForm.payableDepositAmount }}</FormItem>
<Input v-model.trim="contractForm.rentAmount" type="number" :disabled="readonly"/>
</FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="押金" prop="depositAmount"> <FormItem label="实收押金" prop="paidDepositAmount">{{ contractForm.paidDepositAmount }}</FormItem>
<Input v-model.trim="contractForm.depositAmount" type="number" :disabled="readonly"/>
</FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="反还押金" prop="returnDepositAmount"> <FormItem label="欠收押金" prop="diffDepositAmount">{{ contractForm.diffDepositAmount }}</FormItem>
<Input v-model.trim="contractForm.returnDepositAmount" type="number" disabled />
</FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="开始日期" prop="startDate"> <FormItem label="周期租金" prop="rentAmount">{{ contractForm.rentAmount }}</FormItem>
<DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期":disabled="readonly"></DatePicker>
</FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="结束日期" prop="endDate"> <FormItem label="反还押金" prop="returnDepositAmount">{{ contractForm.returnDepositAmount }}</FormItem>
<DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期":disabled="readonly"></DatePicker>
</FormItem>
</Col>
<Col span="8">
<FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.odograph" type="number" :disabled="readonly"/>
</FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="ev里程数" prop="odographEv"> <FormItem label="租赁方式" prop="leaseType">{{ contractForm.leaseType==null ? "" : leaseTypeOption.filter(item => item.value === contractForm.leaseType)[0].text }}</FormItem>
<Input v-model.trim="contractForm.odographEv" type="number" :disabled="readonly"/> </Col>
</FormItem> <Col span="8">
<FormItem label="开始日期" prop="startDate">{{ contractForm.startDate }}</FormItem>
</Col>
<Col span="8">
<FormItem label="结束日期" prop="endDate">{{ contractForm.endDate }}</FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<FormItem label="备注" prop="remark"> <FormItem label="备注" prop="remark">{{ contractForm.remark == null ? "无" : contractForm.remark }}</FormItem>
<Input v-model="contractForm.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 100%" :disabled="readonly"/>
</FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<FormItem label="验车照片"> <FormItem label="验车照片">
<div v-if="uploadList==null || uploadList.length==0">无</div>
<div class="demo-upload-list" v-for="item in uploadList"> <div class="demo-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'"> <template v-if="item.status === 'finished'">
<img :src="item.url" style="width: 60px;height:60px;line-height: 60px;"> <img :src="item.url" style="width: 60px;height:60px;line-height: 60px;">
...@@ -81,27 +63,8 @@ ...@@ -81,27 +63,8 @@
<Icon type="ios-trash-outline" @click.native="handleRemove(item)" v-if="!readonly"></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove(item)" v-if="!readonly"></Icon>
</div> </div>
</template> </template>
<template v-else> <template v-else><Spin size="small" fix ></Spin></template>
<Spin size="small" fix ></Spin>
</template>
</div>
<Upload
ref="upload"
v-if="!readonly"
:show-upload-list="false"
:max-size="1024"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
multiple
accept="image/*"
type="drag"
action="//jsonplaceholder.typicode.com/posts/"
style="display: inline-block;width:60px;">
<div style="width: 60px;height:60px;line-height: 60px;">
<Icon type="ios-camera" size="20"></Icon>
</div> </div>
</Upload>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
...@@ -109,15 +72,17 @@ ...@@ -109,15 +72,17 @@
</div> </div>
</TabPane> </TabPane>
<TabPane label="操作日志" icon="md-create" name="logTab"> <TabPane label="操作日志" icon="md-create" name="logTab">
<Table border <Table border :loading="logLoading" :columns="logColumns" :data="logDatas"/>
:loading="logLoading" </TabPane>
:columns="logColumns" <TabPane label="租金计划" icon="logo-usd" name="rentTab">
:data="logDatas"/> <Table border :loading="rentLoading" :columns="rentColumns" :data="rentDatas"/>
</TabPane>
<TabPane label="费用计划" icon="logo-usd" name="feeTab">
<Table border :loading="feeLoading" :columns="feeColumns" :data="feeDatas"/>
</TabPane> </TabPane>
</Tabs> </Tabs>
<div slot="footer"> <div slot="footer">
<Button @click="visible = false">取消</Button> <Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary" v-if="!readonly">确定</Button>
</div> </div>
</Modal> </Modal>
</div> </div>
......
src/view/driver_contract/list/helper.js
import Actions from "./actions/index.vue"; import Actions from "./actions/index.vue";
import { depositStatusOption, leaseTypeOption } from "@/libs/constants.js";
export const columns = (search, showContract, showVehicle, showReturnDeposit, showDriver) => [ export const columns = (search, showContract, showVehicle, showReturnDeposit, showDriver) => [
{ {
...@@ -8,6 +9,19 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh ...@@ -8,6 +9,19 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
minWidth: 50, minWidth: 50,
}, },
{ {
title: "合同状态",
align: "center",
width: 120,
render(h, { row }) {
try {
const { status } = row;
return h("span", {style: {color: status == 1 ? 'green' : 'red' }}, status == 1 ? '有效' : '已失效');
} catch(e) {
console.log(e);
}
}
},
{
title: "合同编号", title: "合同编号",
align: "center", align: "center",
minWidth: 180, minWidth: 180,
...@@ -77,9 +91,16 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh ...@@ -77,9 +91,16 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
}, },
{ {
title: "司机电话", title: "司机电话",
key: "driverVo.phone",
align: "center", align: "center",
minWidth: 120, minWidth: 120,
render(h, { row }) {
try {
const { driverVo } = row;
return h("span", driverVo.phone);
} catch(e) {
console.log(e);
}
}
}, },
// { // {
// title: "车源联系人", // title: "车源联系人",
...@@ -100,12 +121,12 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh ...@@ -100,12 +121,12 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
align: "center", align: "center",
minWidth: 100, minWidth: 100,
}, },
{ // {
title: "ev里程", // title: "ev里程",
key: "odographEv", // key: "odographEv",
align: "center", // align: "center",
minWidth: 100, // minWidth: 100,
}, // },
{ {
title: "合同开始日期", title: "合同开始日期",
key: "startDate", key: "startDate",
...@@ -120,54 +141,46 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh ...@@ -120,54 +141,46 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
}, },
{ {
title: "租赁方式", title: "租赁方式",
key: "leaseType",
align: "center", align: "center",
minWidth: 120, minWidth: 120,
render: (h, { row }) => {
const { leaseType } = row;
const [{ text }] = leaseTypeOption.filter(item => item.value === leaseType);
return h("span", text);
}
}, },
{ {
title: "月租金", title: "租金",
key: "rentAmount", key: "rentAmount",
align: "center", align: "center",
minWidth: 100, minWidth: 100,
}, },
{ // {
title: "押金金额", // title: "押金金额",
key: "depositAmount", // key: "depositAmount",
align: "center", // align: "center",
minWidth: 100, // minWidth: 100,
}, // },
{ // {
title: "已返还押金金额", // title: "已返还押金金额",
key: "returnDepositAmount", // key: "returnDepositAmount",
align: "center", // align: "center",
minWidth: 100, // minWidth: 100,
}, // },
{ {
title: "押金状态", title: "押金状态",
align: "center", align: "center",
minWidth: 120, minWidth: 120,
render: (h, { row }) => { render: (h, { row }) => {
const { depositStatus } = row; const { depositStatus } = row;
if(depositStatus == 0){ const [{ text }] = depositStatusOption.filter(item => item.value === depositStatus);
return h("span", {style: {color: "red" }}, "未返还"); var color = "red";
} else if(depositStatus == 1){ if(depositStatus == 1) {
return h("span", {style: {color: "green" }}, "全部返还"); color = "orange";
} else if(depositStatus == 2){ } else if(depositStatus == 2) {
return h("span", {style: {color: "orange" }}, "部分返还"); color = "green";
}
}
},
{
title: "合同状态",
align: "center",
width: 120,
render(h, { row }) {
try {
const { status } = row;
return h("span", {style: {color: status == 1 ? 'green' : 'red' }}, status == 1 ? '有效' : '失效');
} catch(e) {
console.log(e);
} }
return h("span", {style: {color: color }}, text);
} }
}, },
{ {
...@@ -180,7 +193,7 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh ...@@ -180,7 +193,7 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
const params = { const params = {
edit: status == 1 ? true : false, edit: status == 1 ? true : false,
terminate: status == 1 ? true : false, terminate: status == 1 ? true : false,
returnDeposit: depositStatus == 1 || status == 1 ? false : true, returnDeposit: depositStatus == 2 || status == 1 ? false : true,
}; };
return h(Actions, { return h(Actions, {
......
src/view/driver_contract/list/index.js
import store from "@/store"; import store from "@/store";
const { dispatch } = store; const { dispatch } = store;
import { columns } from "./helper.js"; import { columns } from "./helper.js";
import { depositStatusOption } from "@/libs/constants.js";
import SignContract from "../sign/index.vue"; import SignContract from "../sign/index.vue";
import EditContract from "../edit/index.vue"; import EditContract from "../edit/index.vue";
import EditVehicle from "@/view/vehicle/edit/index.vue"; import EditVehicle from "@/view/vehicle/edit/index.vue";
import ReturnDeposit from "./return_deposit/index.vue"; import ReturnDeposit from "./return_deposit/index.vue";
import EditDriver from "@/view/driver/edit/index.vue"; import EditDriver from "@/view/driver/edit/index.vue";
export default { export default {
components: { SignContract, EditContract, EditVehicle, ReturnDeposit, EditDriver }, components: { depositStatusOption, SignContract, EditContract, EditVehicle, ReturnDeposit, EditDriver },
data() { data() {
return { return {
loading: false, loading: false,
columns: [], columns: [],
plateNo: "", sources: [],
depositStatusOption: depositStatusOption,
vehicleInfo: "",
driverInfo: "",
sourceId: 0,
status: null, status: null,
depositStatus: null, depositStatus: null,
type: 2, type: 2,
...@@ -33,7 +39,9 @@ export default { ...@@ -33,7 +39,9 @@ export default {
search(current = 1) { search(current = 1) {
this.searchForm = { this.searchForm = {
type: this.type, type: this.type,
plateNo: this.plateNo, vehicleInfo: this.vehicleInfo,
driverInfo: this.driverInfo,
sourceId: this.sourceId,
status: this.status, status: this.status,
depositStatus: this.depositStatus, depositStatus: this.depositStatus,
}; };
...@@ -85,9 +93,19 @@ export default { ...@@ -85,9 +93,19 @@ export default {
this.$refs.editDriver.driver = driver; this.$refs.editDriver.driver = driver;
this.$refs.editDriver.readonly = true; this.$refs.editDriver.readonly = true;
this.$refs.editDriver.visible = true; this.$refs.editDriver.visible = true;
},
listSource() {
dispatch("invoke/asyncListSource", {}).then(({ data }) => {
this.loading = false;
if (data == null) {
return;
}
this.sources = data;
});
} }
}, },
mounted() { mounted() {
this.listSource();
this.columns = columns(this.search, this.showContract, this.showVehicle, this.showReturnDeposit, this.showDriver); this.columns = columns(this.search, this.showContract, this.showVehicle, this.showReturnDeposit, this.showDriver);
this.search(); this.search();
} }
......
src/view/driver_contract/list/index.vue
<template> <template>
<div> <div>
<Card> <Card>
<Form :label-width="80" label-colon> <Form :label-width="80" label-colon inline>
<Row :gutter="5"> <Row :gutter="2">
<Col span="4"> <Col span="4">
<FormItem label="车牌号码" > <FormItem label="车辆信息" >
<Input v-model="plateNo" placeholder="Enter something..." clearable/> <Input v-model="vehicleInfo" placeholder="车牌号" clearable/>
</FormItem>
</Col>
<Col span="4">
<FormItem label="司机信息" >
<Input v-model="driverInfo" placeholder="姓名/手机号" clearable/>
</FormItem>
</Col>
<Col span="4">
<FormItem label="车源" >
<Select v-model.trim="sourceId" filterable clearable>
<Option v-for="item in sources" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
</FormItem> </FormItem>
</Col> </Col>
<Col span="4"> <Col span="4">
<FormItem label="合同状态" > <FormItem label="合同状态" >
<Select v-model.trim="status" clearable> <Select v-model.trim="status" filterable clearable>
<Option :value="1" :key="1">有效</Option> <Option :value="1" :key="1">有效</Option>
<Option :value="0" :key="0">无效</Option> <Option :value="0" :key="0">无效</Option>
</Select> </Select>
...@@ -18,23 +30,19 @@ ...@@ -18,23 +30,19 @@
</Col> </Col>
<Col span="4"> <Col span="4">
<FormItem label="押金状态" > <FormItem label="押金状态" >
<Select v-model.trim="depositStatus" clearable> <Select v-model.trim="depositStatus" filterable clearable>
<Option :value="0" :key="0">未返还</Option> <Option v-for="item in depositStatusOption" :value="item.value" :key="item.value">{{ item.text }}</Option>
<Option :value="1" :key="1">全部返还</Option>
<Option :value="2" :key="2">部分返还</Option>
</Select> </Select>
</FormItem> </FormItem>
</Col> </Col>
<Col span="2"> <Col span="2">
<Button @click="search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button> <Button @click="search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button>
</Col> </Col>
<Col span="10">
<SignContract ref="signContract" @search="search" style="float:right" /> <SignContract ref="signContract" @search="search" style="float:right" />
<EditContract ref="editContract" @search="search" /> <EditContract ref="editContract" @search="search" />
<ReturnDeposit ref="returnDeposit" @search="search" /> <ReturnDeposit ref="returnDeposit" @search="search" />
<EditVehicle ref="editVehicle" /> <EditVehicle ref="editVehicle" />
<EditDriver ref="editDriver" /> <EditDriver ref="editDriver" />
</Col>
</Row> </Row>
</Form> </Form>
</Card> </Card>
......
src/view/driver_contract/list/return_deposit/index.js
import store from "@/store"; import store from "@/store";
const { dispatch } = store; const { dispatch } = store;
import { isInteger } from "@/libs/validator.js"; import { isInteger } from "@/libs/validator.js";
import { depositStatusOption } from "@/libs/constants.js";
export default { export default {
components: { }, components: { },
...@@ -12,12 +13,13 @@ export default { ...@@ -12,12 +13,13 @@ export default {
mainUploadStatus: false, mainUploadStatus: false,
secondUploadStatus: false, secondUploadStatus: false,
returnFormRule: { returnFormRule: {
returnAmount: [{ required: true, message: "请输入本次退还押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }], returnAmount: [{ required: true, message: "请输入返还金额", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
}, },
returnForm: { returnForm: {
plateNo: null, plateNo: null,
depositStatus: null, depositStatus: null,
depositAmount: null, payableDepositAmount: null,
paidDepositAmount: null,
returnDepositAmount: null, returnDepositAmount: null,
returnAmount: null, returnAmount: null,
remark: null, remark: null,
...@@ -32,29 +34,24 @@ export default { ...@@ -32,29 +34,24 @@ export default {
this.$refs.returnForm.resetFields(); this.$refs.returnForm.resetFields();
this.returnForm.plateNo = null; this.returnForm.plateNo = null;
this.returnForm.depositStatus = null; this.returnForm.depositStatus = null;
this.returnForm.depositAmount = null; this.returnForm.payableDepositAmount = null;
this.returnForm.paidDepositAmount = null;
this.returnForm.returnDepositAmount = null; this.returnForm.returnDepositAmount = null;
this.returnForm.returnAmount = null; this.returnForm.returnAmount = null;
this.returnForm.remark = null; this.returnForm.remark = null;
if(show) { if(show) {
this.returnForm.plateNo = this.contract.vehicleVo.plateNo; this.returnForm.plateNo = this.contract.vehicleVo.plateNo;
this.returnForm.depositAmount = this.contract.depositAmount; this.returnForm.payableDepositAmount = this.contract.payableDepositAmount;
this.returnForm.paidDepositAmount = this.contract.paidDepositAmount;
this.returnForm.returnDepositAmount = this.contract.returnDepositAmount; this.returnForm.returnDepositAmount = this.contract.returnDepositAmount;
this.returnForm.depositStatus = depositStatusOption.filter(item => item.value === this.contract.depositStatus)[0].text;
if (this.contract.depositStatus == 0) {
this.returnForm.depositStatus = "未返还";
} else if (this.contract.depositStatus == 1) {
this.returnForm.depositStatus = "全部返还";
} else if (this.contract.depositStatus == 2) {
this.returnForm.depositStatus = "部分返还";
}
} }
}, },
}, },
methods: { methods: {
setAll() { setAll() {
this.returnForm.returnAmount = this.returnForm.depositAmount - this.returnForm.returnDepositAmount; this.returnForm.returnAmount = "" + (this.returnForm.paidDepositAmount - this.returnForm.returnDepositAmount);
}, },
saveReturnDeposit() { saveReturnDeposit() {
this.$refs.returnForm.validate(valid => { this.$refs.returnForm.validate(valid => {
......
src/view/driver_contract/list/return_deposit/index.vue
...@@ -5,34 +5,29 @@ ...@@ -5,34 +5,29 @@
<Form ref="returnForm" :model="returnForm" :rules="returnFormRule" :label-width="80" label-colon> <Form ref="returnForm" :model="returnForm" :rules="returnFormRule" :label-width="80" label-colon>
<Row> <Row>
<Col span="24"> <Col span="24">
<FormItem label="车牌号" prop="plateNo"> <FormItem label="车牌号" prop="plateNo">{{ returnForm.plateNo }}</FormItem>
<Input v-model.trim="returnForm.plateNo" disabled />
</FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<FormItem label="押金状态" prop="status"> <FormItem label="押金状态" prop="status">{{ returnForm.depositStatus }}</FormItem>
<Input v-model.trim="returnForm.depositStatus" disabled />
</FormItem>
</Col> </Col>
</Row> </Row>
<Row :gutter="10"> <Row :gutter="10">
<Col span="12"> <Col span="8">
<FormItem label="全部押金" prop="depositAmount"> <FormItem label="应付押金" prop="depositAmount">{{ returnForm.payableDepositAmount }}</FormItem>
<Input v-model.trim="returnForm.depositAmount" disabled />
</FormItem>
</Col> </Col>
<Col span="12"> <Col span="8">
<FormItem label="已还金额" prop="returnDepositAmount"> <FormItem label="已付押金" prop="depositAmount">{{ returnForm.paidDepositAmount }}</FormItem>
<Input v-model.trim="returnForm.returnDepositAmount" disabled /> </Col>
</FormItem> <Col span="8">
<FormItem label="已还金额" prop="returnDepositAmount">{{ returnForm.returnDepositAmount }}</FormItem>
</Col> </Col>
</Row> </Row>
<Row :gutter="10"> <Row :gutter="10">
<Col span="20"> <Col span="20">
<FormItem label="本次返还" prop="returnAmount"> <FormItem label="本次返还" prop="returnAmount">
<Input v-model.trim="returnForm.returnAmount" /> <Input v-model.trim="returnForm.returnAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
<Col span="4"> <Col span="4">
......
src/view/driver_contract/sign/columns.js 0 → 100644
import {timingOption} from "@/libs/constants.js";
export const feeColumns = (removeFee, firstPaidAmountChange) => [
{
title: "费用名称",
key: "name",
align: "center",
},
{
title: "收费时机",
align: "center",
render(h, { row }) {
try {
const { timing } = row;
const [{ text }] = timingOption.filter(item => item.value === timing);
if(!text) {
text = "";
}
return h("span", text);
} catch(e) {
console.log(e);
}
}
},
{
title: "应付金额",
key: "amount",
align: "center",
},
{
title: "首次实收金额",
align: "center",
render(h, { row, index }) {
try {
return h('div', [
h('InputNumber', {
props: {
value: 0,
formatter: value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: value => `${value}`.replace(/$s?|(,*)/g, '')
},
on: {
'on-change': e => {
firstPaidAmountChange(index, e);
}
}
})
])
} catch(e) {
console.log(e);
}
}
},
{
title: "操作",
align: "center",
render(h, { row, index }) {
try {
var removeTag = h(
"Button",
{
props: { type: "error", size: "small" },
on: { click: () => { removeFee(index); }}
},
"移除"
);
return removeTag;
} catch(e) {
console.log(e);
}
}
},
];
src/view/driver_contract/sign/index.js
import store from "@/store"; import store from "@/store";
const { dispatch } = store; const { dispatch } = store;
import moment from "moment";
import { isInteger } from "@/libs/validator.js"; import { isInteger } from "@/libs/validator.js";
import { feeColumns } from "./columns.js";
import { leaseTypeOption } from "@/libs/constants.js";
export default { export default {
components: { }, components: { feeColumns, leaseTypeOption },
data() { data() {
return { return {
visible: false, visible: false,
feeDialogVisible: false,
submitLoading: false, submitLoading: false,
feeColumns: [],
leaseTypeOption: leaseTypeOption,
contractFormRule: { contractFormRule: {
vehicleId: [{ vehicleId: [{ type: "number", required: true, message: "请选择车辆", trigger: "change" }],
type: "number", driverId: [{ type: "number", required: true, message: "请选择司机", trigger: "change" }],
required: true,
message: "请选择车辆",
trigger: "change"
}
],
driverId: [{
type: "number",
required: true,
message: "请选择司机",
trigger: "change"
}
],
odograph: [{ required: true, message: "请输入里程数", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ], odograph: [{ required: true, message: "请输入里程数", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
depositAmount: [{ required: true, message: "请输入押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }], payableDepositAmount: [{ required: true, message: "请输入应付押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
paidDepositAmount: [{ required: true, message: "请输入实收押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }], rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
startDate: [{ firstPaidAmount: [{ required: true, message: "首次实收租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
type: "date", leaseType: [{ type: "number", required: true, message: "请选择租赁方式", trigger: "change" }],
required: true, startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
message: "请选择开始日期", leasePeriod: [{ required: true, message: "请输入租赁周期", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
trigger: "change"
}
],
endDate: [{
type: "date",
required: true,
message: "请选择结束日期",
trigger: "change"
}
],
}, },
contractForm: { contractForm: {
type: 2, type: 2,
...@@ -48,40 +33,67 @@ export default { ...@@ -48,40 +33,67 @@ export default {
odograph: null, odograph: null,
odographEv: null, odographEv: null,
startDate: null, startDate: null,
endDate: null, // endDate: null,
depositAmount: null, payableDepositAmount: null,
paidDepositAmount: null,
diffDepositAmount: null,
rentAmount: null, rentAmount: null,
leaseType: null, firstPaidAmount: null,
leaseType: 1,
leasePeriod: null,
remark: null, remark: null,
files: [], files: [],
fees: [],
}, },
vehicles: [], vehicles: [],
drivers: [], drivers: [],
uploadList: [], uploadList: [],
defaultList: [], defaultList: [],
allFees: [],
selectFeeId: 0,
leasePeriodName: "周期/月",
}; };
}, },
computed: { computed: {
}, },
watch: { watch: {
'contractForm.leaseType'() {
if(this.contractForm.leaseType===3) {
this.leasePeriodName = "周期/周";
} else {
this.leasePeriodName = "周期/月";
}
},
'contractForm.payableDepositAmount'() {
this.contractForm.diffDepositAmount = this.contractForm.payableDepositAmount - this.contractForm.paidDepositAmount;
},
'contractForm.paidDepositAmount'() {
this.contractForm.diffDepositAmount = this.contractForm.payableDepositAmount - this.contractForm.paidDepositAmount;
},
visible(show) { visible(show) {
this.submitLoading = false; this.submitLoading = false;
this.$refs.contractForm.resetFields(); this.$refs.contractForm.resetFields();
if(show) { if(show) {
this.contractForm.files = [];
this.contractForm.fees = [];
this.listVehicles(); this.listVehicles();
this.listDrivers(); this.listDrivers();
this.listEnableFees();
this.contractForm.startDate = moment().format().substring(0,10);
} }
}, },
feeDialogVisible(show) {
if(show)
this.selectFeeId = 0;
}
}, },
methods: { methods: {
handleView(item) { handleView(item) {
}, },
handleRemove(file) { handleRemove(file) {
// const fileList = this.$refs.upload.fileList;
// this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
this.uploadList.splice(this.uploadList.indexOf(file), 1); this.uploadList.splice(this.uploadList.indexOf(file), 1);
}, },
handleFormatError (file) { handleFormatError (file) {
...@@ -117,7 +129,7 @@ export default { ...@@ -117,7 +129,7 @@ export default {
}); });
return false; return false;
}, },
saveVehicle() { saveContract() {
this.$refs.contractForm.validate(valid => { this.$refs.contractForm.validate(valid => {
if (valid) { if (valid) {
this.uploadList.forEach(f => { this.uploadList.forEach(f => {
...@@ -143,8 +155,32 @@ export default { ...@@ -143,8 +155,32 @@ export default {
dispatch("invoke/asyncListAllDriver", {}).then(({ data }) => { dispatch("invoke/asyncListAllDriver", {}).then(({ data }) => {
this.drivers = data; this.drivers = data;
}); });
},
setFee(feeId) {
if(!feeId)
return;
const fee = this.allFees.filter(item => item.id === feeId);
this.contractForm.fees.push(fee[0]);
this.feeDialogVisible = false;
},
firstPaidAmountChange(index, amount) {
this.contractForm.fees[index].firstPaidAmount = amount;
},
removeFee(index) {
this.contractForm.fees.splice(index, 1);
},
listEnableFees() {
dispatch("invoke/asyncListFee", 1).then(({ data }) => {
this.loading = false;
if (data != null) {
this.allFees = data;
} else {
this.allFees = [];
}
});
} }
}, },
mounted() { mounted() {
this.feeColumns = feeColumns(this.removeFee, this.firstPaidAmountChange);
} }
}; };
src/view/driver_contract/sign/index.vue
...@@ -20,42 +20,56 @@ ...@@ -20,42 +20,56 @@
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="租赁方式" prop="leaseType"> <FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.leaseType" type="text" /> <Input v-model.trim="contractForm.odograph" type="number" />
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="月租金" prop="rentAmount"> <FormItem label="应付押金" prop="payableDepositAmount">
<Input v-model.trim="contractForm.rentAmount" type="number" /> <Input v-model.trim="contractForm.payableDepositAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="押金" prop="depositAmount"> <FormItem label="实收押金" prop="paidDepositAmount">
<Input v-model.trim="contractForm.depositAmount" type="number" /> <Input v-model.trim="contractForm.paidDepositAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="里程数" prop="odograph"> <FormItem label="欠收押金" prop="diffDepositAmount">
<Input v-model.trim="contractForm.odograph" type="number" /> <Input v-model.trim="contractForm.diffDepositAmount" type="number" readonly/>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="开始日期" prop="startDate"> <FormItem label="周期租金" prop="rentAmount">
<DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期"></DatePicker> <Input v-model.trim="contractForm.rentAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="结束日期" prop="endDate"> <FormItem label="首次实收租金" prop="firstPaidAmount">
<DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期"></DatePicker> <Input v-model.trim="contractForm.firstPaidAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
</Row>
<Row>
<Col span="8"> <Col span="8">
<FormItem label="ev里程数" prop="odographEv"> <FormItem label="租赁方式" prop="leaseType">
<Input v-model.trim="contractForm.odographEv" type="number" /> <Select v-model="contractForm.leaseType">
<Option v-for="item in leaseTypeOption" :value="item.value" :key="item.value">{{ item.text }}</Option>
</Select>
</FormItem>
</Col>
<Col span="8">
<FormItem label="开始日期" prop="startDate">
<DatePicker v-model="contractForm.startDate" style="width: 100%" placeholder="请输入开始日期"></DatePicker>
</FormItem>
</Col>
<Col span="8">
<FormItem :label="leasePeriodName" prop="leasePeriod">
<Input v-model.trim="contractForm.leasePeriod" type="number" />
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
...@@ -66,6 +80,24 @@ ...@@ -66,6 +80,24 @@
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<Row :gutter="5">
<Col span="15">
<FormItem label="费用项">
<Table border :columns="feeColumns" :data="contractForm.fees" size="small" />
</FormItem>
</Col>
<Col span="9">
<Button icon="ios-add" type="primary" @click="feeDialogVisible = true">添加费用项</Button>
<Modal v-model="feeDialogVisible" title="选择费用" width="300" >
<Select @on-change="setFee" v-model="selectFeeId">
<Option v-for="item in allFees" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<div slot="footer">
<Button @click="feeDialogVisible = false">取消</Button>
</div>
</Modal>
</Col>
</Row>
<Row> <Row>
<Col span="24"> <Col span="24">
<FormItem label="验车照片"> <FormItem label="验车照片">
...@@ -105,7 +137,7 @@ ...@@ -105,7 +137,7 @@
</div> </div>
<div slot="footer"> <div slot="footer">
<Button @click="visible = false">取消</Button> <Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button> <Button @click="saveContract" :loading="submitLoading" type="primary">确定</Button>
</div> </div>
</Modal> </Modal>
</div> </div>
......
src/view/source_contract/edit/index.js
...@@ -140,7 +140,7 @@ export default { ...@@ -140,7 +140,7 @@ export default {
}); });
return false; return false;
}, },
saveVehicle() { saveContract() {
// console.log(this.contractForm); // console.log(this.contractForm);
// return; // return;
this.$refs.contractForm.validate(valid => { this.$refs.contractForm.validate(valid => {
......
src/view/source_contract/edit/index.vue
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
</Tabs> </Tabs>
<div slot="footer"> <div slot="footer">
<Button @click="visible = false">取消</Button> <Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary" v-if="!readonly">确定</Button> <Button @click="saveContract" :loading="submitLoading" type="primary" v-if="!readonly">确定</Button>
</div> </div>
</Modal> </Modal>
</div> </div>
......
src/view/source_contract/sign/index.js
import store from "@/store"; import store from "@/store";
const { dispatch } = store; const { dispatch } = store;
import { isInteger } from "@/libs/validator.js"; import { isInteger } from "@/libs/validator.js";
import AddVehicle from "@/view/vehicle/add/index.vue";
import { leaseTypeOption } from "@/libs/constants.js";
export default { export default {
components: { }, components: { AddVehicle, leaseTypeOption },
data() { data() {
return { return {
visible: false, visible: false,
submitLoading: false, submitLoading: false,
leaseTypeOption: leaseTypeOption,
contractFormRule: { contractFormRule: {
vehicleId: [{ vehicleId: [{ type: "number", required: true, message: "请选择车辆", trigger: "change" }],
type: "number", sourceId: [{ type: "number", required: true, message: "请选择车源", trigger: "change" }],
required: true, odograph: [{ required: true, message: "请输入里程数", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
message: "请选择车辆", payableDepositAmount: [{ required: true, message: "请输入应付押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
trigger: "change" paidDepositAmount: [{ required: true, message: "请输入实收押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
}
],
sourceId: [{
type: "number",
required: true,
message: "请选择车源",
trigger: "change"
}
],
odograph: [{ required: true, message: "请输入里程数", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
depositAmount: [{ required: true, message: "请输入押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }], rentAmount: [{ required: true, message: "请输入月租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
startDate: [{ leaseType: [{ type: "number", required: true, message: "请选择租赁方式", trigger: "change" }],
type: "date", startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
required: true, leasePeriod: [{ required: true, message: "请输入租赁周期", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
message: "请选择开始日期",
trigger: "change"
}
],
endDate: [{
type: "date",
required: true,
message: "请选择结束日期",
trigger: "change"
}
],
}, },
contractForm: { contractForm: {
type: 1, type: 1,
vehicleId: null, vehicleId: null,
sourceId: null, sourceId: null,
odograph: null, odograph: null,
odographEv: null, payableDepositAmount: null,
paidDepositAmount: null,
startDate: null, startDate: null,
endDate: null,
depositAmount: null,
rentAmount: null, rentAmount: null,
leaseType: null, leaseType: null,
leasePeriod: null,
remark: null, remark: null,
files: [], files: [],
}, },
...@@ -60,11 +41,19 @@ export default { ...@@ -60,11 +41,19 @@ export default {
uploadList: [], uploadList: [],
defaultList: [], defaultList: [],
leasePeriodName: "周期/月",
}; };
}, },
computed: { computed: {
}, },
watch: { watch: {
'contractForm.leaseType'() {
if(this.contractForm.leaseType===3) {
this.leasePeriodName = "周期/周";
} else {
this.leasePeriodName = "周期/月";
}
},
visible(show) { visible(show) {
this.submitLoading = false; this.submitLoading = false;
this.$refs.contractForm.resetFields(); this.$refs.contractForm.resetFields();
...@@ -76,6 +65,11 @@ export default { ...@@ -76,6 +65,11 @@ export default {
}, },
}, },
methods: { methods: {
onAddComplete(vehicle) {
console.log(vehicle);
this.vehicles.unshift(vehicle);
this.contractForm.vehicleId = vehicle.id;
},
handleView(item) { handleView(item) {
}, },
handleRemove(file) { handleRemove(file) {
...@@ -117,7 +111,7 @@ export default { ...@@ -117,7 +111,7 @@ export default {
}); });
return false; return false;
}, },
saveVehicle() { saveContract() {
this.$refs.contractForm.validate(valid => { this.$refs.contractForm.validate(valid => {
if (valid) { if (valid) {
this.uploadList.forEach(f => { this.uploadList.forEach(f => {
......
src/view/source_contract/sign/index.vue
...@@ -4,12 +4,13 @@ ...@@ -4,12 +4,13 @@
<Modal width="800" v-model="visible" title="车源合同 - 签约" fullscreen> <Modal width="800" v-model="visible" title="车源合同 - 签约" fullscreen>
<div> <div>
<Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon> <Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon>
<Row> <Row :gutter="5">
<Col span="8"> <Col span="8">
<FormItem label="车辆信息" prop="vehicleId"> <FormItem label="车辆信息" prop="vehicleId">
<Select v-model.trim="contractForm.vehicleId" filterable> <Select v-model.trim="contractForm.vehicleId" filterable style="width:80%">
<Option v-for="item in vehicles" :value="item.id" :key="item.id">{{ item.id + " / " + item.plateNo + " / " + item.color + " / " + item.brandName + " / " + item.model }}</Option> <Option v-for="item in vehicles" :value="item.id" :key="item.id">{{ item.id + " / " + item.plateNo + " / " + item.color + " / " + item.brandName + " / " + item.model }}</Option>
</Select> </Select>
<AddVehicle ref="addVehicleDialog" @search="onAddComplete($event)" style="float:right; width:20%"/>
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
...@@ -20,42 +21,44 @@ ...@@ -20,42 +21,44 @@
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="租赁方式" prop="leaseType"> <FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.leaseType" type="text" /> <Input v-model.trim="contractForm.odograph" type="number" />
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="月租金" prop="rentAmount"> <FormItem label="周期租金" prop="rentAmount">
<Input v-model.trim="contractForm.rentAmount" type="number" /> <Input v-model.trim="contractForm.rentAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="押金" prop="depositAmount"> <FormItem label="应付押金" prop="payableDepositAmount">
<Input v-model.trim="contractForm.depositAmount" type="number" /> <Input v-model.trim="contractForm.payableDepositAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="里程数" prop="odograph"> <FormItem label="实付押金" prop="paidDepositAmount">
<Input v-model.trim="contractForm.odograph" type="number" /> <Input v-model.trim="contractForm.paidDepositAmount" type="number" />
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span="8"> <Col span="8">
<FormItem label="开始日期" prop="startDate"> <FormItem label="租赁方式" prop="leaseType">
<DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期"></DatePicker> <Select v-model="contractForm.leaseType">
<Option v-for="item in leaseTypeOption" :value="item.value" :key="item.value">{{ item.text }}</Option>
</Select>
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="结束日期" prop="endDate"> <FormItem label="开始日期" prop="startDate">
<DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期"></DatePicker> <DatePicker v-model="contractForm.startDate" style="width: 100%" placeholder="请输入开始日期"></DatePicker>
</FormItem> </FormItem>
</Col> </Col>
<Col span="8"> <Col span="8">
<FormItem label="ev里程数" prop="odographEv"> <FormItem :label="leasePeriodName" prop="leasePeriod">
<Input v-model.trim="contractForm.odographEv" type="number" /> <Input v-model.trim="contractForm.leasePeriod" type="number" />
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
...@@ -105,7 +108,7 @@ ...@@ -105,7 +108,7 @@
</div> </div>
<div slot="footer"> <div slot="footer">
<Button @click="visible = false">取消</Button> <Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button> <Button @click="saveContract" :loading="submitLoading" type="primary">确定</Button>
</div> </div>
</Modal> </Modal>
</div> </div>
......
src/view/vehicle/add/index.js
...@@ -180,11 +180,12 @@ export default { ...@@ -180,11 +180,12 @@ export default {
saveVehicle() { saveVehicle() {
this.$refs.vehicleForm.validate(valid => { this.$refs.vehicleForm.validate(valid => {
if (valid) { if (valid) {
dispatch("invoke/asyncCreateVehicle", this.vehicleForm).then(({ code }) => { dispatch("invoke/asyncCreateVehicle", this.vehicleForm).then(({ code, data }) => {
this.submitLoading = false; this.submitLoading = false;
if (code === 1) { if (code === 1) {
console.log(data);
this.$Message.success("添加成功"); this.$Message.success("添加成功");
this.$emit("search"); this.$emit("search", data);
this.visible = false; this.visible = false;
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment