dianliang/lanan-system-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车辆品牌型号优化;样式优化

Browse Source
This commit is contained in:
“hhk” 2024-08-08 10:56:01 +08:00
parent 37d52f37bf
commit 3c156cc146
7 changed files with 196 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/CarBrandSelector/index.vue
View File

@ -4,7 +4,9 @@
placeholder="车辆品牌型号"
:options="options"
v-model="selectedValues"
filterable/>
filterable
:props="{checkStrictly:true}"
/>
</div>
</template>

91
src/views/base/carmain/CarMainForm.vue
View File

@ -3,69 +3,119 @@
<!-- 对话框(添加 / 修改) -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
<el-row :gutter="1">
<el-col :span="22">
<el-form-item label="发动机号码" prop="engineNumber">
<el-input v-model="formData.engineNumber" placeholder="请输入发动机号码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="1">
<el-col :span="22">
<el-form-item label="车架号" prop="vin">
<el-input v-model="formData.vin" placeholder="请输入车架号" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="1">
<el-col :span="22">
<el-form-item label="车牌号" prop="licenseNumber">
<el-input v-model="formData.licenseNumber" placeholder="请输入车牌号" />
</el-form-item>
<el-form-item label="品牌型号" prop="carModel">
</el-col>
</el-row>
<el-row :gutter="1">
<el-col :span="22">
<el-form-item label="品牌型号" prop="brandAndModel">
<CarBrandSelector v-model="formData.brandAndModel" ref="brandForm" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item label="保养日期" prop="maintenanceDate">
<el-date-picker clearable v-model="formData.maintenanceDate" type="date" value-format="timestamp"
placeholder="选择保养日期" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="保养里程" prop="maintenanceMileage">
<el-input v-model="formData.maintenanceMileage" placeholder="请输入保养里程" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item label="年检日期" prop="inspectionDate">
<el-date-picker clearable v-model="formData.inspectionDate" type="date" value-format="timestamp"
placeholder="选择年检日期" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="保险日期" prop="insuranceDate">
<el-date-picker clearable v-model="formData.insuranceDate" type="date" value-format="timestamp"
placeholder="选择保险日期" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item label="车辆注册日期" prop="carRegisterDate" label-width="auto">
<el-date-picker clearable v-model="formData.carRegisterDate" type="date" value-format="timestamp"
placeholder="选择车辆注册日期" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="二级维护时间" prop="checkDate">
<el-date-picker clearable v-model="formData.checkDate" type="date" value-format="timestamp"
placeholder="选择二级维护时间" />
</el-form-item>
<!-- <el-form-item label="车辆品牌" prop="carBrand">
<el-input v-model="formData.carBrand" placeholder="请输入车辆品牌" />
</el-form-item> -->
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item label="车辆类别" prop="carCategory">
<el-select v-model="formData.carCategory" placeholder="请选择车辆类别">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_CATEGORY)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_CATEGORY)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="车辆性质" prop="carNature">
<el-select v-model="formData.carNature" placeholder="请选择车辆性质">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_NATURE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_NATURE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="车辆注册日期" prop="carRegisterDate">
<el-date-picker clearable v-model="formData.carRegisterDate" type="date" value-format="timestamp"
placeholder="选择车辆注册日期" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item label="最近办理业务" prop="recentlyHandledBusiness">
<el-select v-model="formData.recentlyHandledBusiness" placeholder="请选择业务类别">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="最近办理业务的时间" prop="recentlyHandleBusinessTime">
<el-date-picker clearable v-model="formData.recentlyHandleBusinessTime" type="date" value-format="timestamp"
placeholder="选择最近办理业务的时间" />
</el-col>
<el-col :span="11">
<el-form-item label="最近业务时间" prop="recentlyHandleBusinessTime" >
<el-date-picker clearable v-model="formData.recentlyHandleBusinessTime" type="date"
value-format="timestamp" placeholder="选择最近办理业务的时间" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="1">
<el-col :span="22">
<el-form-item label="行驶证图片">
<ImageUpload v-model="formData.carLicenseImg" :limit="1"/>
<ImageUpload v-model="formData.carLicenseImg" :limit="1" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
@ -79,7 +129,7 @@
<script>
import * as CarMainApi from '@/api/base/carmain';
import ImageUpload from '@/components/ImageUpload';
import {getDictDatas, DICT_TYPE} from '@/utils/dict';
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import CarBrandSelector from '@/layout/components/CarBrandSelector';
export default {
name: "CarMainForm",
@ -90,7 +140,7 @@ export default {
},
data() {
return {
tesst:[ "5d8eb726839bbe64a4f405e0cce29274", "7c8493517c4eaa0f0c56f40f0626e8d2" ],
tesst: ["5d8eb726839bbe64a4f405e0cce29274", "7c8493517c4eaa0f0c56f40f0626e8d2"],
// 弹出层标题
dialogTitle: "",
// 是否显示弹出层
@ -123,6 +173,7 @@ export default {
carBrand: [{ required: true, message: '车辆品牌不能为空', trigger: 'blur' }],
carNature: [{ required: true, message: '车辆性质不能为空', trigger: 'blur' }],
carRegisterDate: [{ required: true, message: '车辆注册日期不能为空', trigger: 'blur' }],
brandAndModel: [{ required: true, message: '品牌型号不能为空', trigger: 'blur' }],
},
};
},

4
src/views/base/carmain/components/CarLabelForm.vue
View File

@ -18,14 +18,14 @@
车辆品牌
</template>
<!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
{{ formData.carBrand }}
{{formData.brandStr}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
车辆型号
</template>
<!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
{{ formData.carModel }}
{{formData.modelStr}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">

4
src/views/base/carmain/components/CustomerCarForm.vue
View File

@ -18,14 +18,14 @@
车辆品牌
</template>
<!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
{{formData.carBrand}}
{{formData.brandStr}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
车辆型号
</template>
<!-- <dict-tag :type="DICT_TYPE.DICT_SYS_USER_SEX" :value="formData.sex" /> -->
{{formData.carModel }}
{{formData.modelStr}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">

14
src/views/base/carmain/index.vue
View File

@ -11,13 +11,17 @@
<el-input v-model="queryParams.engineNumber" placeholder="请输入发动机号" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="品牌型号" prop="engineNumber" label-width="90">
<CarBrandSelector v-model="queryParams.brandAndModel" ref="brandForm" />
</el-form-item>
<!-- <el-form-item label="车架号" prop="vin">
<el-input v-model="queryParams.vin" placeholder="请输入车架号" clearable @keyup.enter.native="handleQuery" />
</el-form-item> -->
<el-form-item label="车辆型号" prop="carModel" label-width="90">
<!-- <el-form-item label="车辆型号" prop="carModel" label-width="90">
<el-input v-model="queryParams.carModel" placeholder="请输入车辆型号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-form-item> -->
<!-- <el-form-item label="保养日期" prop="maintenanceDate">
<el-date-picker v-model="queryParams.maintenanceDate" style="width: 240px" value-format="yyyy-MM-dd"
type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
@ -42,9 +46,9 @@
type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" />
</el-form-item> -->
<el-form-item label="车辆品牌" prop="carBrand" label-width="90">
<!-- <el-form-item label="车辆品牌" prop="carBrand" label-width="90">
<el-input v-model="queryParams.carBrand" placeholder="请输入车辆品牌" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-form-item> -->
<el-form-item label="车辆性质" prop="carNature" label-width="90">
<el-input v-model="queryParams.carNature" placeholder="请输入车辆性质" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
@ -197,6 +201,7 @@
</template>
<script>
import CarBrandSelector from '@/layout/components/CarBrandSelector';
import CustomerCarForm from '@/views/base/carmain/components/CustomerCarForm.vue';
import CarLabelForm from '@/views/base/carmain/components/CarLabelForm.vue';
import * as CarMainApi from '@/api/base/carmain';
@ -208,6 +213,7 @@ export default {
CarMainForm,
CustomerCarForm,
CarLabelForm,
CarBrandSelector,
},
data() {
return {

135
src/views/base/customer/CustomerMainForm.vue
View File

@ -4,32 +4,32 @@
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
<el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
label-width="100px">
<el-collapse v-model="activeNames" >
<el-collapse v-model="activeNames">
<!--客户基本信息面板-->
<el-collapse-item title="客户基本信息" name="1">
<el-row :gutter="2">
<el-col :span="11">
<el-form-item label="客户名称" prop="cusName">
<el-input v-model="formData.cusName" placeholder="请输入客户名称"/>
<el-input v-model="formData.cusName" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="客户类型" prop="typeCode">
<el-select v-model="formData.typeCode" placeholder="请选择客户类型">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item v-if="formData.typeCode !=='03'" label="身份证号" prop="idCard">
<el-input v-model="formData.idCard" placeholder="请输入客户身份证号"/>
<el-form-item v-if="formData.typeCode !== '03'" label="身份证号" prop="idCard">
<el-input v-model="formData.idCard" placeholder="请输入客户身份证号" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item v-if="formData.typeCode !=='03'" label="性别" prop="sex">
<el-form-item v-if="formData.typeCode !== '03'" label="性别" prop="sex">
<el-radio-group v-model="formData.sex">
<el-radio v-for="dict in sexDictDatas" :key="dict.value" :label="dict.value">
{{ dict.label }}
@ -40,17 +40,14 @@
</el-row>
<el-row :gutter="2">
<el-col :span="11">
<el-form-item v-if="formData.typeCode !=='03'" label="生日" prop="birthday">
<el-date-picker
v-model="formData.birthday"
type="date"
placeholder="选择日期">
<el-form-item v-if="formData.typeCode !== '03'" label="生日" prop="birthday">
<el-date-picker v-model="formData.birthday" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="联系方式" prop="phoneNumber">
<el-input v-model="formData.phoneNumber" placeholder="请输入客户联系方式"/>
<el-input v-model="formData.phoneNumber" placeholder="请输入客户联系方式" />
</el-form-item>
</el-col>
</el-row>
@ -58,16 +55,16 @@
<el-col :span="11">
<el-form-item label="客户来源" prop="dataFrom">
<el-select v-model="formData.dataFrom" placeholder="请选择客户来源">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="注册方式" prop="inviterType">
<el-select v-model="formData.inviterType" placeholder="请选择注册方式">
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)"
:key="dict.value" :label="dict.label" :value="dict.value"/>
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
@ -75,83 +72,61 @@
<el-row>
<el-col :span="22">
<el-form-item label="联系地址" prop="address">
<el-input type="textarea" v-model="formData.address" placeholder="请输入客户联系地址"/>
<el-input type="textarea" v-model="formData.address" placeholder="请输入客户联系地址" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<!--服务内容折叠面板面板-->
<el-collapse-item v-if="formData.typeCode=='03'" title="服务内容" name="2">
<el-table
:data="formData.itemList"
border
size="small"
style="width: 100%">
<el-table-column
prop="serContent"
align="left"
width="180">
<el-collapse-item v-if="formData.typeCode == '03'" title="服务内容" name="2">
<el-table :data="formData.itemList" border size="small" style="width: 100%">
<el-table-column prop="serContent" align="left" width="180">
<template slot="header">
<i style="color: #409EFF;cursor:pointer" class="el-icon-circle-plus-outline" @click="addItem"/>
<i style="color: #409EFF;cursor:pointer" class="el-icon-circle-plus-outline" @click="addItem" />
服务内容
</template>
<template v-slot="scope">
<el-select @change="serviceChange(scope.row)" v-model="scope.row.systemCode" placeholder="请选择服务内容">
<el-option v-for="dict in serviceList"
:key="dict.id" :label="dict.name" :value="dict.id"/>
<el-option v-for="dict in serviceList" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</template>
</el-table-column>
<el-table-column
prop="serTimeStart"
align="center"
label="开始日期">
<el-table-column prop="serTimeStart" align="center" label="开始日期">
<template v-slot="scope">
<el-date-picker
v-model="scope.row.serTimeStart"
type="date"
placeholder="选择服务开始日期">
<el-date-picker v-model="scope.row.serTimeStart" type="date" placeholder="选择服务开始日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column
prop="serTimeEnd"
align="center"
label="结束日期">
<el-table-column prop="serTimeEnd" align="center" label="结束日期">
<template v-slot="scope">
<el-date-picker
v-model="scope.row.serTimeEnd"
type="date"
placeholder="选择服务结束日期">
<el-date-picker v-model="scope.row.serTimeEnd" type="date" placeholder="选择服务结束日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column
align="center"
width="100"
label="操作">
<el-table-column align="center" width="100" label="操作">
<template v-slot="scope">
<el-button v-if="formData.itemList.length>1" size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.$index, formData.itemList)">删除</el-button>
<el-button v-if="formData.itemList.length > 1" size="mini" type="text" icon="el-icon-delete"
@click="deleteItem(scope.$index, formData.itemList)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
<!--附件-->
<el-collapse-item v-if="formData.typeCode !=='03'" title="身份证件信息" name="3">
<el-collapse-item v-if="formData.typeCode !== '03'" title="身份证件信息" name="3">
<el-row>
<el-col>
<el-form-item>
<ImageUpload v-model="formData.idCardImage"/>
<ImageUpload v-model="formData.idCardImage" />
</el-form-item>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item v-if="formData.typeCode =='03'" title="政企客户资料" name="3">
<el-collapse-item v-if="formData.typeCode == '03'" title="政企客户资料" name="3">
<el-row>
<el-col>
<el-form-item>
<FileUpload v-model="formData.idCardImage"/>
<FileUpload v-model="formData.idCardImage" />
</el-form-item>
</el-col>
</el-row>
@ -170,11 +145,11 @@
<script>
import * as CustomerMainApi from '@/api/base/customer';
import { getServicePackageList} from "@/api/system/servicePackage";
import { getServicePackageList } from "@/api/system/servicePackage";
import ImageUpload from '@/components/ImageUpload';
import FileUpload from '@/components/FileUpload';
import Editor from '@/components/Editor';
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
export default {
name: "CustomerMainForm",
@ -192,13 +167,13 @@ export default {
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
formLoading: false,
//折叠面板默认展开
activeNames: ['1','2','3'],
activeNames: ['1', '2', '3'],
//类型
typeCode:"",
typeCode: "",
//企业
deptCode:undefined,
deptCode: undefined,
//服务套餐列表
serviceList:[],
serviceList: [],
// 表单参数
formData: {
id: undefined,
@ -218,12 +193,12 @@ export default {
inviter: undefined,
inviterType: '01',
status: undefined,
itemList:[
itemList: [
{
systemCode:'',
serContent:'',
serTimeStart:'',
serTimeEnd:''
systemCode: '',
serContent: '',
serTimeStart: '',
serTimeEnd: ''
}
],
},
@ -252,15 +227,15 @@ export default {
},
methods: {
/**获取服务套餐精简信息*/
getServiceList(){
getServiceList() {
getServicePackageList().then(response => {
this.serviceList = response.data;
});
},
/**绑定事件*/
serviceChange(row){
serviceChange(row) {
this.serviceList.map(item => {
if (item.id == row.systemCode){
if (item.id == row.systemCode) {
row.serContent = item.name
return
}
@ -269,11 +244,11 @@ export default {
/**
* 新增服务内容
*/
addItem(){
addItem() {
const item = {
serContent:'',
serTimeStart:'',
serTimeEnd:''
serContent: '',
serTimeStart: '',
serTimeEnd: ''
}
this.formData.itemList.push(item)
},
@ -285,7 +260,7 @@ export default {
},
/** 打开弹窗 */
async open(id,typeCode) {
async open(id, typeCode) {
this.dialogVisible = true;
this.typeCode = typeCode
this.reset();
@ -322,7 +297,7 @@ export default {
try {
const data = this.formData;
//如果客户类型不是政企客户，没有扩展表信息
if(data.typeCode !== '03'){
if (data.typeCode !== '03') {
data.itemList = []
}
// 修改的提交
@ -362,11 +337,11 @@ export default {
inviter: undefined,
inviterType: '01',
status: undefined,
itemList:[
itemList: [
{
serContent:'',
serTimeStart:'',
serTimeEnd:''
serContent: '',
serTimeStart: '',
serTimeEnd: ''
}
],
};

12
src/views/base/customer/index.vue
View File

@ -2,13 +2,13 @@
<div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="私人客户" name="01">
<PrivateCustomer :typeCode="activeName" ref="privateRef"/>
<PrivateCustomer :typeCode="activeName" ref="privateRef" />
</el-tab-pane>
<el-tab-pane label="待办客户" name="02">
<TodoCustomer :typeCode="activeName" ref="todoRef"/>
<TodoCustomer :typeCode="activeName" ref="todoRef" />
</el-tab-pane>
<el-tab-pane label="政企客户" name="03">
<CorpCustomer :typeCode="activeName" ref="corpRef"/>
<CorpCustomer :typeCode="activeName" ref="corpRef" />
</el-tab-pane>
</el-tabs>
@ -22,11 +22,11 @@ import CorpCustomer from '@/views/base/customer/components/CorpCustomer.vue'
export default {
name: "CustomerMain",
components: {
PrivateCustomer,TodoCustomer,CorpCustomer
PrivateCustomer, TodoCustomer, CorpCustomer
},
data() {
return {
activeName:'01',
activeName: '01',
};
},
created() {
@ -35,7 +35,7 @@ export default {
methods: {
/** tab点击方法 */
handleClick(tab, event){
handleClick(tab, event) {
}