客户管理前端开发
This commit is contained in:
PQZ
parent
b1c0139906
commit
b86686bc7d
@ -1,64 +1,148 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div>
|
||||||
<!-- 对话框(添加 / 修改) -->
|
<!-- 对话框(添加 / 修改) -->
|
||||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
|
||||||
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
|
<el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
|
||||||
<el-form-item label="sys_user表id" prop="userId">
|
label-width="100px">
|
||||||
<el-input v-model="formData.userId" placeholder="请输入sys_user表id"/>
|
<el-collapse v-model="activeNames" >
|
||||||
</el-form-item>
|
<!--客户基本信息面板-->
|
||||||
<el-form-item label="用户类型" prop="typeCode">
|
<el-collapse-item title="客户基本信息" name="1">
|
||||||
<el-input v-model="formData.typeCode" placeholder="请输入用户类型"/>
|
<el-row :gutter="2">
|
||||||
</el-form-item>
|
<el-col :span="11">
|
||||||
<el-form-item label="所属企业code（部门表code）" prop="deptCode">
|
<el-form-item label="客户名称" prop="cusName">
|
||||||
<el-input v-model="formData.deptCode" placeholder="请输入所属企业code（部门表code）"/>
|
<el-input v-model="formData.cusName" placeholder="请输入客户名称"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="客户名称（政企客户填企业名称）" prop="cusName">
|
</el-col>
|
||||||
<el-input v-model="formData.cusName" placeholder="请输入客户名称（政企客户填企业名称）"/>
|
<el-col :span="11">
|
||||||
</el-form-item>
|
<el-form-item label="客户类型" prop="typeCode">
|
||||||
<el-form-item label="联系方式" prop="phoneNumber">
|
<el-select v-model="formData.typeCode" placeholder="请选择客户类型">
|
||||||
<el-input v-model="formData.phoneNumber" placeholder="请输入联系方式"/>
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)"
|
||||||
</el-form-item>
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||||
<el-form-item label="生日" prop="birthday">
|
</el-select>
|
||||||
<el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp"
|
</el-form-item>
|
||||||
placeholder="选择生日"/>
|
</el-col>
|
||||||
</el-form-item>
|
</el-row>
|
||||||
<el-form-item label="住址" prop="address">
|
<el-row :gutter="2">
|
||||||
<el-input v-model="formData.address" placeholder="请输入住址"/>
|
<el-col :span="11">
|
||||||
</el-form-item>
|
<el-form-item label="身份证号" prop="idCard">
|
||||||
<el-form-item label="性别" prop="sex">
|
<el-input v-model="formData.idCard" placeholder="请输入客户身份证号"/>
|
||||||
<el-radio-group v-model="formData.sex">
|
</el-form-item>
|
||||||
<el-radio label="1">请选择字典生成</el-radio>
|
</el-col>
|
||||||
</el-radio-group>
|
<el-col :span="11">
|
||||||
</el-form-item>
|
<el-form-item label="性别" prop="sex">
|
||||||
<el-form-item label="身份证号" prop="idCard">
|
<el-radio-group v-model="formData.sex">
|
||||||
<el-input v-model="formData.idCard" placeholder="请输入身份证号"/>
|
<el-radio v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
|
||||||
</el-form-item>
|
{{ dict.label }}
|
||||||
<el-form-item label="身份证照片">
|
</el-radio>
|
||||||
<ImageUpload v-model="formData.idCardImage"/>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="客户初始来源" prop="dataFrom">
|
</el-col>
|
||||||
<el-input v-model="formData.dataFrom" placeholder="请输入客户初始来源"/>
|
</el-row>
|
||||||
</el-form-item>
|
<el-row :gutter="2">
|
||||||
<el-form-item label="最近业务办理时间" prop="nearDoTime">
|
<el-col :span="11">
|
||||||
<el-date-picker clearable v-model="formData.nearDoTime" type="date" value-format="timestamp"
|
<el-form-item label="生日" prop="birthday">
|
||||||
placeholder="选择最近业务办理时间"/>
|
<el-input v-model="formData.birthday" placeholder="请输入客户身份证号"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="最近办理业务（数据字典业务标识）">
|
</el-col>
|
||||||
<Editor v-model="formData.nearDoContent" :min-height="192"/>
|
<el-col :span="11">
|
||||||
</el-form-item>
|
<el-form-item label="联系方式" prop="phoneNumber">
|
||||||
<el-form-item label="邀请者user_id" prop="inviter">
|
<el-input v-model="formData.phoneNumber" placeholder="请输入客户联系方式"/>
|
||||||
<el-input v-model="formData.inviter" placeholder="请输入邀请者user_id"/>
|
</el-form-item>
|
||||||
</el-form-item>
|
</el-col>
|
||||||
<el-form-item label="邀请者类型" prop="inviterType">
|
</el-row>
|
||||||
<el-select v-model="formData.inviterType" placeholder="请选择邀请者类型">
|
<el-row :gutter="2">
|
||||||
<el-option label="请选择字典生成" value=""/>
|
<el-col :span="11">
|
||||||
</el-select>
|
<el-form-item label="客户来源" prop="dataFrom">
|
||||||
</el-form-item>
|
<el-select v-model="formData.dataFrom" placeholder="请选择客户来源">
|
||||||
<el-form-item label="客户状态" prop="status">
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)"
|
||||||
<el-radio-group v-model="formData.status">
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||||
<el-radio label="1">请选择字典生成</el-radio>
|
</el-select>
|
||||||
</el-radio-group>
|
</el-form-item>
|
||||||
</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-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="22">
|
||||||
|
<el-form-item label="联系地址" prop="address">
|
||||||
|
<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">
|
||||||
|
<template slot="header">
|
||||||
|
<i style="color: #409EFF;cursor:pointer" class="el-icon-circle-plus-outline" @click="addItem"/>
|
||||||
|
服务内容
|
||||||
|
</template>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-select v-model="scope.row.serContent" placeholder="请选择服务内容">
|
||||||
|
<el-option v-for="dict in cusBusiTypeDictDatas"
|
||||||
|
:key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-collapse-item>
|
||||||
|
<!--附件-->
|
||||||
|
<!-- <el-collapse-item title="附件" name="3">-->
|
||||||
|
<!-- <el-row>-->
|
||||||
|
<!-- <el-col>-->
|
||||||
|
<!-- <el-form-item label="身份证照片">-->
|
||||||
|
<!-- <ImageUpload v-model="formData.idCardImage"/>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- </el-col>-->
|
||||||
|
<!-- </el-row>-->
|
||||||
|
<!-- </el-collapse-item>-->
|
||||||
|
</el-collapse>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
|
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
|
||||||
@ -72,6 +156,7 @@
|
|||||||
import * as CustomerMainApi from '@/api/base/customer';
|
import * as CustomerMainApi from '@/api/base/customer';
|
||||||
import ImageUpload from '@/components/ImageUpload';
|
import ImageUpload from '@/components/ImageUpload';
|
||||||
import Editor from '@/components/Editor';
|
import Editor from '@/components/Editor';
|
||||||
|
import {getDictDatas, DICT_TYPE} from '@/utils/dict'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CustomerMainForm",
|
name: "CustomerMainForm",
|
||||||
@ -87,31 +172,61 @@ export default {
|
|||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||||
formLoading: false,
|
formLoading: false,
|
||||||
|
//折叠面板默认展开
|
||||||
|
activeNames: ['1','2','3'],
|
||||||
// 表单参数
|
// 表单参数
|
||||||
formData: {
|
formData: {
|
||||||
id: undefined,
|
id: undefined,
|
||||||
userId: undefined,
|
userId: undefined,
|
||||||
typeCode: undefined,
|
typeCode: '01',
|
||||||
deptCode: undefined,
|
deptCode: undefined,
|
||||||
cusName: undefined,
|
cusName: undefined,
|
||||||
phoneNumber: undefined,
|
phoneNumber: undefined,
|
||||||
birthday: undefined,
|
birthday: undefined,
|
||||||
address: undefined,
|
address: undefined,
|
||||||
sex: undefined,
|
sex: 1,
|
||||||
idCard: undefined,
|
idCard: undefined,
|
||||||
idCardImage: undefined,
|
idCardImage: undefined,
|
||||||
dataFrom: undefined,
|
dataFrom: '08',
|
||||||
nearDoTime: undefined,
|
nearDoTime: undefined,
|
||||||
nearDoContent: undefined,
|
nearDoContent: undefined,
|
||||||
inviter: undefined,
|
inviter: undefined,
|
||||||
inviterType: undefined,
|
inviterType: '01',
|
||||||
status: undefined,
|
status: undefined,
|
||||||
|
itemList:[
|
||||||
|
{
|
||||||
|
serContent:'',
|
||||||
|
serTimeStart:'',
|
||||||
|
serTimeEnd:''
|
||||||
|
}
|
||||||
|
],
|
||||||
},
|
},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
formRules: {},
|
formRules: {},
|
||||||
|
// 性别数据字典
|
||||||
|
sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
|
||||||
|
cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
/**
|
||||||
|
* 新增服务内容
|
||||||
|
*/
|
||||||
|
addItem(){
|
||||||
|
const item = {
|
||||||
|
serContent:'',
|
||||||
|
serTimeStart:'',
|
||||||
|
serTimeEnd:''
|
||||||
|
}
|
||||||
|
this.formData.itemList.push(item)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 移除服务内容
|
||||||
|
*/
|
||||||
|
deleteItem(index, rows) {
|
||||||
|
rows.splice(index, 1);
|
||||||
|
},
|
||||||
|
|
||||||
/** 打开弹窗 */
|
/** 打开弹窗 */
|
||||||
async open(id) {
|
async open(id) {
|
||||||
this.dialogVisible = true;
|
this.dialogVisible = true;
|
||||||
@ -158,21 +273,28 @@ export default {
|
|||||||
this.formData = {
|
this.formData = {
|
||||||
id: undefined,
|
id: undefined,
|
||||||
userId: undefined,
|
userId: undefined,
|
||||||
typeCode: undefined,
|
typeCode: '01',
|
||||||
deptCode: undefined,
|
deptCode: undefined,
|
||||||
cusName: undefined,
|
cusName: undefined,
|
||||||
phoneNumber: undefined,
|
phoneNumber: undefined,
|
||||||
birthday: undefined,
|
birthday: undefined,
|
||||||
address: undefined,
|
address: undefined,
|
||||||
sex: undefined,
|
sex: 1,
|
||||||
idCard: undefined,
|
idCard: undefined,
|
||||||
idCardImage: undefined,
|
idCardImage: undefined,
|
||||||
dataFrom: undefined,
|
dataFrom: '08',
|
||||||
nearDoTime: undefined,
|
nearDoTime: undefined,
|
||||||
nearDoContent: undefined,
|
nearDoContent: undefined,
|
||||||
inviter: undefined,
|
inviter: undefined,
|
||||||
inviterType: undefined,
|
inviterType: '01',
|
||||||
status: undefined,
|
status: undefined,
|
||||||
|
itemList:[
|
||||||
|
{
|
||||||
|
serContent:'',
|
||||||
|
serTimeStart:'',
|
||||||
|
serTimeEnd:''
|
||||||
|
}
|
||||||
|
],
|
||||||
};
|
};
|
||||||
this.resetForm("formRef");
|
this.resetForm("formRef");
|
||||||
}
|
}
|
||||||
|
|||||||
@ -32,12 +32,12 @@
|
|||||||
v-hasPermi="['base:customer-main:create']">新增
|
v-hasPermi="['base:customer-main:create']">新增
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<!-- <el-col :span="1.5">-->
|
||||||
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
|
<!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"-->
|
||||||
:loading="exportLoading"
|
<!-- :loading="exportLoading"-->
|
||||||
v-hasPermi="['base:customer-main:export']">导出
|
<!-- v-hasPermi="['base:customer-main:export']">导出-->
|
||||||
</el-button>
|
<!-- </el-button>-->
|
||||||
</el-col>
|
<!-- </el-col>-->
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user