Merge branch 'master' of http://gitea.lianxianke.cn/qichexitong/car-shop-admin-web
This commit is contained in:
DL
@@ -63,6 +63,15 @@ const financeRouter = {
|
||||
},
|
||||
component: () => import('@/views/finance/cashier/index'),
|
||||
},
|
||||
{
|
||||
path: 'management',
|
||||
name: 'Management',
|
||||
meta: {
|
||||
title: '收支管理 ',
|
||||
noCache: true,
|
||||
},
|
||||
component: () => import('@/views/finance/management/index'),
|
||||
},
|
||||
],
|
||||
};
|
||||
export default financeRouter;
|
||||
|
||||
447
src/views/finance/management/index.vue
Normal file
447
src/views/finance/management/index.vue
Normal file
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="收入明细" name="income"></el-tab-pane>
|
||||
<el-tab-pane label="支出明细" name="expenditure"></el-tab-pane>
|
||||
<el-tab-pane label="应收明细" name="receivable"></el-tab-pane>
|
||||
<el-tab-pane label="应付明细" name="meet"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
|
||||
<el-form-item label="收款对象" v-if="activeName=='income'">
|
||||
<el-select v-model="ruleForm.shopId" multiple filterable remote reserve-keyword placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod" :loading="loading">
|
||||
<el-option v-for="item in optionsShop" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="付款对象" v-if="activeName=='expenditure'">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应收对象" v-if="activeName=='receivable'">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应付对象" v-if="activeName=='meet'">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="费用类型">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算方式" v-if="activeName=='income'">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="付款方式" v-if="activeName!='income'">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对账日期">
|
||||
<el-date-picker v-model="timeVal" type="monthrange" align="right" unlink-panels value-format="yyyy-MM"
|
||||
format="yyyy-MM" @change="onchangeTime" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
|
||||
:picker-options="pickerOptionsYear">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
<el-button @click="('ruleForm')">新建收入</el-button>
|
||||
<el-button @click="('ruleForm')">新建支出</el-button>
|
||||
<el-button @click="('ruleForm')">新建应收</el-button>
|
||||
<el-button @click="('ruleForm')">新建应付</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="merName" label="收款对象" />
|
||||
<el-table-column prop="merName" label="付款对象" />
|
||||
<el-table-column prop="merName" label="应收对象" />
|
||||
<el-table-column prop="merName" label="应付对象" />
|
||||
<el-table-column prop="carNo" label="所属门店" />
|
||||
<el-table-column prop="createTime" label="收款金额" />
|
||||
<el-table-column prop="createTime" label="付款金额" />
|
||||
<el-table-column prop="createTime" label="应收金额" />
|
||||
<el-table-column prop="createTime" label="应付金额" />
|
||||
<el-table-column prop="createTime" label="收款日期" />
|
||||
<el-table-column prop="createTime" label="付款日期" />
|
||||
<el-table-column prop="createTime" label="应收日期" />
|
||||
<el-table-column prop="createTime" label="应付日期" />
|
||||
<el-table-column prop="merName" label="费用类型" />
|
||||
<el-table-column prop="totalPrice" label="结算方式" />
|
||||
<el-table-column prop="totalPrice" label="付款方式" />
|
||||
<el-table-column prop="carNo" label="收款人" />
|
||||
<el-table-column prop="totalPrice" label="工单号" />
|
||||
<el-table-column prop="totalPrice" label="对账单号" />
|
||||
<el-table-column prop="totalPrice" label="对账日期" />
|
||||
<el-table-column prop="totalPrice" label="开票状态" />
|
||||
<el-table-column prop="totalPrice" label="开票日期" />
|
||||
<el-table-column prop="totalPrice" label="备注" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="onDetails(scope.row)">查看</el-button>
|
||||
<el-button type="text" size="small" >|</el-button>
|
||||
<el-button type="text" size="small" @click="onDetails(scope.row)">作废</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
|
||||
@current-change="pageChange" />
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- <el-dialog title="对账详情" :visible.sync="dialogVisible" width="100%" :before-close="handleClose" center> -->
|
||||
<el-drawer :visible.sync="dialogVisible" size="100%">
|
||||
<div style="padding: 20px">
|
||||
<p style="margin-bottom: 10px; font-size: 24px">对账单明细</p>
|
||||
<el-descriptions border :column="2">
|
||||
<el-descriptions-item label="对账单号">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="对账日期">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商简称">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商代码">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商全称">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商地址">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="收款账号">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户银行">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="维修类型">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核账人员">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="对账金额">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核算金额">
|
||||
<el-input v-model="detailsForm.inputOne" placeholder="请输入核算金额"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="服务费率">
|
||||
<el-input v-model="detailsForm.inputTwo" placeholder="请输入服务费率"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="服务费">
|
||||
<el-input v-model="detailsForm.inputThree" placeholder="请输入服务费"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="门店名称">{{ accountDetails.merName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车牌">{{ accountDetails.carNo }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车主姓名">{{ accountDetails.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车主电话">{{ accountDetails.phone }}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号名称">{{ accountDetails.modelName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车牌">{{ accountDetails.carNo }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总价格">{{ accountDetails.totalPrice }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车架号">{{ accountDetails.vinId }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style="font-size: 24px;margin-top: 30px">账单明细</div>
|
||||
<div style="margin-top: 30px">
|
||||
<el-table :data="accountDetails.projectList" style="width: 100%" size="small" highlight-current-row>
|
||||
<el-table-column prop="name" label="服务门店"></el-table-column>
|
||||
<el-table-column prop="name" label="工单号"></el-table-column>
|
||||
<el-table-column prop="name" label="进店日期"></el-table-column>
|
||||
<el-table-column prop="name" label="车牌号"></el-table-column>
|
||||
<el-table-column prop="name" label="维修类型"></el-table-column>
|
||||
<el-table-column prop="name" label="所属公司"></el-table-column>
|
||||
<el-table-column prop="name" label="DP公司"></el-table-column>
|
||||
<el-table-column prop="name" label="服务顾问"></el-table-column>
|
||||
<el-table-column prop="name" label="结算金额"></el-table-column>
|
||||
<el-table-column prop="name" label="核算金额"></el-table-column>
|
||||
<el-table-column prop="isPackage" label="维修项目">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.isPackage == 0 ? '自定义' : '套餐快速' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="维修金额"></el-table-column>
|
||||
<el-table-column prop="type" label="计价类型">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.type == 1 ? '金额计价' : '工时计价' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="材料价格" />
|
||||
<el-table-column prop="workingTotalPrice" label="工时总价格" />
|
||||
<el-table-column prop="subtotalPrice" label="小计" />
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="small" @click="dialogVisible = false">我知道了</el-button>
|
||||
</span> -->
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!-- </el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reconciliationListAPI, infoListApi, statementListApi } from '@/api/finance';
|
||||
import yearOptions from '@/libs/yearOptions';
|
||||
import { checkPermi } from '@/utils/permission'; // 权限判断函数
|
||||
export default {
|
||||
name: 'statement',
|
||||
data() {
|
||||
return {
|
||||
//详情表单
|
||||
detailsForm:{},
|
||||
//加载loading
|
||||
loading: false,
|
||||
//筛选表单
|
||||
ruleForm: {},
|
||||
//维修类型
|
||||
optionsType: [{
|
||||
value: '-1',
|
||||
label: '全部'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '常规保养'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '事故维修'
|
||||
}, {
|
||||
value: '3',
|
||||
label: '退车维修'
|
||||
},],
|
||||
//服务门店
|
||||
optionsShop: [{
|
||||
value: '-1',
|
||||
label: '小宏车商'
|
||||
}],
|
||||
timeVal: [],
|
||||
activeName: 'income',
|
||||
listLoading: true,
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
},
|
||||
tableFrom: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
specificDateStr: '',
|
||||
yearMonthStr: '',
|
||||
},
|
||||
dialogVisible: false,
|
||||
accountDetails: {},
|
||||
pickerOptions: this.$timeOptions,
|
||||
pickerOptionsYear: yearOptions,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList(1);
|
||||
},
|
||||
methods: {
|
||||
//选择框选择监听
|
||||
handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
//表单查询
|
||||
onSubmit() {
|
||||
console.log(this.ruleForm);
|
||||
},
|
||||
//重置表单
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
//远程搜索门店
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options = [];
|
||||
}
|
||||
},
|
||||
checkPermi,
|
||||
// 具体日期
|
||||
onchangeTime(e) {
|
||||
this.timeVal = e;
|
||||
this.tableFrom.specificDateStr = e ? this.timeVal.join(',') : '';
|
||||
this.getList(1);
|
||||
},
|
||||
handleClick(e) {
|
||||
// console.log(e, 'tab');
|
||||
this.tableFrom.specificDateStr = '';
|
||||
this.timeVal = [];
|
||||
this.getList(1);
|
||||
},
|
||||
onDetails(date) {
|
||||
this.dialogVisible = true;
|
||||
infoListApi(date.id).then((res) => {
|
||||
// console.log(res, 'i详情');
|
||||
this.accountDetails = res;
|
||||
});
|
||||
},
|
||||
seachList() {
|
||||
this.handleClose();
|
||||
this.getList(1);
|
||||
},
|
||||
// 列表
|
||||
getList(num) {
|
||||
this.listLoading = true;
|
||||
this.tableFrom.page = num ? num : this.tableFrom.page;
|
||||
this.activeName === 'reco'
|
||||
? reconciliationListAPI(this.tableFrom)
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list;
|
||||
this.tableData.total = res.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
})
|
||||
: statementListApi(this.tableFrom)
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list;
|
||||
this.tableData.total = res.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
});
|
||||
},
|
||||
pageChange(page) {
|
||||
this.tableFrom.page = page;
|
||||
this.getList();
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.tableFrom.limit = val;
|
||||
this.getList(1);
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 删除
|
||||
handleDelete(id, idx) {
|
||||
this.$modalSure().then(() => {
|
||||
storeApi.brandDeleteApi(id).then((res) => {
|
||||
this.$message.success('删除成功');
|
||||
this.$store.commit('merchant/SET_MerchantClassify', []);
|
||||
this.getList(1);
|
||||
});
|
||||
});
|
||||
},
|
||||
onchangeIsShow(row) {
|
||||
activityApi.activitySwitchApi(row.id).then((res) => {
|
||||
this.$message.success('操作成功');
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.selWidth {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabBox_tit {
|
||||
width: 60%;
|
||||
font-size: 12px !important;
|
||||
margin: 0 2px 0 10px;
|
||||
letter-spacing: 1px;
|
||||
padding: 5px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep.el-dialog__header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
position: relative;
|
||||
|
||||
.el-divider--vertical {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
padding: 0 15px;
|
||||
display: block;
|
||||
|
||||
.title,
|
||||
.color_red,
|
||||
.color_gray {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.color_red {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.color_gray {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
|
||||
.item {
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.name,
|
||||
.cost {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.name,
|
||||
.cost_count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cost_num {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,95 +3,130 @@
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="对账" name="reco"></el-tab-pane>
|
||||
<el-tab-pane label="结算" name="stat"></el-tab-pane>
|
||||
<el-tab-pane label="未确认" name="reco"></el-tab-pane>
|
||||
<el-tab-pane label="已确认" name="stat"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div v-if="activeName === 'reco'">
|
||||
<el-date-picker
|
||||
v-model="timeVal"
|
||||
align="right"
|
||||
unlink-panels
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetimerange"
|
||||
placement="bottom-end"
|
||||
placeholder="自定义时间"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
class="selWidth"
|
||||
:picker-options="pickerOptions"
|
||||
@change="onchangeTime"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-date-picker
|
||||
v-model="timeVal"
|
||||
type="monthrange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
value-format="yyyy-MM"
|
||||
format="yyyy-MM"
|
||||
@change="onchangeTime"
|
||||
range-separator="至"
|
||||
start-placeholder="开始月份"
|
||||
end-placeholder="结束月份"
|
||||
:picker-options="pickerOptionsYear"
|
||||
>
|
||||
</div>
|
||||
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
|
||||
<el-form-item label="服务门店">
|
||||
<el-select v-model="ruleForm.shopId" multiple filterable remote reserve-keyword placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod" :loading="loading">
|
||||
<el-option v-for="item in optionsShop" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="维修类型">
|
||||
<el-select v-model="ruleForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对账日期">
|
||||
<el-date-picker v-if="activeName === 'reco'" v-model="timeVal" align="right" unlink-panels
|
||||
value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
|
||||
placeholder="自定义时间" start-placeholder="开始日期" end-placeholder="结束日期" class="selWidth"
|
||||
:picker-options="pickerOptions" @change="onchangeTime" />
|
||||
<el-date-picker v-else v-model="timeVal" type="monthrange" align="right" unlink-panels value-format="yyyy-MM"
|
||||
format="yyyy-MM" @change="onchangeTime" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
|
||||
:picker-options="pickerOptionsYear">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<!-- activeName === 'reco' -->
|
||||
<div v-if="activeName === 'reco'">
|
||||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row>
|
||||
<el-table-column prop="id" label="ID" />
|
||||
<el-table-column prop="merName" label="门店名称" />
|
||||
<el-table-column prop="carNo" label="车牌" />
|
||||
<el-table-column prop="totalPrice" label="总价格" />
|
||||
<el-table-column prop="nameList" label="项目名称">
|
||||
<template v-slot="{ row }">
|
||||
<p v-for="item in row.nameList">{{ item }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="onDetails(scope.row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row>
|
||||
<el-table-column prop="isSettlement" label="是否结算">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.isSettlement == 0 ? '未结算' : '已结算' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="month" label="月份" />
|
||||
<el-table-column prop="newTotalPrice" label="领料时新配件价格" />
|
||||
<el-table-column prop="totalPrice" label="旧的总价格" />
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
||||
<el-button @click="billDialog=true">生成账单</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="merName" label="服务门店" />
|
||||
<el-table-column prop="carNo" label="对账单号" />
|
||||
<el-table-column prop="createTime" label="起始日期" />
|
||||
<el-table-column prop="createTime" label="截止日期" />
|
||||
<el-table-column prop="merName" label="维修类型" />
|
||||
<el-table-column prop="totalPrice" label="对账单金额" />
|
||||
<el-table-column prop="carNo" label="核算金额" />
|
||||
<el-table-column prop="totalPrice" label="服务费率" />
|
||||
<el-table-column prop="totalPrice" label="服务费" />
|
||||
<el-table-column prop="totalPrice" label="对账人" />
|
||||
<el-table-column prop="createTime" label="对账日期" />
|
||||
<el-table-column prop="nameList" label="对账状态">
|
||||
<template v-slot="{ row }">
|
||||
<p v-for="item in row.nameList">{{ item }}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="onDetails(scope.row)">查看</el-button>
|
||||
<el-button type="text" size="small" >|</el-button>
|
||||
<el-button type="text" size="small" @click="onDetails(scope.row)">作废</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:page-sizes="[20, 40, 60, 80]"
|
||||
:page-size="tableFrom.limit"
|
||||
:current-page="tableFrom.page"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
<el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
|
||||
@current-change="pageChange" />
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 生成账单 -->
|
||||
<el-drawer :visible.sync="billDialog" size="100%">
|
||||
<div> 对账单号: <span>KSJI-20230304-001</span></div>
|
||||
<el-form :inline="true" :model="billForm" class="demo-form-inline">
|
||||
<el-form-item label="服务门店">
|
||||
<el-select v-model="billForm.shopId" multiple filterable remote reserve-keyword placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod" :loading="loading">
|
||||
<el-option v-for="item in optionsShop" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="维修类型">
|
||||
<el-select v-model="billForm.orderType" placeholder="请选择">
|
||||
<el-option v-for="item in optionsType" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="对账日期">
|
||||
<el-date-picker v-if="activeName === 'reco'" v-model="timeVal" align="right" unlink-panels
|
||||
value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placement="bottom-end"
|
||||
placeholder="自定义时间" start-placeholder="开始日期" end-placeholder="结束日期" class="selWidth"
|
||||
:picker-options="pickerOptions" @change="onchangeTime" />
|
||||
<el-date-picker v-else v-model="timeVal" type="monthrange" align="right" unlink-panels value-format="yyyy-MM"
|
||||
format="yyyy-MM" @change="onchangeTime" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
|
||||
:picker-options="pickerOptionsYear">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="('ruleForm')">生成账单</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
<!-- <el-dialog title="对账详情" :visible.sync="dialogVisible" width="100%" :before-close="handleClose" center> -->
|
||||
<el-drawer :visible.sync="dialogVisible" size="100%">
|
||||
<div style="padding: 20px">
|
||||
<p style="margin-bottom: 10px; font-size: 24px">对账详情</p>
|
||||
<p style="margin-bottom: 10px; font-size: 24px">对账单明细</p>
|
||||
<el-descriptions border :column="2">
|
||||
<el-descriptions-item label="id">{{ accountDetails.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="预约单号">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="对账单号">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="对账日期">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商简称">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商代码">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商全称">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经销商地址">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="收款账号">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="开户银行">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="维修类型">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核账人员">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="对账金额">{{ accountDetails.orderSn }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核算金额">
|
||||
<el-input v-model="detailsForm.inputOne" placeholder="请输入核算金额"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="服务费率">
|
||||
<el-input v-model="detailsForm.inputTwo" placeholder="请输入服务费率"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="服务费">
|
||||
<el-input v-model="detailsForm.inputThree" placeholder="请输入服务费"></el-input>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="门店名称">{{ accountDetails.merName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车牌">{{ accountDetails.carNo }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车主姓名">{{ accountDetails.name }}</el-descriptions-item>
|
||||
@@ -101,14 +136,25 @@
|
||||
<el-descriptions-item label="总价格">{{ accountDetails.totalPrice }}</el-descriptions-item>
|
||||
<el-descriptions-item label="车架号">{{ accountDetails.vinId }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style="font-size: 24px;margin-top: 30px">账单明细</div>
|
||||
<div style="margin-top: 30px">
|
||||
<el-table :data="accountDetails.projectList" style="width: 100%" size="small" highlight-current-row>
|
||||
<el-table-column prop="name" label="维修项目名称"></el-table-column>
|
||||
<el-table-column prop="isPackage" label="项目">
|
||||
<el-table-column prop="name" label="服务门店"></el-table-column>
|
||||
<el-table-column prop="name" label="工单号"></el-table-column>
|
||||
<el-table-column prop="name" label="进店日期"></el-table-column>
|
||||
<el-table-column prop="name" label="车牌号"></el-table-column>
|
||||
<el-table-column prop="name" label="维修类型"></el-table-column>
|
||||
<el-table-column prop="name" label="所属公司"></el-table-column>
|
||||
<el-table-column prop="name" label="DP公司"></el-table-column>
|
||||
<el-table-column prop="name" label="服务顾问"></el-table-column>
|
||||
<el-table-column prop="name" label="结算金额"></el-table-column>
|
||||
<el-table-column prop="name" label="核算金额"></el-table-column>
|
||||
<el-table-column prop="isPackage" label="维修项目">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.isPackage == 0 ? '自定义' : '套餐快速' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="维修金额"></el-table-column>
|
||||
<el-table-column prop="type" label="计价类型">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.type == 1 ? '金额计价' : '工时计价' }}
|
||||
@@ -136,6 +182,34 @@ export default {
|
||||
name: 'statement',
|
||||
data() {
|
||||
return {
|
||||
//生成账单弹出层
|
||||
billDialog:false,
|
||||
billForm:{},
|
||||
//详情表单
|
||||
detailsForm:{},
|
||||
//加载loading
|
||||
loading: false,
|
||||
//筛选表单
|
||||
ruleForm: {},
|
||||
//维修类型
|
||||
optionsType: [{
|
||||
value: '-1',
|
||||
label: '全部'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '常规保养'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '事故维修'
|
||||
}, {
|
||||
value: '3',
|
||||
label: '退车维修'
|
||||
},],
|
||||
//服务门店
|
||||
optionsShop: [{
|
||||
value: '-1',
|
||||
label: '小宏车商'
|
||||
}],
|
||||
timeVal: [],
|
||||
activeName: 'reco',
|
||||
listLoading: true,
|
||||
@@ -159,7 +233,33 @@ export default {
|
||||
this.getList(1);
|
||||
},
|
||||
methods: {
|
||||
infoBtn() {},
|
||||
//选择框选择监听
|
||||
handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
//表单查询
|
||||
onSubmit() {
|
||||
console.log(this.ruleForm);
|
||||
},
|
||||
//重置表单
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
//远程搜索门店
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.options = this.list.filter(item => {
|
||||
return item.label.toLowerCase()
|
||||
.indexOf(query.toLowerCase()) > -1;
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
this.options = [];
|
||||
}
|
||||
},
|
||||
checkPermi,
|
||||
// 具体日期
|
||||
onchangeTime(e) {
|
||||
@@ -190,23 +290,23 @@ export default {
|
||||
this.tableFrom.page = num ? num : this.tableFrom.page;
|
||||
this.activeName === 'reco'
|
||||
? reconciliationListAPI(this.tableFrom)
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list;
|
||||
this.tableData.total = res.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
})
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list;
|
||||
this.tableData.total = res.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
})
|
||||
: statementListApi(this.tableFrom)
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list;
|
||||
this.tableData.total = res.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
});
|
||||
.then((res) => {
|
||||
this.tableData.data = res.list;
|
||||
this.tableData.total = res.total;
|
||||
this.listLoading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.listLoading = false;
|
||||
});
|
||||
},
|
||||
pageChange(page) {
|
||||
this.tableFrom.page = page;
|
||||
@@ -243,14 +343,17 @@ export default {
|
||||
.selWidth {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tabBox_tit {
|
||||
width: 60%;
|
||||
font-size: 12px !important;
|
||||
@@ -259,15 +362,19 @@ export default {
|
||||
padding: 5px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
::v-deep.el-dialog__header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
position: relative;
|
||||
|
||||
.el-divider--vertical {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -276,46 +383,58 @@ export default {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
padding: 0 15px;
|
||||
display: block;
|
||||
|
||||
.title,
|
||||
.color_red,
|
||||
.color_gray {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.color_red {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.color_gray {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 20px;
|
||||
|
||||
.item {
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.name,
|
||||
.cost {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
text-align: right;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.name,
|
||||
.cost_count {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cost_num {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
|
||||
Reference in New Issue
Block a user