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