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 {
updateContract,
terminateContract,
returnDeposit,
listPlanning,
listDriver,
createDriver,
updateDriver,
......@@ -184,6 +185,9 @@ export default {
asyncReturnDeposit(_, payload) {
return returnDeposit(payload)
},
asyncListPlanning(_, payload) {
return listPlanning(payload)
},
asyncListDriver(_, payload) {
return listDriver(payload)
......
src/api/request_methods.js
......@@ -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 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);
......
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";
const { dispatch } = store;
import { isInteger } from "@/libs/validator.js";
import { timingOption } from "../helper.js";
import { timingOption } from "@/libs/constants.js";
export default {
components: { timingOption },
......
src/view/data/fee/helper.js
export const timingOption = [
{text: "一次性", value: 1},
{text: "周度", value: 2},
{text: "月度", value: 3},
{text: "季度", value: 4},
{text: "年度", value: 5},
];
import {timingOption} from "@/libs/constants.js";
export const columns = (disable, enable) => [
{
......
src/view/driver_contract/edit/helper.js
export const columns = () => [
export const logColumns = () => [
{
title: "序号",
key: "id",
......@@ -30,3 +30,95 @@ export const columns = () => [
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";
const { dispatch } = store;
import { columns } from "./helper.js";
import { isInteger } from "@/libs/validator.js";
import { logColumns, rentColumns, feeColumns } from "./helper.js";
import { leaseTypeOption } from "@/libs/constants.js";
export default {
components: { },
components: { leaseTypeOption },
data() {
return {
logLoading: false,
logDatas: [],
logColumns: [],
leaseTypeOption: leaseTypeOption,
rentLoading: false,
rentDatas: [],
rentColumns: [],
feeLoading: false,
feeDatas: [],
feeColumns: [],
contract: null,
readonly: false,
......@@ -19,13 +28,6 @@ export default {
secondUploadStatus: false,
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: {
contractId: 0,
type: 1,
......@@ -33,7 +35,9 @@ export default {
vehicle: null,
driver: null,
odograph: null,
odographEv: null,
payableDepositAmount: null,
paidDepositAmount: null,
diffDepositAmount: null,
startDate: null,
endDate: null,
depositAmount: null,
......@@ -55,7 +59,9 @@ export default {
this.contractForm.vehicle = null;
this.contractForm.driver = 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.endDate = null;
this.contractForm.depositAmount = null;
......@@ -73,14 +79,16 @@ export default {
this.contractForm.code = this.contract.code;
this.contractForm.vehicle = vehicleInfo;
this.contractForm.driver = this.contract.driverVo.name + " / " + this.contract.driverVo.phone;
this.contractForm.odograph = ""+this.contract.odograph;
this.contractForm.odographEv = ""+this.contract.odographEv;
this.contractForm.odograph = this.contract.odograph;
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.endDate = this.contract.endDate;
this.contractForm.leaseType = this.contract.leaseType;
this.contractForm.depositAmount = ""+this.contract.depositAmount;
this.contractForm.returnDepositAmount = ""+this.contract.returnDepositAmount;
this.contractForm.rentAmount = ""+this.contract.rentAmount;
this.contractForm.depositAmount = this.contract.depositAmount;
this.contractForm.returnDepositAmount = this.contract.returnDepositAmount;
this.contractForm.rentAmount = this.contract.rentAmount;
this.contractForm.remark = this.contract.remark;
if(this.contract.files) {
......@@ -91,74 +99,18 @@ export default {
}
this.listLogs();
this.listRentPlanning();
this.listFeePlanning();
} else {
this.logDatas = [];
this.rentDatas = [];
this.feeDatas = [];
}
// console.log(this.uploadList);
// console.log(this.contractForm);
},
},
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() {
dispatch("invoke/asyncListNoSourceContractVehicles").then(({ data }) => {
this.vehicles = data;
......@@ -170,13 +122,33 @@ export default {
});
},
listLogs() {
this.logLoading = true;
const contractId = this.contract.id;
dispatch("invoke/asyncListLogs", contractId).then(({ data }) => {
this.logLoading = false;
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() {
this.logColumns = columns();
this.logColumns = logColumns();
this.rentColumns = rentColumns();
this.feeColumns = feeColumns();
}
};
src/view/driver_contract/edit/index.vue
......@@ -4,75 +4,57 @@
<Tabs v-model="selectTab">
<TabPane label="合同信息" icon="md-document" name="contractTab">
<div>
<Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon>
<Form ref="contractForm" :model="contractForm" :label-width="80" label-colon>
<Row>
<Col span="8">
<FormItem label="车辆信息" prop="vehicle">
<Input v-model.trim="contractForm.vehicle" type="text" disabled />
</FormItem>
<FormItem label="车辆信息" prop="vehicle">{{ contractForm.vehicle }}</FormItem>
</Col>
<Col span="8">
<FormItem label="司机信息" prop="driver">
<Input v-model.trim="contractForm.driver" type="text" disabled />
</FormItem>
<FormItem label="司机信息" prop="driver">{{ contractForm.driver }}</FormItem>
</Col>
<Col span="8">
<FormItem label="租赁方式" prop="leaseType">
<Input v-model.trim="contractForm.leaseType" type="text" :disabled="readonly"/>
</FormItem>
<FormItem label="里程数" prop="odograph">{{ contractForm.odograph }}</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="月租金" prop="rentAmount">
<Input v-model.trim="contractForm.rentAmount" type="number" :disabled="readonly"/>
</FormItem>
<FormItem label="应付押金" prop="payableDepositAmount">{{ contractForm.payableDepositAmount }}</FormItem>
</Col>
<Col span="8">
<FormItem label="押金" prop="depositAmount">
<Input v-model.trim="contractForm.depositAmount" type="number" :disabled="readonly"/>
</FormItem>
<FormItem label="实收押金" prop="paidDepositAmount">{{ contractForm.paidDepositAmount }}</FormItem>
</Col>
<Col span="8">
<FormItem label="反还押金" prop="returnDepositAmount">
<Input v-model.trim="contractForm.returnDepositAmount" type="number" disabled />
</FormItem>
<FormItem label="欠收押金" prop="diffDepositAmount">{{ contractForm.diffDepositAmount }}</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="开始日期" prop="startDate">
<DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期":disabled="readonly"></DatePicker>
</FormItem>
<FormItem label="周期租金" prop="rentAmount">{{ contractForm.rentAmount }}</FormItem>
</Col>
<Col span="8">
<FormItem label="结束日期" prop="endDate">
<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>
<FormItem label="反还押金" prop="returnDepositAmount">{{ contractForm.returnDepositAmount }}</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="ev里程数" prop="odographEv">
<Input v-model.trim="contractForm.odographEv" type="number" :disabled="readonly"/>
</FormItem>
<FormItem label="租赁方式" prop="leaseType">{{ contractForm.leaseType==null ? "" : leaseTypeOption.filter(item => item.value === contractForm.leaseType)[0].text }}</FormItem>
</Col>
<Col span="8">
<FormItem label="开始日期" prop="startDate">{{ contractForm.startDate }}</FormItem>
</Col>
<Col span="8">
<FormItem label="结束日期" prop="endDate">{{ contractForm.endDate }}</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem label="备注" prop="remark">
<Input v-model="contractForm.remark" type="textarea" :rows="4" placeholder="请输入备注" style="width: 100%" :disabled="readonly"/>
</FormItem>
<FormItem label="备注" prop="remark">{{ contractForm.remark == null ? "无" : contractForm.remark }}</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem label="验车照片">
<div v-if="uploadList==null || uploadList.length==0">无</div>
<div class="demo-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'">
<img :src="item.url" style="width: 60px;height:60px;line-height: 60px;">
......@@ -81,27 +63,8 @@
<Icon type="ios-trash-outline" @click.native="handleRemove(item)" v-if="!readonly"></Icon>
</div>
</template>
<template v-else>
<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>
<template v-else><Spin size="small" fix ></Spin></template>
</div>
</Upload>
</FormItem>
</Col>
</Row>
......@@ -109,15 +72,17 @@
</div>
</TabPane>
<TabPane label="操作日志" icon="md-create" name="logTab">
<Table border
:loading="logLoading"
:columns="logColumns"
:data="logDatas"/>
<Table border :loading="logLoading" :columns="logColumns" :data="logDatas"/>
</TabPane>
<TabPane label="租金计划" icon="logo-usd" name="rentTab">
<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>
</Tabs>
<div slot="footer">
<Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary" v-if="!readonly">确定</Button>
</div>
</Modal>
</div>
......
src/view/driver_contract/list/helper.js
import Actions from "./actions/index.vue";
import { depositStatusOption, leaseTypeOption } from "@/libs/constants.js";
export const columns = (search, showContract, showVehicle, showReturnDeposit, showDriver) => [
{
......@@ -8,6 +9,19 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
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: "合同编号",
align: "center",
minWidth: 180,
......@@ -77,9 +91,16 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
},
{
title: "司机电话",
key: "driverVo.phone",
align: "center",
minWidth: 120,
render(h, { row }) {
try {
const { driverVo } = row;
return h("span", driverVo.phone);
} catch(e) {
console.log(e);
}
}
},
// {
// title: "车源联系人",
......@@ -100,12 +121,12 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
align: "center",
minWidth: 100,
},
{
title: "ev里程",
key: "odographEv",
align: "center",
minWidth: 100,
},
// {
// title: "ev里程",
// key: "odographEv",
// align: "center",
// minWidth: 100,
// },
{
title: "合同开始日期",
key: "startDate",
......@@ -120,54 +141,46 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
},
{
title: "租赁方式",
key: "leaseType",
align: "center",
minWidth: 120,
render: (h, { row }) => {
const { leaseType } = row;
const [{ text }] = leaseTypeOption.filter(item => item.value === leaseType);
return h("span", text);
}
},
{
title: "月租金",
title: "租金",
key: "rentAmount",
align: "center",
minWidth: 100,
},
{
title: "押金金额",
key: "depositAmount",
align: "center",
minWidth: 100,
},
{
title: "已返还押金金额",
key: "returnDepositAmount",
align: "center",
minWidth: 100,
},
// {
// title: "押金金额",
// key: "depositAmount",
// align: "center",
// minWidth: 100,
// },
// {
// title: "已返还押金金额",
// key: "returnDepositAmount",
// align: "center",
// minWidth: 100,
// },
{
title: "押金状态",
align: "center",
minWidth: 120,
render: (h, { row }) => {
const { depositStatus } = row;
if(depositStatus == 0){
return h("span", {style: {color: "red" }}, "未返还");
} else if(depositStatus == 1){
return h("span", {style: {color: "green" }}, "全部返还");
} else if(depositStatus == 2){
return h("span", {style: {color: "orange" }}, "部分返还");
}
}
},
{
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);
const [{ text }] = depositStatusOption.filter(item => item.value === depositStatus);
var color = "red";
if(depositStatus == 1) {
color = "orange";
} else if(depositStatus == 2) {
color = "green";
}
return h("span", {style: {color: color }}, text);
}
},
{
......@@ -180,7 +193,7 @@ export const columns = (search, showContract, showVehicle, showReturnDeposit, sh
const params = {
edit: 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, {
......
src/view/driver_contract/list/index.js
import store from "@/store";
const { dispatch } = store;
import { columns } from "./helper.js";
import { depositStatusOption } from "@/libs/constants.js";
import SignContract from "../sign/index.vue";
import EditContract from "../edit/index.vue";
import EditVehicle from "@/view/vehicle/edit/index.vue";
import ReturnDeposit from "./return_deposit/index.vue";
import EditDriver from "@/view/driver/edit/index.vue";
export default {
components: { SignContract, EditContract, EditVehicle, ReturnDeposit, EditDriver },
components: { depositStatusOption, SignContract, EditContract, EditVehicle, ReturnDeposit, EditDriver },
data() {
return {
loading: false,
columns: [],
plateNo: "",
sources: [],
depositStatusOption: depositStatusOption,
vehicleInfo: "",
driverInfo: "",
sourceId: 0,
status: null,
depositStatus: null,
type: 2,
......@@ -33,7 +39,9 @@ export default {
search(current = 1) {
this.searchForm = {
type: this.type,
plateNo: this.plateNo,
vehicleInfo: this.vehicleInfo,
driverInfo: this.driverInfo,
sourceId: this.sourceId,
status: this.status,
depositStatus: this.depositStatus,
};
......@@ -85,9 +93,19 @@ export default {
this.$refs.editDriver.driver = driver;
this.$refs.editDriver.readonly = true;
this.$refs.editDriver.visible = true;
},
listSource() {
dispatch("invoke/asyncListSource", {}).then(({ data }) => {
this.loading = false;
if (data == null) {
return;
}
this.sources = data;
});
}
},
mounted() {
this.listSource();
this.columns = columns(this.search, this.showContract, this.showVehicle, this.showReturnDeposit, this.showDriver);
this.search();
}
......
src/view/driver_contract/list/index.vue
<template>
<div>
<Card>
<Form :label-width="80" label-colon>
<Row :gutter="5">
<Form :label-width="80" label-colon inline>
<Row :gutter="2">
<Col span="4">
<FormItem label="车牌号码" >
<Input v-model="plateNo" placeholder="Enter something..." clearable/>
<FormItem label="车辆信息" >
<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>
</Col>
<Col span="4">
<FormItem label="合同状态" >
<Select v-model.trim="status" clearable>
<Select v-model.trim="status" filterable clearable>
<Option :value="1" :key="1">有效</Option>
<Option :value="0" :key="0">无效</Option>
</Select>
......@@ -18,23 +30,19 @@
</Col>
<Col span="4">
<FormItem label="押金状态" >
<Select v-model.trim="depositStatus" clearable>
<Option :value="0" :key="0">未返还</Option>
<Option :value="1" :key="1">全部返还</Option>
<Option :value="2" :key="2">部分返还</Option>
<Select v-model.trim="depositStatus" filterable clearable>
<Option v-for="item in depositStatusOption" :value="item.value" :key="item.value">{{ item.text }}</Option>
</Select>
</FormItem>
</Col>
<Col span="2">
<Button @click="search()" type="primary"><Icon type="ios-search-outline" /> 查询</Button>
</Col>
<Col span="10">
<SignContract ref="signContract" @search="search" style="float:right" />
<EditContract ref="editContract" @search="search" />
<ReturnDeposit ref="returnDeposit" @search="search" />
<EditVehicle ref="editVehicle" />
<EditDriver ref="editDriver" />
</Col>
</Row>
</Form>
</Card>
......
src/view/driver_contract/list/return_deposit/index.js
import store from "@/store";
const { dispatch } = store;
import { isInteger } from "@/libs/validator.js";
import { depositStatusOption } from "@/libs/constants.js";
export default {
components: { },
......@@ -12,12 +13,13 @@ export default {
mainUploadStatus: false,
secondUploadStatus: false,
returnFormRule: {
returnAmount: [{ required: true, message: "请输入本次退还押金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
returnAmount: [{ required: true, message: "请输入返还金额", trigger: "blur" }, { validator: isInteger, trigger: "blur" } ],
},
returnForm: {
plateNo: null,
depositStatus: null,
depositAmount: null,
payableDepositAmount: null,
paidDepositAmount: null,
returnDepositAmount: null,
returnAmount: null,
remark: null,
......@@ -32,29 +34,24 @@ export default {
this.$refs.returnForm.resetFields();
this.returnForm.plateNo = null;
this.returnForm.depositStatus = null;
this.returnForm.depositAmount = null;
this.returnForm.payableDepositAmount = null;
this.returnForm.paidDepositAmount = null;
this.returnForm.returnDepositAmount = null;
this.returnForm.returnAmount = null;
this.returnForm.remark = null;
if(show) {
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;
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 = "部分返还";
}
this.returnForm.depositStatus = depositStatusOption.filter(item => item.value === this.contract.depositStatus)[0].text;
}
},
},
methods: {
setAll() {
this.returnForm.returnAmount = this.returnForm.depositAmount - this.returnForm.returnDepositAmount;
this.returnForm.returnAmount = "" + (this.returnForm.paidDepositAmount - this.returnForm.returnDepositAmount);
},
saveReturnDeposit() {
this.$refs.returnForm.validate(valid => {
......
src/view/driver_contract/list/return_deposit/index.vue
......@@ -5,34 +5,29 @@
<Form ref="returnForm" :model="returnForm" :rules="returnFormRule" :label-width="80" label-colon>
<Row>
<Col span="24">
<FormItem label="车牌号" prop="plateNo">
<Input v-model.trim="returnForm.plateNo" disabled />
</FormItem>
<FormItem label="车牌号" prop="plateNo">{{ returnForm.plateNo }}</FormItem>
</Col>
</Row>
<Row>
<Col span="24">
<FormItem label="押金状态" prop="status">
<Input v-model.trim="returnForm.depositStatus" disabled />
</FormItem>
<FormItem label="押金状态" prop="status">{{ returnForm.depositStatus }}</FormItem>
</Col>
</Row>
<Row :gutter="10">
<Col span="12">
<FormItem label="全部押金" prop="depositAmount">
<Input v-model.trim="returnForm.depositAmount" disabled />
</FormItem>
<Col span="8">
<FormItem label="应付押金" prop="depositAmount">{{ returnForm.payableDepositAmount }}</FormItem>
</Col>
<Col span="12">
<FormItem label="已还金额" prop="returnDepositAmount">
<Input v-model.trim="returnForm.returnDepositAmount" disabled />
</FormItem>
<Col span="8">
<FormItem label="已付押金" prop="depositAmount">{{ returnForm.paidDepositAmount }}</FormItem>
</Col>
<Col span="8">
<FormItem label="已还金额" prop="returnDepositAmount">{{ returnForm.returnDepositAmount }}</FormItem>
</Col>
</Row>
<Row :gutter="10">
<Col span="20">
<FormItem label="本次返还" prop="returnAmount">
<Input v-model.trim="returnForm.returnAmount" />
<Input v-model.trim="returnForm.returnAmount" type="number" />
</FormItem>
</Col>
<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";
const { dispatch } = store;
import moment from "moment";
import { isInteger } from "@/libs/validator.js";
import { feeColumns } from "./columns.js";
import { leaseTypeOption } from "@/libs/constants.js";
export default {
components: { },
components: { feeColumns, leaseTypeOption },
data() {
return {
visible: false,
feeDialogVisible: false,
submitLoading: false,
feeColumns: [],
leaseTypeOption: leaseTypeOption,
contractFormRule: {
vehicleId: [{
type: "number",
required: true,
message: "请选择车辆",
trigger: "change"
}
],
driverId: [{
type: "number",
required: true,
message: "请选择司机",
trigger: "change"
}
],
vehicleId: [{ type: "number", required: true, message: "请选择车辆", trigger: "change" }],
driverId: [{ 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" }],
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" }],
startDate: [{
type: "date",
required: true,
message: "请选择开始日期",
trigger: "change"
}
],
endDate: [{
type: "date",
required: true,
message: "请选择结束日期",
trigger: "change"
}
],
firstPaidAmount: [{ required: true, message: "首次实收租金", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
leaseType: [{ type: "number", required: true, message: "请选择租赁方式", trigger: "change" }],
startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
leasePeriod: [{ required: true, message: "请输入租赁周期", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
},
contractForm: {
type: 2,
......@@ -48,40 +33,67 @@ export default {
odograph: null,
odographEv: null,
startDate: null,
endDate: null,
depositAmount: null,
// endDate: null,
payableDepositAmount: null,
paidDepositAmount: null,
diffDepositAmount: null,
rentAmount: null,
leaseType: null,
firstPaidAmount: null,
leaseType: 1,
leasePeriod: null,
remark: null,
files: [],
fees: [],
},
vehicles: [],
drivers: [],
uploadList: [],
defaultList: [],
allFees: [],
selectFeeId: 0,
leasePeriodName: "周期/月",
};
},
computed: {
},
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) {
this.submitLoading = false;
this.$refs.contractForm.resetFields();
if(show) {
this.contractForm.files = [];
this.contractForm.fees = [];
this.listVehicles();
this.listDrivers();
this.listEnableFees();
this.contractForm.startDate = moment().format().substring(0,10);
}
},
feeDialogVisible(show) {
if(show)
this.selectFeeId = 0;
}
},
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) {
......@@ -117,7 +129,7 @@ export default {
});
return false;
},
saveVehicle() {
saveContract() {
this.$refs.contractForm.validate(valid => {
if (valid) {
this.uploadList.forEach(f => {
......@@ -143,8 +155,32 @@ export default {
dispatch("invoke/asyncListAllDriver", {}).then(({ 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() {
this.feeColumns = feeColumns(this.removeFee, this.firstPaidAmountChange);
}
};
src/view/driver_contract/sign/index.vue
......@@ -20,42 +20,56 @@
</FormItem>
</Col>
<Col span="8">
<FormItem label="租赁方式" prop="leaseType">
<Input v-model.trim="contractForm.leaseType" type="text" />
<FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.odograph" type="number" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="月租金" prop="rentAmount">
<Input v-model.trim="contractForm.rentAmount" type="number" />
<FormItem label="应付押金" prop="payableDepositAmount">
<Input v-model.trim="contractForm.payableDepositAmount" type="number" />
</FormItem>
</Col>
<Col span="8">
<FormItem label="押金" prop="depositAmount">
<Input v-model.trim="contractForm.depositAmount" type="number" />
<FormItem label="实收押金" prop="paidDepositAmount">
<Input v-model.trim="contractForm.paidDepositAmount" type="number" />
</FormItem>
</Col>
<Col span="8">
<FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.odograph" type="number" />
<FormItem label="欠收押金" prop="diffDepositAmount">
<Input v-model.trim="contractForm.diffDepositAmount" type="number" readonly/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="开始日期" prop="startDate">
<DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期"></DatePicker>
<FormItem label="周期租金" prop="rentAmount">
<Input v-model.trim="contractForm.rentAmount" type="number" />
</FormItem>
</Col>
<Col span="8">
<FormItem label="结束日期" prop="endDate">
<DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期"></DatePicker>
<FormItem label="首次实收租金" prop="firstPaidAmount">
<Input v-model.trim="contractForm.firstPaidAmount" type="number" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="ev里程数" prop="odographEv">
<Input v-model.trim="contractForm.odographEv" type="number" />
<FormItem label="租赁方式" prop="leaseType">
<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>
</Col>
</Row>
......@@ -66,6 +80,24 @@
</FormItem>
</Col>
</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>
<Col span="24">
<FormItem label="验车照片">
......@@ -105,7 +137,7 @@
</div>
<div slot="footer">
<Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button>
<Button @click="saveContract" :loading="submitLoading" type="primary">确定</Button>
</div>
</Modal>
</div>
......
src/view/source_contract/edit/index.js
......@@ -140,7 +140,7 @@ export default {
});
return false;
},
saveVehicle() {
saveContract() {
// console.log(this.contractForm);
// return;
this.$refs.contractForm.validate(valid => {
......
src/view/source_contract/edit/index.vue
......@@ -117,7 +117,7 @@
</Tabs>
<div slot="footer">
<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>
</Modal>
</div>
......
src/view/source_contract/sign/index.js
import store from "@/store";
const { dispatch } = store;
import { isInteger } from "@/libs/validator.js";
import AddVehicle from "@/view/vehicle/add/index.vue";
import { leaseTypeOption } from "@/libs/constants.js";
export default {
components: { },
components: { AddVehicle, leaseTypeOption },
data() {
return {
visible: false,
submitLoading: false,
leaseTypeOption: leaseTypeOption,
contractFormRule: {
vehicleId: [{
type: "number",
required: true,
message: "请选择车辆",
trigger: "change"
}
],
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" }],
vehicleId: [{ type: "number", required: true, message: "请选择车辆", trigger: "change" }],
sourceId: [{ type: "number", required: true, message: "请选择车源", trigger: "change" }],
odograph: [{ 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" }],
startDate: [{
type: "date",
required: true,
message: "请选择开始日期",
trigger: "change"
}
],
endDate: [{
type: "date",
required: true,
message: "请选择结束日期",
trigger: "change"
}
],
leaseType: [{ type: "number", required: true, message: "请选择租赁方式", trigger: "change" }],
startDate: [{ type: "date", required: true, message: "请选择开始日期", trigger: "change" }],
leasePeriod: [{ required: true, message: "请输入租赁周期", trigger: "blur" }, { validator: isInteger, trigger: "blur" }],
},
contractForm: {
type: 1,
vehicleId: null,
sourceId: null,
odograph: null,
odographEv: null,
payableDepositAmount: null,
paidDepositAmount: null,
startDate: null,
endDate: null,
depositAmount: null,
rentAmount: null,
leaseType: null,
leasePeriod: null,
remark: null,
files: [],
},
......@@ -60,11 +41,19 @@ export default {
uploadList: [],
defaultList: [],
leasePeriodName: "周期/月",
};
},
computed: {
},
watch: {
'contractForm.leaseType'() {
if(this.contractForm.leaseType===3) {
this.leasePeriodName = "周期/周";
} else {
this.leasePeriodName = "周期/月";
}
},
visible(show) {
this.submitLoading = false;
this.$refs.contractForm.resetFields();
......@@ -76,6 +65,11 @@ export default {
},
},
methods: {
onAddComplete(vehicle) {
console.log(vehicle);
this.vehicles.unshift(vehicle);
this.contractForm.vehicleId = vehicle.id;
},
handleView(item) {
},
handleRemove(file) {
......@@ -117,7 +111,7 @@ export default {
});
return false;
},
saveVehicle() {
saveContract() {
this.$refs.contractForm.validate(valid => {
if (valid) {
this.uploadList.forEach(f => {
......
src/view/source_contract/sign/index.vue
......@@ -4,12 +4,13 @@
<Modal width="800" v-model="visible" title="车源合同 - 签约" fullscreen>
<div>
<Form ref="contractForm" :model="contractForm" :rules="contractFormRule" :label-width="80" label-colon>
<Row>
<Row :gutter="5">
<Col span="8">
<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>
</Select>
<AddVehicle ref="addVehicleDialog" @search="onAddComplete($event)" style="float:right; width:20%"/>
</FormItem>
</Col>
<Col span="8">
......@@ -20,42 +21,44 @@
</FormItem>
</Col>
<Col span="8">
<FormItem label="租赁方式" prop="leaseType">
<Input v-model.trim="contractForm.leaseType" type="text" />
<FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.odograph" type="number" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="月租金" prop="rentAmount">
<FormItem label="周期租金" prop="rentAmount">
<Input v-model.trim="contractForm.rentAmount" type="number" />
</FormItem>
</Col>
<Col span="8">
<FormItem label="押金" prop="depositAmount">
<Input v-model.trim="contractForm.depositAmount" type="number" />
<FormItem label="应付押金" prop="payableDepositAmount">
<Input v-model.trim="contractForm.payableDepositAmount" type="number" />
</FormItem>
</Col>
<Col span="8">
<FormItem label="里程数" prop="odograph">
<Input v-model.trim="contractForm.odograph" type="number" />
<FormItem label="实付押金" prop="paidDepositAmount">
<Input v-model.trim="contractForm.paidDepositAmount" type="number" />
</FormItem>
</Col>
</Row>
<Row>
<Col span="8">
<FormItem label="开始日期" prop="startDate">
<DatePicker v-model="contractForm.startDate" type="date" style="width: 100%" placeholder="请输入开始日期"></DatePicker>
<FormItem label="租赁方式" prop="leaseType">
<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="endDate">
<DatePicker v-model="contractForm.endDate" type="date" style="width: 100%" placeholder="请输入结束日期"></DatePicker>
<FormItem label="开始日期" prop="startDate">
<DatePicker v-model="contractForm.startDate" style="width: 100%" placeholder="请输入开始日期"></DatePicker>
</FormItem>
</Col>
<Col span="8">
<FormItem label="ev里程数" prop="odographEv">
<Input v-model.trim="contractForm.odographEv" type="number" />
<FormItem :label="leasePeriodName" prop="leasePeriod">
<Input v-model.trim="contractForm.leasePeriod" type="number" />
</FormItem>
</Col>
</Row>
......@@ -105,7 +108,7 @@
</div>
<div slot="footer">
<Button @click="visible = false">取消</Button>
<Button @click="saveVehicle" :loading="submitLoading" type="primary">确定</Button>
<Button @click="saveContract" :loading="submitLoading" type="primary">确定</Button>
</div>
</Modal>
</div>
......
src/view/vehicle/add/index.js
......@@ -180,11 +180,12 @@ export default {
saveVehicle() {
this.$refs.vehicleForm.validate(valid => {
if (valid) {
dispatch("invoke/asyncCreateVehicle", this.vehicleForm).then(({ code }) => {
dispatch("invoke/asyncCreateVehicle", this.vehicleForm).then(({ code, data }) => {
this.submitLoading = false;
if (code === 1) {
console.log(data);
this.$Message.success("添加成功");
this.$emit("search");
this.$emit("search", data);
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