init
This commit is contained in:
2369
ruoyi-ui/src/views/customer/charts/360charts/commercial/index.vue
Normal file
2369
ruoyi-ui/src/views/customer/charts/360charts/commercial/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
企业视图
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div style="background-color:rgba(128,128,128,0.2)">
|
||||
<el-form>
|
||||
<el-row>
|
||||
<el-col :span="4" style="padding-left:10px">
|
||||
<h2 style="font-weight:bold">{{this.companyOptions[0].companyName}}</h2>
|
||||
</el-col>
|
||||
<el-col :span="2" style="padding-top:10px">
|
||||
<el-button @click="handleUpdate">编辑资料</el-button>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-button @click="handleBack" type="text" icon="el-icon-arrow-left" class="back">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form style="padding-left:20px">
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 商户全称：{{this.companyOptions[0].companyName}}</el-col>
|
||||
<el-col :span="7"> 法人：{{this.companyOptions[0].companyLegalPerson}}</el-col>
|
||||
<el-col :span="7"> 电话：{{this.companyOptions[0].companyPhone}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 统一社会信用识别码：{{this.companyOptions[0].companyId}}</el-col>
|
||||
<el-col :span="7"> 地址：{{this.companyOptions[0].companyaddress}}</el-col>
|
||||
<el-col :span="7"> 所属网格：{{this.companyOptions[0].owningGrid}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 网格管理员：{{this.companyOptions[0].gridManager}}</el-col>
|
||||
<el-col :span="7"> 全年流水：{{this.companyOptions[0].companyIncome}}</el-col>
|
||||
<el-col :span="7"> 是否存贷款意向：{{this.companyOptions[0].intention}}</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<el-row class="border-row">
|
||||
<el-col :span="12" class="border-col">
|
||||
<p class="title">走访记录</p>
|
||||
<p style="margin-left:10px">{{this.companyOptions[0].recording[0].manager+'在'+this.companyOptions[0].recording[0].recordTime}}</p>
|
||||
<p style="margin-left:10px">{{'结束了'+this.companyOptions[0].recording[0].active+'客户反馈：'+this.companyOptions[0].recording[0].backInformation}}</p>
|
||||
<a href="" style="margin-left:10px">查看详情</a>
|
||||
<br><br>
|
||||
<a href="">查看全部走访详情</a>
|
||||
</el-col>
|
||||
<el-col :span="12" class="border-col">
|
||||
<p class="title">登记信息</p>
|
||||
<h3>商户标签：</h3>
|
||||
<p>线下经营</p>
|
||||
<div v-if="companyUnderTags.length > 0" class="tag-list">
|
||||
<el-tag
|
||||
v-for="tag in companyUnderTags"
|
||||
:key="tag"
|
||||
closable
|
||||
@close="removeUnderTag(tag)">{{tag}}</el-tag>
|
||||
</div>
|
||||
<el-button @click="addUnderMark = true">编辑</el-button>
|
||||
<p>线上经营</p>
|
||||
<div v-if="companyOnlineTags.length > 0" class="tag-list">
|
||||
<el-tag
|
||||
v-for="tag in companyOnlineTags"
|
||||
:key="tag"
|
||||
closable
|
||||
@close="removeOnlineTag(tag)">{{tag}}</el-tag>
|
||||
</div>
|
||||
<el-button @click="addOnlineMark = true">编辑</el-button>
|
||||
<p>店铺状态</p>
|
||||
<div v-if="companyStatuTags.length > 0" class="tag-list">
|
||||
<el-tag
|
||||
v-for="tag in companyStatuTags"
|
||||
:key="tag"
|
||||
closable
|
||||
@close="removeStatuTag(tag)">{{tag}}</el-tag>
|
||||
</div>
|
||||
<el-button @click="addStatuMark = true">编辑</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 客户标签弹窗 -->
|
||||
<el-dialog
|
||||
title="编辑商户线下标签"
|
||||
:visible.sync="addUnderMark"
|
||||
width="30%"
|
||||
@close="resetUnderFrom">
|
||||
<el-form :model="tagUnderForm">
|
||||
<el-form-item label="商户线下标签">
|
||||
<el-input v-model="tagUnderForm.companyUnderTags" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addUnderMark">取消</el-button>
|
||||
<el-button type="primary" @click="saveUnderTag">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="编辑商户线上标签"
|
||||
:visible.sync="addOnlineMark"
|
||||
width="30%"
|
||||
@close="resetOnlineFrom">
|
||||
<el-form :model="tagOnlineForm">
|
||||
<el-form-item label="商户线上标签">
|
||||
<el-input v-model="tagOnlineForm.companyOnlineTags" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addOnlineMark">取消</el-button>
|
||||
<el-button type="primary" @click="saveOnlineTag">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="编辑店铺状态标签"
|
||||
:visible.sync="addStatuMark"
|
||||
width="30%"
|
||||
@close="resetStatuFrom">
|
||||
<el-form :model="tagStatuForm">
|
||||
<el-form-item label="店铺状态标签">
|
||||
<el-input v-model="tagStatuForm.companyStatuTag" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addStatuMark">取消</el-button>
|
||||
<el-button type="primary" @click="saveStatuTag">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import axios from 'axios'
|
||||
// axios.get('/api/users').then(reponse=>{
|
||||
// console.log(response.data.data.users)
|
||||
// })
|
||||
export default {
|
||||
name: "individual",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
//添加用户标签
|
||||
addUnderMark:false,
|
||||
addOnlineMark:false,
|
||||
addStatuMark:false,
|
||||
tagUnderForm:{
|
||||
companyUnderTag:''
|
||||
},
|
||||
tagOnlineForm:{
|
||||
companyOnlineTag:''
|
||||
},
|
||||
tagStatuForm:{
|
||||
companyStatuTag:''
|
||||
},
|
||||
companyUnderTags:[],
|
||||
companyOnlineTags:[],
|
||||
companyStatuTags:[],
|
||||
|
||||
companyOptions:[
|
||||
{companyName:'CM乒乓球训练中心',companyLegalPerson:'陈梦',companyPhone:'0571-109xxx',companyId:'3002023G',companyaddress:'浙江省杭州市萧山区',owningGrid:'盈丰街道',gridManager:'马龙',companyIncome:1000000,intention:'否',
|
||||
recording:[{manager:"马龙",recordTime:"2024-08-10 13:45",active:"综合营销活动",backInformation:"无反馈"},
|
||||
{manager:"赵云",recordTime:"2024-07-20 15:25",active:"客户回馈活动",backInformation:"无反馈"}]}
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleUpdate(){},
|
||||
//编辑客户标签
|
||||
saveUnderTag(){
|
||||
if(this.tagUnderForm.companyUnderTag.trim() !== ''){
|
||||
this.companyUnderTags.push(this.tagUnderForm.companyUnderTag.trim());
|
||||
this.addUnderMark = false;
|
||||
this.resetUnderFrom();
|
||||
}else {
|
||||
this.$message.error('标签内容不能为空')
|
||||
}
|
||||
},
|
||||
removeUnderTag(tag){
|
||||
const index = this.companyUnderTags.indexOf(tag);
|
||||
if(index !== -1){
|
||||
this.companyUnderTags.splice(index, 1)
|
||||
}
|
||||
},
|
||||
saveOnlineTag(){
|
||||
if(this.tagOnlineForm.companyOnlineTag.trim() !== ''){
|
||||
this.companyOnlineTags.push(this.tagOnlineForm.companyOnlineTag.trim());
|
||||
this.addOnlineMark = false;
|
||||
this.resetOnlineFrom();
|
||||
}else {
|
||||
this.$message.error('标签内容不能为空')
|
||||
}
|
||||
},
|
||||
saveStatuTag(){
|
||||
if(this.tagStatuForm.companyStatuTag.trim() !== ''){
|
||||
this.companyStatuTags.push(this.tagStatuForm.companyStatuTag.trim());
|
||||
this.addStatuMark = false;
|
||||
this.resetStatuFrom();
|
||||
}else {
|
||||
this.$message.error('标签内容不能为空')
|
||||
}
|
||||
},
|
||||
|
||||
removeOnlineTag(tag){
|
||||
const index = this.companyOnlineTags.indexOf(tag);
|
||||
if(index !== -1){
|
||||
this.companyOnlineTags.splice(index, 1)
|
||||
}
|
||||
},
|
||||
removeStatuTag(tag){
|
||||
const index = this.companyStatuTags.indexOf(tag);
|
||||
if(index !== -1){
|
||||
this.companyStatuTags.splice(index, 1)
|
||||
}
|
||||
},
|
||||
resetUnderFrom(){
|
||||
this.tagUnderForm.companyUnderTag = "";
|
||||
},
|
||||
resetOnlineFrom(){
|
||||
this.tagOnlineForm.companyOnlineTag = "";
|
||||
},
|
||||
resetStatuFrom(){
|
||||
this.tagStatuForm.companyStatuTag = "";
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
handleBack(){
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title{
|
||||
color:rgb(25, 118, 155);
|
||||
font-weight:bold;
|
||||
background-color: rgb(161, 215, 236);
|
||||
height: 30px;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
/* border: 1px solid gray; */
|
||||
}
|
||||
.back{
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right: 5px;
|
||||
}
|
||||
.product{
|
||||
background-color: brown;
|
||||
margin: 5px 5px;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color:blue;
|
||||
}
|
||||
.tag-list {
|
||||
margin-top:20px;
|
||||
}
|
||||
.border-row {
|
||||
padding: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.border-col {
|
||||
border: 1px solid gray;
|
||||
height: 500px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div style="background-color:rgba(128,128,128,0.2)">
|
||||
<el-form>
|
||||
<h2>陈梦家庭成员-父亲</h2>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<el-row>
|
||||
<el-col :span="2" style="padding-left:10px">
|
||||
<h2 style="font-weight:bold">{{this.clientOptions[0].clientName}}</h2>
|
||||
</el-col>
|
||||
<el-col :span="2" style="padding-top:13px">
|
||||
<el-button @click="handleUpdate">编辑资料</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form style="padding-left:20px">
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 客户号：{{this.clientOptions[0].clientnum}}</el-col>
|
||||
<el-col :span="7"> 所属行业：{{this.clientOptions[0].clientJobIn}}</el-col>
|
||||
<el-col :span="7"> 客户经理：{{this.clientOptions[0].clientManager}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 手机号：{{this.clientOptions[0].clientPhone}}</el-col>
|
||||
<el-col :span="7"> 年收入：{{this.clientOptions[0].clientIncome}}</el-col>
|
||||
<el-col :span="7"> 客户标识：{{this.clientOptions[0].clientMark}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 出生日期：{{this.clientOptions[0].clientBrith}}</el-col>
|
||||
<el-col :span="7"> 风险评估：{{this.clientOptions[0].clientRisk}}</el-col>
|
||||
<el-col :span="7"> 开户银行：{{this.clientOptions[0].accountOpen}}</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<el-row class="border-row">
|
||||
<el-col :span="8" class="border-col">
|
||||
<p class="title">理财产品</p>
|
||||
<p class="product" v-for="pro in this.clientOptions[0].product" :key="pro.id">{{pro.name}}</p>
|
||||
</el-col>
|
||||
<el-col :span="8" class="border-col">
|
||||
<p class="title">走访记录</p>
|
||||
<p style="margin-left:10px">{{this.clientOptions[0].recording[0].manager+'在'+this.clientOptions[0].recording[0].recordTime}}</p>
|
||||
<p style="margin-left:10px">{{'结束了'+this.clientOptions[0].recording[0].active+'客户反馈：'+this.clientOptions[0].recording[0].backInformation}}</p>
|
||||
<a href="" style="margin-left:10px">查看详情</a>
|
||||
<br><br>
|
||||
<a href="">查看全部走访详情</a>
|
||||
</el-col>
|
||||
<el-col :span="8" class="border-col">
|
||||
<p class="title">登记信息</p>
|
||||
<p>客户标签：</p>
|
||||
<div v-if="customerTags.length > 0" class="tag-list">
|
||||
<el-tag
|
||||
v-for="tag in customerTags"
|
||||
:key="tag"
|
||||
closable
|
||||
@close="removeTag(tag)">{{tag}}</el-tag>
|
||||
</div>
|
||||
<el-button @click="addMark = true">编辑</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<h3 style="font-weight:bold">关系图谱</h3>
|
||||
</el-form>
|
||||
<!-- 客户标签弹窗 -->
|
||||
<el-dialog
|
||||
title="编辑客户标签"
|
||||
:visible.sync="addMark"
|
||||
width="30%"
|
||||
@close="resetFrom">
|
||||
<el-form :model="tagForm">
|
||||
<el-form-item label="客户标签">
|
||||
<el-input v-model="tagForm.customerTag" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addMark">取消</el-button>
|
||||
<el-button type="primary" @click="saveTag">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import axios from 'axios'
|
||||
// axios.get('/api/users').then(reponse=>{
|
||||
// console.log(response.data.data.users)
|
||||
// })
|
||||
export default {
|
||||
name: "individual",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
//添加用户标签
|
||||
addMark:false,
|
||||
tagForm:{
|
||||
customerTag:''
|
||||
},
|
||||
customerTags:[],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
clientName: undefined,
|
||||
clientId: undefined,
|
||||
clientPhone:undefined
|
||||
},
|
||||
clientOptions:[
|
||||
{clientId:123456,clientName:'陈粱',clientPhone:'13688888888',clientManager:null,clientnum:null,clientJobIn:'新闻传媒',clientIncome:null,
|
||||
clientMark:null,clientBrith:'1994-01-15',clientRisk:null,accountOpen:null,
|
||||
product:[],
|
||||
recording:[{manager:"刘国梁",recordTime:"2023-05-10 13:45",active:"开户活动",backInformation:"无反馈"}]}
|
||||
],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
clientName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
clientId: [
|
||||
{ required: true, message: "身份证号不能为空", trigger: "blur" }
|
||||
],
|
||||
clientPhone: [
|
||||
{ required: true, message: "手机号不能为空", trigger: "blur" }
|
||||
],
|
||||
clientManager:[
|
||||
{ required: true, message: "客户经理不能为空", trigger: "blur" }
|
||||
],
|
||||
accountOpen:[
|
||||
{ required: true, message: "开户银行不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询部门列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listClient(this.queryParams).then(response => {
|
||||
this.clientList = this.handleTree(response.data, "clientId");
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//编辑客户标签
|
||||
saveTag(){
|
||||
if(this.tagForm.customerTag.trim() !== ''){
|
||||
this.customerTags.push(this.tagForm.customerTag.trim());
|
||||
this.addMark = false;
|
||||
this.resetFrom();
|
||||
}else {
|
||||
this.$message.error('标签内容不能为空')
|
||||
}
|
||||
},
|
||||
removeTag(tag){
|
||||
const index = this.customerTags.indexOf(tag);
|
||||
if(index !== -1){
|
||||
this.customerTags.splice(index, 1)
|
||||
}
|
||||
},
|
||||
resetFrom(){
|
||||
this.tagForm.customerTag = "";
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
if (row != undefined) {
|
||||
this.form.parentId = row.clientId;
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加部门";
|
||||
listClient().then(response => {
|
||||
this.clientOptions = this.handleTree(response.data, "clientId");
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
getClient(row.clientId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "编辑资料";
|
||||
listClientExcludeChild(row.clientId).then(response => {
|
||||
this.clientOptions = this.handleTree(response.data, "clientId");
|
||||
if (this.clientOptions.length == 0) {
|
||||
const noResultsOptions = { clientId: this.form.clientId, clientName: this.form.clientName, children: [] };
|
||||
this.clientOptions.push(noResultsOptions);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.clientId != undefined) {
|
||||
updateClient(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addClient(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title{
|
||||
color:rgb(25, 118, 155);
|
||||
font-weight:bold;
|
||||
background-color: rgb(161, 215, 236);
|
||||
height: 30px;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
/* border: 1px solid gray; */
|
||||
}
|
||||
.product{
|
||||
background-color: brown;
|
||||
margin: 5px 5px;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color:blue;
|
||||
}
|
||||
.tag-list {
|
||||
margin-top:20px;
|
||||
}
|
||||
.border-row {
|
||||
padding: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.border-col {
|
||||
border: 1px solid gray;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div style="background-color:rgba(128,128,128,0.2)">
|
||||
<el-form>
|
||||
<el-row>
|
||||
<el-col :span="2" style="padding-left:10px">
|
||||
<h2 style="font-weight:bold">{{this.clientOptions[0].clientName}}</h2>
|
||||
</el-col>
|
||||
<el-col :span="2" style="padding-top:10px">
|
||||
<el-button @click="handleUpdate">编辑资料</el-button>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-button @click="handleBack" type="text" icon="el-icon-arrow-left" class="back">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form style="padding-left:20px">
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 客户号：{{this.clientOptions[0].clientnum}}</el-col>
|
||||
<el-col :span="7"> 所属行业：{{this.clientOptions[0].clientJobIn}}</el-col>
|
||||
<el-col :span="7"> 客户经理：{{this.clientOptions[0].clientManager}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 手机号：{{this.clientOptions[0].clientPhone}}</el-col>
|
||||
<el-col :span="7"> 年收入：{{this.clientOptions[0].clientIncome}}</el-col>
|
||||
<el-col :span="7"> 客户标识：{{this.clientOptions[0].clientMark}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 出生日期：{{this.clientOptions[0].clientBrith}}</el-col>
|
||||
<el-col :span="7"> 风险评估：{{this.clientOptions[0].clientRisk}}</el-col>
|
||||
<el-col :span="7"> 开户银行：{{this.clientOptions[0].accountOpen}}</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<el-row class="border-row">
|
||||
<el-col :span="8" class="border-col">
|
||||
<p class="title">理财产品</p>
|
||||
<p class="product" v-for="pro in this.clientOptions[0].product" :key="pro.id">{{pro.name}}</p>
|
||||
</el-col>
|
||||
<el-col :span="8" class="border-col">
|
||||
<p class="title">走访记录</p>
|
||||
<p style="margin-left:10px">{{this.clientOptions[0].recording[0].manager+'在'+this.clientOptions[0].recording[0].recordTime}}</p>
|
||||
<p style="margin-left:10px">{{'结束了'+this.clientOptions[0].recording[0].active+'客户反馈：'+this.clientOptions[0].recording[0].backInformation}}</p>
|
||||
<a href="" style="margin-left:10px">查看详情</a>
|
||||
<br><br>
|
||||
<a href="">查看全部走访详情</a>
|
||||
</el-col>
|
||||
<el-col :span="8" class="border-col">
|
||||
<p class="title">登记信息</p>
|
||||
<p>客户标签：</p>
|
||||
<div v-if="customerTags.length > 0" class="tag-list">
|
||||
<el-tag
|
||||
v-for="tag in customerTags"
|
||||
:key="tag"
|
||||
closable
|
||||
@close="removeTag(tag)">{{tag}}</el-tag>
|
||||
</div>
|
||||
<el-button @click="addMark = true">编辑</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<h3 style="font-weight:bold">关系图谱</h3>
|
||||
</el-form>
|
||||
<!-- 客户标签弹窗 -->
|
||||
<el-dialog
|
||||
title="编辑客户标签"
|
||||
:visible.sync="addMark"
|
||||
width="30%"
|
||||
@close="resetFrom">
|
||||
<el-form :model="tagForm">
|
||||
<el-form-item label="客户标签">
|
||||
<el-input v-model="tagForm.customerTag" auto-complete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="addMark">取消</el-button>
|
||||
<el-button type="primary" @click="saveTag">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import axios from 'axios'
|
||||
// axios.get('/api/users').then(reponse=>{
|
||||
// console.log(response.data.data.users)
|
||||
// })
|
||||
export default {
|
||||
name: "individual",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
//添加用户标签
|
||||
addMark:false,
|
||||
tagForm:{
|
||||
customerTag:''
|
||||
},
|
||||
customerTags:[],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
clientName: undefined,
|
||||
clientId: undefined,
|
||||
clientPhone:undefined
|
||||
},
|
||||
clientOptions:[
|
||||
{clientId:123456,clientName:'陈梦',clientPhone:'13588888888',clientManager:'马龙',clientnum:20240810,clientJobIn:'体育',clientIncome:100000,
|
||||
clientMark:null,clientBrith:'1994-01-15',clientRisk:"积极型",accountOpen:"萧山农商行",
|
||||
product:[{id:1,name:"定期存单"},{id:2,name:"存贷款"}],
|
||||
recording:[{manager:"马龙",recordTime:"2024-08-10 13:45",active:"综合营销活动",backInformation:"无反馈"},
|
||||
{manager:"赵云",recordTime:"2024-07-20 15:25",active:"客户回馈活动",backInformation:"无反馈"}]}
|
||||
],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
clientName: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
],
|
||||
clientId: [
|
||||
{ required: true, message: "身份证号不能为空", trigger: "blur" }
|
||||
],
|
||||
clientPhone: [
|
||||
{ required: true, message: "手机号不能为空", trigger: "blur" }
|
||||
],
|
||||
clientManager:[
|
||||
{ required: true, message: "客户经理不能为空", trigger: "blur" }
|
||||
],
|
||||
accountOpen:[
|
||||
{ required: true, message: "开户银行不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询部门列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listClient(this.queryParams).then(response => {
|
||||
this.clientList = this.handleTree(response.data, "clientId");
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
//编辑客户标签
|
||||
saveTag(){
|
||||
if(this.tagForm.customerTag.trim() !== ''){
|
||||
this.customerTags.push(this.tagForm.customerTag.trim());
|
||||
this.addMark = false;
|
||||
this.resetFrom();
|
||||
}else {
|
||||
this.$message.error('标签内容不能为空')
|
||||
}
|
||||
},
|
||||
removeTag(tag){
|
||||
const index = this.customerTags.indexOf(tag);
|
||||
if(index !== -1){
|
||||
this.customerTags.splice(index, 1)
|
||||
}
|
||||
},
|
||||
resetFrom(){
|
||||
this.tagForm.customerTag = "";
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd(row) {
|
||||
this.reset();
|
||||
if (row != undefined) {
|
||||
this.form.parentId = row.clientId;
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加部门";
|
||||
listClient().then(response => {
|
||||
this.clientOptions = this.handleTree(response.data, "clientId");
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
getClient(row.clientId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "编辑资料";
|
||||
listClientExcludeChild(row.clientId).then(response => {
|
||||
this.clientOptions = this.handleTree(response.data, "clientId");
|
||||
if (this.clientOptions.length == 0) {
|
||||
const noResultsOptions = { clientId: this.form.clientId, clientName: this.form.clientName, children: [] };
|
||||
this.clientOptions.push(noResultsOptions);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.clientId != undefined) {
|
||||
updateClient(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addClient(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleBack(){
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title{
|
||||
color:rgb(25, 118, 155);
|
||||
font-weight:bold;
|
||||
background-color: rgb(161, 215, 236);
|
||||
height: 30px;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
/* border: 1px solid gray; */
|
||||
}
|
||||
.back{
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right: 5px;
|
||||
}
|
||||
.product{
|
||||
background-color: brown;
|
||||
margin: 5px 5px;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color:blue;
|
||||
}
|
||||
.tag-list {
|
||||
margin-top:20px;
|
||||
}
|
||||
.border-row {
|
||||
padding: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.border-col {
|
||||
border: 1px solid gray;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div style="background-color:rgba(128,128,128,0.2)">
|
||||
<el-form>
|
||||
<el-row>
|
||||
<el-col :span="4" style="padding-left:10px">
|
||||
<h2 style="font-weight:bold">{{this.merchantOptions[0].merchantName}}</h2>
|
||||
</el-col>
|
||||
<el-col :span="2" style="padding-top:10px">
|
||||
<el-button @click="handleUpdate">编辑资料</el-button>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-button @click="handleBack" type="text" icon="el-icon-arrow-left" class="back">返回</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form style="padding-left:20px">
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 商户全称：{{this.merchantOptions[0].merchantName}}</el-col>
|
||||
<el-col :span="7"> 电话：{{this.merchantOptions[0].merchantPhone}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 地址：{{this.merchantOptions[0].merchantaddress}}</el-col>
|
||||
<el-col :span="7"> 所属网格：{{this.merchantOptions[0].owningGrid}}</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding:8px">
|
||||
<el-col :span="7"> 网格管理员：{{this.merchantOptions[0].gridManager}}</el-col>
|
||||
<el-col :span="7"> 全年流水：{{this.merchantOptions[0].merchantIncome}}</el-col>
|
||||
<el-col :span="7"> 是否存贷款意向：{{this.merchantOptions[0].intention}}</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-form>
|
||||
<el-row class="border-row">
|
||||
<el-col :span="12" class="border-col">
|
||||
<p class="title">走访记录</p>
|
||||
<p style="margin-left:10px">{{this.merchantOptions[0].recording[0].manager+'在'+this.merchantOptions[0].recording[0].recordTime}}</p>
|
||||
<p style="margin-left:10px">{{'结束了'+this.merchantOptions[0].recording[0].active+'客户反馈：'+this.merchantOptions[0].recording[0].backInformation}}</p>
|
||||
<a href="" style="margin-left:10px">查看详情</a>
|
||||
<br><br>
|
||||
<a href="">查看全部走访详情</a>
|
||||
</el-col>
|
||||
<el-col :span="12" class="border-col">
|
||||
<p class="title">登记信息</p>
|
||||
<h3>商户标签：</h3>
|
||||
<div class="label">
|
||||
<p style="margin-left:10px">线下经营:</p>
|
||||
<el-tag v-for="(tag,index) in tags1" :key="index" closable @close="removeTag(1,index)">{{tag}}</el-tag>
|
||||
<el-button @click="openDialog(1)">编辑</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="label">
|
||||
<p style="margin-left:10px">线上经营:</p>
|
||||
<el-tag v-for="(tag,index) in tags2" :key="index" closable @close="removeTag(2,index)">{{tag}}</el-tag>
|
||||
<el-button @click="openDialog(2)">编辑</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="label">
|
||||
<p style="margin-left:10px">店铺状态:</p>
|
||||
<el-tag v-for="(tag,index) in tags3" :key="index" closable @close="removeTag(3,index)">{{tag}}</el-tag>
|
||||
<el-button @click="openDialog(3)">编辑</el-button>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div v-if="dialogOpen === 1" class="dialog-overlay">
|
||||
<div class="dialog">
|
||||
<h2>编辑商户标签</h2>
|
||||
<h4>线下经营标签</h4>
|
||||
<input v-model="newTag1" type="text" placeholder="输入商户线下经营标签"/>
|
||||
<br>
|
||||
<div class="foot-button">
|
||||
<button @click="addTag(1)">确定</button>
|
||||
<button @click="closeDialog"> 取消</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogOpen === 2" class="dialog-overlay">
|
||||
<div class="dialog">
|
||||
<h2>编辑商户标签</h2>
|
||||
<h4>线上经营标签</h4>
|
||||
<input v-model="newTag2" type="text" placeholder="输入商户线上经营标签"/>
|
||||
<br>
|
||||
<div class="foot-button">
|
||||
<button @click="addTag(2)">确定</button>
|
||||
<button @click="closeDialog"> 取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dialogOpen === 3" class="dialog-overlay">
|
||||
<div class="dialog">
|
||||
<h2>编辑商户标签</h2>
|
||||
<h4>店铺状态标签</h4>
|
||||
<input v-model="newTag3" type="text" placeholder="输入商户店铺状态标签"/>
|
||||
<br>
|
||||
<div class="foot-button">
|
||||
<button @click="addTag(3)">确定</button>
|
||||
<button @click="closeDialog"> 取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "individual",
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
//添加用户标签
|
||||
tags1:[],
|
||||
tags2:[],
|
||||
tags3:[],
|
||||
newTag1:'',
|
||||
newTag2:'',
|
||||
newTag3:'',
|
||||
dialogOpen:null,
|
||||
merchantOptions:[
|
||||
{merchantName:'CM体育用品专卖店',merchantPhone:'0571-109xxx',merchantaddress:'浙江省杭州市萧山区',owningGrid:'盈丰街道',gridManager:'马龙',merchantIncome:1000000,intention:'否',
|
||||
recording:[{manager:"马龙",recordTime:"2024-08-10 13:45",active:"综合营销活动",backInformation:"无反馈"},
|
||||
{manager:"赵云",recordTime:"2024-07-20 15:25",active:"客户回馈活动",backInformation:"无反馈"}]}
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleUpdate(){},
|
||||
//编辑客户标签
|
||||
openDialog(type){
|
||||
this.dialogOpen = type;
|
||||
if(type === 1){
|
||||
this.newTag1 = '';
|
||||
}else if(type === 2){
|
||||
this.newTag2 = '';
|
||||
}else{
|
||||
this.newTag3 = '';
|
||||
}
|
||||
},
|
||||
addTag(type){
|
||||
if(type === 1 && this.newTag1.trim()){
|
||||
this.tags1.push(this.newTag1.trim());
|
||||
this.closeDialog();
|
||||
}else if(type === 2 && this.newTag2.trim()){
|
||||
this.tags2.push(this.newTag2.trim());
|
||||
this.closeDialog();
|
||||
}else if(type === 3 && this.newTag3.trim()){
|
||||
this.tags3.push(this.newTag3.trim());
|
||||
this.closeDialog();
|
||||
}
|
||||
},
|
||||
closeDialog(){
|
||||
this.dialogOpen = null;
|
||||
this.newTag1 = '';
|
||||
this.newTag2 = '';
|
||||
this.newTag3 = '';
|
||||
},
|
||||
removeTag(type,index){
|
||||
if(type === 1){
|
||||
this.tags1.splice(index,1);
|
||||
}else if(type === 2){
|
||||
this.tags2.splice(index,1);
|
||||
}else{
|
||||
this.tags3.splice(index,1);
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
handleBack(){
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title{
|
||||
color:rgb(25, 118, 155);
|
||||
font-weight:bold;
|
||||
background-color: rgb(161, 215, 236);
|
||||
height: 30px;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
/* border: 1px solid gray; */
|
||||
}
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.dialog {
|
||||
margin-top: -20%;
|
||||
height: 30%;
|
||||
width: 30%;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 5px;
|
||||
}
|
||||
.back{
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right: 5px;
|
||||
}
|
||||
.product{
|
||||
background-color: brown;
|
||||
margin: 5px 5px;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color:blue;
|
||||
}
|
||||
.tag-list {
|
||||
margin-top:20px;
|
||||
}
|
||||
.border-row {
|
||||
padding: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.border-col {
|
||||
border: 1px solid gray;
|
||||
height: 500px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
justify-content:left;
|
||||
align-items: center;
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
}
|
||||
li{
|
||||
list-style-type: none;
|
||||
padding: 8px;
|
||||
}
|
||||
.foot-button {
|
||||
margin-top: 20%;
|
||||
margin-left: 80%;
|
||||
}
|
||||
</style>
|
||||
169
ruoyi-ui/src/views/customer/charts/360charts/custContact.vue
Normal file
169
ruoyi-ui/src/views/customer/charts/360charts/custContact.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<el-collapse-item :name="nameKey">
|
||||
<template slot="title">
|
||||
<p class="common-title">客户接触记录</p>
|
||||
</template>
|
||||
<div class="message-box">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="widht: 100%"
|
||||
ighlight-current-row
|
||||
>
|
||||
<el-table-column label="客户名称" prop="custName" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="客户内码" prop="custIdn" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="柜员名称" prop="nickName" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="手机号" prop="mobile" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="计划电访日期" prop="telPlanDate" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="计划电访内容" prop="telPlanRemark" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="电访总结日期" prop="telSummaryDate" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="电访总结内容" prop="telSummaryRemark" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="计划面访日期" prop="visitPlanDate" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="计划面访内容" prop="visitPlanRemark" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="面访总结日期" prop="visitSummaryDate" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="面访总结内容" prop="visitSummaryRemark" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column label="更新时间" prop="updateTime" min-width="160" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</template>
|
||||
<script>
|
||||
import { custContactHis } from '@/api/task/custContactRecord.js'
|
||||
import { cloneDeep } from "lodash";
|
||||
import _ from "lodash";
|
||||
let _node = {};
|
||||
export default {
|
||||
props: {
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: 12,
|
||||
},
|
||||
custId: {
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
custId: {
|
||||
handler(newVal) {
|
||||
console.log('newVal', newVal)
|
||||
this.getInit()
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getInit() {
|
||||
console.log('custId', this.custId)
|
||||
if (!this.custId) return
|
||||
custContactHis({ custId: this.custId}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.tableData = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getInit()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.common-wrap-cnt {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
height: calc(100vh - 135px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-border {
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.create-form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 0 30px;
|
||||
.form-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.form-operate {
|
||||
}
|
||||
}
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.common-create-main {
|
||||
padding: 24px 30px;
|
||||
::v-deep .el-form {
|
||||
width: 70%;
|
||||
margin: 24px auto 0 auto;
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
.el-input__inner {
|
||||
border: 1px solid #ebebeb;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
color: #3d3d3d;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.is-required .el-form-item__label {
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
display: flex;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
43
ruoyi-ui/src/views/customer/charts/360charts/custEdu.js
Normal file
43
ruoyi-ui/src/views/customer/charts/360charts/custEdu.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export const custEduList = [
|
||||
{ label: '博士', value: '博士' },
|
||||
{ label: '博士研究生', value: '博士研究生' },
|
||||
{ label: '硕士', value: '硕士' },
|
||||
{ label: '硕士毕业', value: '硕士毕业' },
|
||||
{ label: '硕士生班', value: '硕士生班' },
|
||||
{ label: '双学士', value: '双学士' },
|
||||
{ label: '金融系统内研究生', value: '金融系统内研究生' },
|
||||
{ label: '大学本科', value: '大学本科' },
|
||||
{ label: '大学毕业', value: '大学毕业' },
|
||||
{ label: '金融系统本科', value: '金融系统本科' },
|
||||
{ label: '大学普通班', value: '大学普通班' },
|
||||
{ label: '党校大学本科', value: '党校大学本科' },
|
||||
{ label: '相当大学毕业', value: '相当大学毕业' },
|
||||
{ label: '大专和专科学校', value: '大专和专科学校' },
|
||||
{ label: '专科毕业', value: '专科毕业' },
|
||||
{ label: '大学专科', value: '大学专科' },
|
||||
{ label: '党校大专', value: '党校大专' },
|
||||
{ label: '大专证书班', value: '大专证书班' },
|
||||
{ label: '金融系统大专', value: '金融系统大专' },
|
||||
{ label: '相当专科毕业', value: '相当专科毕业' },
|
||||
{ label: '中等专业技术学校', value: '中等专业技术学校' },
|
||||
{ label: '中专毕业', value: '中专毕业' },
|
||||
{ label: '中技毕业', value: '中技毕业' },
|
||||
{ label: '相当中专或中技毕业', value: '相当中专或中技毕业' },
|
||||
{ label: '技工学校', value: '技工学校' },
|
||||
{ label: '技工学校毕业', value: '技工学校毕业' },
|
||||
{ label: '高中', value: '高中' },
|
||||
{ label: '高中毕业', value: '高中毕业' },
|
||||
{ label: '职业高中毕业', value: '职业高中毕业' },
|
||||
{ label: '农业高中毕业', value: '农业高中毕业' },
|
||||
{ label: '相当高中毕业', value: '相当高中毕业' },
|
||||
{ label: '初中', value: '初中' },
|
||||
{ label: '初中毕业', value: '初中毕业' },
|
||||
{ label: '职业初中毕业', value: '职业初中毕业' },
|
||||
{ label: '农业初中毕业', value: '农业初中毕业' },
|
||||
{ label: '相当初中毕业', value: '相当初中毕业' },
|
||||
{ label: '小学', value: '小学' },
|
||||
{ label: '小学毕业', value: '小学毕业' },
|
||||
{ label: '相当小学毕业', value: '相当小学毕业' },
|
||||
{ label: '文盲或半文盲', value: '文盲或半文盲' },
|
||||
{ label: '其他', value: '其他' },
|
||||
]
|
||||
434
ruoyi-ui/src/views/customer/charts/360charts/custom.vue
Normal file
434
ruoyi-ui/src/views/customer/charts/360charts/custom.vue
Normal file
@@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<el-collapse-item :name="nameKey">
|
||||
<template slot="title">
|
||||
<p class="common-title">自定义标签</p>
|
||||
</template>
|
||||
<div class="message-box">
|
||||
<div class="message-box-right">
|
||||
<div style="margin-bottom: 20px">
|
||||
<el-cascader-panel
|
||||
v-model="tagName"
|
||||
:options="selectTagsList"
|
||||
:props="tagProps"
|
||||
@change="tagChangeFn()"
|
||||
ref="cascader"
|
||||
></el-cascader-panel>
|
||||
</div>
|
||||
<el-tag
|
||||
v-for="(item, index) in showTagsList"
|
||||
:key="index"
|
||||
:type="item.enableFlag == true ? '' : 'info'"
|
||||
:style="{
|
||||
'margin-right': '15px',
|
||||
'margin-bottom': '12px',
|
||||
cursor: editTag ? 'pointer' : 'default',
|
||||
}"
|
||||
:closable="editTag && item.enableFlag == true"
|
||||
@click="handleClickTag(item)"
|
||||
@close="handleCloseTag(item)"
|
||||
>{{ editTag ? item.pathLabels : item.names }}</el-tag
|
||||
>
|
||||
<div>
|
||||
<el-button
|
||||
v-if="!editTag"
|
||||
size="mini"
|
||||
type="primary"
|
||||
:disabled="selectTagsList.length === 0"
|
||||
@click="handleEditTag()"
|
||||
>
|
||||
编辑标签状态
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="!editTag"
|
||||
size="mini"
|
||||
type="primary"
|
||||
:disabled="tagName.length === 0"
|
||||
@click="resetTag()"
|
||||
>
|
||||
重置标签
|
||||
</el-button>
|
||||
<el-button v-if="editTag" size="mini" @click="handleCancelEditTag()"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="editTag"
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="handleSaveTag()"
|
||||
>点亮标签</el-button
|
||||
>
|
||||
<!-- <el-input
|
||||
style="margin-left: 20px"
|
||||
v-if="editTag"
|
||||
v-model="addTagName"
|
||||
size="mini"
|
||||
placeholder="请输入新增客户标签"
|
||||
/>
|
||||
<el-button
|
||||
style="margin-left: 20px"
|
||||
v-if="editTag"
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="handleAddTag('ADD')"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-left: 20px"
|
||||
v-if="editTag"
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="handleAddTag('UPDATE')"
|
||||
>
|
||||
修改
|
||||
</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</template>
|
||||
<script>
|
||||
import { editCustTag1 } from "@/api/system/listByRetailKeywords.js";
|
||||
import { cloneDeep } from "lodash";
|
||||
import _ from "lodash";
|
||||
let _node = {};
|
||||
export default {
|
||||
props: {
|
||||
tagManualList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
nameKey: {
|
||||
type: String,
|
||||
default: 0,
|
||||
},
|
||||
typeKey: {
|
||||
type: String,
|
||||
default: 'ls',
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
tagManualList: {
|
||||
handler(newVal) {
|
||||
const val = cloneDeep(newVal)
|
||||
this.getInitTags(val)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editTag: false,
|
||||
tagName: [],
|
||||
tagProps: {
|
||||
label: "names",
|
||||
value: "id",
|
||||
children: "children",
|
||||
checkStrictly: true,
|
||||
},
|
||||
selectTagsList: [],
|
||||
showTagsList: [],
|
||||
addTagName: "",
|
||||
newCustTag: [],
|
||||
siblingsNodes: [],
|
||||
childrenNodes: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getInitTags(val) {
|
||||
this.selectTagsList = this.filterNodes(val);
|
||||
if (this.tagName.length) {
|
||||
const currentNode = this.$refs.cascader.getCheckedNodes()[0]
|
||||
this.siblingsNodes = currentNode?.parent ? currentNode?.parent?.children??[] : this.selectTagsList // 同级数据
|
||||
// this.childrenNodes = currentNode?.children??[] // 子级数据
|
||||
|
||||
const pathLabels = currentNode?.pathLabels?.join('-')
|
||||
this.childrenNodes = this.findChildNodes(this.tagManualList)
|
||||
this.showTagsList = this.childrenNodes.filter(v => v.children.length === 0).map(v => ({ ...v, pathLabels: `${pathLabels}-${v.names}` })) // 要点亮的标签
|
||||
} else {
|
||||
this.showTagsList = this.collectNamesWithFlagALL(this.tagManualList, '');
|
||||
}
|
||||
},
|
||||
filterNodes(nodes) {
|
||||
// return nodes.map((node) => {
|
||||
// if (node.children) {
|
||||
// if (node.children.length === 0) {
|
||||
// node.disabled = true
|
||||
// delete node.children
|
||||
// } else {
|
||||
// this.filterNodes(node.children)
|
||||
// }
|
||||
// }
|
||||
// return node;
|
||||
// });
|
||||
const newNodes = nodes.filter(child => child.children.length > 0)
|
||||
return newNodes.map((node) => {
|
||||
if (node.children) {
|
||||
if (node.children.length === 0) {
|
||||
delete node.children
|
||||
} else {
|
||||
node.children = node.children.filter(child => child.children.length > 0)
|
||||
if (node.children.length === 0) {
|
||||
delete node.children
|
||||
} else {
|
||||
this.filterNodes(node.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
return node;
|
||||
});
|
||||
},
|
||||
handleAddTag(type) {
|
||||
if (!this.addTagName) {
|
||||
this.$message.error("请输入客户标签");
|
||||
return;
|
||||
}
|
||||
const dataNodes = type === 'ADD' ? this.childrenNodes : this.siblingsNodes
|
||||
let existsFlag = dataNodes.findIndex(tag => tag.names === this.addTagName || tag.label === this.addTagName)
|
||||
if (existsFlag >= 0) {
|
||||
this.$message.error("客户标签已存在");
|
||||
return;
|
||||
}
|
||||
const chooseId = this.tagName.length
|
||||
? this.tagName[this.tagName.length - 1]
|
||||
: '';
|
||||
this.newCustTag = [{
|
||||
parentId: chooseId,
|
||||
custTagName: this.addTagName,
|
||||
custTagType: this.typeKey, // 企业客户传gs，商户和个人传ls
|
||||
}];
|
||||
const params = type === 'ADD' ?
|
||||
// 新增
|
||||
{
|
||||
custTagLight: [], // 点亮的标签列表
|
||||
custId: this.$route.query.custId,
|
||||
newManualTag: this.newCustTag, // 新增的标签列表
|
||||
updateManualTags: [], // 修改的标签列表
|
||||
} :
|
||||
// 修改
|
||||
{
|
||||
custTagLight: [], // 点亮的标签列表
|
||||
custId: this.$route.query.custId,
|
||||
newManualTag: [], // 新增的标签列表
|
||||
updateManualTags: [{
|
||||
id: chooseId,
|
||||
custTagName: this.addTagName,
|
||||
}], // 修改的标签列表
|
||||
}
|
||||
this.addTagName = "";
|
||||
editCustTag1(params).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success(type === 'ADD' ? "新增成功" : "修改成功");
|
||||
this.$emit('getDetailData')
|
||||
}
|
||||
});
|
||||
},
|
||||
handleEditTag() {
|
||||
this.editTag = true;
|
||||
},
|
||||
handleCancelEditTag(type) {
|
||||
this.handleSaveTag()
|
||||
this.editTag = false;
|
||||
this.tagName = []
|
||||
},
|
||||
collectNamesWithFlagALL(nodes, parentName = '') {
|
||||
return _.flatMap(nodes, (node) => {
|
||||
// 1. 收集当前节点
|
||||
const pathLabels = parentName ? `${parentName}-${node.names}` : node.names
|
||||
const current = node.children.length === 0 ? [{ ...node, pathLabels }] : []
|
||||
// 2. 递归处理 children（若存在）并获取子节点中符合的 name
|
||||
const children = _.get(node, "children", []);
|
||||
const childNames = children.length
|
||||
? this.collectNamesWithFlagALL(children, pathLabels) // 递归处理子节点
|
||||
: [];
|
||||
// 3. 合并当前节点和子节点的结果
|
||||
return [...current, ...childNames];
|
||||
});
|
||||
},
|
||||
collectNamesWithFlagTrue(nodes) {
|
||||
return _.flatMap(nodes, (node) => {
|
||||
// 1. 收集当前节点的name（若 flag 为 true）
|
||||
const current = node.enableFlag ? [{ custTagName: node.names, id: node.id }] : []
|
||||
// 2. 递归处理 children（若存在）并获取子节点中符合的 name
|
||||
const children = _.get(node, "children", []);
|
||||
const childNames = children.length
|
||||
? this.collectNamesWithFlagTrue(children) // 递归处理子节点
|
||||
: [];
|
||||
// 3. 合并当前节点和子节点的结果
|
||||
return [...current, ...childNames];
|
||||
});
|
||||
},
|
||||
handleSaveTag() {
|
||||
const custTagList = this.collectNamesWithFlagTrue(this.tagManualList);
|
||||
this.showTagsList.map(item => {
|
||||
if (item.enableFlag) {
|
||||
const index = custTagList.findIndex(tag => tag.id === item.id)
|
||||
if (index < 0) {
|
||||
custTagList.push({
|
||||
custTagName: item.names,
|
||||
id: item.id
|
||||
})
|
||||
}
|
||||
} else {
|
||||
const index = custTagList.findIndex(tag => tag.id === item.id)
|
||||
if (index > -1) {
|
||||
custTagList.splice(index, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
editCustTag1({
|
||||
custTagLight: custTagList, // 点亮的标签列表
|
||||
custId: this.$route.query.custId,
|
||||
newManualTag: [], // 新增的标签列表
|
||||
updateManualTags: [], // 修改的标签列表
|
||||
}).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success("标签修改成功");
|
||||
this.$emit('getDetailData')
|
||||
}
|
||||
});
|
||||
},
|
||||
tagChangeFn() {
|
||||
this.showTagsList = [];
|
||||
if (this.tagName.length > 0) {
|
||||
const currentNode = this.$refs.cascader.getCheckedNodes()[0]
|
||||
this.siblingsNodes = currentNode?.parent ? currentNode?.parent?.children??[] : this.selectTagsList // 同级数据
|
||||
// this.childrenNodes = currentNode?.children??[] // 子级数据
|
||||
// this.childrenNodes.map(item => {
|
||||
// if (item.children.length === 0) {
|
||||
// this.showTagsList.push({
|
||||
// ...item.data,
|
||||
// pathLabels: item?.pathLabels?.join('-')
|
||||
// }) // 要点亮的标签
|
||||
// }
|
||||
// })
|
||||
const pathLabels = currentNode?.pathLabels?.join('-')
|
||||
this.childrenNodes = this.findChildNodes(this.tagManualList)
|
||||
this.showTagsList = this.childrenNodes.filter(v => v.children.length === 0).map(v => ({ ...v, pathLabels: `${pathLabels}-${v.names}` })) // 要点亮的标签
|
||||
}
|
||||
},
|
||||
resetTag() {
|
||||
this.tagName = []
|
||||
this.showTagsList = this.collectNamesWithFlagALL(this.tagManualList, '');
|
||||
},
|
||||
findChildNodes(nodes) {
|
||||
for (let node of nodes) {
|
||||
if (node.id === this.tagName[this.tagName.length - 1]) {
|
||||
return node.children
|
||||
} else if (node.children) {
|
||||
const found = this.findChildNodes(node.children)
|
||||
if (found) {
|
||||
return found
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleClickTag(val) {
|
||||
if (!this.editTag || val.enableFlag == true) return
|
||||
this.showTagsList.filter(
|
||||
(item) => item.id === val.id
|
||||
)[0].enableFlag = true
|
||||
},
|
||||
handleCloseTag(val) {
|
||||
this.showTagsList.filter(
|
||||
(item) => item.id === val.id
|
||||
)[0].enableFlag = false
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.common-wrap-cnt {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
height: calc(100vh - 135px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-border {
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.create-form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 0 30px;
|
||||
.form-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.form-operate {
|
||||
}
|
||||
}
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.common-create-main {
|
||||
padding: 24px 30px;
|
||||
::v-deep .el-form {
|
||||
width: 70%;
|
||||
margin: 24px auto 0 auto;
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
.el-input__inner {
|
||||
border: 1px solid #ebebeb;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
color: #3d3d3d;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.is-required .el-form-item__label {
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-box {
|
||||
display: flex;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
154
ruoyi-ui/src/views/customer/charts/360charts/family/index.vue
Normal file
154
ruoyi-ui/src/views/customer/charts/360charts/family/index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="wapper">
|
||||
<section class="search-box">
|
||||
<section class="search-cnt">
|
||||
<el-input v-model="searchQuery" placeholder="输入客户名称/证件号/手机号" clearable @clear="handleSearch(searchQuery)"
|
||||
@keyup.enter.native="handleSearch(searchQuery)">
|
||||
</el-input>
|
||||
<section class="search-btn" @click="handleSearch(searchQuery)">
|
||||
<i class="el-icon-search"></i>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="table-wrap">
|
||||
<el-table :data="tableData" style="width: 100%" v-loading="loading">
|
||||
<el-table-column align="center" label="客户姓名" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCustDetail(scope.row.custIdc)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="custIdc" label="证件号" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCustDetail(scope.row.custIdc)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="custPhone" label="联系方式" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column align="center" prop="custId" label="客户号" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
<div class="personPage">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,sizes,prev,pager,next,sizes"
|
||||
:total="total" :current-page="pageNum"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listByKeyword } from '@/api/system/listByRetailKeywords.js'
|
||||
import { Message } from 'element-ui'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
tableData: [{
|
||||
custName: '张三',
|
||||
id: '164320313',
|
||||
phone: '13111111111',
|
||||
custId: '31239435'
|
||||
}],
|
||||
loading: false,
|
||||
pageSize:10,
|
||||
pageNum:1,
|
||||
total:null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initTableData()
|
||||
},
|
||||
methods: {
|
||||
initTableData() {
|
||||
this.loading = true
|
||||
listByKeyword({ keyword: this.searchQuery, pageSize: this.pageSize, pageNum: this.pageNum, orderByColumn: 'updateTime' })
|
||||
.then((res) => {
|
||||
|
||||
this.tableData = res.data
|
||||
this.total = res.total
|
||||
this.loading = false
|
||||
})
|
||||
.catch((err) => console.error(err))
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.initTableData()
|
||||
},
|
||||
handleCustDetail(custIdc) {
|
||||
if(custIdc){
|
||||
this.$router.push({ path: '/360charts/familyDetail', query: { custIdc: custIdc } })
|
||||
}else{
|
||||
Message.warning('该客户无证件号，故无法查看家庭图谱')
|
||||
}
|
||||
},
|
||||
handleCurrentChange(newPage){
|
||||
this.pageNum = newPage
|
||||
this.initTableData()
|
||||
},
|
||||
handleSizeChange(newSize){
|
||||
this.pageSize = newSize
|
||||
this.initTableData()
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 24px 0 0 0;
|
||||
|
||||
.search-cnt {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 23px;
|
||||
border: 1px solid #ebebeb;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
border: 1px solid #4886f8;
|
||||
background-color: #4886f8;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
.el-icon-search {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="back_btn"></div>
|
||||
<FamilyMember v-if="showComponent" @refshHome="refshHome" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FamilyMember from './components/FamilyMember.vue'
|
||||
|
||||
export default{
|
||||
components:{
|
||||
FamilyMember
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showComponent:true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refshHome(data){
|
||||
if(data =='1'){
|
||||
this.showComponent = false
|
||||
this.$nextTick(()=>{
|
||||
this.showComponent = true
|
||||
})
|
||||
}
|
||||
},
|
||||
goBackToIndex() {
|
||||
this.$router.push(
|
||||
{ path: '/customer/family' }
|
||||
)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#app{
|
||||
background-color: rgb(219,228,241);
|
||||
margin-top: -130px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
2408
ruoyi-ui/src/views/customer/charts/360charts/firm/index.vue
Normal file
2408
ruoyi-ui/src/views/customer/charts/360charts/firm/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
3
ruoyi-ui/src/views/customer/charts/360charts/index.vue
Normal file
3
ruoyi-ui/src/views/customer/charts/360charts/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -0,0 +1,83 @@
|
||||
.common-wrap-cnt {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
height: calc(100vh - 135px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-border {
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.create-form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 0 30px;
|
||||
.form-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.form-operate {
|
||||
}
|
||||
}
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.common-create-main {
|
||||
padding: 24px 30px;
|
||||
::v-deep .el-form {
|
||||
width: 70%;
|
||||
margin: 24px auto 0 auto;
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
.el-input__inner {
|
||||
border: 1px solid #ebebeb;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
color: #3d3d3d;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.is-required .el-form-item__label {
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
2967
ruoyi-ui/src/views/customer/charts/360charts/indexcharts/index.vue
Normal file
2967
ruoyi-ui/src/views/customer/charts/360charts/indexcharts/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<el-card class="customer-profile">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>客户资料</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" @click="saveAll">保存</el-button>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-edit" @click="editProfile">{{ editText }}</el-button>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-arrow-left" @click="goBackToIndex">返回</el-button>
|
||||
</div>
|
||||
<el-form ref="profileForm" :model="profile" label-width="120px" :rules="rules" v-if="profile">
|
||||
<el-form-item label="客户号" prop="custId">
|
||||
<span v-if="!isEditing">{{ profile.custId }}</span>
|
||||
<el-input v-model="profile.custId" disabled v-if="isEditing"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户名" prop="custName">
|
||||
<span v-if="!isEditing">{{ profile.custName }}</span>
|
||||
<el-input v-model="profile.custName" v-if="isEditing" maxlength="50"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="custGender">
|
||||
<span v-if="!isEditing">{{ profile.custGender }}</span>
|
||||
<el-radio-group v-if="isEditing" v-model="profile.custGender">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="custPhone">
|
||||
<span v-if="!isEditing">{{ profile.custPhone }}</span>
|
||||
<el-input v-model="profile.custPhone" v-if="isEditing" maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<!-- <span v-if="!isEditing">{{profile.birthday}}</span> -->
|
||||
<el-date-picker
|
||||
v-model="profile.birthday"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-if="!isEditing"
|
||||
disabled
|
||||
></el-date-picker>
|
||||
<el-date-picker
|
||||
v-model="profile.birthday"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
@change="dateChange"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-if="isEditing"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="belongBusi">
|
||||
<span v-if="!isEditing">{{ profile.belongBusi }}</span>
|
||||
<el-input v-model="profile.belongBusi" v-if="isEditing" maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="年收入" prop="custSalary">
|
||||
<span v-if="!isEditing">{{ profile.custSalary }}</span>
|
||||
<el-input v-model="profile.custSalary" v-if="isEditing"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="风险评估" prop="risk">
|
||||
<span v-if="!isEditing">{{ profile.risk }}</span>
|
||||
<el-select v-model="profile.risk" v-if="isEditing">
|
||||
<el-option label="保守型" value="conservative"></el-option>
|
||||
<el-option label="稳健型" value="moderate"></el-option>
|
||||
<el-option label="积极型" value="aggressive"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户经理" prop="belongUserName">
|
||||
<span v-if="!isEditing">{{ profile.belongUserName }}</span>
|
||||
<el-input v-model="profile.belongUserName" v-if="isEditing" maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户标记" prop="custType">
|
||||
<span v-if="!isEditing">{{ profile.custType }}</span>
|
||||
<el-input v-model="profile.custType" v-if="isEditing" maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户银行" prop="activeBranchName">
|
||||
<span v-if="!isEditing">{{ profile.activeBranchName }}</span>
|
||||
<el-input v-model="profile.activeBranchName" v-if="isEditing" maxlength="100"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户标签" prop="label">
|
||||
<div v-for="tag in tags" :key="tag" class="tag-box">{{ tag }}</div>
|
||||
<el-input v-if="isEditing" v-model="newTag" placeholder="输入标签并以逗号分隔"></el-input>
|
||||
<el-button v-if="isEditing" icon="el-icon-plus" size="mini" @click="addLabel">添加标签</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <div v-if="isEditing">
|
||||
<el-button type="primary" @click="saveProfile">保存</el-button>
|
||||
<el-button @click="cancelEdit">取消</el-button>
|
||||
</div> -->
|
||||
<el-timeline v-if="visitRecords.length > 0">
|
||||
<el-timeline-item v-for="(record, index) in visitRecords" :key="index" :timestamp="record.date">
|
||||
<el-card>
|
||||
<h4>{{ record.product }}</h4>
|
||||
<p>走访记录：{{ profile.belongUserName }}{{ record.record }}</p>
|
||||
<p>客户反馈：无反馈</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-button v-if="!visitRecords.length > 0" type="text">暂无走访记录</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateCust } from '@/api/system/listByRetailKeywords.js'
|
||||
export default {
|
||||
data() {
|
||||
var validatePhone = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入手机号'))
|
||||
}
|
||||
const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
|
||||
if (!regExp.test(value)) {
|
||||
this.showCode = false
|
||||
this.canClick = false
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
this.canClick = true
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
isEditing: false,
|
||||
editText: '编辑资料',
|
||||
newTag: '',
|
||||
tags: [],
|
||||
profile: {},
|
||||
visitRecords: [
|
||||
{
|
||||
date: '2024-08-10',
|
||||
product: '定期存单',
|
||||
record: '在2024-08-10 13:45进行了走访',
|
||||
feedback: '客户标签：待定'
|
||||
},
|
||||
{
|
||||
date: '2024-08-11',
|
||||
product: '存货款',
|
||||
record: '结束了综合营销活动',
|
||||
feedback: '客户反馈：无反馈'
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
custName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
custPhone: [{ required: true, validator: validatePhone, trigger: 'change' }],
|
||||
birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
|
||||
belongBusi: [{ required: true, message: '请输入所属行业', trigger: 'blur' }],
|
||||
custGender: [{ required: true, message: '请输入性别', trigger: 'change' }],
|
||||
custSalary: [{ required: true, message: '请输入年收入', trigger: 'blur' }],
|
||||
risk: [{ required: true, message: '请选择风险评估', trigger: 'change' }],
|
||||
belongUserName: [{ required: true, message: '请输入客户经理', trigger: 'blur' }],
|
||||
custType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入客户标志',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
activeBranchName: [{ required: true, message: '请输入开户银行', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const custInfo = JSON.parse(this.$route.query.response)
|
||||
console.log(custInfo, '-----')
|
||||
|
||||
this.profile = {
|
||||
id: custInfo.id,
|
||||
custName: custInfo.custName,
|
||||
custId: custInfo.custId,
|
||||
custPhone: custInfo.custPhone,
|
||||
birthday: new Date(`${custInfo.birthday}`),
|
||||
belongBusi: custInfo.belongBusi,
|
||||
custSalary: custInfo.custSalary + `w`,
|
||||
risk: custInfo.risk,
|
||||
belongUserName: custInfo.belongUserName,
|
||||
custGender: custInfo.custGender,
|
||||
custType: custInfo.custType == 0 ? '营销中' : custInfo.custType == 1 ? '已签约' : '未营销',
|
||||
activeBranchName: custInfo.activeBranchName,
|
||||
label: custInfo.label
|
||||
}
|
||||
console.log(custInfo, this.profile)
|
||||
this.splitTags()
|
||||
},
|
||||
methods: {
|
||||
dateChange(val) {
|
||||
console.log(val)
|
||||
},
|
||||
goBackToIndex() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
splitTags() {
|
||||
const tagsArray = this.profile.label
|
||||
.replace(/,\s*/g, ',')
|
||||
.split(/,\s*|\s+/)
|
||||
.map((tag) => tag.trim())
|
||||
this.tags = tagsArray.filter((tag) => tag)
|
||||
},
|
||||
editProfile() {
|
||||
this.isEditing = !this.isEditing
|
||||
if (this.isEditing === true) {
|
||||
this.editText = '退出编辑'
|
||||
} else {
|
||||
this.editText = '编辑资料'
|
||||
}
|
||||
},
|
||||
saveProfile() {
|
||||
this.$refs.profileForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 在这里添加保存数据的逻辑
|
||||
console.log('保存客户资料:', this.profile)
|
||||
this.$message.success('客户资料已保存')
|
||||
this.isEditing = false
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
saveAll() {
|
||||
this.profile.label = this.tags.join(',')
|
||||
// this.profile.custSalary = this.profile.custSalary.slice(0,-1)
|
||||
console.log(this.profile)
|
||||
updateCust(this.profile).then((response) => {
|
||||
console.log(response)
|
||||
})
|
||||
this.isEditing = false
|
||||
this.editText = '编辑资料'
|
||||
},
|
||||
cancelEdit() {
|
||||
this.isEditing = false
|
||||
},
|
||||
addLabel() {
|
||||
if (this.newTag) {
|
||||
const newTags = this.newTag.split(',').map((tag) => tag.trim())
|
||||
this.tags = [...this.tags, ...newTags]
|
||||
console.log(this.tags)
|
||||
this.newTag = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.customer-profile >>> .el-card__header {
|
||||
padding: 15px 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.customer-profile >>> .el-timeline {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.customer-profile >>> .el-timeline-item__timestamp {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.customer-profile >>> .el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.customer-profile >>> .el-input__inner,
|
||||
.customer-profile >>> .el-select,
|
||||
.customer-profile >>> .el-date-editor {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.customer-profile >>> .el-form-item__label {
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.customer-profile >>> .el-form-item__content {
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
1703
ruoyi-ui/src/views/customer/charts/360charts/individual/index.vue
Normal file
1703
ruoyi-ui/src/views/customer/charts/360charts/individual/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<el-row class="title">
|
||||
<el-radio-group v-model="selectedTab">
|
||||
<el-radio-button label="个人">个人</el-radio-button>
|
||||
<el-radio-button disabled label="企业">企业</el-radio-button>
|
||||
<el-radio-button disabled label="商户">商户</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row v-if="showSearch" class="searchBox">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="输入客户名/证件号/手机号"
|
||||
style="width: 20%"
|
||||
clearable
|
||||
@clear="handleSearch(searchQuery)"
|
||||
@keyup.enter.native="handleSearch(searchQuery)"
|
||||
></el-input>
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
@click="handleSearch(searchQuery)"
|
||||
></el-button>
|
||||
</el-row>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" style="margin:20px 10px 0 10px; z-index: 2"></right-toolbar>
|
||||
<el-row>
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custName"
|
||||
prop="custName"
|
||||
width="400"
|
||||
label="客户姓名"
|
||||
show-overflow-tooltip
|
||||
v-if="columns[0].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custIdc"
|
||||
prop="custIdc"
|
||||
label="证件号"
|
||||
v-if="columns[1].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custPhone"
|
||||
prop="custPhone"
|
||||
label="手机号"
|
||||
v-if="columns[2].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custId"
|
||||
prop="custId"
|
||||
label="客户号"
|
||||
v-if="columns[3].visible"
|
||||
></el-table-column>
|
||||
<el-table-column prop="operate" label="操作" width="120px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="handleCustDetail(scope.row.id)"
|
||||
>查看详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="total"
|
||||
:current-page="pageNum"
|
||||
></el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listByKeyword,listSelectDetail } from "@/api/system/listByRetailKeywords.js";
|
||||
// const getToken = require('@/utils/auth.js')
|
||||
import {getToken} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showSearch:true,
|
||||
selectedTab: "个人",
|
||||
tableData: [],
|
||||
total: 0,
|
||||
pageSize:10,
|
||||
pageNum:1,
|
||||
searchQuery: "",
|
||||
columns: [
|
||||
{ key: 0, label: "客户姓名", visible: true },
|
||||
{ key: 1, label: "证件号", visible: true },
|
||||
{ key: 2, label: "手机号", visible: true },
|
||||
{ key: 3, label: "客户号", visible: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
listByKeyword({keyword:this.searchQuery,pageSize:this.pageSize,pageNum:this.pageNum}).then((res) => {
|
||||
this.tableData = res.rows;
|
||||
this.total = res.total;
|
||||
}).catch(err => console.error(err)).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.handleCurrentChange(1)
|
||||
},
|
||||
handleCustDetail(id) {
|
||||
listSelectDetail(id).then(res=> {
|
||||
this.$router.push({path:'/360charts/indexcharts/',query:{response:JSON.stringify(res.data)}})
|
||||
})
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
this.getList();
|
||||
// this.handleSearch()
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
// console.log(newPage);
|
||||
this.pageNum = newPage;
|
||||
// this.handleSearch()
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<el-row class="title">
|
||||
<el-radio-group v-model="selectedTab">
|
||||
<el-radio-button label="个人">个人</el-radio-button>
|
||||
<el-radio-button disabled label="企业">企业</el-radio-button>
|
||||
<el-radio-button disabled label="商户">商户</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row v-if="showSearch" class="searchBox">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="输入客户名/证件号/手机号"
|
||||
style="width: 20%"
|
||||
clearable
|
||||
@clear="handleSearch(searchQuery)"
|
||||
@keyup.enter.native="handleSearch(searchQuery)"
|
||||
></el-input>
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
@click="handleSearch(searchQuery)"
|
||||
></el-button>
|
||||
</el-row>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" style="margin:20px 10px 0 10px; z-index: 2"></right-toolbar>
|
||||
<el-row>
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custName"
|
||||
prop="custName"
|
||||
width="400"
|
||||
label="客户姓名"
|
||||
show-overflow-tooltip
|
||||
v-if="columns[0].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custIdc"
|
||||
prop="custIdc"
|
||||
label="证件号"
|
||||
v-if="columns[1].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custPhone"
|
||||
prop="custPhone"
|
||||
label="手机号"
|
||||
v-if="columns[2].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custId"
|
||||
prop="custId"
|
||||
label="客户号"
|
||||
v-if="columns[3].visible"
|
||||
></el-table-column>
|
||||
<el-table-column prop="operate" label="操作" width="120px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="handleCustDetail(scope.row.id)"
|
||||
>查看详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="total"
|
||||
:current-page="pageNum"
|
||||
></el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listByKeyword,listSelectDetail } from "@/api/system/listByRetailKeywords.js";
|
||||
// const getToken = require('@/utils/auth.js')
|
||||
import {getToken} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
showSearch:true,
|
||||
selectedTab: "个人",
|
||||
tableData: [],
|
||||
total: 0,
|
||||
pageSize:10,
|
||||
pageNum:1,
|
||||
searchQuery: "",
|
||||
columns: [
|
||||
{ key: 0, label: "客户姓名", visible: true },
|
||||
{ key: 1, label: "证件号", visible: true },
|
||||
{ key: 2, label: "手机号", visible: true },
|
||||
{ key: 3, label: "客户号", visible: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
listByKeyword({keyword:this.searchQuery,pageSize:this.pageSize,pageNum:this.pageNum}).then((res) => {
|
||||
this.tableData = res.rows;
|
||||
this.total = res.total;
|
||||
}).catch(err => console.error(err)).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 100)
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.handleCurrentChange(1)
|
||||
},
|
||||
handleCustDetail(id) {
|
||||
listSelectDetail(id).then(res=> {
|
||||
this.$router.push({path:'/360charts/indexcharts/',query:{response:JSON.stringify(res.data)}})
|
||||
})
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
this.getList();
|
||||
// this.handleSearch()
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
// console.log(newPage);
|
||||
this.pageNum = newPage;
|
||||
// this.handleSearch()
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
147
ruoyi-ui/src/views/customer/charts/360charts/merchant/index.vue
Normal file
147
ruoyi-ui/src/views/customer/charts/360charts/merchant/index.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<el-row class="title">
|
||||
<el-radio-group v-model="selectedTab">
|
||||
<el-radio-button label="个人">个人</el-radio-button>
|
||||
<el-radio-button :disable="true" label="企业">企业</el-radio-button>
|
||||
<el-radio-button :disable="true" label="商户">商户</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row class="searchBox">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="输入客户名/证件号/手机号"
|
||||
style="width: 20%"
|
||||
clearable
|
||||
@clear="handleSearch(searchQuery)"
|
||||
@keyup.enter.native="handleSearch(searchQuery)"
|
||||
></el-input>
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
@click="handleSearch(searchQuery)"
|
||||
></el-button>
|
||||
</el-row>
|
||||
|
||||
<right-toolbar
|
||||
:handleSearch.sync="handleSearch"
|
||||
@queryTable="getList"
|
||||
:columns="columns"
|
||||
style="margin: 20px 10px 0 10px"
|
||||
></right-toolbar>
|
||||
<el-row>
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custName"
|
||||
prop="custName"
|
||||
label="客户姓名"
|
||||
v-if="columns[0].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custIdc"
|
||||
prop="custIdc"
|
||||
label="证件号"
|
||||
v-if="columns[1].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
key="custPhone"
|
||||
prop="custPhone"
|
||||
label="手机号"
|
||||
v-if="columns[2].visible"
|
||||
></el-table-column>
|
||||
<el-table-column prop="operate" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleCustDetail(scope.row.id)"
|
||||
>查看详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="total"
|
||||
:current-page="pageNum"
|
||||
></el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listByKeyword,listSelectDetail } from "@/api/system/listByRetailKeywords.js";
|
||||
// const getToken = require('@/utils/auth.js')
|
||||
import {getToken} from '@/utils/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedTab: "个人",
|
||||
tableData: [],
|
||||
total: 0,
|
||||
pageSize:10,
|
||||
pageNum:1,
|
||||
searchQuery: "",
|
||||
columns: [
|
||||
{ key: 0, label: "客户姓名", visible: true },
|
||||
{ key: 1, label: "证件号", visible: true },
|
||||
{ key: 2, label: "手机号", visible: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
listByKeyword({pageSize:this.pageSize,pageNum:this.pageNum}).then((res) => {
|
||||
this.tableData = res.rows;
|
||||
this.total = res.total;
|
||||
});
|
||||
},
|
||||
handleSearch() {
|
||||
listByKeyword({keyword:this.searchQuery,pageSize:this.pageSize,pageNum:this.pageNum}).then((res) => {
|
||||
this.tableData = res.rows;
|
||||
this.total = res.total;
|
||||
});
|
||||
},
|
||||
handleCustDetail(id) {
|
||||
listSelectDetail(id).then(res=> {
|
||||
console.log(res);
|
||||
})
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
this.getList();
|
||||
// this.handleSearch()
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
// console.log(newPage);
|
||||
this.pageNum = newPage;
|
||||
// this.handleSearch()
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
3
ruoyi-ui/src/views/customer/charts/index.vue
Normal file
3
ruoyi-ui/src/views/customer/charts/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="group-check-cnt">
|
||||
<el-checkbox
|
||||
v-if="!notAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
>全部</el-checkbox
|
||||
>
|
||||
<el-checkbox-group v-model="checkedVal" @change="handleCheckedChange">
|
||||
<el-checkbox
|
||||
v-for="item in groupArr"
|
||||
:label="item.key"
|
||||
:key="item.key"
|
||||
class="el-checkbox"
|
||||
|
||||
>
|
||||
<span class="span-label" @click="focusBox(item.ref)">
|
||||
{{ item.label }}<i v-if="!!item.arr" class="el-icon-arrow-down" />
|
||||
</span>
|
||||
<el-cascader
|
||||
style="width: 100px"
|
||||
placeholder=""
|
||||
v-model="item[key]"
|
||||
:options="item.arr"
|
||||
:ref="item.ref"
|
||||
class="mycascader"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
groupArr: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
notAll: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
groupArr: {
|
||||
handler: function(arr) {
|
||||
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkedVal: [],
|
||||
isIndeterminate: false,
|
||||
checkAll: false,
|
||||
isDropdownVisible: false,
|
||||
origon:'',
|
||||
industry:'',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
focusBox(ref) {
|
||||
console.log(11111111);
|
||||
this.isDropdownVisible = !this.isDropdownVisible;
|
||||
console.log(this.isDropdownVisible, "this.isDropdownVisible");
|
||||
this.$nextTick(() => {
|
||||
this.$refs[ref].dropDownVisible = this.isDropdownVisible;
|
||||
});
|
||||
if (this.isDropdownVisible) {
|
||||
console.log(this.$refs[ref])
|
||||
this.$refs[ref][0].$el.querySelector(".el-input__suffix").click();
|
||||
}
|
||||
},
|
||||
isBlurDropdown(value) {
|
||||
console.log(value);
|
||||
this.isDropdownVisible = value;
|
||||
},
|
||||
handleCheckedChange(value) {
|
||||
const checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.groupArr.length;
|
||||
this.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < this.groupArr.length;
|
||||
this.$emit("onGroupChange", this.checkedVal);
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedVal = val ? this.groupArr?.map((ot) => ot.value) : [];
|
||||
this.isIndeterminate = false;
|
||||
this.$emit("onGroupChange", this.checkedVal);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group-check-cnt {
|
||||
> .el-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #3d3d3d;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding-left: 6px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
}
|
||||
.quesiton {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #b9b9b9;
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
top: -6px;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 14px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.el-checkbox {
|
||||
position: relative !important;
|
||||
.span-label{
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
top: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
.mycascader{
|
||||
|
||||
}
|
||||
::v-deep .el-cascader .el-input .el-input__inner {
|
||||
border: none !important;
|
||||
}
|
||||
::v-deep .el-cascader .el-input .el-input__suffix {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-cascader .el-cascader__tags{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,259 @@
|
||||
const title_dict = {
|
||||
origonNm: '省份地区',
|
||||
belongBusinessList: '所在行业',
|
||||
startDateIntervalList: '成立年限',
|
||||
statusList: '经营状态',
|
||||
registerAll: '注册资本',
|
||||
giveAll: '实缴资本',
|
||||
isPhoneNumber: '有无联系电话',
|
||||
isEmail: '有无邮箱地址',
|
||||
companyTypeList: '机构类型',
|
||||
isHasBranchFlag: '是否有分支机构',
|
||||
isBranchFlag: '是否为分支机构',
|
||||
businessInfoPenInsurIntervalList: '养老保险参保人数',
|
||||
businessInfoMediInsurIntervalList: '医疗保险参保人数',
|
||||
nsxydjList: '纳税信用等级',
|
||||
businessInfoImExportFlag: '有无进出口信息',
|
||||
businessInfoImExportCreditGradeList: '海关认证',
|
||||
businessInfoGovSupportFlag: '有无政府扶持和奖励',
|
||||
businessInfoFinaInfoFlag: '有无融资信息',
|
||||
businessInfoFinaRoundList: '融资轮次',
|
||||
intelPropRightTrademarkInfoFlag: '有无商标信息',
|
||||
intelPropRightPatentInfoFlag: '有无专利信息',
|
||||
intelPropRightSoftCopyrightFlag: '有无软著&作者',
|
||||
zzzsCodeList: '资质证书',
|
||||
technologyLvlTypeList: '类型',
|
||||
technologyLvlStateList: '状态',
|
||||
technologyLvlLevelList: '级别',
|
||||
capMarketListInfoFlag: '有无上市信息',
|
||||
riskCharDisInfoFlag: '有无失信信息',
|
||||
riskCharBankruptcyLiquiFlag: '有无破产清算',
|
||||
riskCharChangeRecordFlag: '有无变更记录',
|
||||
riskCharDisPersonFlag: '有无失信被执行人',
|
||||
riskCharSncFlag: '有无严重失信违法',
|
||||
isSswf: '有无税收违法',
|
||||
riskCharRhcFlag: '有无限制高消费',
|
||||
isJyyc: '有无经营异常',
|
||||
operatRiskAdminPenaltyFlag: '有无行政处罚',
|
||||
operatRiskEnvirPenaltyFlag: '有无环保处罚',
|
||||
operatRiskOweTaxInfoFlag: '有无欠税信息',
|
||||
operatRiskFinalCaseFlag: '有无终本案件',
|
||||
operatRiskUnfinishCaseFlag: '有无未结案件',
|
||||
isFrbg: '有无法人变更',
|
||||
isGqdj: '有无股权冻结'
|
||||
}
|
||||
|
||||
let options_dict = {}
|
||||
|
||||
// 直接展示数组的字段
|
||||
const direct_show_dict = ['origonNm', 'belongBusinessList', 'statusList', 'companyTypeList', 'businessInfoImExportCreditGradeList', 'zzzsCodeList', 'technologyLvlTypeList', 'technologyLvlStateList', 'technologyLvlLevelList', 'nsxydjList', 'businessInfoFinaRoundList']
|
||||
|
||||
// 是否、有无字段
|
||||
export const if_show_dict = ['isPhoneNumber', 'isEmail', 'isHasBranchFlag', 'isBranchFlag', 'businessInfoImExportFlag', 'businessInfoGovSupportFlag', 'businessInfoFinaInfoFlag', 'intelPropRightTrademarkInfoFlag', 'intelPropRightPatentInfoFlag', 'intelPropRightSoftCopyrightFlag', 'capMarketListInfoFlag', 'riskCharDisInfoFlag', 'riskCharBankruptcyLiquiFlag', 'riskCharChangeRecordFlag', 'riskCharDisPersonFlag', 'riskCharSncFlag', 'isSswf', 'riskCharRhcFlag', 'isJyyc', 'operatRiskAdminPenaltyFlag', 'operatRiskEnvirPenaltyFlag', 'operatRiskOweTaxInfoFlag', 'operatRiskFinalCaseFlag', 'operatRiskUnfinishCaseFlag', 'isFrbg', 'isGqdj']
|
||||
|
||||
function isEmpty(val) {
|
||||
if (val === null || val === undefined) return true
|
||||
if (typeof val === 'string') return val.trim() === ''
|
||||
if (Array.isArray(val)) return val.length === 0
|
||||
}
|
||||
|
||||
function formatSearchData(formValues) {
|
||||
formValues.registCapiIntervalList = formValues.registCapiIntervalList || []
|
||||
formValues.recCapIntervalList = formValues.recCapIntervalList || []
|
||||
const newValues = {
|
||||
...formValues
|
||||
}
|
||||
if (formValues.minYL != undefined && formValues.maxYL != undefined && formValues.minYL > formValues.maxYL) {
|
||||
formValues.minYL = ''
|
||||
formValues.maxYL = ''
|
||||
}
|
||||
if (formValues.minYN != undefined && formValues.maxYN != undefined && formValues.minYN > formValues.maxYN) {
|
||||
formValues.minYN = ''
|
||||
formValues.maxYN = ''
|
||||
}
|
||||
// 行业
|
||||
if (Array.isArray(formValues.belongBusinessList) && formValues.belongBusinessList.length > 0) {
|
||||
newValues.belongBusinessList = formValues.belongBusinessList.map(item => item[0])
|
||||
}
|
||||
|
||||
newValues.statusList = formValues.statusList.concat(formValues.otherJYStatus)
|
||||
|
||||
let companyTypeList = newValues.companyTypeList
|
||||
// 企业处理
|
||||
if (Array.isArray(formValues.companyType) && formValues.companyType.length > 0) {
|
||||
const newCompanyType = formValues.companyType.map(item => item[item.length - 1])
|
||||
companyTypeList = companyTypeList.concat(newCompanyType)
|
||||
}
|
||||
// 事业单位处理
|
||||
if (Array.isArray(formValues.SYStatus) && formValues.SYStatus.length > 0) {
|
||||
const newSYStatus = formValues.SYStatus.map(item => item[0])
|
||||
companyTypeList = companyTypeList.concat(newSYStatus)
|
||||
}
|
||||
newValues.companyTypeList = companyTypeList
|
||||
|
||||
return newValues
|
||||
}
|
||||
|
||||
function findLabelByValue(tree, targetValue) {
|
||||
if (!tree) return null
|
||||
|
||||
if (tree.value === targetValue) {
|
||||
return tree.label
|
||||
}
|
||||
|
||||
if (tree.children && tree.children.length > 0) {
|
||||
for (const child of tree.children) {
|
||||
const result = findLabelByValue(child, targetValue)
|
||||
if (result) return result
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function findLabelTreeList(treeList, targetValue) {
|
||||
for (const tree of treeList) {
|
||||
const result = findLabelByValue(tree, targetValue)
|
||||
if (result) return result
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export function getSearchList(data, dict) {
|
||||
options_dict = {
|
||||
...options_dict,
|
||||
...dict
|
||||
}
|
||||
const formatData = formatSearchData(data)
|
||||
const finalResult = []
|
||||
|
||||
for (const i in title_dict) {
|
||||
if (direct_show_dict.includes(i)) {
|
||||
if (isEmpty(formatData[i])) {
|
||||
continue
|
||||
}
|
||||
if (i === 'origonNm') {
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: formatData[i].join('')
|
||||
})
|
||||
} else if (i === 'statusList') {
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: `${formatData.statusInclude === 0 ? '不包含' : '包含'}${formatData[i].join('、')}`
|
||||
})
|
||||
} else if (i === 'companyTypeList') {
|
||||
const labelList = formatData.companyTypeList.map((item) => findLabelTreeList(options_dict['companyTypeList'], item))
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: `${formatData.companyTypeInclude === 0 ? '不包含' : '包含'}${labelList.join('、')}`
|
||||
})
|
||||
} else {
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: `${formatData[i].join('、')}`
|
||||
})
|
||||
}
|
||||
} else if (if_show_dict.includes(i)) {
|
||||
if (isEmpty(formatData[i])) {
|
||||
continue
|
||||
}
|
||||
if (i === 'isHasBranchFlag' || i === 'isBranchFlag') {
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: formatData[i] === 1 ? '是' : '否'
|
||||
})
|
||||
} else {
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: formatData[i] === 1 ? '有' : '无'
|
||||
})
|
||||
}
|
||||
} else if (i === 'startDateIntervalList') {
|
||||
if ((isEmpty(formatData[i]) && isEmpty(formatData.startYear) && isEmpty(formatData.endYear)) || Number(formatData.startYear) > Number(formatData.endYear)) {
|
||||
continue
|
||||
}
|
||||
const labelList = formatData['startDateIntervalList'].map((item) => findLabelTreeList(options_dict['groupYearArr'], item) || item)
|
||||
if (formatData.startYear && formatData.endYear) {
|
||||
if (Number(formatData.startYear) <= Number(formatData.endYear)) {
|
||||
labelList.push(`${formatData.startYear}年-${formatData.endYear}年`)
|
||||
}
|
||||
}
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: labelList.join('、')
|
||||
})
|
||||
} else if (i === 'registerAll') {
|
||||
if ((isEmpty(formatData[i]) && isEmpty(formatData.minRegiterMoney) && isEmpty(formatData.maxRegiterMoney)) || Number(formatData.minRegiterMoney) > Number(formatData.maxRegiterMoney)) {
|
||||
continue
|
||||
}
|
||||
const labelList = formatData['registerAll'].map((item) => findLabelTreeList(options_dict['registerMoneyArr'], item.toString()) || item)
|
||||
if (formatData.minRegiterMoney != undefined && formatData.maxRegiterMoney != undefined) {
|
||||
if (formatData.minRegiterMoney <= formatData.maxRegiterMoney) {
|
||||
const unit = formatData.registerUnit === '2' ? '亿' : '万'
|
||||
labelList.push(`${formatData.minRegiterMoney}${unit}-${formatData.maxRegiterMoney}${unit}`)
|
||||
}
|
||||
}
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: labelList.join('、')
|
||||
})
|
||||
} else if (i === 'giveAll') {
|
||||
if ((isEmpty(formatData[i]) && isEmpty(formatData.minGiveMoney) && isEmpty(formatData.maxGiveMoney)) || Number(formatData.minGiveMoney) > Number(formatData.maxGiveMoney)) {
|
||||
continue
|
||||
}
|
||||
const labelList = formatData['giveAll'].map((item) => findLabelTreeList(options_dict['registerMoneyArr'], item) || item)
|
||||
if (formatData.minGiveMoney != undefined && formatData.maxGiveMoney != undefined) {
|
||||
if (formatData.minGiveMoney <= formatData.maxGiveMoney) {
|
||||
const unit = formatData.giveUnit === '2' ? '亿' : '万'
|
||||
labelList.push(`${formatData.minGiveMoney}${unit}-${formatData.maxGiveMoney}${unit}`)
|
||||
}
|
||||
}
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: labelList.join('、')
|
||||
})
|
||||
} else if (i === 'businessInfoPenInsurIntervalList') {
|
||||
if ((isEmpty(formatData[i]) && isEmpty(formatData.minYL) && isEmpty(formatData.maxYL)) || Number(formatData.minYL) > Number(formatData.maxYL)) {
|
||||
continue
|
||||
}
|
||||
const labelList = formatData['businessInfoPenInsurIntervalList'].map((item) => findLabelTreeList(options_dict['baoxianOptions'], item) || item)
|
||||
if (!isEmpty(formatData.minYL) && !isEmpty(formatData.maxYL)) {
|
||||
if (formatData.minYL <= formatData.maxYL) {
|
||||
labelList.push(`${formatData.minYL}-${formatData.maxYL}人`)
|
||||
}
|
||||
}
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: labelList.join('、')
|
||||
})
|
||||
} else if (i === 'businessInfoMediInsurIntervalList') {
|
||||
if ((isEmpty(formatData[i]) && isEmpty(formatData.minYN) && isEmpty(formatData.maxYN)) || Number(formatData.minYN) > Number(formatData.maxYN)) {
|
||||
continue
|
||||
}
|
||||
const labelList = formatData['businessInfoMediInsurIntervalList'].map((item) => findLabelTreeList(options_dict['baoxianOptions'], item) || item)
|
||||
if (formatData.minYN != undefined && formatData.maxYN != undefined) {
|
||||
if (formatData.minYN <= formatData.maxYN) {
|
||||
labelList.push(`${formatData.minYN}-${formatData.maxYN}人`)
|
||||
}
|
||||
}
|
||||
finalResult.push({
|
||||
key: i,
|
||||
label: title_dict[i],
|
||||
text: labelList.join('、')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return finalResult
|
||||
}
|
||||
2284
ruoyi-ui/src/views/customer/customerRadar/index.vue
Normal file
2284
ruoyi-ui/src/views/customer/customerRadar/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
3
ruoyi-ui/src/views/customer/customerbase/index.vue
Normal file
3
ruoyi-ui/src/views/customer/customerbase/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<section class="list-header">
|
||||
<p class="common-title">{{ ruleTitle }}</p>
|
||||
<section class="main-wrap">
|
||||
<span class="rule-name-label">分配规则</span>
|
||||
<ul class="list-main">
|
||||
<li class="formObj-form-item" v-for="(item, ind) in listData" :key="item.key">
|
||||
<section class="form-vl">
|
||||
<span>第{{ ind + 1 }}优先级</span>
|
||||
<el-select v-model="item.ruleKey" placeholder="请选择" size="small" clearable>
|
||||
<el-option v-for="(ot, oInd) in ruleArr" :disabled="isChose(ot, oInd)||ot.disabled" :key="ot.value" :label="ot.label" :value="ot.value"></el-option>
|
||||
</el-select>
|
||||
</section>
|
||||
<section class="operate-areas">
|
||||
<el-button
|
||||
:disabled="customShow||listData.length==1"
|
||||
type="text"
|
||||
icon="el-icon-remove-outline"
|
||||
class="gray-color"
|
||||
ref="del"
|
||||
@click.prevent="onDel(ind)"
|
||||
></el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
:disabled="customShow||listData.length>=2"
|
||||
ref="add"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
class="gray-color"
|
||||
@click.prevent="onAdd(ind)"
|
||||
:class="specialType?'specialClass':''"
|
||||
></el-button>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {} from '@/api/grid/address/tree.js'
|
||||
import { uid } from '@/utils'
|
||||
import { isEmpty, cloneDeep, omit } from 'lodash'
|
||||
|
||||
const relateTypeMap = {
|
||||
personal: '个人',
|
||||
company: '企业',
|
||||
merchant: '商户'
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
ruleTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
ruleArr: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
ruleName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defaultListData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
customShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
specialType: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
listData: {
|
||||
handler(arr) {
|
||||
|
||||
this.$emit('getRuleArr', {
|
||||
arr: arr?.map((ot, oInd) =>
|
||||
omit(
|
||||
cloneDeep({
|
||||
...ot,
|
||||
ruleOrder: oInd + 1
|
||||
}),
|
||||
'key'
|
||||
)
|
||||
),
|
||||
ruleName: this.ruleName
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
defaultListData: {
|
||||
|
||||
handler(arr) {
|
||||
|
||||
if (!isEmpty(arr)) {
|
||||
// alert(this.customShow)
|
||||
|
||||
this.listData = arr?.map((it) => ({
|
||||
...it,
|
||||
ruleKey: `${it.ruleKey}`,
|
||||
key: uid()
|
||||
}))
|
||||
console.log(this.listData,'this.listDatathis.listData')
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iscustomShow:false,
|
||||
listData: [
|
||||
{
|
||||
ruleKey: '',
|
||||
key: uid(),
|
||||
relateType: relateTypeMap[this.ruleName]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onAdd(tag) {
|
||||
const newItems = {
|
||||
ruleKey: '',
|
||||
key: uid(),
|
||||
relateType: relateTypeMap[this.ruleName]
|
||||
}
|
||||
this.listData.splice(tag + 1, 0, newItems)
|
||||
},
|
||||
onDel(index) {
|
||||
this.listData.splice(index, 1)
|
||||
},
|
||||
isChose(row, tag) {
|
||||
const listArr = this.listData?.filter((ot) => ot.ruleKey === row.value)
|
||||
return !isEmpty(listArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin: 0 auto;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.formObj-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.operate-areas {
|
||||
margin-left: 16px;
|
||||
|
||||
::v-deep .el-icon-circle-plus-outline {
|
||||
color: #4886f8;
|
||||
font-size: 20px;
|
||||
}
|
||||
::v-deep .el-icon-remove-outline {
|
||||
font-size: 20px;
|
||||
}
|
||||
::v-deep .gray-color {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.form-vl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-wrap {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 20px;
|
||||
.rule-name-label {
|
||||
width: 18%;
|
||||
text-align: right;
|
||||
padding-right: 24px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #3d3d3d;
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-main{
|
||||
position: relative;
|
||||
.specialClass{
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
bottom: -51px;
|
||||
color: #4886f8 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title=""
|
||||
:visible.sync="drawerVisible"
|
||||
direction="rtl"
|
||||
size="45%"
|
||||
:with-header="false"
|
||||
:wrapperClosable="false"
|
||||
>
|
||||
<ImportCreateComponent ref="myRef"
|
||||
:groupId="groupId"
|
||||
:groupName="groupName"
|
||||
:custType="custType"
|
||||
@handOk="handOk"
|
||||
/>
|
||||
<section class="form-operate">
|
||||
<el-button type="plain" size="small" @click="handleClose" style="margin-right:15px">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
|
||||
</section>
|
||||
<el-drawer
|
||||
title=""
|
||||
:visible.sync="showTask"
|
||||
width="30%"
|
||||
:with-header="false"
|
||||
direction="rtl"
|
||||
:append-to-body="true"
|
||||
:wrapperClosable="false"
|
||||
>
|
||||
<div class="child-main">
|
||||
<p class="title">是否添加到已有任务?</p>
|
||||
<el-form :model="formObj" :rules="formRules" ref="formObj" class="my-form">
|
||||
<el-form-item label="" prop="task">
|
||||
<el-select style="width: 300px" v-model="formObj.task" placeholder="请选择任务">
|
||||
<el-option v-for="(item, index) in taskOptions" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" class="handle-btn">取消</el-button>
|
||||
<!-- <el-button type="primary" @click="goToCreateTask" class="handle-btn">创建新任务</el-button> -->
|
||||
<el-button type="primary" @click="onSubmit">确定</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImportCreateComponent from '../importCreateComponent/importCreate2.vue'
|
||||
import { addToCurrentExistTask } from "@/api/system/grouplist";
|
||||
import { Message } from 'element-ui'
|
||||
export default {
|
||||
props: ['drawerVisible','groupId','groupName','custType','taskOptions'],
|
||||
// watch:{
|
||||
// drawerVisible(value){
|
||||
// this.showDrawer=value
|
||||
// },
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
// showDrawer:false,
|
||||
showTask:false,
|
||||
// taskOptions:[
|
||||
// {lable:'任务1',value:'1'},
|
||||
// {lable:'任务2',value:'2'},
|
||||
// {lable:'任务3',value:'3'},
|
||||
// ],
|
||||
formObj:{
|
||||
task:''
|
||||
},
|
||||
formRules: {
|
||||
task: [
|
||||
{ required: true, message: '任务不能为空' },
|
||||
]
|
||||
},
|
||||
custIds:[]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ImportCreateComponent
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 添加客群到已选任务
|
||||
addGroupsToExistTask(){
|
||||
addToCurrentExistTask(params).then(res=>{
|
||||
if(res.code == 200){
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose(){
|
||||
this.$refs.myRef.handleMessageCancel2();
|
||||
this.$emit('closeDrawer');
|
||||
},
|
||||
handleSubmit(){
|
||||
this.$refs.myRef.handleSubmit();
|
||||
},
|
||||
handOk(arr){
|
||||
this.showTask=true;
|
||||
this.custIds = arr.map(item=>item.custId)
|
||||
},
|
||||
// 确定添加到任务
|
||||
onSubmit() {
|
||||
const that = this;
|
||||
const params={
|
||||
campaignIds:[this.formObj.task],
|
||||
groupId:[this.groupId],
|
||||
custIds:this.custIds
|
||||
}
|
||||
this.$refs.formObj.validate((valid) => {
|
||||
if (valid) {
|
||||
that.addGroupsToExistTask(params);
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加客群到已选任务
|
||||
addGroupsToExistTask(params){
|
||||
addToCurrentExistTask(params).then(res=>{
|
||||
if(res.code == 200){
|
||||
Message.success('添加成功');
|
||||
this.closeTaskDialog();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 取消添加到任务
|
||||
closeTaskDialog(){
|
||||
this.showTask=false;
|
||||
this.formObj.task='';
|
||||
this.$emit('closeDrawer','refresh');
|
||||
this.handleClose();
|
||||
},
|
||||
// 取消添加到任务
|
||||
onCancel(){
|
||||
this.closeTaskDialog();
|
||||
},
|
||||
// 创建新任务
|
||||
goToCreateTask(){
|
||||
this.$router.push({
|
||||
path: "/taskManage/taskCreation",
|
||||
query: {
|
||||
groupId:JSON.stringify([this.groupId]),
|
||||
custType:this.custType
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.form-operate{
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.child-main{
|
||||
padding: 40px 40px;
|
||||
.my-form{
|
||||
margin: 10px 0 30px 0;
|
||||
}
|
||||
.title{
|
||||
font-size: 20px;
|
||||
}
|
||||
.dialog-footer{
|
||||
text-align: center;
|
||||
.handle-btn{
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-form-item__error{
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
.common-wrap-cnt {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
height: calc(100vh - 135px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-border {
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.create-form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
padding: 0 30px;
|
||||
.form-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.form-operate {
|
||||
}
|
||||
}
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.common-create-main {
|
||||
padding: 24px 30px;
|
||||
::v-deep .el-form {
|
||||
width: 70%;
|
||||
margin: 24px auto 0 auto;
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
.el-input__inner {
|
||||
border: 1px solid #ebebeb;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
color: #3d3d3d;
|
||||
padding-right: 24px;
|
||||
}
|
||||
.is-required .el-form-item__label {
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 个人 -->
|
||||
<customerDetail-C v-if="isShowCompC" :rowC="rowC" :createRoleC="createRole" ></customerDetail-C>
|
||||
<!-- 企业 -->
|
||||
<customerDetail-B v-if="isShowCompB" :rowB="rowB" :createRoleB="createRole"></customerDetail-B>
|
||||
<!-- 商户 -->
|
||||
<customerDetail-M v-if="isShowCompM" :rowM="rowM" :createRoleM="createRole"></customerDetail-M>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import customerDetailC from './components/customerDetailC.vue'
|
||||
import customerDetailB from './components/customerDetailB.vue'
|
||||
import customerDetailM from './components/customerDetailM.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowCompB: false,
|
||||
isShowCompM: false,
|
||||
isShowCompC: false,
|
||||
rowB: {},
|
||||
rowC: {},
|
||||
rowM: {},
|
||||
createRole:''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
customerDetailC,
|
||||
customerDetailB,
|
||||
customerDetailM
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.$route.query.row,'this.$route.query.row')
|
||||
this.createRole=this.$route.query.createRole;
|
||||
// alert(this.createRole)
|
||||
this.rowB = this.$route.query.row;
|
||||
this.rowC = this.$route.query.row;
|
||||
this.rowM = this.$route.query.row;
|
||||
// console.log(row);
|
||||
// this.row = row;
|
||||
const custType =this.$route.query.custType;
|
||||
if (custType == '0') {
|
||||
this.isShowCompC = true;
|
||||
} else if (custType == '1') {
|
||||
this.isShowCompM = true;
|
||||
}
|
||||
else if(custType == '2') {
|
||||
this.isShowCompB = true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,784 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 筛选框 -->
|
||||
<el-row :gutter="24" style="display: flex; align-items: center">
|
||||
<el-col :span="4">
|
||||
<!-- 客户号查询 -->
|
||||
<el-input
|
||||
v-model="custId"
|
||||
placeholder="请输入客户号"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="getSelectCustomerData"
|
||||
@clear="getSelectCustomerData"
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<!-- 客户号查询 -->
|
||||
<el-input
|
||||
v-model="custName"
|
||||
placeholder="请输入客户名称"
|
||||
@clear="getSelectCustomerData"
|
||||
@keyup.enter.native="getSelectCustomerData"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<!-- 推送状态 -->
|
||||
<el-select
|
||||
v-model="pushStatus"
|
||||
placeholder="请选择推送状态"
|
||||
clearable
|
||||
@clear="getSelectCustomerData"
|
||||
@change="getSelectCustomerData"
|
||||
style="width: 180px"
|
||||
>
|
||||
<el-option label="未推送" value="0"></el-option>
|
||||
<el-option label="推送成功" value="1"></el-option>
|
||||
<el-option label="推送失败" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="getSelectCustomerData"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="info" @click="handleFilterClear">重置</el-button>
|
||||
<el-button type="success" @click="handleCustAppoint"
|
||||
>批量指定</el-button
|
||||
>
|
||||
<el-button type="warning" @click="exportDataByCustIds">导出</el-button>
|
||||
<el-button @click="returnLastPage">返回上一级</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 表格区域 -->
|
||||
<right-toolbar
|
||||
:getSelectCustomerData.sync="getSelectCustomerData"
|
||||
@queryTable="getSelectCustomerData"
|
||||
:columns="columns"
|
||||
></right-toolbar>
|
||||
<el-table
|
||||
:data="paginatedData"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
ref="groupCustomerDetail"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
prop="groupId"
|
||||
type="selection"
|
||||
label="全选"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="groupName"
|
||||
align="center"
|
||||
label="分群名称"
|
||||
sortable
|
||||
v-if="columns[0].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="custName"
|
||||
align="center"
|
||||
label="客户姓名"
|
||||
sortable
|
||||
v-if="columns[1].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="custId"
|
||||
align="center"
|
||||
label="客户号"
|
||||
sortable
|
||||
v-if="columns[2].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="custIdc"
|
||||
align="center"
|
||||
label="身份证号"
|
||||
sortable
|
||||
v-if="columns[3].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="pushStatus"
|
||||
align="center"
|
||||
label="推送状态"
|
||||
sortable
|
||||
v-if="columns[4].visible"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{ handleStatus(scope.row.pushStatus) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="deptName"
|
||||
align="center"
|
||||
label="归属机构"
|
||||
v-if="isorgName&&columns[5].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="gridName"
|
||||
align="center"
|
||||
label="所属网格"
|
||||
v-if="isgridName&&columns[6].visible"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="userName"
|
||||
align="center"
|
||||
label="归属执行人"
|
||||
v-if="isuserName&&columns[7].visible"
|
||||
></el-table-column>
|
||||
<!-- 其他列 -->
|
||||
<el-table-column fixed="right" align="center" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="handleCustAppointOne(scope.row.custId)"
|
||||
>指定推送</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="custTableData.length"
|
||||
:current-page="currentPage"
|
||||
></el-pagination>
|
||||
<el-dialog title="选择机构/个人" :visible.sync="dialogVisible" width="30%">
|
||||
<el-input
|
||||
placeholder="请输入机构名称"
|
||||
v-model="searchParams"
|
||||
@keyup.enter.native="handleTreeSearch"
|
||||
>
|
||||
<template slot="append">
|
||||
<el-button icon="el-icon-refresh" @click="resetSearch"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="roll-dialog">
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="deptOptions"
|
||||
show-checkbox
|
||||
:check-strictly="true"
|
||||
@check="handleCheckChange"
|
||||
ref="deptTree"
|
||||
node-key="id"
|
||||
empty-text="加载中，请稍候"
|
||||
:props="defaultDeptProps"
|
||||
:style="{ width: '100%' }"
|
||||
></el-tree>
|
||||
</div>
|
||||
|
||||
<span slot="footer">
|
||||
<el-button @click="handleDialogCancle">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfigeInfo">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
isHead,
|
||||
findCustListByGroupId,
|
||||
campaignDetail,
|
||||
customerAppoint,
|
||||
} from "@/api/system/findCustByGroupId.js";
|
||||
import { getDeptTree, getDeptUserTree } from "@/api/grid/address/tree.js";
|
||||
import { Message } from "element-ui";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ key: 0, label: `分群名称`, visible: true },
|
||||
{ key: 1, label: `客户姓名`, visible: true },
|
||||
{ key: 2, label: `客户号`, visible: true },
|
||||
{ key: 3, label: `身份证号`, visible: true },
|
||||
{ key: 4, label: `推送状态`, visible: true },
|
||||
{ key: 5, label: `归属机构`, visible: true },
|
||||
{ key: 6, label: `归属网格`, visible: true },
|
||||
{ key: 7, label: `归属执行人`, visible: true },
|
||||
// { key: 7, label: `分群名称`, visible: true },
|
||||
],
|
||||
currentPage: 1,
|
||||
userIds: [],
|
||||
hasCheck: false,
|
||||
userIds: [],
|
||||
deptid: 0,
|
||||
campaignId: "",
|
||||
checkedDeptIds: [],
|
||||
deptOptions: [],
|
||||
filteredTreeData: [],
|
||||
filterTreeData: [],
|
||||
searchParams: "",
|
||||
dialogVisible: false,
|
||||
selectedRows: [],
|
||||
custId: "",
|
||||
groupId: "",
|
||||
custTableData: [],
|
||||
groupName: "",
|
||||
custName: "",
|
||||
pushStatus: "",
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
type:0,
|
||||
deptName: "801000",
|
||||
selectedIds: [],
|
||||
executer: "",
|
||||
children: [],
|
||||
distributeType:0,
|
||||
groupType: "",
|
||||
isorgName: true,
|
||||
isgridName: false,
|
||||
isuserName: false,
|
||||
isbranch: false,
|
||||
isHead: false,
|
||||
defaultDeptProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
disabled: (data) =>
|
||||
!["head", "branch", "outlet", "user"].includes(data.level),
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
paginatedData() {
|
||||
const start = (this.pageNum - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.custTableData.slice(start, end);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const type = this.$route.query.type;
|
||||
this.type=type;
|
||||
const distributeType = this.$route.query.distributeType;
|
||||
this.distributeType= distributeType;
|
||||
isHead().then(res=> {
|
||||
if (Object.keys(res)[0].startsWith("b")) {
|
||||
this.createRole='1'
|
||||
this.isbranch=true;
|
||||
this.isHead=false;
|
||||
}
|
||||
if(Object.keys(res)[0].startsWith("h")) {
|
||||
this.createRole='0'
|
||||
this.isbranch=false;
|
||||
this.isHead=true;
|
||||
}
|
||||
})
|
||||
// this.handleLoadTreeData({deptid:'801010'})
|
||||
const id = this.$route.query.groupId;
|
||||
this.groupId = id;
|
||||
const groupType = this.$route.query.groupType;
|
||||
this.groupType = groupType;
|
||||
const campaignId = this.$route.query.campaignId;
|
||||
// console.log(groupType);
|
||||
this.campaignId = campaignId;
|
||||
campaignDetail({ campaignId }).then((res) => {
|
||||
this.executer = res.executer;
|
||||
if (this.executer == "0") {
|
||||
this.isorgName = true;
|
||||
this.isgridName = false;
|
||||
this.isuserName = false;
|
||||
}
|
||||
if (this.executer == "1") {
|
||||
this.isorgName = false;
|
||||
this.isgridName = true;
|
||||
this.isuserName = true;
|
||||
}
|
||||
if (this.executer == "2") {
|
||||
this.isorgName = true;
|
||||
this.isgridName = true;
|
||||
this.isuserName = true;
|
||||
}
|
||||
});
|
||||
const groupName = this.$route.query.groupName;
|
||||
this.groupName = groupName;
|
||||
this.getCustomerDetail(id, this.pageNum, this.pageSize, this.groupType);
|
||||
},
|
||||
methods: {
|
||||
// //判断当前用户登录身份
|
||||
// isUserType() {
|
||||
// isHead().then((res) => {
|
||||
// // console.log(Object.keys(res)[0].startsWith('h'));
|
||||
|
||||
// if (Object.keys(res)[0].startsWith("h")) {
|
||||
// this.radiosButonIsDisableFromMe = false;
|
||||
// this.radiosButonIsDisableToMe = true;
|
||||
// this.createRole = "0";
|
||||
// } else if (Object.keys(res)[0].startsWith("b")) {
|
||||
// this.radiosButonIsDisableFromMe = false;
|
||||
// this.radiosButonIsDisableToMe = false;
|
||||
// this.createRole = "1";
|
||||
// } else if (
|
||||
// Object.keys(res)[0].startsWith("m") ||
|
||||
// this.$store.getters.roles[0] == "admin"
|
||||
// ) {
|
||||
// this.radiosButonIsDisableFromMe = false;
|
||||
// this.radiosButonIsDisableToMe = false;
|
||||
// this.createRole = "2";
|
||||
// } else {
|
||||
// this.radiosButonIsDisableFromMe = false;
|
||||
// this.radiosButonIsDisableToMe = false;
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
handleDialogCancle() {
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
this.dialogVisible = false;
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
handlenodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
|
||||
handleoneSend(row) {
|
||||
this.$refs.groupCustomerDetail.toggleRowSelection(row, true);
|
||||
},
|
||||
handleConfigeInfo() {
|
||||
|
||||
if (this.isHead&&this.executer == 0) {
|
||||
customerAppoint({
|
||||
custIds: this.selectedIds.join(",")||this.custIds,
|
||||
deptIds: this.checkedKeys.join(","),
|
||||
groupId: this.groupId,
|
||||
campaignId: this.campaignId,
|
||||
createRole: this.createRole,
|
||||
}).then((res) => {
|
||||
// console.log(res);
|
||||
if (res.code == "200") {
|
||||
Message.success("推送成功");
|
||||
// alert(1)
|
||||
|
||||
this.dialogVisible = false;
|
||||
this.selectedRows.map((item) => {
|
||||
return (item.pushStatus = "1");
|
||||
});
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
}
|
||||
});
|
||||
}
|
||||
//推送到个人的情况
|
||||
else if (this.isHead&&this.executer == 1) {
|
||||
customerAppoint({
|
||||
custIds: this.selectedIds.join(",")||this.custIds,
|
||||
deptIds: "",
|
||||
userIds: this.userIds.join(","),
|
||||
groupId: this.groupId,
|
||||
campaignId: this.campaignId,
|
||||
createRole:this.createRole,
|
||||
}).then((res) => {
|
||||
// console.log(res);
|
||||
if (res.code == "200") {
|
||||
Message.success("推送成功");
|
||||
// alert(2)
|
||||
this.dialogVisible = false;
|
||||
this.selectedRows.map((item) => {
|
||||
return (item.pushStatus = "1");
|
||||
});
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
}
|
||||
});
|
||||
}else if(this.isbranch==true) {
|
||||
customerAppoint({
|
||||
custIds: this.selectedIds.join(",")||this.custIds,
|
||||
deptIds: "",
|
||||
userIds: this.userIds.join(","),
|
||||
groupId: this.groupId,
|
||||
campaignId: this.campaignId,
|
||||
createRole: this.createRole,
|
||||
}).then((res) => {
|
||||
// console.log(res);
|
||||
if (res.code == "200") {
|
||||
Message.success("推送成功");
|
||||
// alert(3)
|
||||
this.dialogVisible = false;
|
||||
this.selectedRows.map((item) => {
|
||||
return (item.pushStatus = "1");
|
||||
});
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
customerAppoint({
|
||||
custIds: this.selectedIds.join(",")||this.custIds,
|
||||
deptIds: this.checkedKeys.join(","),
|
||||
userIds: this.userIds.join(","),
|
||||
groupId: this.groupId,
|
||||
campaignId: this.campaignId,
|
||||
createRole: this.createRole,
|
||||
}).then((res) => {
|
||||
// console.log(res);
|
||||
if (res.code == "200") {
|
||||
Message.success("推送成功");
|
||||
// alert(4)
|
||||
this.dialogVisible = false;
|
||||
this.selectedRows.map((item) => {
|
||||
return (item.pushStatus = "1");
|
||||
});
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
exportDataByCustIds() {
|
||||
// console.log(this.selectedRows);
|
||||
if (this.selectedIds.length == 0) {
|
||||
Message.warning("请先选择导出客户");
|
||||
return;
|
||||
}
|
||||
const custIds = this.selectedRows.map((item) => {
|
||||
return (item = item.custId);
|
||||
});
|
||||
this.download(
|
||||
`/system/group/exportDataByCustIds/?groupId=${
|
||||
this.groupId
|
||||
}&custIds=${custIds.join(",")}`,
|
||||
{},
|
||||
`group_custIds_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
Message.success('导出成功')
|
||||
},
|
||||
handleCheckChange(data) {
|
||||
console.log("this.executer======", this.executer,this.isbranch);
|
||||
//判断身份
|
||||
if(this.isbranch===true){
|
||||
// this.hasCheck = true;
|
||||
getDeptUserTree({ deptid: data.id }).then((res) => {
|
||||
// this.hasCheck = true;
|
||||
console.log("this.hasCheck======2", this.hasCheck);
|
||||
this.children = res;
|
||||
const tmp = this.children.map((item) => {
|
||||
return {
|
||||
key: item.userId,
|
||||
id: item.userId,
|
||||
label: item.userName,
|
||||
children: [],
|
||||
disabled: false,
|
||||
level: "user",
|
||||
};
|
||||
});
|
||||
data.children = tmp;
|
||||
this.$refs.deptTree.updateKeyChildren(data.id, tmp);
|
||||
// tmp.map(item => {
|
||||
// const node = this.$refs.deptTree.getNode(item.key);
|
||||
this.$refs.deptTree.$on("check", (node, checked) => {
|
||||
// 在这里编写你的逻辑
|
||||
if (checked) {
|
||||
this.userIds.push(node.id);
|
||||
// this.checkedKeys = this.checkedKeys.map((item) => {
|
||||
// return item != node.id;
|
||||
// });
|
||||
// console.log(this.checkedKeys);
|
||||
}
|
||||
});
|
||||
// })
|
||||
|
||||
// this.hasCheck = true;
|
||||
});
|
||||
console.log('43234234');
|
||||
console.log("this.hasCheck======2", this.hasCheck);
|
||||
this.children = res;
|
||||
const tmp = this.children.map((item) => {
|
||||
return {
|
||||
key: item.userId,
|
||||
id: item.userId,
|
||||
label: item.userName,
|
||||
children: [],
|
||||
disabled: false,
|
||||
level: "user",
|
||||
};
|
||||
});
|
||||
data.children = tmp;
|
||||
this.$refs.deptTree.updateKeyChildren(data.id, tmp);
|
||||
// tmp.map(item => {
|
||||
// const node = this.$refs.deptTree.getNode(item.key);
|
||||
this.$refs.deptTree.$on("check", (node, checked) => {
|
||||
// 在这里编写你的逻辑
|
||||
if (checked) {
|
||||
this.userIds.push(node.id);
|
||||
// this.checkedKeys = this.checkedKeys.map((item) => {
|
||||
// return item != node.id;
|
||||
// });
|
||||
// console.log(this.checkedKeys);
|
||||
}
|
||||
});
|
||||
// })
|
||||
|
||||
// this.hasCheck = true;
|
||||
|
||||
}
|
||||
if (this.executer == "0") {
|
||||
this.checkedKeys = this.$refs.deptTree.getCheckedKeys();
|
||||
}
|
||||
// console.log(this.checkedKeys);
|
||||
if(this.isbranch&&this.executer) {
|
||||
// console.log("this.hasCheck======1", this.hasCheck);
|
||||
// // if (this.hasCheck) return;
|
||||
// console.log("1111111111111======");
|
||||
getDeptUserTree({ deptid: data.id }).then((res) => {
|
||||
// this.hasCheck = true;
|
||||
console.log("this.hasCheck======2", this.hasCheck);
|
||||
this.children = res;
|
||||
const tmp = this.children.map((item) => {
|
||||
return {
|
||||
key: item.userId,
|
||||
id: item.userId,
|
||||
label: item.userName,
|
||||
children: [],
|
||||
disabled: false,
|
||||
level: "user",
|
||||
};
|
||||
});
|
||||
data.children = tmp;
|
||||
this.$refs.deptTree.updateKeyChildren(data.id, tmp);
|
||||
// tmp.map(item => {
|
||||
// const node = this.$refs.deptTree.getNode(item.key);
|
||||
this.$refs.deptTree.$on("check", (node, checked) => {
|
||||
// 在这里编写你的逻辑
|
||||
if (checked) {
|
||||
this.userIds.push(node.id);
|
||||
// this.checkedKeys = this.checkedKeys.map((item) => {
|
||||
// return item != node.id;
|
||||
// });
|
||||
// console.log(this.checkedKeys);
|
||||
}
|
||||
});
|
||||
// })
|
||||
|
||||
// this.hasCheck = true;
|
||||
});
|
||||
}
|
||||
if (this.executer == "1") {
|
||||
// console.log("this.hasCheck======1", this.hasCheck);
|
||||
// // if (this.hasCheck) return;
|
||||
// console.log("1111111111111======");
|
||||
getDeptUserTree({ deptid: data.id }).then((res) => {
|
||||
// this.hasCheck = true;
|
||||
console.log("this.hasCheck======2", this.hasCheck);
|
||||
this.children = res;
|
||||
const tmp = this.children.map((item) => {
|
||||
return {
|
||||
key: item.userId,
|
||||
id: item.userId,
|
||||
label: item.userName,
|
||||
children: [],
|
||||
disabled: false,
|
||||
level: "user",
|
||||
};
|
||||
});
|
||||
data.children = tmp;
|
||||
this.$refs.deptTree.updateKeyChildren(data.id, tmp);
|
||||
// tmp.map(item => {
|
||||
// const node = this.$refs.deptTree.getNode(item.key);
|
||||
this.$refs.deptTree.$on("check", (node, checked) => {
|
||||
// 在这里编写你的逻辑
|
||||
if (checked) {
|
||||
this.userIds.push(node.id);
|
||||
// this.checkedKeys = this.checkedKeys.map((item) => {
|
||||
// return item != node.id;
|
||||
// });
|
||||
// console.log(this.checkedKeys);
|
||||
}
|
||||
});
|
||||
// })
|
||||
|
||||
// this.hasCheck = true;
|
||||
});
|
||||
}
|
||||
|
||||
if (this.executer == "2") {
|
||||
this.checkedKeys = this.$refs.deptTree.getCheckedKeys();
|
||||
console.log("this.checkkeys============", this.checkedKeys);
|
||||
getDeptUserTree({ deptid: data.id }).then((res) => {
|
||||
// this.hasCheck = true;
|
||||
this.children = res;
|
||||
const tmp = this.children.map((item) => {
|
||||
return {
|
||||
key: item.userId,
|
||||
id: item.userId,
|
||||
label: item.userName,
|
||||
children: [],
|
||||
disabled: false,
|
||||
level: "user",
|
||||
};
|
||||
});
|
||||
data.children = tmp;
|
||||
this.$refs.deptTree.updateKeyChildren(data.id, tmp);
|
||||
// tmp.map(item => {
|
||||
// const node = this.$refs.deptTree.getNode(item.key);
|
||||
this.$refs.deptTree.$on("check", (node, checked) => {
|
||||
// 在这里编写你的逻辑
|
||||
if (checked) {
|
||||
this.userIds.push(node.id);
|
||||
this.checkedKeys = this.checkedKeys.filter((item) => {
|
||||
return item != node.id && item != undefined;
|
||||
});
|
||||
console.log(this.checkedKeys);
|
||||
}
|
||||
});
|
||||
// })
|
||||
|
||||
// this.hasCheck = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
resetSearch() {
|
||||
this.searchParams = "";
|
||||
this.getDeptTreeSelect();
|
||||
},
|
||||
handleTreeSearch() {
|
||||
this.filterTreeData = this.filterTree(
|
||||
this.deptOptions,
|
||||
this.searchParams
|
||||
);
|
||||
if (this.searchParams) {
|
||||
console.log(this.filterTreeData[0]);
|
||||
this.deptOptions = this.filterTreeData[0].children;
|
||||
}
|
||||
getDeptTree();
|
||||
},
|
||||
filterTree(data, searchQuery) {
|
||||
if (!searchQuery) {
|
||||
return data;
|
||||
}
|
||||
const filteredData = data.filter((node) => {
|
||||
// 检查当前节点的label是否包含搜索关键字
|
||||
if (node.label.toLowerCase().includes(searchQuery.toLowerCase())) {
|
||||
return true;
|
||||
}
|
||||
// 如果当前节点有子节点，则递归检查子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
const filteredChildren = this.filterTree(node.children, searchQuery);
|
||||
// 如果子节点被过滤出来了，保留当前节点
|
||||
if (filteredChildren.length > 0) {
|
||||
node.children = filteredChildren;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
// 如果当前节点不符合条件且没有符合条件的子节点，则不包含当前节点
|
||||
return false;
|
||||
});
|
||||
|
||||
return filteredData;
|
||||
},
|
||||
getDeptTreeSelect() {
|
||||
getDeptTree().then((response) => {
|
||||
// console.log(response)
|
||||
this.deptOptions = response.data;
|
||||
});
|
||||
},
|
||||
handleCustAppointOne(custId) {
|
||||
// if(this.isbranch&& this.distributeType==null){
|
||||
// Message.warning('请返回上一级，新建活动成功后才可指定推送！')
|
||||
// this.$refs.groupCustomerDetail.clearSelection();
|
||||
// return;
|
||||
// }
|
||||
// if(this.executer==null&&this.isHead==true&&!this.isbranch){
|
||||
// Message.warning('请返回上一级，新建活动成功后才可指定推送！')
|
||||
// this.$refs.groupCustomerDetail.clearSelection();
|
||||
// return;
|
||||
// }
|
||||
this.dialogVisible = true;
|
||||
this.custIds=custId
|
||||
this.getDeptTreeSelect();
|
||||
},
|
||||
handleCustAppoint() {
|
||||
if (this.selectedIds.length == 0) {
|
||||
Message.warning("请先选择指定客户");
|
||||
return;
|
||||
}
|
||||
if(this.executer==null&&!isHead){
|
||||
Message.warning('请返回上一级，新建活动成功后才可指定推送！')
|
||||
this.$refs.groupCustomerDetail.clearSelection();
|
||||
return;
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
this.getDeptTreeSelect();
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
this.selectedRows = selection;
|
||||
const selectedCustIds = this.selectedRows.map((item) => item.custId);
|
||||
this.selectedIds = selectedCustIds;
|
||||
},
|
||||
returnLastPage() {
|
||||
this.type==0?
|
||||
this.$router.push({path:'/customer/customerbase/segmentation'}): this.$router.push({path:'/grid/visit/checklist'});
|
||||
},
|
||||
handleFilterClear() {
|
||||
this.pushStatus = "";
|
||||
this.custName = "";
|
||||
this.custId = "";
|
||||
this.getSelectCustomerData();
|
||||
},
|
||||
handleStatus(status) {
|
||||
switch (status) {
|
||||
case "0":
|
||||
return "未推送";
|
||||
case "1":
|
||||
return "推送成功";
|
||||
case "2":
|
||||
return "推送失败";
|
||||
}
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
const id = this.$route.query.groupId;
|
||||
const groupType = this.$route.query.groupType;
|
||||
this.getCustomerDetail(id, groupType, this.currentPage, this.pageSize);
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.pageNum = newPage;
|
||||
const id = this.$route.query.groupId;
|
||||
this.getCustomerDetail(
|
||||
id,
|
||||
this.currentPage,
|
||||
this.pageSize,
|
||||
this.groupType
|
||||
);
|
||||
},
|
||||
getCustomerDetail(id, pageNum, pageSize, groupType) {
|
||||
findCustListByGroupId({
|
||||
groupId: id,
|
||||
currentPage: pageNum,
|
||||
pageSize: pageSize,
|
||||
groupType: groupType,
|
||||
}).then((res) => {
|
||||
this.custTableData = res.rows;
|
||||
this.total = res.total;
|
||||
});
|
||||
},
|
||||
//筛选查询
|
||||
getSelectCustomerData() {
|
||||
findCustListByGroupId({
|
||||
groupId: this.groupId,
|
||||
custName: this.custName,
|
||||
pushStatus: this.pushStatus[0],
|
||||
custId: this.custId,
|
||||
groupType: this.groupType,
|
||||
}).then((res) => {
|
||||
this.custTableData = res.rows;
|
||||
this.total = res.total;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.roll-dialog {
|
||||
overflow: auto;
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<div class="common-wrap-cnt">
|
||||
<section class="create-form-header">
|
||||
<p class="form-title">导入创建</p>
|
||||
<section class="form-operate">
|
||||
<el-button type="plain" size="small" @click="handleMessageCancel">重置</el-button>
|
||||
<el-button type="primary" size="small" @click="handleSubmit">提交</el-button>
|
||||
</section>
|
||||
</section>
|
||||
<section class="common-create-main">
|
||||
<p class="common-title">文件上传</p>
|
||||
<section class="file-upload">
|
||||
<div class="file-upload-bg">
|
||||
<div style=" display: flex;align-items: center;justify-content: center; height:50px;margin-top:25px">
|
||||
<i class="el-icon-upload"></i>
|
||||
</div>
|
||||
<div class="file-upload-desc">仅允许导入xls、xlsx格式文件，文件大小不超过10m</div>
|
||||
<div class="file-upload-btn">
|
||||
<el-upload class="custom-el-upload" style="display:inline-block" ref="upload" :on-change="handleFileChange"
|
||||
:file-list="fileList" :auto-upload="false" :on-remove="handleRemove" action="#" accept=".xlsx, .xls">
|
||||
<el-button type="primary" :disabled="iscustomType">上传文件</el-button>
|
||||
</el-upload>
|
||||
<el-button class="template" icon="el-icon-download" type='text' @click="handleCsvDownload">模板样例.xlsx</el-button>
|
||||
</div>
|
||||
<!-- <div class="file-upload-download">
|
||||
<el-button icon="el-icon-download" type='text' @click="handleCsvDownload(2)" :disabled="isPrivate">企业模板下载</el-button>
|
||||
<el-button icon="el-icon-download" type='text' @click="handleCsvDownload(1)" :disabled="isPublic">商户模板下载</el-button>
|
||||
<el-button icon="el-icon-download" type='text' @click="handleCsvDownload(0)" :disabled="isPublic">个人模板下载</el-button>
|
||||
</div> -->
|
||||
<div class="file-upload-progress">
|
||||
<el-progress v-show="progressFlag" style="width:70%" :percentage="loadProgress"></el-progress>
|
||||
<el-button v-show="progressFlag" type="text" style="margin-left:20" @click="handleCsvPrase">预览</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-input">
|
||||
<span style="font-weight: 500">分群名称</span>
|
||||
<el-input placeholder="请输入客群名称" style="width: 612px;margin-left:20px" v-model="groupName" clearable></el-input>
|
||||
</div>
|
||||
<div class="group-select">
|
||||
<span style="font-weight: 400">客户类型</span>
|
||||
<el-select v-model="custType" style="width: 612px;margin-left:20px" change="handSelect" clearable>
|
||||
<el-option v-for="item in clientTypeOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" :disabled="item.disabled"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="preview-cnt">
|
||||
<p class="common-title">预览</p>
|
||||
<section class="table-wrap preview-table">
|
||||
<el-table :data="paginatedData" class="common-table-cnt">
|
||||
<el-table-column v-for="(column, index) in columns" :key="index" :prop="column"
|
||||
:label="column"></el-table-column>
|
||||
<!-- <el-table-column prop="客户号" label="客户号" align="center"></el-table-column>
|
||||
<el-table-column prop="客户内码" label="客户内码" align="center"></el-table-column>
|
||||
<el-table-column prop="客户姓名*" label="客户姓名*" align="center"></el-table-column>
|
||||
<el-table-column prop="证件号*" label="证件号*" align="center"></el-table-column>
|
||||
<el-table-column prop="推送客户经理" label="推送客户经理" align="center"></el-table-column>
|
||||
<el-table-column prop="推送网点" label="推送网点" align="center"></el-table-column> -->
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination v-if="isPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,prev,pager,next,sizes"
|
||||
:total="tableData.length" :current-page="currentPage"></el-pagination>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<!-- <div class="dialog-container">
|
||||
<el-dialog :visible.sync="importVisible" title="" width="25%" class="dialog-header" center>
|
||||
<div class="dialog-content">
|
||||
<div class="group-text err-text">
|
||||
<p>
|
||||
这是一段报错信息...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleImportCancle">取 消</el-button>
|
||||
<el-button type="primary" @click="exportErrData">
|
||||
导出
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as XLSX from "xlsx";
|
||||
import { Message } from 'element-ui'
|
||||
import { importData,downloadFile } from '@/api/system/importdata.js'
|
||||
import { downloadFiles } from '@/utils'
|
||||
import { mapGetters } from 'vuex'
|
||||
// import axios from 'axios'
|
||||
export default {
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPagination: false,
|
||||
columns: ["客户类型*", "客户名称", "客户号*", "推送机构号", "联系方式", "推送柜员号"],
|
||||
iscustomType: false,
|
||||
progressFlag: false,
|
||||
loadProgress: 0,
|
||||
file: null,
|
||||
groupName: '',
|
||||
jsonData: [],
|
||||
tablekey: 0,
|
||||
fileList: [],
|
||||
tableData: [],
|
||||
tableHeaders: [],
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
custType: "",
|
||||
clientTypeOptions: [
|
||||
{ value: "0", label: "个人" },
|
||||
{ value: "1", label: "商户" },
|
||||
{ value: "2", label: "企业" },
|
||||
],
|
||||
importVisible:false,
|
||||
groupId:''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['roles']),
|
||||
//对公
|
||||
isPublic() {
|
||||
return this.roles.includes('headPublic');
|
||||
},
|
||||
//对私
|
||||
isPrivate() {
|
||||
return this.roles.includes('headPrivate')
|
||||
},
|
||||
paginatedData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.tableData.slice(start, end);
|
||||
},
|
||||
},
|
||||
|
||||
created(){
|
||||
if(this.isPrivate){
|
||||
this.clientTypeOptions = this.clientTypeOptions.map(item=>{
|
||||
return {
|
||||
...item,
|
||||
disabled:item.value == '2'
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.isPublic){
|
||||
this.clientTypeOptions = this.clientTypeOptions.map(item=>{
|
||||
return {
|
||||
...item,
|
||||
disabled:item.value != '2'
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMessageCancel() {
|
||||
this.custType = '';
|
||||
this.groupName = '';
|
||||
this.tableData = [];
|
||||
this.$refs.upload.clearFiles();
|
||||
this.loadProgress = 0;
|
||||
this.progressFlag = false;
|
||||
Message.warning('取消提交!')
|
||||
},
|
||||
handleSubmit() {
|
||||
const formData = new FormData();
|
||||
|
||||
if (this.groupName == '') {
|
||||
Message.error('分群名称不能为空')
|
||||
return;
|
||||
}
|
||||
if (this.custType == '') {
|
||||
Message.error('客户类型未选择')
|
||||
return;
|
||||
}
|
||||
if (this.$refs.upload.uploadFiles[0]?.raw == null) {
|
||||
|
||||
Message.error('请上传文件侯提交')
|
||||
return;
|
||||
}
|
||||
formData.append('groupName', this.groupName.trim())
|
||||
formData.append('file', this.$refs.upload.uploadFiles[0]?.raw)
|
||||
formData.append('custType', this.custType)
|
||||
formData.append('importType ','0')
|
||||
importData(formData).then(res => {
|
||||
if (res.code == 200) {
|
||||
const {warningStr,notEmptyList} = res.data;
|
||||
if(warningStr){
|
||||
// const groupId = notEmptyList[0].groupId;
|
||||
// this.goBackToCreateType(warningStr,groupId,this.groupName.trim())
|
||||
Message.success(`导入成功,${warningStr}`)
|
||||
}else{
|
||||
Message.success('导入成功')
|
||||
this.goBackToCreateType()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
// 导入报错弹框取消
|
||||
handleImportCancle() {
|
||||
this.importVisible = false;
|
||||
},
|
||||
|
||||
// 导出失败数据
|
||||
exportErrData(){
|
||||
this.download(
|
||||
`/system/group/exportDataError/?groupId=${this.groupId
|
||||
}`,
|
||||
{},
|
||||
`导入失败_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
//判断客户类型
|
||||
if(file.size>10*1024*1000){
|
||||
Message.warning('文件大小不能超过10m');
|
||||
return;
|
||||
}
|
||||
this.file = file;
|
||||
if (fileList.length > 0) {
|
||||
this.fileList = [fileList[fileList.length - 1]]
|
||||
}
|
||||
if (file.status === 'ready') {
|
||||
// alert(file.status)
|
||||
this.progressFlag = true;
|
||||
this.loadProgress = 0;
|
||||
const interval = setInterval(() => {
|
||||
if (this.loadProgress >= 100) {
|
||||
|
||||
// alert(this.subCustType)
|
||||
|
||||
clearInterval(interval)
|
||||
return;
|
||||
}
|
||||
this.loadProgress += 1;
|
||||
}, 20)
|
||||
}
|
||||
if (file.status == 'success') {
|
||||
|
||||
this.progressFlag = false;
|
||||
this.loadProgress = 100;
|
||||
}
|
||||
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.currentPage = newPage;
|
||||
},
|
||||
handleCsvColumns() {
|
||||
if (!this.file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = e.target.result;
|
||||
const workbook = XLSX.read(data, { type: "binary" });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const json_data = XLSX.utils.sheet_to_json(worksheet);
|
||||
// this.columns = Object.keys(json_data[0]).map(item => {
|
||||
// if (item.includes('商户')) {
|
||||
// this.subCustType = 1
|
||||
// return;
|
||||
// }
|
||||
// else if (item.includes('企业')) {
|
||||
// this.subCustType = 2
|
||||
// return;
|
||||
// } else {
|
||||
// this.subCustType = 0
|
||||
// }
|
||||
|
||||
// })
|
||||
};
|
||||
reader.readAsBinaryString(this.file.raw);
|
||||
},
|
||||
handleCsvPrase() {
|
||||
if (!this.file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = e.target.result;
|
||||
const workbook = XLSX.read(data, { type: "binary" });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const json_data = XLSX.utils.sheet_to_json(worksheet);
|
||||
// console.log(json_data,'json_data')
|
||||
// this.columns = Object.keys(json_data[0]).map(item => {
|
||||
|
||||
// if (item.includes('证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)')) {
|
||||
// return item = '证件类型'
|
||||
// }
|
||||
// return item;
|
||||
// })
|
||||
this.tableData = json_data.map(obj => {
|
||||
// if (obj['证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)']) {
|
||||
// obj['证件类型'] = obj['证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)']
|
||||
// delete obj['证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)']
|
||||
// }
|
||||
let keys = Object.keys(obj);
|
||||
let key1 = keys.find(i=>i.includes('客户类型'));
|
||||
let key2 = keys.find(i=>i.includes('客户名称'));
|
||||
let key3 = keys.find(i=>i.includes('推送机构号'));
|
||||
return {
|
||||
...obj,
|
||||
'客户类型*':obj[key1],
|
||||
'客户名称':obj[key2],
|
||||
'推送机构号':obj[key3],
|
||||
}
|
||||
// for (let key in obj) {
|
||||
// debugger
|
||||
// if (key == '证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)') {
|
||||
// obj['证件类型'] = obj[key];
|
||||
// delete obj.key;
|
||||
|
||||
// }
|
||||
// return obj
|
||||
// }
|
||||
|
||||
}) || [];
|
||||
this.isPagination = true
|
||||
};
|
||||
// console.log(this.columns,this.tableData)
|
||||
reader.readAsBinaryString(this.file.raw);
|
||||
},
|
||||
|
||||
goBackToCreateType(warningStr,groupId,groupName) {
|
||||
|
||||
this.$router.replace({
|
||||
path:'/grid/create/segmentation',
|
||||
// query: {
|
||||
// refresh: true,
|
||||
// warningStr,
|
||||
// groupId
|
||||
// }
|
||||
})
|
||||
if(warningStr){
|
||||
this.$store.commit("SET_IMPORT_ERROR", {
|
||||
warningStr,
|
||||
groupId,
|
||||
groupName
|
||||
});
|
||||
}
|
||||
},
|
||||
handleCsvDownload() {
|
||||
let resultName = `模板_${new Date().getTime()}.xlsx`;
|
||||
// if (type == 0) {
|
||||
// // this.custType='0'
|
||||
// resultName = `个人模板_${new Date().getTime()}.xlsx`
|
||||
// }
|
||||
// else if (type == 2) {
|
||||
// // this.custType='2'
|
||||
// resultName = `企业模板_${new Date().getTime()}.xlsx`
|
||||
// }
|
||||
// else {
|
||||
// // this.custType='1'
|
||||
// resultName = `商户模板_${new Date().getTime()}.xlsx`
|
||||
// }
|
||||
|
||||
downloadFile('').then(res=>{
|
||||
downloadFiles(res, resultName)
|
||||
})
|
||||
},
|
||||
handleRemove() {
|
||||
this.tableData = []
|
||||
this.loadProgress = 0;
|
||||
this.progressFlag = false
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './../create-style.scss';
|
||||
|
||||
.file-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 320px;
|
||||
|
||||
.group-input {
|
||||
width: 702px;
|
||||
height: 288px;
|
||||
margin-top: 25px;
|
||||
|
||||
}
|
||||
|
||||
.group-select {
|
||||
width: 702px;
|
||||
height: 288px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.file-upload-bg {
|
||||
width: 702px;
|
||||
height: 288px;
|
||||
background: #F7F8FA;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.el-icon-upload {
|
||||
text-align: center;
|
||||
font-size: 47.36px;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.file-upload-desc {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.file-upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
::v-deep .el-upload-list{
|
||||
display: none;
|
||||
}
|
||||
.template{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-upload-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.preview-cnt {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.chose-cnt {
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button {
|
||||
width: 88px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-button
|
||||
icon="el-icon-arrow-left"
|
||||
@click="goBackToCreateType"
|
||||
type="text"
|
||||
style="margin: 20px 0 0 20px"
|
||||
></el-button>
|
||||
</el-row>
|
||||
<el-row class="inputcontext">
|
||||
<div>
|
||||
<!-- 文件选择按钮 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="8">
|
||||
<el-upload
|
||||
class="custom-el-upload"
|
||||
ref="upload"
|
||||
:on-change="handleFileChange"
|
||||
:file-list="fileList"
|
||||
:auto-upload="false"
|
||||
:on-remove="handleRemove"
|
||||
action="#"
|
||||
accept=".xlsx"
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-upload"
|
||||
type="primary"
|
||||
style="margin-right: 20; margin-left: 20"
|
||||
>上传文件</el-button
|
||||
>
|
||||
<!-- <input type="file" name="csvfile" ref="csvData" /> -->
|
||||
<div slot="tip" class="el-upload-tip;" style="color: orange">
|
||||
只支持xlsx文件上传，限制10M
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :span="5"> <el-button
|
||||
icon="el-icon-download"
|
||||
@click="handleCsvDownload"
|
||||
>模板下载</el-button
|
||||
></el-col>
|
||||
<el-col :span="4">
|
||||
<el-button icon="el-icon-eye" style="margin-rignt:20" @click="handleCsvPrase"
|
||||
>预览</el-button
|
||||
></el-col
|
||||
>
|
||||
<el-col :span="3">
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
</el-col>
|
||||
<el-col :span="3"> <el-button @click="handleMessageCancel">重置</el-button></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row class="inputcontext">
|
||||
<!-- <el-col :span="2">
|
||||
<span style="font-weight: bold">分群名称</span>
|
||||
</el-col> -->
|
||||
<el-col :span="8">
|
||||
<span style="font-weight: bold">分群名称</span>
|
||||
<el-input placeholder="请输入客群名称" style="width: 300px;margin-left:20px" v-model="groupName"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="inputcontext">
|
||||
<!-- <el-col :span="2">
|
||||
<span style="font-weight: bold">客户类型</span>
|
||||
</el-col> -->
|
||||
<el-col :span="8">
|
||||
<span style="font-weight: bold">客户类型</span>
|
||||
<el-select v-model="custType" style="width: 300px;margin-left:20px">
|
||||
<el-option
|
||||
v-for="item in clientTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <div>
|
||||
<el-row class="inputcontext">
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleMessageCancel">重置</el-button>
|
||||
</el-row>
|
||||
</div> -->
|
||||
<div style="margin-top: 50px">
|
||||
<el-row class="yulan">预览</el-row>
|
||||
<hr style="border-color: rgba(128, 128, 128, 0.2)" />
|
||||
<el-row class="inputcontext">
|
||||
|
||||
<el-table :data="paginatedData" style="width: 80%" align="center">
|
||||
<el-table-column prop="客户号" label="客户号" align="center"></el-table-column>
|
||||
<el-table-column prop="客户内码" label="客户内码" align="center"></el-table-column>
|
||||
<el-table-column prop="客户姓名" label="客户姓名" align="center"></el-table-column>
|
||||
<el-table-column prop="证件号" label="证件号" align="center"></el-table-column>
|
||||
<el-table-column prop="归属客户经理姓名" label="归属客户经理姓名" align="center"></el-table-column>
|
||||
<el-table-column prop="归属网格名称" label="归属网格名称" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="tableData.length"
|
||||
:current-page="currentPage"
|
||||
></el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="tableData.length"
|
||||
:current-page="currentPage"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as XLSX from "xlsx";
|
||||
import {Message} from 'element-ui'
|
||||
import {importData} from '@/api/system/importdata.js'
|
||||
// import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
file: null,
|
||||
groupName:'',
|
||||
jsonData: [],
|
||||
tablekey: 0,
|
||||
fileList: [],
|
||||
tableData: [],
|
||||
tableHeaders: [],
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
custType: "",
|
||||
clientTypeOptions: [
|
||||
{ value: "0", label: "个人" },
|
||||
{ value: "1", label: "商户" },
|
||||
{ value: "2", label: "企业" },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
paginatedData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.tableData.slice(start, end);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMessageCancel() {
|
||||
this.custType='';
|
||||
this.groupName='';
|
||||
this.tableData=[];
|
||||
this.$refs.upload.clearFiles();
|
||||
Message.warning('取消提交!')
|
||||
},
|
||||
handleSubmit() {
|
||||
const formData = new FormData();
|
||||
if(this.groupName=='') {
|
||||
Message.error('分群名称不能为空')
|
||||
return;
|
||||
}
|
||||
if(this.custType=='') {
|
||||
Message.error('客户类型未选择')
|
||||
return;
|
||||
}
|
||||
if(this.$refs.upload.uploadFiles[0]?.raw==null) {
|
||||
Message.error('请上传文件侯提交')
|
||||
return;
|
||||
}
|
||||
formData.append('groupName',this.groupName)
|
||||
formData.append('file',this.$refs.upload.uploadFiles[0]?.raw)
|
||||
formData.append('custType',this.custType)
|
||||
importData(formData).then(res => {
|
||||
if(res.msg=='导入客群创建成功'){
|
||||
Message.success('添加成功')
|
||||
this.goBackToCreateType()
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleFileChange(file) {
|
||||
this.file = file;
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.currentPage = newPage;
|
||||
},
|
||||
handleCsvPrase() {
|
||||
if (!this.file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = e.target.result;
|
||||
const workbook = XLSX.read(data, { type: "binary" });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const json_data = XLSX.utils.sheet_to_json(worksheet);
|
||||
this.tableData = json_data;
|
||||
};
|
||||
reader.readAsBinaryString(this.file.raw);
|
||||
},
|
||||
|
||||
goBackToCreateType() {
|
||||
|
||||
this.$router.replace({
|
||||
path: this.$router.go(-1),
|
||||
query: {
|
||||
refresh:true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCsvDownload() {
|
||||
this.download(
|
||||
"/system/group/download",
|
||||
{},
|
||||
`customer_template_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
handleRemove() {
|
||||
this.tableData=[]
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inputcontext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.yulan {
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-el-upload {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,427 @@
|
||||
<template>
|
||||
<div class="common-wrap-cnt">
|
||||
<section class="common-create-main">
|
||||
<!-- <p class="common-title">文件上传</p> -->
|
||||
<section class="file-upload">
|
||||
<div class="file-upload-bg">
|
||||
<!-- <div style=" display: flex;align-items: center;justify-content: center; height:50px;margin-top:25px">
|
||||
<i class="el-icon-upload"></i>
|
||||
</div> -->
|
||||
<div class="file-upload-btn">
|
||||
<el-upload class="custom-el-upload" style="display:inline-block" ref="upload" :on-change="handleFileChange"
|
||||
:file-list="fileList" :auto-upload="false" :on-remove="handleRemove" action="#" accept=".xlsx,.xls">
|
||||
<el-button type="primary" :disabled="iscustomType">上传文件</el-button>
|
||||
</el-upload>
|
||||
<el-button class="template" icon="el-icon-download" type='text' @click="handleCsvDownload">模板样例.xlsx</el-button>
|
||||
</div>
|
||||
<div class="file-upload-desc">请上传xls、xlsx文件,大小在10M以内</div>
|
||||
<!-- <div class="file-upload-download">
|
||||
<el-button icon="el-icon-download" type='text' @click="handleCsvDownload(2)">企业模板下载</el-button>
|
||||
<el-button icon="el-icon-download" type='text' @click="handleCsvDownload(1)">商户模板下载</el-button>
|
||||
<el-button icon="el-icon-download" type='text' @click="handleCsvDownload(0)">个人模板下载</el-button>
|
||||
</div> -->
|
||||
<div class="file-upload-progress">
|
||||
<el-progress v-show="progressFlag" style="width:70%" :percentage="loadProgress"></el-progress>
|
||||
<el-button v-show="progressFlag" type="text" style="margin-left:20" @click="handleCsvPrase">预览</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-input">
|
||||
<span style="font-weight: 500">分群名称</span>
|
||||
<el-input placeholder="请输入客群名称" style="width: 612px;margin-left:20px" v-model="groupName" disabled></el-input>
|
||||
</div>
|
||||
<div class="group-select">
|
||||
<span style="font-weight: 400">客户类型</span>
|
||||
<el-select v-model="custType" style="width: 612px;margin-left:20px" change="handSelect" disabled>
|
||||
<el-option v-for="item in clientTypeOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</section>
|
||||
<section class="preview-cnt">
|
||||
<p class="common-title">预览</p>
|
||||
<section class="table-wrap preview-table">
|
||||
<el-table :data="paginatedData" class="common-table-cnt">
|
||||
<el-table-column v-for="(column, index) in columns" :key="index" :prop="column"
|
||||
:label="column" show-overflow-tooltip></el-table-column>
|
||||
<!-- <el-table-column prop="客户号" label="客户号" align="center"></el-table-column>
|
||||
<el-table-column prop="客户内码" label="客户内码" align="center"></el-table-column>
|
||||
<el-table-column prop="客户姓名*" label="客户姓名*" align="center"></el-table-column>
|
||||
<el-table-column prop="证件号*" label="证件号*" align="center"></el-table-column>
|
||||
<el-table-column prop="推送客户经理" label="推送客户经理" align="center"></el-table-column>
|
||||
<el-table-column prop="推送网点" label="推送网点" align="center"></el-table-column> -->
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination v-if="isPagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,prev,pager,next,sizes"
|
||||
:total="tableData.length" :current-page="currentPage"></el-pagination>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as XLSX from "xlsx";
|
||||
import { Message } from 'element-ui'
|
||||
import { importData,downloadFile } from '@/api/system/importdata.js'
|
||||
import { downloadFiles } from '@/utils'
|
||||
// import axios from 'axios'
|
||||
export default {
|
||||
props: ['groupId','groupName','custType'],
|
||||
data() {
|
||||
return {
|
||||
isPagination: false,
|
||||
columns: ["客户类型*", "客户名称", "客户号*", "推送机构号", "联系方式", "推送柜员号"],
|
||||
iscustomType: false,
|
||||
progressFlag: false,
|
||||
loadProgress: 0,
|
||||
file: null,
|
||||
// groupName: '',
|
||||
jsonData: [],
|
||||
tablekey: 0,
|
||||
fileList: [],
|
||||
tableData: [],
|
||||
tableHeaders: [],
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
// custType: "",
|
||||
clientTypeOptions: [
|
||||
{ value: "0", label: "个人" },
|
||||
{ value: "1", label: "商户" },
|
||||
{ value: "2", label: "企业" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
paginatedData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.tableData.slice(start, end);
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleMessageCancel() {
|
||||
this.custType = '';
|
||||
this.groupName = '';
|
||||
this.tableData = [];
|
||||
this.$refs.upload.clearFiles();
|
||||
this.loadProgress = 0;
|
||||
this.progressFlag = false;
|
||||
Message.warning('取消提交!')
|
||||
},
|
||||
handleMessageCancel2() {
|
||||
// this.custType = '';
|
||||
// this.groupName = '';
|
||||
this.tableData = [];
|
||||
this.$refs.upload.clearFiles();
|
||||
this.loadProgress = 0;
|
||||
// this.columns=[];
|
||||
this.progressFlag = false;
|
||||
},
|
||||
handleSubmit() {
|
||||
const formData = new FormData();
|
||||
|
||||
if (this.groupName == '') {
|
||||
Message.error('分群名称不能为空')
|
||||
return;
|
||||
}
|
||||
if (this.custType == '') {
|
||||
Message.error('客户类型未选择')
|
||||
return;
|
||||
}
|
||||
if (this.$refs.upload.uploadFiles[0]?.raw == null) {
|
||||
|
||||
Message.error('请上传文件侯提交')
|
||||
return;
|
||||
}
|
||||
// formData.append('groupName', this.groupName.trim())
|
||||
formData.append('file', this.$refs.upload.uploadFiles[0]?.raw)
|
||||
formData.append('custType', this.custType)
|
||||
formData.append('importType ','1')
|
||||
formData.append('groupId ',this.groupId)
|
||||
importData(formData).then(res => {
|
||||
if (res.code == 200) {
|
||||
const {warningStr,notEmptyList} = res.data;
|
||||
if(warningStr){
|
||||
const newArr = notEmptyList.filter(item=>item.pushStatus == '1')
|
||||
// console.log(newArr)
|
||||
if(!newArr.length){
|
||||
Message.warning(`导入成功,${warningStr},没有可以进一步添加的客户`);
|
||||
}else{
|
||||
Message.warning(`导入成功,${warningStr},存在可以进一步添加的客户`);
|
||||
setTimeout(()=>{
|
||||
this.$emit('handOk',newArr || [])
|
||||
},300)
|
||||
}
|
||||
}else{
|
||||
Message.success('导入成功')
|
||||
this.$emit('handOk',notEmptyList || [])
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
//判断客户类型
|
||||
if(file.size>10*1024*1000){
|
||||
Message.warning('文件大小不能超过10m');
|
||||
return;
|
||||
}
|
||||
this.file = file;
|
||||
if (fileList.length > 0) {
|
||||
this.fileList = [fileList[fileList.length - 1]]
|
||||
}
|
||||
if (file.status === 'ready') {
|
||||
// alert(file.status)
|
||||
this.progressFlag = true;
|
||||
this.loadProgress = 0;
|
||||
const interval = setInterval(() => {
|
||||
if (this.loadProgress >= 100) {
|
||||
|
||||
// alert(this.subCustType)
|
||||
|
||||
clearInterval(interval)
|
||||
return;
|
||||
}
|
||||
this.loadProgress += 1;
|
||||
}, 20)
|
||||
}
|
||||
if (file.status == 'success') {
|
||||
|
||||
this.progressFlag = false;
|
||||
this.loadProgress = 100;
|
||||
}
|
||||
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.currentPage = newPage;
|
||||
},
|
||||
handleCsvColumns() {
|
||||
if (!this.file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = e.target.result;
|
||||
const workbook = XLSX.read(data, { type: "binary" });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const json_data = XLSX.utils.sheet_to_json(worksheet);
|
||||
// this.columns = Object.keys(json_data[0]).map(item => {
|
||||
// if (item.includes('商户')) {
|
||||
// this.subCustType = 1
|
||||
// return;
|
||||
// }
|
||||
// else if (item.includes('企业')) {
|
||||
// this.subCustType = 2
|
||||
// return;
|
||||
// } else {
|
||||
// this.subCustType = 0
|
||||
// }
|
||||
|
||||
// })
|
||||
};
|
||||
reader.readAsBinaryString(this.file.raw);
|
||||
},
|
||||
handleCsvPrase() {
|
||||
if (!this.file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = e.target.result;
|
||||
const workbook = XLSX.read(data, { type: "binary" });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
const json_data = XLSX.utils.sheet_to_json(worksheet);
|
||||
// console.log(json_data,'json_data')
|
||||
// this.columns = Object.keys(json_data[0]).map(item => {
|
||||
|
||||
// if (item.includes('证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)')) {
|
||||
// return item = '证件类型'
|
||||
// }
|
||||
// return item;
|
||||
// })
|
||||
this.tableData = json_data.map(obj => {
|
||||
// if (obj['证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)']) {
|
||||
// obj['证件类型'] = obj['证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)']
|
||||
// delete obj['证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)']
|
||||
// }
|
||||
let keys = Object.keys(obj);
|
||||
let key1 = keys.find(i=>i.includes('客户类型'));
|
||||
let key2 = keys.find(i=>i.includes('客户名称'));
|
||||
let key3 = keys.find(i=>i.includes('推送机构号'));
|
||||
return {
|
||||
...obj,
|
||||
'客户类型*':obj[key1],
|
||||
'客户名称':obj[key2],
|
||||
'推送机构号':obj[key3],
|
||||
}
|
||||
// for (let key in obj) {
|
||||
// debugger
|
||||
// if (key == '证件类型(居民二代身份证/居民身份证/港澳居民来往内地通行证/台湾居民来往大陆通行证/外国人永久居留身份证)') {
|
||||
// obj['证件类型'] = obj[key];
|
||||
// delete obj.key;
|
||||
|
||||
// }
|
||||
// return obj
|
||||
// }
|
||||
|
||||
}) || [];
|
||||
this.isPagination = true
|
||||
console.log(this.tableData)
|
||||
};
|
||||
|
||||
reader.readAsBinaryString(this.file.raw);
|
||||
},
|
||||
|
||||
goBackToCreateType() {
|
||||
|
||||
this.$router.replace({
|
||||
path: this.$router.go(-1),
|
||||
query: {
|
||||
refresh: true
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCsvDownload() {
|
||||
let resultName=`模板_${new Date().getTime()}.xlsx`;
|
||||
// if (this.custType == '0') {
|
||||
// // this.custType='0'
|
||||
// resultName = `个人模板_${new Date().getTime()}.xlsx`
|
||||
// }
|
||||
// else if (this.custType == '2') {
|
||||
// // this.custType='2'
|
||||
// resultName = `企业模板_${new Date().getTime()}.xlsx`
|
||||
// }
|
||||
// else {
|
||||
// // this.custType='1'
|
||||
// resultName = `商户模板_${new Date().getTime()}.xlsx`
|
||||
// }
|
||||
|
||||
downloadFile('').then(res=>{
|
||||
downloadFiles(res, resultName)
|
||||
})
|
||||
},
|
||||
handleRemove() {
|
||||
this.tableData = []
|
||||
this.loadProgress = 0;
|
||||
this.progressFlag = false
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './../create-style.scss';
|
||||
|
||||
.file-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 320px;
|
||||
|
||||
.group-input {
|
||||
width: 702px;
|
||||
height: 120px;
|
||||
// margin-top: 25px;
|
||||
|
||||
}
|
||||
|
||||
.group-select {
|
||||
width: 702px;
|
||||
height: 120px;
|
||||
// margin-top: 25px;
|
||||
}
|
||||
|
||||
.file-upload-bg {
|
||||
// width: 702px;
|
||||
height: 288px;
|
||||
// background: #F7F8FA;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.el-icon-upload {
|
||||
text-align: center;
|
||||
font-size: 47.36px;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.file-upload-desc {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
// text-align: center;
|
||||
line-height: 12px;
|
||||
// margin-top: 8px;
|
||||
}
|
||||
|
||||
.file-upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
::v-deep .el-upload-list{
|
||||
display: none;
|
||||
}
|
||||
.template{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-upload-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-upload-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.preview-cnt {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chose-cnt {
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button {
|
||||
width: 88px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-operate{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
1451
ruoyi-ui/src/views/customer/customerbase/segmentation/index.vue
Normal file
1451
ruoyi-ui/src/views/customer/customerbase/segmentation/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
651
ruoyi-ui/src/views/customer/customerbase/segmentation/index1.vue
Normal file
651
ruoyi-ui/src/views/customer/customerbase/segmentation/index1.vue
Normal file
@@ -0,0 +1,651 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row class="title">
|
||||
<el-col>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="showCreateDialog = true"
|
||||
>创建分群</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-radio-group
|
||||
class="title"
|
||||
v-model="selectedTab"
|
||||
@change="handleTabChange"
|
||||
>
|
||||
<el-radio-button
|
||||
label="我创建的"
|
||||
:disabled="radiosButonIsDisableFromMe"
|
||||
>我创建的</el-radio-button
|
||||
>
|
||||
<el-radio-button
|
||||
label="推荐给我的"
|
||||
:disabled="radiosButonIsDisableToMe"
|
||||
>推荐给我的</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
<el-col style="display: flex">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="输入分群名称"
|
||||
clearable
|
||||
@clear="handSearch"
|
||||
@keyup.enter.native="handSearch"
|
||||
></el-input>
|
||||
<el-button icon="el-icon-search" @click="handSearch"></el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:visible.sync="showCreateDialog"
|
||||
title="怎样创建分群？"
|
||||
width="30%"
|
||||
>
|
||||
<div class="dialog-content">
|
||||
<el-row>
|
||||
<el-button>规则创建</el-button>
|
||||
|
||||
<el-button type="primary" @click="handleImport">导入创建</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="() => {showCreateDialog = false;this.getList();this.campaignId=''}">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<div v-if="!isCreatePag">
|
||||
<right-toolbar :handSearch.sync="handSearch" @queryTable="getList" :columns="columns"></right-toolbar>
|
||||
<el-table :data="paginatedData" style="width: 100%">
|
||||
<el-table-column prop="groupName" label="分群名称" sortable v-if="columns[0].visible"></el-table-column>
|
||||
<el-table-column prop="custType" label="客户类型" sortable v-if="columns[1].visible">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.custType==0">个人</span>
|
||||
<span v-if="scope.row.custType==1">企业</span>
|
||||
<span v-if="scope.row.custType==2">商户</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="customerNum" label="人数" sortable v-if="columns[2].visible"></el-table-column>
|
||||
<el-table-column prop="createType" label="创建方式" sortable v-if="columns[3].visible"></el-table-column>
|
||||
<el-table-column prop="createBy" label="创建者" sortable v-if="columns[4].visible"></el-table-column>
|
||||
<el-table-column prop="updateType" label="更新方法" sortable v-if="columns[5].visible"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" sortable v-if="columns[6].visible"></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="updateTime"
|
||||
label="最近更新时间"
|
||||
v-if="columns[7].visible"
|
||||
></el-table-column>
|
||||
<el-table-column prop="operate" label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="
|
||||
handleCustDetail(
|
||||
scope.row.groupId,
|
||||
scope.row.groupName,
|
||||
scope.row.campaignId,
|
||||
scope.row.groupType,
|
||||
'0',
|
||||
scope.row.distributeType
|
||||
)
|
||||
"
|
||||
>查看</el-button
|
||||
>
|
||||
<!-- <a href="#" @click.prevent="importIn">导入</a> -->
|
||||
<el-button
|
||||
type="text"
|
||||
@click="handleGroupCustExport(scope.row.groupId)"
|
||||
>导出</el-button
|
||||
>
|
||||
<!-- <a href="#" @click.prevent="recommend">推荐</a> -->
|
||||
<el-button
|
||||
type="text"
|
||||
:disabled="isHeader&&scope.row.createRole==1?true:false"
|
||||
@click="
|
||||
handlePushGroupCustomer(
|
||||
scope.row.groupName,
|
||||
scope.row.groupId,
|
||||
scope.row.campaignId
|
||||
)
|
||||
"
|
||||
>推送</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="groupTable.length"
|
||||
:current-page="currentPage"
|
||||
></el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-empty v-if="showmap" description="总行管理员无需推荐..." />
|
||||
<!-- 添加或修改用户配置对话框 -->
|
||||
<el-dialog
|
||||
:title="pushTitle"
|
||||
:visible.sync="pushOpen"
|
||||
width="600px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
ref="pushform"
|
||||
:model="pushform"
|
||||
:rules="pushroles"
|
||||
label-width="80px"
|
||||
:disabled="ispushformread"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="分群名称" prop="groupName">
|
||||
<el-input
|
||||
v-model="pushform.groupName"
|
||||
:disabled="true"
|
||||
maxlength="30"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="活动名称" prop="campaignName">
|
||||
<el-input
|
||||
v-model="pushform.campaignName"
|
||||
|
||||
placeholder="请输入活动名称"
|
||||
maxlength="30"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="活动类型" prop="campaignType" style="flex: 1">
|
||||
<el-select
|
||||
v-model="pushform.campaignType"
|
||||
placeholder="请选择活动类型"
|
||||
width="100%"
|
||||
>
|
||||
<el-option label="走访" value="走访"></el-option>
|
||||
<el-option label="电话" value="电话"></el-option>
|
||||
<el-option label="短信" value="短信"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="紧急程度"
|
||||
prop="campaignDegree"
|
||||
style="flex: 1"
|
||||
>
|
||||
<el-select
|
||||
v-model="pushform.campaignDegree"
|
||||
placeholder="请选择紧急程度"
|
||||
>
|
||||
<el-option label="高" value="高"></el-option>
|
||||
<el-option label="中" value="中"></el-option>
|
||||
<el-option label="低" value="低"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="认领类型" prop="claimType" style="flex: 1">
|
||||
<el-select
|
||||
v-model="pushform.claimType"
|
||||
placeholder="请选择认领类型"
|
||||
width="100%"
|
||||
>
|
||||
<el-option label="强制认领" value="0"></el-option>
|
||||
<el-option label="可选认领" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 活动时间 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="活动时间" prop="dateRange" style="flex: 1">
|
||||
<el-date-picker
|
||||
width="100%"
|
||||
v-model="pushform.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="认领时间"
|
||||
prop="claimdateRange"
|
||||
style="flex: 1"
|
||||
>
|
||||
<el-date-picker
|
||||
width="100%"
|
||||
v-model="pushform.claimdateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="执行人" prop="executer" v-if="isHeader" style="flex: 1">
|
||||
<el-radio-group v-model="pushform.executer" width="100%">
|
||||
<el-radio label="0">机构</el-radio>
|
||||
<el-radio label="1">个人</el-radio>
|
||||
<el-radio label="2">混合分配</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="分配规则"
|
||||
prop="distributeType"
|
||||
style="flex: 1"
|
||||
>
|
||||
<el-radio-group v-model="pushform.distributeType" width="100%">
|
||||
<el-radio label="0">手动指定</el-radio>
|
||||
<el-radio label="1">按照客户归属机构</el-radio>
|
||||
<el-radio label="2">按照地址归属</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" :disabled="ispushformread" @click="handleInfoSubmit">确 定</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
() => {
|
||||
this.pushOpen = false;
|
||||
this.getList()
|
||||
}
|
||||
"
|
||||
>取 消</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { groupList, exportData } from "@/api/system/grouplist";
|
||||
import { isHead, campaignDetail } from "@/api/system/findCustByGroupId.js";
|
||||
import { campaignAdd } from "@/api/system/campaign.js";
|
||||
import { Message } from "element-ui";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isPushBtn:false,
|
||||
columns: [
|
||||
{ key: 0, label: `分群名称`, visible: true },
|
||||
{ key: 1, label: `客户类型`, visible: true },
|
||||
{ key: 2, label: `人数`, visible: true },
|
||||
{ key: 3, label: `创建方式`, visible: true },
|
||||
{ key: 4, label: `创建者`, visible: true },
|
||||
{ key: 5, label: `更新方法`, visible: true },
|
||||
{ key: 6, label: `状态`, visible: true },
|
||||
{ key: 7, label: `最近更新时间`, visible: true },
|
||||
],
|
||||
pushOpen: false,
|
||||
isHeader: false,
|
||||
pushroles: {
|
||||
groupName: [
|
||||
{ required: true, message: "分群名称不能为空" },
|
||||
{
|
||||
min: 2,
|
||||
max: 20,
|
||||
message: "分群名称长度必须介于 2 和 20 之间",
|
||||
},
|
||||
],
|
||||
campaignName: [
|
||||
{ required: true, message: "活动名称不能为空"},
|
||||
{
|
||||
min: 2,
|
||||
max: 20,
|
||||
message: "活动名称长度必须介于 2 和 20 之间",
|
||||
},
|
||||
],
|
||||
campaignType: [{ required: true, message: "请选择活动类型" }],
|
||||
campaignDegree: [{ required: true, message: "请选择紧急程度" }],
|
||||
claimType: [{ required: true, message: "请选择认领类型" }],
|
||||
dateRange: [{ required: true, message: "请选择活动时间" }],
|
||||
claimdateRange: [{ required: true, message: "请选择认领时间" }],
|
||||
executer: [{ required: true, message: "请选择执行人" }],
|
||||
distributeType: [{ required: true, message: "请选择分配规则" }],
|
||||
},
|
||||
pushform: {
|
||||
groupName: "",
|
||||
claimType: "",
|
||||
campaignDegree: "",
|
||||
campaignType: "",
|
||||
campaignName: "",
|
||||
executer: {},
|
||||
distributeType: {},
|
||||
claimdateRange: [],
|
||||
dateRange: [],
|
||||
},
|
||||
pushOpen: false,
|
||||
pushTitle: "创建活动",
|
||||
radiosButonIsDisableFromMe: false,
|
||||
radiosButonIsDisableToMe: false,
|
||||
userType: "0",
|
||||
showmap: false,
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
isCreatePag: false,
|
||||
groupFlag: "1",
|
||||
groupTable: [],
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
selectedTab: "我创建的",
|
||||
searchQuery: "",
|
||||
showCreateDialog: false,
|
||||
selectedCreateType: "",
|
||||
isCreatePage: false,
|
||||
tableData: [],
|
||||
groupId: "",
|
||||
createRole: "",
|
||||
campaignId: "",
|
||||
ispushformread: false,
|
||||
pushformDetail: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredTableData() {
|
||||
if (this.searchQuery) {
|
||||
return this.groupTable.filter((item) =>
|
||||
item.groupName.includes(this.searchQuery)
|
||||
);
|
||||
}
|
||||
return this.groupTable;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.$router.go(0)
|
||||
this.isUserType();
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
if (this.$router.query.refresh) {
|
||||
this.$router.go(0);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paginatedData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.groupTable.slice(start, end);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
parseFormattedDate(formattedDateString) {
|
||||
const isoDateString = formattedDateString.replace(" ", "T");
|
||||
const date = new Date(isoDateString);
|
||||
if (isNaN(date.getTime())) {
|
||||
return null;
|
||||
}
|
||||
return date;
|
||||
},
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toISOString().slice(0, 19).replace("T", " ");
|
||||
},
|
||||
handleInfoSubmit() {
|
||||
this.isPushBtn = false;
|
||||
this.$refs["pushform"].validate((valid) => {
|
||||
if (valid) {
|
||||
let startTime = this.formatDate(this.pushform.dateRange[0]);
|
||||
let endTime = this.formatDate(this.pushform.dateRange[1]);
|
||||
let claimStartTime = this.formatDate(this.pushform.claimdateRange[0]);
|
||||
let claimEndTime = this.formatDate(this.pushform.claimdateRange[1]);
|
||||
let queryParams = {};
|
||||
queryParams.startTime = startTime;
|
||||
queryParams.endTime = endTime;
|
||||
queryParams.claimStartTime = claimStartTime;
|
||||
queryParams.claimEndTime = claimEndTime;
|
||||
queryParams.groupId = this.groupId;
|
||||
queryParams.campaignName = this.pushform.campaignName;
|
||||
queryParams.campaignType = this.pushform.campaignType;
|
||||
queryParams.campaignDegree = this.pushform.campaignDegree;
|
||||
queryParams.executer = this.pushform.executer;
|
||||
queryParams.distributeType = this.pushform.distributeType;
|
||||
queryParams.claimType = this.pushform.claimType;
|
||||
queryParams.createRole = this.createRole;
|
||||
|
||||
campaignAdd(queryParams).then((res) => {
|
||||
if (res.code == "200") {
|
||||
Message.success(`分群${this.pushform.groupName}活动创建成功!`);
|
||||
this.getList()
|
||||
this.pushOpen = false;
|
||||
//将执行人类型传给详情
|
||||
// this.$router.push({ path: '/groupBase/customerDetail', query: { executer:this.pushform.executer} })
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error("新增失败", error);
|
||||
}
|
||||
});
|
||||
},
|
||||
handlePushGroupCustomer(groupName, groupId, campaignId) {
|
||||
// console.log(campaignId);
|
||||
this.getList()
|
||||
this.pushOpen = true;
|
||||
this.pushform.groupName = groupName;
|
||||
this.groupId = groupId;
|
||||
// this.campaignId = campaignId;
|
||||
if( campaignId===null) {
|
||||
this.$nextTick(()=> {
|
||||
this.$refs.pushform.resetFields()
|
||||
})
|
||||
|
||||
// this.pushform={};
|
||||
this.pushform.groupName = groupName;
|
||||
// this.pushform.pushroles={};
|
||||
this.ispushformread = false;
|
||||
// return;
|
||||
// return;
|
||||
// this.pushform.campaignName ='';
|
||||
// this.pushform.campaignDegree = '';
|
||||
// this.pushform.campaignType ='';
|
||||
// this.pushform.executer = '';
|
||||
// this.pushform.distributeType = '';
|
||||
// this.pushform.claimType = '';
|
||||
// this.pushform.dateRange = [];
|
||||
// this.pushform.claimdateRange = [];
|
||||
}else{
|
||||
campaignDetail({ campaignId: campaignId}).then((res) => {
|
||||
this.pushformDetail = res;
|
||||
if (this.campaignId!=null) {
|
||||
this.ispushformread = true;
|
||||
if (this.ispushformread) {
|
||||
this.pushform.campaignName = this.pushformDetail.campaignName;
|
||||
this.pushform.campaignDegree = this.pushformDetail.campaignDegree;
|
||||
this.pushform.campaignType = this.pushformDetail.campaignType;
|
||||
this.pushform.executer = this.pushformDetail.executer;
|
||||
this.pushform.distributeType = this.pushformDetail.distributeType;
|
||||
this.pushform.claimType = this.pushformDetail.claimType;
|
||||
this.pushform.dateRange = [
|
||||
this.parseFormattedDate(this.pushformDetail.startTime),
|
||||
this.parseFormattedDate(this.pushformDetail.endTime),
|
||||
];
|
||||
this.pushform.claimdateRange = [
|
||||
this.parseFormattedDate(this.pushformDetail.claimStartTime),
|
||||
this.parseFormattedDate(this.pushformDetail.claimEndTime),
|
||||
];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
handleGroupCustExport(groupId) {
|
||||
this.download(
|
||||
`/system/group/exportData/?groupId=${groupId}`,
|
||||
{},
|
||||
`group_customer_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
//判断当前用户登录身份
|
||||
isUserType() {
|
||||
isHead().then((res) => {
|
||||
// console.log(Object.keys(res)[0].startsWith('h'));
|
||||
|
||||
if (Object.keys(res)[0].startsWith("h")) {
|
||||
this.radiosButonIsDisableFromMe = false;
|
||||
this.radiosButonIsDisableToMe = true;
|
||||
this.createRole = "0";
|
||||
this.isHeader=true;
|
||||
} else if (Object.keys(res)[0].startsWith("b")) {
|
||||
this.radiosButonIsDisableFromMe = false;
|
||||
this.radiosButonIsDisableToMe = false;
|
||||
this.createRole = "1";
|
||||
this.isHeader=false;
|
||||
} else if (
|
||||
Object.keys(res)[0].startsWith("m") ||
|
||||
this.$store.getters.roles[0] == "admin"
|
||||
) {
|
||||
this.radiosButonIsDisableFromMe = false;
|
||||
this.radiosButonIsDisableToMe = false;
|
||||
this.createRole = "2";
|
||||
this.isHeader=false;
|
||||
} else {
|
||||
this.radiosButonIsDisableFromMe = false;
|
||||
this.radiosButonIsDisableToMe = false;
|
||||
this.isHeader=false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCustDetail(groupId, groupName, campaignId, groupType,type,distributeType) {
|
||||
if(campaignId==null) {
|
||||
Message.warning('请先新建活动！')
|
||||
return;
|
||||
}
|
||||
this.$router.push({
|
||||
path: "/groupBase/customerDetail",
|
||||
query: { groupId, groupName, campaignId, groupType,type,distributeType },
|
||||
});
|
||||
},
|
||||
//处理搜索
|
||||
handSearch() {
|
||||
groupList({
|
||||
groupType: this.groupFlag,
|
||||
groupName: this.searchQuery,
|
||||
}).then((res) => {
|
||||
this.groupTable = res.rows;
|
||||
this.total = this.groupTable.length;
|
||||
});
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize;
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.currentPage = newPage;
|
||||
},
|
||||
getList() {
|
||||
groupList({ groupType: this.groupFlag }).then((res) => {
|
||||
this.groupTable = res.rows;
|
||||
this.total = this.groupTable.length;
|
||||
});
|
||||
},
|
||||
handleTabChange() {
|
||||
//根据选中的选项更新表格数据
|
||||
switch (this.selectedTab) {
|
||||
case "我创建的":
|
||||
// this.tableData = this.myTableData;
|
||||
this.groupFlag = "1";
|
||||
this.isCreatePag = false;
|
||||
this.getList();
|
||||
this.showmap = false;
|
||||
break;
|
||||
case "推荐给我的":
|
||||
// this.tableData = this.recommendedData;
|
||||
this.groupFlag = "0";
|
||||
this.getList();
|
||||
this.isCreatePag = false;
|
||||
this.showmap = false;
|
||||
break;
|
||||
default:
|
||||
this.groupFlag = "1";
|
||||
this.getList();
|
||||
// this.tableData = this.myTableData;
|
||||
}
|
||||
this.searchQuery = "";
|
||||
},
|
||||
handleQuery() {
|
||||
this.activeType.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
handelRule() {},
|
||||
handleImport() {
|
||||
this.$router.push({ name: "importCreate" });
|
||||
},
|
||||
handleDialoClose() {
|
||||
this.showCreateDialog = false;
|
||||
},
|
||||
goBackToCreateType() {
|
||||
this.isCreatePage = false;
|
||||
this.showCreateDialog = true;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
//初始化表格数据
|
||||
this.handleTabChange();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.dialog-content > el-button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,688 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<p class="common-title">基础信息</p>
|
||||
<el-divider></el-divider>
|
||||
<el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-position="top">
|
||||
<el-row class="baseForm">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="新建客群名称" prop="groupName">
|
||||
<el-input v-model="baseForm.groupName" placeholder="新建客群名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="关联客群" prop="groupId">
|
||||
<el-select v-model="baseForm.groupId" placeholder="请选已有分群" allow-create clearable filterable
|
||||
@change="handleGroupName">
|
||||
<el-option v-for="item in groupNameList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-form-item label="分群类型" prop="custType">
|
||||
<el-select v-model="baseForm.custType" placeholder="请选分群名称" allow-create clearable filterable>
|
||||
<el-option v-for="item in fqtypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="baseForm.description" placeholder="请输入分群描述，应用场景" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<p class="common-title">分群规则</p>
|
||||
<el-divider></el-divider>
|
||||
<div class="ruleBox" v-for="(item, index) in ruleConditionsList" :key="index">
|
||||
<div class="ruleBox_left">
|
||||
<div v-if="index == 0">满足条件</div>
|
||||
</div>
|
||||
<div class="ruleBox_line_box">
|
||||
<div class="ruleBox_line_left">
|
||||
<span v-if="index > 0" @click="handleRelation(item)" class="relation">{{ item.relation }}</span>
|
||||
</div>
|
||||
<div class="ruleBox_line"></div>
|
||||
</div>
|
||||
<div class="ruleBox_right">
|
||||
<div class="ruleBtnBox" v-if="index == ruleConditionsList.length - 1">
|
||||
<el-button round v-for="(el, i) in typeList" :key="i" @click="handleAddRule(el, item)"
|
||||
:disabled="ruleConditionsList.length > 3">{{ el }}</el-button>
|
||||
</div>
|
||||
<div class="ruleTitle" v-if="ruleConditionsList.length == 1">请选择任意条件开始创建一个分群</div>
|
||||
<div class="ruleSelectBox" v-if="index != ruleConditionsList.length - 1">
|
||||
<div class="ruleSelect_top">
|
||||
<div class="ruleSelect_left">-</div>
|
||||
<div class="ruleSelect_right">{{ item.selectTitle }}</div>
|
||||
<div class="ruleSelect_right_icon"><i class="el-icon-close" @click="handleDeleteRule(index)"></i></div>
|
||||
</div>
|
||||
<div class="ruleSelect_main">
|
||||
<div class="line_box" v-if="item.ruleList.length > 1">
|
||||
<div class="ruleSelect_main_left"></div>
|
||||
<div class="line_text" @click="handleRelationItem(item)">{{ item.relationItem }}</div>
|
||||
<div class="ruleSelect_main_left"></div>
|
||||
</div>
|
||||
|
||||
<div class="ruleSelect_main_right">
|
||||
<el-row class="ruleSelect_main_right_item" v-for="(v, vi) in item.ruleList" :key="vi">
|
||||
<el-col :span="5">
|
||||
<el-select filterable v-model="v.leftValue" @change="handleChange(vi, index, item.selectTitle)"
|
||||
@focus="handleFocusLeft(v.leftValue, vi, index, item.selectTitle)">
|
||||
<el-option v-for="item in rowLeftList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-select filterable v-model="v.expression" @focus="handleFocusExpress(item.selectTitle)">
|
||||
<el-option v-for="item in expressionList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-select filterable v-model="v.rightValue" v-if="v.isShow == 'select'"
|
||||
@focus="handleFocusRight(v.leftValue)">
|
||||
<el-option v-for="item in rowRightList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-input :span="4" filterable v-model="v.rightValue" v-if="v.isShow == 'input'"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3" class="addIcon">
|
||||
<!-- <i class="el-icon-plus ruleIcon" @click="handleAddRules(index)"
|
||||
v-if="vi == item.ruleList.length - 1 && item.ruleList.length < 3"></i>
|
||||
<i class="el-icon-close ruleIcon" @click="handleDeleteRules(index, vi)"
|
||||
v-if="item.ruleList.length > 1"></i> -->
|
||||
<el-button type="text"
|
||||
icon="el-icon-remove-outline"
|
||||
@click="handleDeleteRules(index, vi)"
|
||||
class="gray-color" v-if="item.ruleList.length > 1"></el-button>
|
||||
<el-button type="text"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
class="gray-color"
|
||||
@click="handleAddRules(index)"
|
||||
v-if="vi == item.ruleList.length - 1 && item.ruleList.length < 3"
|
||||
></el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="common-title">更新方式</p>
|
||||
<el-divider></el-divider>
|
||||
<el-radio-group v-model="updateType">
|
||||
<el-radio :label="0">自动更新</el-radio>
|
||||
<el-radio :label="1">手动更新</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="updateType_box" v-if="updateType == '0'">
|
||||
<div style="margin-right: 15px;">每</div>
|
||||
<div>
|
||||
<!-- <el-time-picker v-model="updateTypeRelateTime"></el-time-picker> -->
|
||||
<el-select filterable v-model="updateTypeRelateTime">
|
||||
<el-option v-for="item in dateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="margin-left: 15px;">自动更新</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="footer">
|
||||
<el-button type="primary" @click="handleCommit">创建</el-button>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
</div>
|
||||
<el-dialog title="考核指标" :visible.sync="groupNameVisible" width="300px" append-to-body :close-on-click-modal="false"
|
||||
:show-close='false'>
|
||||
<el-input type="textarea" v-model="diaGroupName"></el-input>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleGroupNameCommit">确定</el-button>
|
||||
<el-button @click="handleGroupNameCancle">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { tabDetail, listTab, createGroupByRule } from "@/api/system/createRuler.js";
|
||||
import { getGroupList } from '@/api/task/taskList.js'
|
||||
import { Message } from "element-ui";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
groupNameVisible: false,
|
||||
diaGroupName: '',
|
||||
baseForm: {
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
custType: '',
|
||||
description: ''
|
||||
},
|
||||
groupNameList: [
|
||||
|
||||
],
|
||||
fqtypeList: [
|
||||
{ label: '个人', value: '0' },
|
||||
{ label: '商户', value: '1' },
|
||||
{ label: '企业', value: '2' },
|
||||
],
|
||||
baseFormRules: {
|
||||
groupName: [{ required: true, message: "新建客群名称不能为空", trigger: 'blur' }],
|
||||
custType: [{ required: true, message: "请选择类型", trigger: 'change' }]
|
||||
},
|
||||
ruleConditionsList: [{ selectTitle: '属性指标', relation: '且', num: 0, relationItem: '且', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '' }] }],
|
||||
typeList: ['属性指标', '统计指标'],
|
||||
rowLeftList: [
|
||||
|
||||
],
|
||||
expressionList: [
|
||||
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '!=', value: '6' },
|
||||
],
|
||||
rowRightList: [
|
||||
|
||||
],
|
||||
updateType: '',
|
||||
updateTypeRelateTime: '',
|
||||
|
||||
tabType: '',
|
||||
tabName: '',
|
||||
dateList: [
|
||||
{ label: '天', value: '1' },
|
||||
{ label: '周', value: '2' },
|
||||
{ label: '月', value: '3' },
|
||||
{ label: '年', value: '4' },
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initGroupList()
|
||||
},
|
||||
methods: {
|
||||
// 取消返回列表页
|
||||
handleClose(){
|
||||
this.$router.push({ path: '/grid/create/segmentation' })
|
||||
},
|
||||
handleFocusLeft(val, vi, index, title) {
|
||||
if (title == '属性指标') {
|
||||
const params = {
|
||||
custType: this.baseForm.custType,
|
||||
tabThresholdType: '3',
|
||||
|
||||
}
|
||||
listTab(params).then(res => {
|
||||
console.log(res, 'ssssssssss')
|
||||
this.rowLeftList = res.data.map(item => {
|
||||
return {
|
||||
label: item.tabName,
|
||||
value: item.tabId,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
} else if (title == '统计指标') {
|
||||
const params = {
|
||||
custType: this.baseForm.custType,
|
||||
tabThresholdType: '1',
|
||||
|
||||
}
|
||||
listTab(params).then(res => {
|
||||
this.rowLeftList = res.data.map(item => {
|
||||
return {
|
||||
label: item.tabName,
|
||||
value: item.tabId,
|
||||
id: item.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
handleFocusExpress(title) {
|
||||
if (title == '属性指标') {
|
||||
this.expressionList = [
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
} else if (title == '统计指标') {
|
||||
this.expressionList = [
|
||||
{ label: '>', value: '1' },
|
||||
{ label: '>=', value: '2' },
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '<=', value: '4' },
|
||||
{ label: '<', value: '5' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
}
|
||||
},
|
||||
handleFocusRight(val) {
|
||||
let arr = this.rowLeftList.filter(item => item.value == val)
|
||||
let id = arr ? arr[0].id : ''
|
||||
tabDetail(id).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.rowRightList = res.data.tabEnums.map(item => {
|
||||
return {
|
||||
label: item.tabName,
|
||||
value: item.tabName,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleChange(vi, index, title) {
|
||||
if (title == '属性指标') {
|
||||
this.ruleConditionsList[index].ruleList[vi].isShow = 'select'
|
||||
} else if (title == '统计指标') {
|
||||
this.ruleConditionsList[index].ruleList[vi].isShow = 'input'
|
||||
}
|
||||
},
|
||||
|
||||
initGroupList() {
|
||||
const params = {
|
||||
groupType: '1'
|
||||
}
|
||||
getGroupList(params).then(res => {
|
||||
this.groupNameList = res.map(item => {
|
||||
return {
|
||||
label: item.groupName,
|
||||
value: item.groupId,
|
||||
custType: item.custType
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleGroupName(val) {
|
||||
let arr = this.groupNameList.filter(item => item.value == val)
|
||||
this.baseForm.custType = arr[0].custType
|
||||
},
|
||||
handleGroupNameCommit() {
|
||||
this.baseForm.groupName = this.diaGroupName
|
||||
this.groupNameVisible = false
|
||||
},
|
||||
handleGroupNameCancle() {
|
||||
this.baseForm.groupName = ''
|
||||
this.diaGroupName = ''
|
||||
this.groupNameVisible = false
|
||||
},
|
||||
handleAddRule(el, item) {
|
||||
if (el == '属性指标') {
|
||||
this.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: '' }] })
|
||||
} else if (el == '统计指标') {
|
||||
this.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: '' }] })
|
||||
}
|
||||
item.selectTitle = el
|
||||
},
|
||||
handleDeleteRule(index) {
|
||||
this.ruleConditionsList.splice(index, 1)
|
||||
},
|
||||
handleRelation(item) {
|
||||
item.num++
|
||||
if (item.num % 2 === 0) {
|
||||
this.$set(item, 'relation', '且')
|
||||
} else {
|
||||
this.$set(item, 'relation', '或')
|
||||
}
|
||||
},
|
||||
handleRelationItem(item) {
|
||||
item.itemNum++
|
||||
if (item.itemNum % 2 === 0) {
|
||||
this.$set(item, 'relationItem', '且')
|
||||
} else {
|
||||
this.$set(item, 'relationItem', '或')
|
||||
}
|
||||
},
|
||||
handleAddRules(index) {
|
||||
this.ruleConditionsList[index].ruleList.push({ leftValue: '', expression: '', rightValue: '' })
|
||||
},
|
||||
handleDeleteRules(index, vi) {
|
||||
this.ruleConditionsList[index].ruleList.splice(vi, 1)
|
||||
},
|
||||
initPotRelation(arr) {
|
||||
let strList = []
|
||||
|
||||
let data = arr.map(item => { return item.ruleList })
|
||||
let relationList = arr.map(item => {
|
||||
if (item.relation == '且') {
|
||||
return 'and'
|
||||
} else {
|
||||
return 'or'
|
||||
}
|
||||
})
|
||||
let relationItemList = arr.map(item => {
|
||||
if (item.relationItem == '且') {
|
||||
return 'and'
|
||||
} else {
|
||||
return 'or'
|
||||
}
|
||||
})
|
||||
data.pop()
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
for (let j = 0; j < data[i].length; j++) {
|
||||
strList.push(data[i][j].leftValue)
|
||||
|
||||
}
|
||||
}
|
||||
relationList.shift()
|
||||
relationItemList.pop()
|
||||
console.log(relationList, 'relationList')
|
||||
console.log(relationItemList, 'relationItemList')
|
||||
let one1 = []
|
||||
let one2 = []
|
||||
let one3 = []
|
||||
|
||||
if (data[0] && data[0].length > 0) {
|
||||
one1 = strList.slice(0, data[0].length);
|
||||
}
|
||||
if ((data[0] && data[0].length > 0) && (data[1] && data[1].length > 0)) {
|
||||
one2 = strList.slice(data[0].length, data[0].length + data[1].length);
|
||||
}
|
||||
if ((data[0] && data[0].length > 0) && (data[1] && data[1].length > 0) && (data[2] && data[2].length > 0)) {
|
||||
one3 = strList.slice(data[0].length + data[1].length, data[0].length + data[1].length + data[2].length);
|
||||
}
|
||||
|
||||
let str1 = ''
|
||||
let str2 = ''
|
||||
let str3 = ''
|
||||
for (let i = 0; i < one1.length; i++) {
|
||||
str1 += `[${one1[i]}]` + relationItemList[0]
|
||||
}
|
||||
if (one2.length > 0) {
|
||||
for (let i = 0; i < one2.length; i++) {
|
||||
str2 += `[${one2[i]}]` + relationItemList[1]
|
||||
}
|
||||
}
|
||||
if (one3.length > 0) {
|
||||
for (let i = 0; i < one3.length; i++) {
|
||||
str3 += `[${one3[i]}]` + relationItemList[2]
|
||||
}
|
||||
}
|
||||
let strOne = []
|
||||
let strTwo = []
|
||||
let strTree = []
|
||||
if (str1[str1.length - 1] == 'd') {
|
||||
|
||||
strOne = str1.slice(0, -3)
|
||||
} else {
|
||||
strOne = str1.slice(0, -2)
|
||||
}
|
||||
if (str2[str2.length - 1] == 'd') {
|
||||
|
||||
strTwo = str2.slice(0, -3)
|
||||
} else {
|
||||
strTwo = str2.slice(0, -2)
|
||||
}
|
||||
if (str3[str3.length - 1] == 'd') {
|
||||
|
||||
strTree = str3.slice(0, -3)
|
||||
} else {
|
||||
strTree = str3.slice(0, -2)
|
||||
}
|
||||
if (strOne.length > 0 && strTwo.length == 0) {
|
||||
return `(${strOne})`
|
||||
}
|
||||
if (strOne.length > 0 && strTwo.length > 0 && strTree.length == 0) {
|
||||
return `(${strOne})${relationList[0]}(${strTwo})`
|
||||
}
|
||||
if (strOne.length > 0 && strTwo.length > 0 && strTree.length > 0) {
|
||||
return `(${strOne})${relationList[0]}(${strTwo})${relationList[1]}(${strTree})`
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
handleCommit() {
|
||||
this.$refs.baseForm.validate((valid) => {
|
||||
if (valid) {
|
||||
let arr = this.ruleConditionsList.map(item => {
|
||||
return {
|
||||
ruleList: item.ruleList,
|
||||
relation: item.relation,
|
||||
relationItem: item.relationItem,
|
||||
}
|
||||
})
|
||||
|
||||
console.log(arr, 'arr')
|
||||
let arr1=arr.map(item=>{return item.ruleList})
|
||||
let list = (arr1.flat()).filter((el) => el.leftValue != '')
|
||||
let list1 = list.map(item => {
|
||||
return {
|
||||
potId: item.leftValue,
|
||||
tabThresholdType: '3',
|
||||
enumVal: item.rightValue,
|
||||
isUnEquals:item.expression == '6'?'1':'0'
|
||||
}
|
||||
})
|
||||
console.log(list1, 'list1')
|
||||
let str = this.initPotRelation(arr)
|
||||
const tabPotAddDTO = {
|
||||
potDetails: list1,
|
||||
potRelation: str,
|
||||
tabName: ''
|
||||
}
|
||||
const params = {
|
||||
groupName: this.baseForm.groupName,
|
||||
relateGroupId: this.baseForm.groupId,
|
||||
custType: this.baseForm.custType,
|
||||
description: this.baseForm.description,
|
||||
updateType: this.updateType,
|
||||
updateTypeRelateTime: this.updateTypeRelateTime,
|
||||
tabPotAddDTO: tabPotAddDTO
|
||||
}
|
||||
console.log(params, 'params')
|
||||
if(params.tabPotAddDTO.potDetails.length<1){
|
||||
Message.warning('请至少选择一个指标')
|
||||
}else{
|
||||
createGroupByRule(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
Message.success('创建成功')
|
||||
this.$router.push({ path: '/grid/create/segmentation' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
} else { return false }
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.baseForm {
|
||||
::v-deep .el-select {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleBox {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ruleBox_left {
|
||||
padding-top: 10px;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ruleBox_line_box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ruleBox_line {
|
||||
width: 3px;
|
||||
margin-left: 20px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.ruleBox_line_left {
|
||||
width: 16px;
|
||||
color: rgb(64, 149, 229);
|
||||
}
|
||||
|
||||
.relation {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.ruleBox_right {
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.ruleSelect_top:hover .ruleSelect_right_icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ruleSelect_right_icon {
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ruleTitle {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ruleSelect_top {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ruleSelect_left {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
line-height: 13px;
|
||||
background-color: rgb(64, 149, 229);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ruleSelect_right {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.ruleSelect_main {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line_box {
|
||||
display: flex;
|
||||
width: 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.line_text {
|
||||
|
||||
margin: 5px 0 5px 6px;
|
||||
color: rgb(64, 149, 229);
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
line-height: 21px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ruleSelect_main_left {
|
||||
width: 3px;
|
||||
margin-left: 15px;
|
||||
height: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.ruleSelect_main_right {
|
||||
width: 100%;
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
.addIcon {
|
||||
line-height: 40px;
|
||||
margin-left: 15px;
|
||||
::v-deep .el-icon-circle-plus-outline {
|
||||
color: #4886f8;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-icon-remove-outline {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .gray-color {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleSelect_main_right_item:hover .addIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
::v-deep .el-date-editor {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.ruleSelect_main_right_item {
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ruleIcon {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.updateType_box {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
623
ruoyi-ui/src/views/customer/filing/commercialFiling/index.vue
Normal file
623
ruoyi-ui/src/views/customer/filing/commercialFiling/index.vue
Normal file
@@ -0,0 +1,623 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main_top">
|
||||
<div class="maintop_left">商户建档</div>
|
||||
<div class="maintop_right">
|
||||
<el-button @click="handleCommercialClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleCommercialCommit" class="commit_btn">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="addCommercialForm" :model="addCommercialForm" label-width="140px" :rules="commercialRules"
|
||||
class="addCommercialForm">
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>法人信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="lpName" label="经营者姓名">
|
||||
<el-input v-model="addCommercialForm.lpName" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custIdc" label="身份证号">
|
||||
<el-input v-model="addCommercialForm.custIdc" @blur="initInfoByCustIdc(addCommercialForm.custIdc)"
|
||||
maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custGender" label="性别">
|
||||
<el-select v-model="addCommercialForm.custGender">
|
||||
<el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="birthday" label="出生日期">
|
||||
<el-date-picker v-model="addCommercialForm.birthday" type="date" value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custAge" label="年龄">
|
||||
<el-input v-model="addCommercialForm.custAge" maxlength="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custPhone" label="经营手机号">
|
||||
<el-input v-model="addCommercialForm.custPhone"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>商户信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custName" label="商户名称">
|
||||
<el-input v-model="addCommercialForm.custName" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="socialCreditCode" label="统信码">
|
||||
<el-input v-model="addCommercialForm.socialCreditCode" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="status" label="经营状态">
|
||||
<el-select v-model="addCommercialForm.status">
|
||||
<el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="businessScope" label="经营范围">
|
||||
<el-input v-model="addCommercialForm.businessScope" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="custLocation" label="经营地址">
|
||||
<el-cascader v-model='addCommercialForm.custLocation' :props="regAddress">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="custLocationNum" label-width="0">
|
||||
<el-input v-model="addCommercialForm.custLocationNum" maxlength="18" placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="registerLocation" label="注册地址">
|
||||
<el-cascader v-model='addCommercialForm.registerLocation' :props="regAddress">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="registerLocationNum" label-width="0">
|
||||
<el-input v-model="addCommercialForm.registerLocationNum" maxlength="18"
|
||||
placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="industry" label="行业名称">
|
||||
<el-cascader v-model='addCommercialForm.industry' :options="industryOptions"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>关联人信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<div class="glrxx">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-table :data="addCommercialForm.tableData" style="width: 100%;">
|
||||
<el-table-column prop="relatePerson" label="关联人">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0">
|
||||
<el-input v-model="scope.row.relatePerson" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.relatePerson }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="relateCustIdc" label="关联人身份证号" >
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0" :prop="`tableData.${scope.$index}.relateCustIdc`" :rules="commercialRules.relateCustIdc">
|
||||
<el-input v-model="scope.row.relateCustIdc" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.relateCustIdc }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" v-if="!scope.row.isEdit" @click="handleClickEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" v-if="scope.row.isEdit" @click="handleClickSave(scope.row)">保存</el-button>
|
||||
<el-button type="text" v-if="!scope.row.isEdit"
|
||||
@click="handleClickDelete(scope.row, scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<div class="addGlr" @click="handleAddGlr"><i class="el-icon-circle-plus-outline addIcon"></i>添加关联人</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>其他信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="belongBranchId" label="客户经理归属机构">
|
||||
<el-cascader v-model='addCommercialForm.belongBranchId' :options="departOptions"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }"
|
||||
@change="changeBranchName(addCommercialForm.belongBranchId)">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="comUserSelect" label="客户经理">
|
||||
<el-select v-model="addCommercialForm.comUserSelect" @focus="selectUser">
|
||||
<el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserProfile } from '@/api/grid/anchor.js'
|
||||
import { Message } from 'element-ui'
|
||||
import { getDeptTree, getDeptUserTree, getAddressTreeAdd, deptTreeByManager } from "@/api/grid/address/tree.js";
|
||||
import { getIndustryTree, addRecord, getRegStatus } from '@/api/system/listByRetailKeywords.js'
|
||||
export default {
|
||||
data() {
|
||||
var validatePhone = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入手机号'))
|
||||
}
|
||||
const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
|
||||
if (!regExp.test(value)) {
|
||||
this.showCode = false
|
||||
this.canClick = false
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
this.canClick = true
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var validateCustIdc = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入身份证号码'))
|
||||
}
|
||||
const regex = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
|
||||
if (!regex.test(value)) {
|
||||
callback(new Error('请输入正确的身份证号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
addCommercialForm: {
|
||||
custIdc: '',
|
||||
lpName: '',
|
||||
custGender: '',
|
||||
birthday: '',
|
||||
custAge: '',
|
||||
custPhone: '',
|
||||
registerLocation: '',
|
||||
registerLocationNum: '',
|
||||
custLocation: '',
|
||||
custLocationNum: '',
|
||||
socialCreditCode: '',
|
||||
custName: '',
|
||||
businessScope: '',
|
||||
status: '',
|
||||
industry: '',
|
||||
belongUserId: '',
|
||||
belongBranchId: '',
|
||||
belongBranchName: '',
|
||||
comUserSelect: '',
|
||||
tableData: []
|
||||
},
|
||||
commercialRules: {
|
||||
custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
|
||||
custPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
||||
custName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
socialCreditCode: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
relateCustIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
|
||||
belongBranchId:[{ required: true, message: '请选择', trigger: 'change' }],
|
||||
},
|
||||
regAddress: {
|
||||
lazy: true,
|
||||
lazyLoad(node, resolve) {
|
||||
setTimeout(() => {
|
||||
const nodes = []
|
||||
let query = {
|
||||
level: node.level + 1,
|
||||
code: node.level == 0 ? '33' : node.value.value,
|
||||
}
|
||||
|
||||
getAddressTreeAdd(query).then(res => {
|
||||
res.data.map(item => {
|
||||
let obj = {
|
||||
value: item,
|
||||
label: item.label,
|
||||
leaf: item.level >= 5
|
||||
}
|
||||
nodes.push(obj)
|
||||
})
|
||||
|
||||
resolve(nodes)
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
adressOptions: [],
|
||||
isMarriedList: [
|
||||
{
|
||||
label: '未婚',
|
||||
value: '未婚'
|
||||
},
|
||||
{
|
||||
label: '已婚',
|
||||
value: '已婚'
|
||||
},
|
||||
{
|
||||
label: '离异',
|
||||
value: '离异'
|
||||
}
|
||||
],
|
||||
genderList: [
|
||||
{ label: '男', value: '男' },
|
||||
{ label: '女', value: '女' },
|
||||
],
|
||||
industryOptions: [],
|
||||
userList: [],
|
||||
departOptions: [],
|
||||
statusList: [
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.initAddressTree()
|
||||
this.initRegStatus()
|
||||
this.initIndustryTree()
|
||||
this.getUser()
|
||||
},
|
||||
mounted() {
|
||||
this.userId = this.addCommercialForm.belongBranchId
|
||||
},
|
||||
methods: {
|
||||
initRegStatus() {
|
||||
getRegStatus().then(res => {
|
||||
if (res.code == 200) {
|
||||
this.statusList = res.data.map(item => {
|
||||
return {
|
||||
label: item.dictLabel,
|
||||
value: item.dictValue
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
initInfoByCustIdc(data) {
|
||||
//性别
|
||||
let sexCode = data.charAt(16)
|
||||
let gender = parseInt(sexCode, 10) % 2 === 0 ? '女' : '男'
|
||||
//年龄
|
||||
let today = new Date()
|
||||
let birthDate = new Date(data.substring(6, 10))
|
||||
let age = today.getFullYear() - birthDate.getFullYear()
|
||||
//出生日期
|
||||
let year = data.substring(6, 10)
|
||||
let mounth = data.substring(10, 12)
|
||||
let day = data.substring(12, 14)
|
||||
let csDate = `${year}-${mounth}-${day}`
|
||||
this.addCommercialForm.custGender = gender
|
||||
this.addCommercialForm.birthday = csDate
|
||||
this.addCommercialForm.custAge = age
|
||||
|
||||
},
|
||||
initIndustryTree() {
|
||||
getIndustryTree().then(res => {
|
||||
this.industryOptions = res.data.map(item => {
|
||||
return {
|
||||
value: item.code,
|
||||
label: item.name,
|
||||
children: item.industryTrees
|
||||
}
|
||||
})
|
||||
this.industryOptions.forEach(item => {
|
||||
item.children.forEach(el => {
|
||||
el.value = el.code
|
||||
el.label = el.name
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// initAddressTree() {
|
||||
// getAddressTree({ code: '33' }).then(res => {
|
||||
// this.adressOptions = res.data
|
||||
// })
|
||||
// },
|
||||
getUser() {
|
||||
getUserProfile().then(res => {
|
||||
this.deptId = res.data.dept.deptId
|
||||
this.deptName = res.data.dept.deptName
|
||||
let roleName = res.data.roleName
|
||||
if (roleName == '普通客户经理') {
|
||||
this.initdeptTreeByManager()
|
||||
} else {
|
||||
this.initDeptTree()
|
||||
}
|
||||
})
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.deptId).then(res => {
|
||||
|
||||
this.departOptions = res.data
|
||||
})
|
||||
},
|
||||
initdeptTreeByManager() {
|
||||
deptTreeByManager(this.deptId).then(res => {
|
||||
this.departOptions = res.data
|
||||
})
|
||||
},
|
||||
changeBranchName(value) {
|
||||
this.addCommercialForm.comUserSelect = ''
|
||||
this.userList = []
|
||||
this.userId = value ? value[value.length - 1] : ''
|
||||
},
|
||||
selectUser(value) {
|
||||
|
||||
this.initGetDeptTree()
|
||||
},
|
||||
initGetDeptTree() {
|
||||
|
||||
const params = {
|
||||
deptid: this.userId
|
||||
}
|
||||
getDeptUserTree(params).then(res => {
|
||||
if (res.length > 0) {
|
||||
this.userList = res.map(item => {
|
||||
return {
|
||||
value: item.userName,
|
||||
label: `${item.nickName}-${item.userName}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Message.warning('该机构下无客户经理')
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleAddGlr() {
|
||||
this.addCommercialForm.tableData.push({
|
||||
relatePerson: '',
|
||||
relateCustIdc: '',
|
||||
isEdit: true
|
||||
})
|
||||
},
|
||||
handleClickSave(item) {
|
||||
item.isEdit = false
|
||||
},
|
||||
handleClickEdit(item) {
|
||||
item.isEdit = true
|
||||
},
|
||||
handleClickDelete(item, index) {
|
||||
this.addCommercialForm.tableData.splice(index, 1)
|
||||
},
|
||||
formDataPamars(json) {
|
||||
const params = []
|
||||
for (const key in json) {
|
||||
const value = json[key]
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
params.push(...Object.keys(value).map((k) => `${key}[${k}]=${encodeURIComponent(value[k])}`))
|
||||
} else if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
params.push(`${key}[]=${encodeURIComponent(item)}`)
|
||||
})
|
||||
} else {
|
||||
params.push(`${key}=${encodeURIComponent(value)}`)
|
||||
}
|
||||
}
|
||||
return params.join('&')
|
||||
},
|
||||
handleCommercialClose() {
|
||||
this.$refs.addCommercialForm.resetFields()
|
||||
this.$router.push({ path: '/customer/filingHome', query: { selectType: '1' } })
|
||||
},
|
||||
handleCommercialCommit() {
|
||||
if (this.addCommercialForm.relatePerson == this.addCommercialForm.lpName) {
|
||||
Message.warning('关联人不能为本人')
|
||||
return
|
||||
}
|
||||
//户籍地址
|
||||
let registerLocationArr = this.addCommercialForm.registerLocation ? this.addCommercialForm.registerLocation.map(item => { return item.label }) : []
|
||||
let registerLocationStr = registerLocationArr.join(' ').replace(/\s/g, '')
|
||||
//住宅地址
|
||||
let custLocationArr = this.addCommercialForm.custLocation ? this.addCommercialForm.custLocation.map(item => { return item.label }) : []
|
||||
let custLocationStr = custLocationArr.join(' ').replace(/\s/g, '')
|
||||
this.$refs.addCommercialForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const infoParams = {
|
||||
custType: '1',
|
||||
custIdc: this.addCommercialForm.custIdc,
|
||||
lpName: this.addCommercialForm.lpName,
|
||||
custGender: this.addCommercialForm.custGender,
|
||||
birthday: this.addCommercialForm.birthday,
|
||||
custAge: this.addCommercialForm.custAge,
|
||||
custPhone: this.addCommercialForm.custPhone,
|
||||
registerLocation: `${registerLocationStr} ${this.addCommercialForm.registerLocationNum}`,
|
||||
custLocation: `${custLocationStr} ${this.addCommercialForm.custLocationNum}`,
|
||||
socialCreditCode: this.addCommercialForm.socialCreditCode,
|
||||
custName: this.addCommercialForm.custName,
|
||||
businessScope: this.addCommercialForm.businessScope,
|
||||
status: this.addCommercialForm.status,
|
||||
industry: this.addCommercialForm.industry ? this.addCommercialForm.industry[this.addCommercialForm.industry.length - 1] : '',
|
||||
belongBranchId: this.addCommercialForm.belongBranchId[this.addCommercialForm.belongBranchId.length - 1],
|
||||
belongBranchName: this.addCommercialForm.belongBranchName,
|
||||
belongUserId: this.addCommercialForm.comUserSelect.value,
|
||||
belongUserName: this.addCommercialForm.comUserSelect.label
|
||||
}
|
||||
const params = {
|
||||
custInfoRecord: infoParams,
|
||||
familyMembersRecords: [],
|
||||
recordRelates: this.addCommercialForm.tableData.map(item => {
|
||||
return {
|
||||
relateCustIdc: item.relateCustIdc,
|
||||
relatePerson: item.relatePerson
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
addRecord(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
Message.success(res.msg)
|
||||
this.$router.push({ path: '/filing/filingHome', query: { selectType: '1' } })
|
||||
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-cascader {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.commit_btn {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.addCommercialForm {
|
||||
padding: 20px 30px 10px 20px;
|
||||
}
|
||||
|
||||
.main_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
.maintop_left {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title_blue {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background-color: rgb(22, 132, 252);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
margin-top: 30px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.dz_row {
|
||||
::v-deep .el-col {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mphdz {
|
||||
::v-deep .el-input {
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.addGlr {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
background-color: rgba(70, 130, 255, 0.1);
|
||||
color: rgba(70, 130, 255, 1);
|
||||
border: 1px solid rgba(70, 130, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addIcon {
|
||||
font-size: 25px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
685
ruoyi-ui/src/views/customer/filing/filingHome/index.vue
Normal file
685
ruoyi-ui/src/views/customer/filing/filingHome/index.vue
Normal file
@@ -0,0 +1,685 @@
|
||||
<template>
|
||||
<div class="customer-wrap">
|
||||
<div>
|
||||
<el-radio-group class="header-radio" v-model="selectedTab" @input="handleChange">
|
||||
<el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
|
||||
<el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
|
||||
<el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
|
||||
</el-radio-group>
|
||||
<section class="search-box" v-if="showSearch">
|
||||
<section class="search-cnt">
|
||||
<el-input v-model="searchQuery" :placeholder="searchPlace" clearable @clear="handleSearch(searchQuery)"
|
||||
@keyup.enter.native="handleSearch(searchQuery)">
|
||||
</el-input>
|
||||
<section class="search-btn" @click="handleSearch(searchQuery)">
|
||||
<i class="el-icon-search"></i>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="operate-cnt">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="handleRefersh" :columns="columns"
|
||||
style="margin-left: auto"></right-toolbar>
|
||||
<el-button type="primary" size="small" style="margin-left: 10px" @click="handleAdd">新客登记</el-button>
|
||||
</section>
|
||||
<div class="personage-box" v-if="isPersonage">
|
||||
<section class="table-wrap">
|
||||
<el-table :data="tableData" style="width: 100%" v-loading="perLoading" max-height="615">
|
||||
<el-table-column align="center" key="custName" prop="custName" width="400" label="客户姓名" show-overflow-tooltip
|
||||
v-if="columns[0].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCustDetail(scope.row.id)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" key="custIdc" prop="custIdc" label="证件号" v-if="columns[1].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCustDetail(scope.row.id)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" key="custPhone" prop="custPhone" label="手机号"
|
||||
v-if="columns[2].visible"></el-table-column>
|
||||
<el-table-column align="center" key="custId" prop="custId" label="客户号"
|
||||
v-if="columns[3].visible"></el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,prev,pager,next,sizes" :total="total"
|
||||
:current-page="pageNum"></el-pagination>
|
||||
</section>
|
||||
</div>
|
||||
<div class="commercial-box" v-if="isCommercial">
|
||||
<el-table :data="commercialTableData" style="width: 100%" v-loading="comLoading" max-height="615">
|
||||
<el-table-column align="center" prop="custName" width="400" label="商户名称" show-overflow-tooltip
|
||||
v-if="columns[0].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCommercialDetail(scope.row.id)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="lpName" label="经营者" v-if="columns[1].visible"></el-table-column>
|
||||
<el-table-column align="center" prop="custIdc" label="证件号" v-if="columns[2].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCommercialDetail(scope.row.id)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="custPhone" label="手机号" v-if="columns[3].visible"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination @size-change="commercialSizeChange" @current-change="commercialCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="commercialPageSize" layout="->,total,prev,pager,next,sizes"
|
||||
:total="commercialTotal" :current-page="commercialPageNum"></el-pagination>
|
||||
</div>
|
||||
<div class="firm-box" v-if="isFirm">
|
||||
<el-table :data="firmTableData" style="width: 100%" v-loading="firmLoading" max-height="615">
|
||||
<el-table-column align="center" prop="custName" width="400" label="企业名称" show-overflow-tooltip
|
||||
v-if="columns[0].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleFirmDetail(scope.row.id)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="lpName" label="企业法人" v-if="columns[1].visible"></el-table-column>
|
||||
<el-table-column align="center" prop="custIdc" label="证件号" v-if="columns[2].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleFirmDetail(scope.row.id)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="custPhone" label="手机号" v-if="columns[3].visible"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination @size-change="firmSizeChange" @current-change="firmCurrentChange" :page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="firmPageSize" layout="->,total,prev,pager,next,sizes" :total="firmTotal"
|
||||
:current-page="firmPageNum"></el-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listByCustType } from '@/api/system/listByRetailKeywords.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
perLoading: false,
|
||||
comLoading: false,
|
||||
firmLoading: false,
|
||||
isPerLoading: false,
|
||||
isCommerLoading: false,
|
||||
isFirmLoading: false,
|
||||
showSearch: true,
|
||||
selectedTab: '2',
|
||||
tableData: [
|
||||
|
||||
],
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
searchQuery: '',
|
||||
columns: [
|
||||
|
||||
],
|
||||
isPersonage: false,
|
||||
isCommercial: false,
|
||||
isFirm: true,
|
||||
searchPlace: '输入客户名/证件号/手机号',
|
||||
commercialTableData: [],
|
||||
commercialPageSize: 10,
|
||||
commercialPageNum: 1,
|
||||
commercialTotal: 0,
|
||||
firmTableData: [],
|
||||
firmTotal: 0,
|
||||
firmPageSize: 10,
|
||||
firmPageNum: 1,
|
||||
deptId: '',
|
||||
deptName: '',
|
||||
custType: '2'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['roles']),
|
||||
//对公
|
||||
isPublic() {
|
||||
return this.roles.includes('headPublic')
|
||||
},
|
||||
//对私
|
||||
isPrivate() {
|
||||
return this.roles.includes('headPrivate')
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
console.log(this.$route.query, 'sssssssss')
|
||||
if (this.$route.query.selectType) {
|
||||
if (this.$route.query.selectType == '0') {
|
||||
this.isPersonage = true
|
||||
this.isCommercial = false
|
||||
this.isFirm = false
|
||||
this.selectedTab = '0'
|
||||
this.custType = '0'
|
||||
this.searchPlace = '输入客户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 0, label: '客户姓名', visible: true },
|
||||
{ key: 1, label: '证件号', visible: true },
|
||||
{ key: 2, label: '手机号', visible: true },
|
||||
{ key: 3, label: '客户号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
|
||||
} else if (this.$route.query.selectType == '1') {
|
||||
this.selectedTab = '1'
|
||||
this.isPersonage = false
|
||||
this.isCommercial = true
|
||||
this.isFirm = false
|
||||
this.custType = '1'
|
||||
this.searchPlace = '输入商户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 4, label: '商户名称', visible: true },
|
||||
{ key: 5, label: '企业法人', visible: true },
|
||||
{ key: 6, label: '证件号', visible: true },
|
||||
{ key: 7, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else {
|
||||
this.selectedTab = '2'
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
this.custType = '2'
|
||||
this.searchPlace = '输入企业名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 8, label: '企业名称', visible: true },
|
||||
{ key: 9, label: '企业法人', visible: true },
|
||||
{ key: 10, label: '证件号', visible: true },
|
||||
{ key: 11, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
}
|
||||
for (let key in this.$route.query) {
|
||||
delete this.$route.query[key];
|
||||
}
|
||||
} else {
|
||||
if (this.isPublic) {
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
this.selectedTab = '2'
|
||||
this.custType = '2'
|
||||
this.searchPlace = '输入企业名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 8, label: '企业名称', visible: true },
|
||||
{ key: 9, label: '企业法人', visible: true },
|
||||
{ key: 10, label: '证件号', visible: true },
|
||||
{ key: 11, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else if (this.isPrivate) {
|
||||
this.isPersonage = true
|
||||
this.isCommercial = false
|
||||
this.isFirm = false
|
||||
this.selectedTab = '0'
|
||||
this.custType = '0'
|
||||
this.searchPlace = '输入客户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 0, label: '客户姓名', visible: true },
|
||||
{ key: 1, label: '证件号', visible: true },
|
||||
{ key: 2, label: '手机号', visible: true },
|
||||
{ key: 3, label: '客户号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else {
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
this.custType = '2'
|
||||
this.selectedTab = '2'
|
||||
this.searchPlace = '输入企业名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 8, label: '企业名称', visible: true },
|
||||
{ key: 9, label: '企业法人', visible: true },
|
||||
{ key: 10, label: '证件号', visible: true },
|
||||
{ key: 11, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
this.columns = []
|
||||
this.searchQuery = ''
|
||||
if (this.selectedTab == '0') {
|
||||
this.isPersonage = true
|
||||
this.isCommercial = false
|
||||
this.isFirm = false
|
||||
this.custType = '0'
|
||||
this.searchPlace = '输入客户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 0, label: '客户姓名', visible: true },
|
||||
{ key: 1, label: '证件号', visible: true },
|
||||
{ key: 2, label: '手机号', visible: true },
|
||||
{ key: 3, label: '客户号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.isPersonage = false
|
||||
this.isCommercial = true
|
||||
this.isFirm = false
|
||||
this.custType = '1'
|
||||
this.searchPlace = '输入商户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 4, label: '商户名称', visible: true },
|
||||
{ key: 5, label: '企业法人', visible: true },
|
||||
{ key: 6, label: '证件号', visible: true },
|
||||
{ key: 7, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
this.custType = '2'
|
||||
this.searchPlace = '输入企业名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 8, label: '企业名称', visible: true },
|
||||
{ key: 9, label: '企业法人', visible: true },
|
||||
{ key: 10, label: '证件号', visible: true },
|
||||
{ key: 11, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
}
|
||||
},
|
||||
initListData() {
|
||||
|
||||
let params = {}
|
||||
if (this.selectedTab == '2') {
|
||||
params = {
|
||||
keyword: this.searchQuery,
|
||||
pageSize: this.firmPageSize,
|
||||
pageNum: this.firmPageNum,
|
||||
custType: this.custType
|
||||
}
|
||||
} else if (this.selectedTab == '1') {
|
||||
params = {
|
||||
keyword: this.searchQuery,
|
||||
pageSize: this.commercialPageSize,
|
||||
pageNum: this.commercialPageNum,
|
||||
custType: this.custType
|
||||
}
|
||||
} else if (this.selectedTab == '0') {
|
||||
params = {
|
||||
keyword: this.searchQuery,
|
||||
pageSize: this.pageSize,
|
||||
pageNum: this.pageNum,
|
||||
custType: this.custType
|
||||
}
|
||||
}
|
||||
listByCustType(params).then(res => {
|
||||
|
||||
if (res.code == 200) {
|
||||
if (this.selectedTab == '2') {
|
||||
this.firmTableData = res.rows
|
||||
this.firmTotal = res.total
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.commercialTableData = res.rows
|
||||
this.commercialTotal = res.total
|
||||
this.isPersonage = false
|
||||
this.isCommercial = true
|
||||
this.isFirm = false
|
||||
} else if (this.selectedTab == '0') {
|
||||
this.tableData = res.rows
|
||||
this.total = res.total
|
||||
this.isPersonage = true
|
||||
this.isCommercial = false
|
||||
this.isFirm = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize
|
||||
this.initListData()
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.pageNum = newPage
|
||||
this.initListData()
|
||||
},
|
||||
|
||||
commercialSizeChange(val) {
|
||||
this.commercialPageSize = val
|
||||
this.initListData()
|
||||
},
|
||||
commercialCurrentChange(val) {
|
||||
this.commercialPageNum = val
|
||||
this.initListData()
|
||||
},
|
||||
|
||||
firmSizeChange(val) {
|
||||
this.firmPageSize = val
|
||||
this.initListData()
|
||||
},
|
||||
firmCurrentChange(val) {
|
||||
this.firmPageNum = val
|
||||
this.initListData()
|
||||
},
|
||||
handleSearch() {
|
||||
if (this.selectedTab == '0') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.initListData()
|
||||
}
|
||||
},
|
||||
handleRefersh() {
|
||||
this.searchQuery = ''
|
||||
if (this.selectedTab == '0') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.initListData()
|
||||
}
|
||||
},
|
||||
handleCustDetail(id) {
|
||||
this.$router.push({ path: '/filing/filingpersonDetail', query: { id: id, type: '0', selectType: '0' } })
|
||||
|
||||
},
|
||||
handleCommercialDetail(id) {
|
||||
this.$router.push({ path: '/filing/filingpersonDetail', query: { id: id, type: '1', selectType: '1' } })
|
||||
},
|
||||
handleFirmDetail(id) {
|
||||
this.$router.push({ path: '/filing/filingpersonDetail', query: { id: id, type: '2', selectType: '2' } })
|
||||
},
|
||||
|
||||
handleAdd() {
|
||||
if (this.selectedTab == '0') {
|
||||
this.$router.push({ path: '/customer/charts/filing/personFiling' })
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.$router.push({ path: '/customer/charts/filing/commercialFiling' })
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.$router.push({ path: '/customer/charts/filing/firmFiling' })
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.customer-wrap {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
|
||||
.header-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.btn-disabled {
|
||||
::v-deep .el-radio-button__inner {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
flex: 1;
|
||||
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.44px;
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
padding: 11px 0 12px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||||
background-color: #4886f8;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 21px;
|
||||
width: 1px;
|
||||
background: #ebebeb;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 24px 0 0 0;
|
||||
|
||||
.search-cnt {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 23px;
|
||||
border: 1px solid #ebebeb;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
border: 1px solid #4886f8;
|
||||
background-color: #4886f8;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
.el-icon-search {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
display: flex;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #3d3d3d;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-labels {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #3d3d3d;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-right: 30px;
|
||||
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 24px 0;
|
||||
|
||||
.search-cnt {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 23px;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
border: 1px solid #4886f8;
|
||||
background-color: #4886f8;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
.el-icon-search {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(7, 58, 177);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
margin: 0 30px;
|
||||
|
||||
.checkBox {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate-cnt {
|
||||
margin: 24px 0 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.top-right-btn {
|
||||
margin-right: 24px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.plain-raido-btn {
|
||||
::v-deep .el-radio-button__inner {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||||
border: 1px solid #4886f8;
|
||||
color: #4886f8;
|
||||
background-color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addDialog {
|
||||
::v-deep .el-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.commit_btn {
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
1172
ruoyi-ui/src/views/customer/filing/filingpersonDetail/index.vue
Normal file
1172
ruoyi-ui/src/views/customer/filing/filingpersonDetail/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
641
ruoyi-ui/src/views/customer/filing/firmFiling/index.vue
Normal file
641
ruoyi-ui/src/views/customer/filing/firmFiling/index.vue
Normal file
@@ -0,0 +1,641 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main_top">
|
||||
<div class="maintop_left">企业建档</div>
|
||||
<div class="maintop_right">
|
||||
<el-button @click="handleFirmlClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleFirmCommit" class="commit_btn">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="addFirmForm" :model="addFirmForm" label-width="140px" :rules="firmRules" class="addFirmForm">
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>法人信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="lpName" label="法人姓名">
|
||||
<el-input v-model="addFirmForm.lpName" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custIdc" label="身份证号">
|
||||
<el-input v-model="addFirmForm.custIdc" @blur="initInfoByCustIdc(addFirmForm.custIdc)"
|
||||
maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custGender" label="性别">
|
||||
<el-select v-model="addFirmForm.custGender">
|
||||
<el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="birthday" label="出生日期">
|
||||
<el-date-picker v-model="addFirmForm.birthday" type="date" value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custAge" label="年龄">
|
||||
<el-input v-model="addFirmForm.custAge" maxlength="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custPhone" label="法人手机号">
|
||||
<el-input v-model="addFirmForm.custPhone" maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>企业信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custName" label="企业名称">
|
||||
<el-input v-model="addFirmForm.custName" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="socialCreditCode" label="统信码">
|
||||
<el-input v-model="addFirmForm.socialCreditCode" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="status" label="经营状态">
|
||||
<el-select v-model="addFirmForm.status">
|
||||
<el-option v-for="(item, index) in statusList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="businessScope" label="经营范围">
|
||||
<el-input v-model="addFirmForm.businessScope" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="custLocation" label="经营地址">
|
||||
<el-cascader v-model='addFirmForm.custLocation' :props="regAddress">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="custLocationNum" label-width="0">
|
||||
<el-input v-model="addFirmForm.custLocationNum" maxlength="18" placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="registerLocation" label="注册地址">
|
||||
<el-cascader v-model='addFirmForm.registerLocation' :props="regAddress">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="registerLocationNum" label-width="0">
|
||||
<el-input v-model="addFirmForm.registerLocationNum" maxlength="18" placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custCapital" label="注册资本">
|
||||
<el-input v-model="addFirmForm.custCapital" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="industry" label="行业名称">
|
||||
<el-cascader v-model='addFirmForm.industry' :options="industryOptions"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="tel" label="企业电话">
|
||||
<el-input v-model="addFirmForm.tel" maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>关联人信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<div class="glrxx">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-table :data="addFirmForm.tableData" style="width: 100%;">
|
||||
<el-table-column prop="relatePerson" label="关联人">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0">
|
||||
<el-input v-model="scope.row.relatePerson" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.relatePerson }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="relateCustIdc" label="关联人身份证号">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0" :prop="`tableData.${scope.$index}.relateCustIdc`" :rules="firmRules.relateCustIdc">
|
||||
<el-input v-model="scope.row.relateCustIdc" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.relateCustIdc }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" v-if="!scope.row.isEdit" @click="handleClickEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" v-if="scope.row.isEdit" @click="handleClickSave(scope.row)">保存</el-button>
|
||||
<el-button type="text" v-if="!scope.row.isEdit"
|
||||
@click="handleClickDelete(scope.row, scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<div class="addGlr" @click="handleAddGlr"><i class="el-icon-circle-plus-outline addIcon"></i>添加关联人</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>其他信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="belongBranchId" label="客户经理归属机构">
|
||||
<el-cascader v-model='addFirmForm.belongBranchId' :options="departOptions"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }"
|
||||
@change="changeBranchName(addFirmForm.belongBranchId)">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="firmUserSelect" label="客户经理">
|
||||
<el-select v-model="addFirmForm.firmUserSelect" @focus="selectUser">
|
||||
<el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserProfile } from '@/api/grid/anchor.js'
|
||||
import { Message } from 'element-ui'
|
||||
import { getDeptTree, getDeptUserTree, getAddressTreeAdd, deptTreeByManager } from "@/api/grid/address/tree.js";
|
||||
import { getIndustryTree, addRecord, getRegStatus } from '@/api/system/listByRetailKeywords.js'
|
||||
export default {
|
||||
data() {
|
||||
var validatePhone = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入手机号'))
|
||||
}
|
||||
const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
|
||||
if (!regExp.test(value)) {
|
||||
this.showCode = false
|
||||
this.canClick = false
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
this.canClick = true
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var validateCustIdc = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入身份证号码'))
|
||||
}
|
||||
const regex = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
|
||||
if (!regex.test(value)) {
|
||||
callback(new Error('请输入正确的身份证号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
|
||||
addFirmForm: {
|
||||
custIdc: '',
|
||||
lpName: '',
|
||||
custGender: '',
|
||||
birthday: '',
|
||||
custAge: '',
|
||||
custPhone: '',
|
||||
registerLocation: '',
|
||||
registerLocationNum: '',
|
||||
custLocation: '',
|
||||
custLocationNum: '',
|
||||
socialCreditCode: '',
|
||||
custName: '',
|
||||
businessScope: '',
|
||||
status: '',
|
||||
custCapital: '',
|
||||
industry: '',
|
||||
tel: '',
|
||||
|
||||
belongUserId: '',
|
||||
belongBranchId: '',
|
||||
belongBranchName: '',
|
||||
firmUserSelect: '',
|
||||
tableData: []
|
||||
},
|
||||
firmRules: {
|
||||
custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
|
||||
custPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
||||
custName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
socialCreditCode: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
relateCustIdc:[{ required: true, validator: validateCustIdc, trigger: 'blur' }],
|
||||
belongBranchId:[{ required: true, message: '请选择', trigger: 'change' }],
|
||||
},
|
||||
regAddress: {
|
||||
lazy: true,
|
||||
lazyLoad(node, resolve) {
|
||||
setTimeout(() => {
|
||||
const nodes = []
|
||||
let query = {
|
||||
level: node.level + 1,
|
||||
code: node.level == 0 ? '33' : node.value.value,
|
||||
}
|
||||
|
||||
getAddressTreeAdd(query).then(res => {
|
||||
res.data.map(item => {
|
||||
let obj = {
|
||||
value: item,
|
||||
label: item.label,
|
||||
leaf: item.level >= 5
|
||||
}
|
||||
nodes.push(obj)
|
||||
})
|
||||
|
||||
resolve(nodes)
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
adressOptions: [],
|
||||
isMarriedList: [
|
||||
{
|
||||
label: '未婚',
|
||||
value: '未婚'
|
||||
},
|
||||
{
|
||||
label: '已婚',
|
||||
value: '已婚'
|
||||
},
|
||||
{
|
||||
label: '离异',
|
||||
value: '离异'
|
||||
}
|
||||
],
|
||||
genderList: [
|
||||
{ label: '男', value: '男' },
|
||||
{ label: '女', value: '女' },
|
||||
],
|
||||
industryOptions: [],
|
||||
userList: [],
|
||||
departOptions: [],
|
||||
statusList: [
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.initAddressTree()
|
||||
this.initRegStatus()
|
||||
this.initIndustryTree()
|
||||
this.getUser()
|
||||
},
|
||||
mounted() {
|
||||
this.userId = this.addFirmForm.belongBranchId
|
||||
},
|
||||
methods: {
|
||||
initRegStatus() {
|
||||
getRegStatus().then(res => {
|
||||
if (res.code == 200) {
|
||||
this.statusList = res.data.map(item => {
|
||||
return {
|
||||
label: item.dictLabel,
|
||||
value: item.dictValue
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
initInfoByCustIdc(data) {
|
||||
//性别
|
||||
let sexCode = data.charAt(16)
|
||||
let gender = parseInt(sexCode, 10) % 2 === 0 ? '女' : '男'
|
||||
//年龄
|
||||
let today = new Date()
|
||||
let birthDate = new Date(data.substring(6, 10))
|
||||
let age = today.getFullYear() - birthDate.getFullYear()
|
||||
//出生日期
|
||||
let year = data.substring(6, 10)
|
||||
let mounth = data.substring(10, 12)
|
||||
let day = data.substring(12, 14)
|
||||
let csDate = `${year}-${mounth}-${day}`
|
||||
this.addFirmForm.custGender = gender
|
||||
this.addFirmForm.birthday = csDate
|
||||
this.addFirmForm.custAge = age
|
||||
|
||||
},
|
||||
initIndustryTree() {
|
||||
getIndustryTree().then(res => {
|
||||
this.industryOptions = res.data.map(item => {
|
||||
return {
|
||||
value: item.code,
|
||||
label: item.name,
|
||||
children: item.industryTrees
|
||||
}
|
||||
})
|
||||
this.industryOptions.forEach(item => {
|
||||
item.children.forEach(el => {
|
||||
el.value = el.code
|
||||
el.label = el.name
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// initAddressTree() {
|
||||
// getAddressTree({ code: '33' }).then(res => {
|
||||
// this.adressOptions = res.data
|
||||
// })
|
||||
// },
|
||||
getUser() {
|
||||
getUserProfile().then(res => {
|
||||
this.deptId = res.data.dept.deptId
|
||||
this.deptName = res.data.dept.deptName
|
||||
let roleName = res.data.roleName
|
||||
if (roleName == '普通客户经理') {
|
||||
this.initdeptTreeByManager()
|
||||
} else {
|
||||
this.initDeptTree()
|
||||
}
|
||||
})
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.deptId).then(res => {
|
||||
|
||||
this.departOptions = res.data
|
||||
})
|
||||
},
|
||||
initdeptTreeByManager() {
|
||||
deptTreeByManager(this.deptId).then(res => {
|
||||
this.departOptions = res.data
|
||||
})
|
||||
},
|
||||
changeBranchName(value) {
|
||||
this.addFirmForm.firmUserSelect = ''
|
||||
this.userList = []
|
||||
this.userId = value ? value[value.length - 1] : this.addFirmForm.belongBranchId
|
||||
},
|
||||
selectUser(value) {
|
||||
|
||||
this.initGetDeptTree()
|
||||
},
|
||||
initGetDeptTree() {
|
||||
|
||||
const params = {
|
||||
deptid: this.userId
|
||||
}
|
||||
getDeptUserTree(params).then(res => {
|
||||
if (res.length > 0) {
|
||||
this.userList = res.map(item => {
|
||||
return {
|
||||
value: item.userName,
|
||||
label: `${item.nickName}-${item.userName}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Message.warning('该机构下无客户经理')
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleAddGlr() {
|
||||
this.addFirmForm.tableData.push({
|
||||
relatePerson: '',
|
||||
relateCustIdc: '',
|
||||
isEdit: true
|
||||
})
|
||||
},
|
||||
handleClickSave(item) {
|
||||
item.isEdit = false
|
||||
},
|
||||
handleClickEdit(item) {
|
||||
item.isEdit = true
|
||||
},
|
||||
handleClickDelete(item, index) {
|
||||
this.addFirmForm.tableData.splice(index, 1)
|
||||
},
|
||||
formDataPamars(json) {
|
||||
const params = []
|
||||
for (const key in json) {
|
||||
const value = json[key]
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
params.push(...Object.keys(value).map((k) => `${key}[${k}]=${encodeURIComponent(value[k])}`))
|
||||
} else if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
params.push(`${key}[]=${encodeURIComponent(item)}`)
|
||||
})
|
||||
} else {
|
||||
params.push(`${key}=${encodeURIComponent(value)}`)
|
||||
}
|
||||
}
|
||||
return params.join('&')
|
||||
},
|
||||
handleFirmlClose() {
|
||||
this.$refs.addFirmForm.resetFields()
|
||||
this.$router.push({ path: '/customer/filingHome', query: { selectType: '2' } })
|
||||
},
|
||||
handleFirmCommit() {
|
||||
//户籍地址
|
||||
console.log(this.addFirmForm.tableData, 'addFirmForm.tableData')
|
||||
if (this.addFirmForm.relatePerson == this.addFirmForm.lpName) {
|
||||
Message.warning('关联人不能为本人')
|
||||
return
|
||||
}
|
||||
let registerLocationArr = this.addFirmForm.registerLocation ? this.addFirmForm.registerLocation.map(item => { return item.label }) : []
|
||||
let registerLocationStr = registerLocationArr.join(' ').replace(/\s/g, '')
|
||||
//住宅地址
|
||||
let custLocationArr = this.addFirmForm.custLocation ? this.addFirmForm.custLocation.map(item => { return item.label }) : []
|
||||
let custLocationStr = custLocationArr.join(' ').replace(/\s/g, '')
|
||||
this.$refs.addFirmForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const infoParams = {
|
||||
custType: '2',
|
||||
custIdc: this.addFirmForm.custIdc,
|
||||
lpName: this.addFirmForm.lpName,
|
||||
custGender: this.addFirmForm.custGender,
|
||||
birthday: this.addFirmForm.birthday,
|
||||
custAge: this.addFirmForm.custAge,
|
||||
custPhone: this.addFirmForm.custPhone,
|
||||
registerLocation: `${registerLocationStr} ${this.addFirmForm.registerLocationNum}`,
|
||||
custLocation: `${custLocationStr} ${this.addFirmForm.custLocationNum}`,
|
||||
socialCreditCode: this.addFirmForm.socialCreditCode,
|
||||
custName: this.addFirmForm.custName,
|
||||
businessScope: this.addFirmForm.businessScope,
|
||||
status: this.addFirmForm.status,
|
||||
custCapital: this.addFirmForm.custCapital,
|
||||
industry: this.addFirmForm.industry ? this.addFirmForm.industry[this.addFirmForm.industry.length - 1] : '',
|
||||
tel: this.addFirmForm.tel,
|
||||
belongBranchId: this.addFirmForm.belongBranchId[this.addFirmForm.belongBranchId.length - 1],
|
||||
belongBranchName: this.addFirmForm.belongBranchName,
|
||||
belongUserId: this.addFirmForm.firmUserSelect.value,
|
||||
belongUserName: this.addFirmForm.firmUserSelect.label,
|
||||
|
||||
}
|
||||
const params = {
|
||||
custInfoRecord: infoParams,
|
||||
familyMembersRecords: [],
|
||||
recordRelates: this.addFirmForm.tableData.map(item => {
|
||||
return {
|
||||
relateCustIdc: item.relateCustIdc,
|
||||
relatePerson: item.relatePerson
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
addRecord(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
Message.success(res.msg)
|
||||
this.$router.push({ path: '/filing/filingHome', query: { selectType: '2' } })
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-cascader {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.commit_btn {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.addFirmForm {
|
||||
padding: 20px 30px 10px 20px;
|
||||
}
|
||||
|
||||
.main_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
.maintop_left {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title_blue {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background-color: rgb(22, 132, 252);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
margin-top: 30px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.dz_row {
|
||||
::v-deep .el-col {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mphdz {
|
||||
::v-deep .el-input {
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.glrxx {
|
||||
|
||||
}
|
||||
|
||||
.addGlr {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
background-color: rgba(70, 130, 255, 0.1);
|
||||
color: rgba(70, 130, 255, 1);
|
||||
border: 1px solid rgba(70, 130, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addIcon {
|
||||
font-size: 25px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
3
ruoyi-ui/src/views/customer/filing/index.vue
Normal file
3
ruoyi-ui/src/views/customer/filing/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
750
ruoyi-ui/src/views/customer/filing/personFiling/index.vue
Normal file
750
ruoyi-ui/src/views/customer/filing/personFiling/index.vue
Normal file
@@ -0,0 +1,750 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main_top">
|
||||
<div class="maintop_left">个人建档</div>
|
||||
<div class="maintop_right">
|
||||
<el-button @click="handleAddPersonClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleAddPersonCommit" class="commit_btn">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="addPersonForm" :model="addPersonForm" label-width="140px" :rules="personRules" class="addPersonForm">
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custName" label="姓名">
|
||||
<el-input v-model="addPersonForm.custName" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custIdc" label="身份证号">
|
||||
<el-input v-model="addPersonForm.custIdc" @blur="initInfoByCustIdc(addPersonForm.custIdc)"
|
||||
maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custGender" label="性别">
|
||||
<el-select v-model="addPersonForm.custGender">
|
||||
<el-option v-for="(item, index) in genderList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="birthday" label="出生日期">
|
||||
<el-date-picker v-model="addPersonForm.birthday" type="date" value-format="yyyy-MM-dd"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custAge" label="年龄">
|
||||
<el-input v-model="addPersonForm.custAge" maxlength="3"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custPhone" label="手机号">
|
||||
<el-input v-model="addPersonForm.custPhone" maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="registerLocation" label="户籍地址">
|
||||
<el-cascader v-model='addPersonForm.registerLocation' :props="regAddress">
|
||||
<template slot-scope="{node,data}">
|
||||
<span>{{ data.label }}</span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="registerLocationNum" label-width="0">
|
||||
<el-input v-model="addPersonForm.registerLocationNum" maxlength="10" placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="jobLocation" label="单位地址">
|
||||
<el-cascader v-model='addPersonForm.jobLocation' :props="regAddress">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="jobLocationNum" label-width="0">
|
||||
<el-input v-model="addPersonForm.jobLocationNum" maxlength="10" placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24" class="dz_row">
|
||||
<el-col :span="10">
|
||||
<el-form-item prop="custLocation" label="住宅地址">
|
||||
<el-cascader v-model='addPersonForm.custLocation' :props="regAddress">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" class="mphdz">
|
||||
<el-form-item prop="custLocationNum" label-width="0">
|
||||
<el-input v-model="addPersonForm.custLocationNum" maxlength="10" placeholder="请输入门牌号,非必填"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="isMarried" label="婚姻状况">
|
||||
<el-select v-model="addPersonForm.isMarried">
|
||||
<el-option v-for="(item, index) in isMarriedList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custEdu" label="学历">
|
||||
<el-select v-model="addPersonForm.custEdu">
|
||||
<el-option v-for="(item, index) in custEduList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="custSalary" label="年收入">
|
||||
<el-input v-model.number="addPersonForm.custSalary" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="industry" label="行业名称">
|
||||
<el-cascader v-model='addPersonForm.industry' :options="industryOptions"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>关联信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="relateMerchant" label="关联商户">
|
||||
<el-input v-model="addPersonForm.relateMerchant" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="relateMerchantCode" label="关联商户统信码">
|
||||
<el-input v-model="addPersonForm.relateMerchantCode" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="relateBusiness" label="关联企业">
|
||||
<el-input v-model="addPersonForm.relateBusiness" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="relateBusinessCode" label="关联企业统信码">
|
||||
<el-input v-model="addPersonForm.relateBusinessCode" maxlength="18"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>家庭成员信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<div class="glrxx">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-table :data="addPersonForm.tableData" style="width: 100%;">
|
||||
<el-table-column prop="fmyName" label="家庭成员">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0">
|
||||
<el-input v-model="scope.row.fmyName" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.fmyName }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fmyRln" label="与本人关系">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0">
|
||||
<el-select v-model="scope.row.fmyRln" v-if="scope.row.isEdit">
|
||||
<el-option v-for="(item, index) in FmyRlnList" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.fmyRln }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="fmyCustIdc" label="身份证号" >
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0" :prop="`tableData.${scope.$index}.fmyCustIdc`"
|
||||
:rules="personRules.fmyCustIdc">
|
||||
<el-input v-model="scope.row.fmyCustIdc" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.fmyCustIdc }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tel" label="手机号">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0" :prop="`tableData.${scope.$index}.tel`" :rules="personRules.tel">
|
||||
<el-input v-model="scope.row.tel" maxlength="18" v-if="scope.row.isEdit"></el-input>
|
||||
<div v-if="!scope.row.isEdit">{{ scope.row.tel }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="belongBusi" label="成员行业">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item label-width="0">
|
||||
<el-cascader v-model='scope.row.belongBusi' :options="industryOptions" v-if="scope.row.isEdit"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'value', checkStrictly: true }"
|
||||
:show-all-levels="false">
|
||||
</el-cascader>
|
||||
<div v-if="!scope.row.isEdit">{{ initIndustryBusiStr(scope.row.belongBusi) }}</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" v-if="!scope.row.isEdit" @click="handleClickEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" v-if="scope.row.isEdit" @click="handleClickSave(scope.row)">保存</el-button>
|
||||
<el-button type="text" v-if="!scope.row.isEdit"
|
||||
@click="handleClickDelete(scope.row, scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<div class="addGlr" @click="handleAddGlr"><i class="el-icon-circle-plus-outline addIcon"></i>添加关联人</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title_box">
|
||||
<div class="title_blue"></div>
|
||||
<span>其他信息</span>
|
||||
</div>
|
||||
<div class="infoBox">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="belongBranchId" label="客户经理归属机构">
|
||||
<el-cascader v-model='addPersonForm.belongBranchId' :options="departOptions"
|
||||
:props="{ expandTrigger: 'hover', label: 'label', value: 'id', checkStrictly: true }"
|
||||
@change="changeBranchName(addPersonForm.belongBranchId)">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="15">
|
||||
<el-form-item prop="perUserSelect" label="客户经理">
|
||||
<el-select v-model="addPersonForm.perUserSelect" @focus="selectUser">
|
||||
<el-option v-for="(item, index) in userList" :key="index" :label="item.label" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserProfile } from '@/api/grid/anchor.js'
|
||||
import { Message } from 'element-ui'
|
||||
import { getDeptTree, getDeptUserTree, getAddressTreeAdd, deptTreeByManager } from "@/api/grid/address/tree.js";
|
||||
import { getIndustryTree, addRecord, getInfoByCustIdc } from '@/api/system/listByRetailKeywords.js'
|
||||
import { custEduList } from '../../charts/360charts/custEdu'
|
||||
export default {
|
||||
data() {
|
||||
var validatePhone = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入手机号'))
|
||||
}
|
||||
const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
|
||||
if (!regExp.test(value)) {
|
||||
this.showCode = false
|
||||
this.canClick = false
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
this.canClick = true
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var fmyTelPhone = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
callback()
|
||||
}
|
||||
const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
|
||||
if (!regExp.test(value)) {
|
||||
this.showCode = false
|
||||
this.canClick = false
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
this.canClick = true
|
||||
callback()
|
||||
}
|
||||
}
|
||||
var validateCustIdc = (rule, value, callback) => {
|
||||
if (!value?.trim()) {
|
||||
return callback(new Error('请输入身份证号码'))
|
||||
}
|
||||
const regex = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
|
||||
if (!regex.test(value)) {
|
||||
callback(new Error('请输入正确的身份证号码'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
custEduList,
|
||||
addPersonForm: {
|
||||
custIdc: '',
|
||||
custName: '',
|
||||
custGender: '',
|
||||
birthday: '',
|
||||
custAge: '',
|
||||
custPhone: '',
|
||||
registerLocation: '',
|
||||
registerLocationNum: '',
|
||||
jobLocation: '',
|
||||
jobLocationNum: '',
|
||||
custLocation: '',
|
||||
custLocationNum: '',
|
||||
isMarried: '',
|
||||
custEdu: '',
|
||||
custSalary: '',
|
||||
industry: '',
|
||||
relateMerchant: '',
|
||||
relateMerchantCode: '',
|
||||
relateBusiness: '',
|
||||
relateBusinessCode: '',
|
||||
belongUserId: '',
|
||||
belongBranchId: '',
|
||||
perUserSelect: '',
|
||||
tableData: []
|
||||
},
|
||||
adressOptions: [],
|
||||
isMarriedList: [
|
||||
{
|
||||
label: '未婚',
|
||||
value: '未婚'
|
||||
},
|
||||
{
|
||||
label: '已婚',
|
||||
value: '已婚'
|
||||
},
|
||||
{
|
||||
label: '离异',
|
||||
value: '离异'
|
||||
}
|
||||
],
|
||||
genderList: [
|
||||
{ label: '男', value: '男' },
|
||||
{ label: '女', value: '女' },
|
||||
],
|
||||
FmyRlnList: [
|
||||
{ label: '父亲', value: '父亲' },
|
||||
{ label: '母亲', value: '母亲' },
|
||||
{ label: '祖父', value: '祖父' },
|
||||
{ label: '祖母', value: '祖母' },
|
||||
{ label: '儿子', value: '儿子' },
|
||||
{ label: '女儿', value: '女儿' },
|
||||
{ label: '孙子', value: '孙子' },
|
||||
{ label: '孙女', value: '孙女' },
|
||||
{ label: '兄弟', value: '兄弟' },
|
||||
{ label: '表兄弟', value: '表兄弟' },
|
||||
{ label: '堂兄弟', value: '堂兄弟' },
|
||||
{ label: '姐妹', value: '姐妹' },
|
||||
{ label: '表姐妹', value: '表姐妹' },
|
||||
{ label: '堂姐妹', value: '堂姐妹' },
|
||||
{ label: '妻子', value: '妻子' },
|
||||
{ label: '丈夫', value: '丈夫' },
|
||||
],
|
||||
industryOptions: [],
|
||||
userList: [],
|
||||
departOptions: [],
|
||||
personRules: {
|
||||
custName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
|
||||
custPhone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
||||
fmyCustIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
|
||||
tel: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
||||
belongBranchId:[{ required: true, message: '请选择', trigger: 'change' }],
|
||||
},
|
||||
regAddress: {
|
||||
lazy: true,
|
||||
lazyLoad(node, resolve) {
|
||||
setTimeout(() => {
|
||||
const nodes = []
|
||||
let query = {
|
||||
level: node.level + 1,
|
||||
code: node.level == 0 ? '33' : node.value.value,
|
||||
}
|
||||
|
||||
getAddressTreeAdd(query).then(res => {
|
||||
res.data.map(item => {
|
||||
let obj = {
|
||||
value: item,
|
||||
label: item.label,
|
||||
leaf: item.level >= 5
|
||||
}
|
||||
nodes.push(obj)
|
||||
})
|
||||
|
||||
resolve(nodes)
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.initAddressTree()
|
||||
this.initIndustryTree()
|
||||
this.getUser()
|
||||
},
|
||||
mounted() {
|
||||
this.userId = this.addPersonForm.belongBranchId
|
||||
},
|
||||
methods: {
|
||||
initInfoByCustIdc(data) {
|
||||
//性别
|
||||
let sexCode = data.charAt(16)
|
||||
let gender = parseInt(sexCode, 10) % 2 === 0 ? '女' : '男'
|
||||
//年龄
|
||||
let today = new Date()
|
||||
let birthDate = new Date(data.substring(6, 10))
|
||||
let age = today.getFullYear() - birthDate.getFullYear()
|
||||
//出生日期
|
||||
let year = data.substring(6, 10)
|
||||
let mounth = data.substring(10, 12)
|
||||
let day = data.substring(12, 14)
|
||||
let csDate = `${year}-${mounth}-${day}`
|
||||
this.addPersonForm.custGender = gender
|
||||
this.addPersonForm.birthday = csDate
|
||||
this.addPersonForm.custAge = age
|
||||
|
||||
},
|
||||
initIndustryTree() {
|
||||
getIndustryTree().then(res => {
|
||||
this.industryOptions = res.data.map(item => {
|
||||
return {
|
||||
value: item.code,
|
||||
label: item.name,
|
||||
children: item.industryTrees
|
||||
}
|
||||
})
|
||||
this.industryOptions.forEach(item => {
|
||||
item.children.forEach(el => {
|
||||
el.value = el.code
|
||||
el.label = el.name
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
// initAddressTree() {
|
||||
// getAddressTree({ code: '33' }).then(res => {
|
||||
// this.adressOptions = res.data
|
||||
// })
|
||||
// },
|
||||
initIndustryBusiStr(data) {
|
||||
for (let i = 0; i < this.industryOptions.length; i++) {
|
||||
if (this.industryOptions[i].value == data[data.length - 1]) {
|
||||
|
||||
return this.industryOptions[i].label
|
||||
} else {
|
||||
for (let j = 0; j < this.industryOptions[i].children.length; j++) {
|
||||
|
||||
if (this.industryOptions[i].children[j].value == data[data.length - 1]) {
|
||||
|
||||
return this.industryOptions[i].children[j].label
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getUser() {
|
||||
getUserProfile().then(res => {
|
||||
this.deptId = res.data.dept.deptId
|
||||
this.deptName = res.data.dept.deptName
|
||||
let roleName = res.data.roleName
|
||||
if (roleName == '普通客户经理') {
|
||||
this.initdeptTreeByManager()
|
||||
} else {
|
||||
this.initDeptTree()
|
||||
}
|
||||
})
|
||||
},
|
||||
initDeptTree() {
|
||||
getDeptTree(this.deptId).then(res => {
|
||||
|
||||
this.departOptions = res.data
|
||||
})
|
||||
},
|
||||
initdeptTreeByManager() {
|
||||
deptTreeByManager(this.deptId).then(res => {
|
||||
this.departOptions = res.data
|
||||
})
|
||||
},
|
||||
changeBranchName(value) {
|
||||
this.addPersonForm.perUserSelect = ''
|
||||
this.userList = []
|
||||
this.userId = value ? value[value.length - 1] : ''
|
||||
},
|
||||
selectUser(value) {
|
||||
|
||||
this.initGetDeptTree()
|
||||
},
|
||||
initGetDeptTree() {
|
||||
|
||||
const params = {
|
||||
deptid: this.userId
|
||||
}
|
||||
getDeptUserTree(params).then(res => {
|
||||
if (res.length > 0) {
|
||||
this.userList = res.map(item => {
|
||||
return {
|
||||
value: item.userName,
|
||||
label: `${item.nickName}-${item.userName}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Message.warning('该机构下无客户经理')
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
handleAddGlr() {
|
||||
this.addPersonForm.tableData.push({
|
||||
fmyName:'',
|
||||
fmyRln:'',
|
||||
fmyCustIdc:'',
|
||||
tel:'',
|
||||
belongBusi:'',
|
||||
isEdit: true
|
||||
})
|
||||
},
|
||||
handleClickSave(item) {
|
||||
item.isEdit = false
|
||||
},
|
||||
handleClickEdit(item) {
|
||||
item.isEdit = true
|
||||
},
|
||||
handleClickDelete(item, index) {
|
||||
this.addPersonForm.tableData.splice(index, 1)
|
||||
},
|
||||
formDataPamars(json) {
|
||||
const params = []
|
||||
for (const key in json) {
|
||||
const value = json[key]
|
||||
if (value && typeof value === 'object' && !Array.isArray(value)) {
|
||||
params.push(...Object.keys(value).map((k) => `${key}[${k}]=${encodeURIComponent(value[k])}`))
|
||||
} else if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
params.push(`${key}[]=${encodeURIComponent(item)}`)
|
||||
})
|
||||
} else {
|
||||
params.push(`${key}=${encodeURIComponent(value)}`)
|
||||
}
|
||||
}
|
||||
return params.join('&')
|
||||
},
|
||||
handleAddPersonClose() {
|
||||
this.$refs.addPersonForm.resetFields()
|
||||
this.$router.push({ path: '/customer/filingHome', query: { selectType: '0' } })
|
||||
},
|
||||
handleAddPersonCommit() {
|
||||
|
||||
//户籍地址
|
||||
let registerLocationArr = this.addPersonForm.registerLocation ? this.addPersonForm.registerLocation.map(item => { return item.label }) : []
|
||||
let registerLocationStr = registerLocationArr.join(' ').replace(/\s/g, '')
|
||||
//单位地址
|
||||
let jobLocationArr = this.addPersonForm.jobLocation ? this.addPersonForm.jobLocation.map(item => { return item.label }) : []
|
||||
let jobLocationStr = jobLocationArr.join(' ').replace(/\s/g, '')
|
||||
//住宅地址
|
||||
let custLocationArr = this.addPersonForm.custLocation ? this.addPersonForm.custLocation.map(item => { return item.label }) : []
|
||||
let custLocationStr = custLocationArr.join(' ').replace(/\s/g, '')
|
||||
|
||||
this.$refs.addPersonForm.validate((valid) => {
|
||||
|
||||
if (valid) {
|
||||
const infoParams = {
|
||||
custType: '0',
|
||||
custIdc: this.addPersonForm.custIdc,
|
||||
custName: this.addPersonForm.custName,
|
||||
custGender: this.addPersonForm.custGender,
|
||||
birthday: this.addPersonForm.birthday,
|
||||
custAge: this.addPersonForm.custAge,
|
||||
custPhone: this.addPersonForm.custPhone,
|
||||
registerLocation: `${registerLocationStr} ${this.addPersonForm.registerLocationNum}`,
|
||||
jobLocation: `${jobLocationStr} ${this.addPersonForm.jobLocationNum}`,
|
||||
custLocation: `${custLocationStr} ${this.addPersonForm.custLocationNum}`,
|
||||
isMarried: this.addPersonForm.isMarried,
|
||||
custEdu: this.addPersonForm.custEdu,
|
||||
custSalary: this.addPersonForm.custSalary,
|
||||
industry: this.addPersonForm.industry[this.addPersonForm.industry.length - 1],
|
||||
|
||||
belongUserId: this.addPersonForm.perUserSelect.value,
|
||||
belongBranchId: this.addPersonForm.belongBranchId[this.addPersonForm.belongBranchId.length - 1],
|
||||
belongUserName: this.addPersonForm.perUserSelect.label
|
||||
}
|
||||
let arr = this.addPersonForm.tableData.map(item => {
|
||||
return {
|
||||
fmyCustIdc: item.fmyCustIdc,
|
||||
fmyName: item.fmyName,
|
||||
fmyRln: item.fmyRln,
|
||||
tel: item.tel,
|
||||
belongBusi: item.belongBusi
|
||||
}
|
||||
})
|
||||
arr.forEach(item => {
|
||||
item.belongBusi = item.belongBusi ? item.belongBusi[item.belongBusi.length - 1] : ''
|
||||
})
|
||||
let recordRelate = {
|
||||
relateMerchant: this.addPersonForm.relateMerchant,
|
||||
relateMerchantCode: this.addPersonForm.relateMerchantCode,
|
||||
relateBusiness: this.addPersonForm.relateBusiness,
|
||||
relateBusinessCode: this.addPersonForm.relateBusinessCode,
|
||||
}
|
||||
const params = {
|
||||
custInfoRecord: infoParams,
|
||||
familyMembersRecords: arr,
|
||||
recordRelates: [recordRelate]
|
||||
}
|
||||
addRecord(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
Message.success(res.msg)
|
||||
this.$router.push({ path: '/filing/filingHome', query: { selectType: '0' } })
|
||||
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
::v-deep .el-cascader {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
|
||||
.footer {
|
||||
margin: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.commit_btn {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.addPersonForm {
|
||||
padding: 20px 30px 10px 20px;
|
||||
}
|
||||
|
||||
.main_top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
.maintop_left {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.title_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title_blue {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background-color: rgb(22, 132, 252);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.infoBox {
|
||||
margin-top: 30px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.dz_row {
|
||||
::v-deep .el-col {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mphdz {
|
||||
::v-deep .el-input {
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.addGlr {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
background-color: rgba(70, 130, 255, 0.1);
|
||||
color: rgba(70, 130, 255, 1);
|
||||
border: 1px solid rgba(70, 130, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addIcon {
|
||||
font-size: 25px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
695
ruoyi-ui/src/views/customer/filingqk/filingHome/index.vue
Normal file
695
ruoyi-ui/src/views/customer/filingqk/filingHome/index.vue
Normal file
@@ -0,0 +1,695 @@
|
||||
<template>
|
||||
<div class="customer-wrap">
|
||||
<div>
|
||||
<el-radio-group class="header-radio" v-model="selectedTab" @input="handleChange">
|
||||
<!-- <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
|
||||
<el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button> -->
|
||||
<el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
|
||||
</el-radio-group>
|
||||
<section class="search-box" v-if="showSearch">
|
||||
<section class="search-cnt">
|
||||
<el-input v-model="searchQuery" :placeholder="searchPlace" clearable @clear="handleSearch(searchQuery)"
|
||||
@keyup.enter.native="handleSearch(searchQuery)">
|
||||
</el-input>
|
||||
<section class="search-btn" @click="handleSearch(searchQuery)">
|
||||
<i class="el-icon-search"></i>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="operate-cnt">
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="handleRefersh" :columns="columns"
|
||||
style="margin-left: auto"></right-toolbar>
|
||||
<!-- <el-button type="primary" size="small" style="margin-left: 10px" @click="handleAdd">新客登记</el-button> -->
|
||||
</section>
|
||||
<div class="personage-box" v-if="isPersonage">
|
||||
<section class="table-wrap">
|
||||
<el-table :data="tableData" style="width: 100%" v-loading="perLoading" max-height="615">
|
||||
<el-table-column align="center" key="custName" prop="custName" width="400" label="客户姓名" show-overflow-tooltip
|
||||
v-if="columns[0].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCustDetail(scope.row.id)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" key="custIdc" prop="custIdc" label="证件号" v-if="columns[1].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCustDetail(scope.row.id)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" key="custPhone" prop="custPhone" label="手机号"
|
||||
v-if="columns[2].visible"></el-table-column>
|
||||
<el-table-column align="center" key="custId" prop="custId" label="客户号"
|
||||
v-if="columns[3].visible"></el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,prev,pager,next,sizes" :total="total"
|
||||
:current-page="pageNum"></el-pagination>
|
||||
</section>
|
||||
</div>
|
||||
<div class="commercial-box" v-if="isCommercial">
|
||||
<el-table :data="commercialTableData" style="width: 100%" v-loading="comLoading" max-height="615">
|
||||
<!-- <el-table-column align="center" prop="custName" width="400" label="商户名称" show-overflow-tooltip
|
||||
v-if="columns[0].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCommercialDetail(scope.row.id)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="lpName" label="经营者" v-if="columns[1].visible"></el-table-column>
|
||||
<el-table-column align="center" prop="custIdc" label="证件号" v-if="columns[2].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCommercialDetail(scope.row.id)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="custPhone" label="手机号" v-if="columns[3].visible"></el-table-column> -->
|
||||
<el-table-column align="center" prop="custName" label="商户名称"></el-table-column>
|
||||
<el-table-column align="center" prop="regStatus" label="建档状态">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.regStatus?'是':'否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="cz" label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleCommercialDetail(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination @size-change="commercialSizeChange" @current-change="commercialCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]" :page-size="commercialPageSize" layout="->,total,prev,pager,next,sizes"
|
||||
:total="commercialTotal" :current-page="commercialPageNum"></el-pagination>
|
||||
</div>
|
||||
<div class="firm-box" v-if="isFirm">
|
||||
<el-table :data="firmTableData" style="width: 100%" v-loading="firmLoading" max-height="615">
|
||||
<el-table-column align="center" prop="custName" width="400" label="企业名称" show-overflow-tooltip
|
||||
v-if="columns[0].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleFirmDetail(scope.row.id)">{{ scope.row.custName }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="lpName" label="企业法人" v-if="columns[1].visible"></el-table-column>
|
||||
<el-table-column align="center" prop="custIdc" label="证件号" v-if="columns[2].visible">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleFirmDetail(scope.row.id)">{{ scope.row.custIdc }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="custPhone" label="手机号" v-if="columns[3].visible"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
<!-- 分页区域 -->
|
||||
<el-pagination @size-change="firmSizeChange" @current-change="firmCurrentChange" :page-sizes="[10, 20, 30, 40]"
|
||||
:page-size="firmPageSize" layout="->,total,prev,pager,next,sizes" :total="firmTotal"
|
||||
:current-page="firmPageNum"></el-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { custLeadList } from '@/api/system/listByRetailKeywords.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
perLoading: false,
|
||||
comLoading: false,
|
||||
firmLoading: false,
|
||||
isPerLoading: false,
|
||||
isCommerLoading: false,
|
||||
isFirmLoading: false,
|
||||
showSearch: true,
|
||||
selectedTab: '1',
|
||||
tableData: [
|
||||
|
||||
],
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
searchQuery: '',
|
||||
columns: [
|
||||
|
||||
],
|
||||
isPersonage: false,
|
||||
isCommercial: false,
|
||||
isFirm: true,
|
||||
searchPlace: '输入客户名',
|
||||
commercialTableData: [],
|
||||
commercialPageSize: 10,
|
||||
commercialPageNum: 1,
|
||||
commercialTotal: 0,
|
||||
firmTableData: [],
|
||||
firmTotal: 0,
|
||||
firmPageSize: 10,
|
||||
firmPageNum: 1,
|
||||
deptId: '',
|
||||
deptName: '',
|
||||
custType: '2'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['roles']),
|
||||
//对公
|
||||
isPublic() {
|
||||
return this.roles.includes('headPublic')
|
||||
},
|
||||
//对私
|
||||
isPrivate() {
|
||||
return this.roles.includes('headPrivate')
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
console.log(this.$route.query, 'sssssssss')
|
||||
// if (this.$route.query.selectType) {
|
||||
// if (this.$route.query.selectType == '0') {
|
||||
// this.isPersonage = true
|
||||
// this.isCommercial = false
|
||||
// this.isFirm = false
|
||||
// this.selectedTab = '0'
|
||||
// this.custType = '0'
|
||||
// this.searchPlace = '输入客户名/证件号/手机号'
|
||||
// this.columns.push(
|
||||
// { key: 0, label: '客户姓名', visible: true },
|
||||
// { key: 1, label: '证件号', visible: true },
|
||||
// { key: 2, label: '手机号', visible: true },
|
||||
// { key: 3, label: '客户号', visible: true }
|
||||
// )
|
||||
// this.initListData()
|
||||
|
||||
// } else if (this.$route.query.selectType == '1') {
|
||||
this.selectedTab = '1'
|
||||
this.isPersonage = false
|
||||
this.isCommercial = true
|
||||
this.isFirm = false
|
||||
this.custType = '1'
|
||||
this.searchPlace = '输入商户名'
|
||||
this.columns.push(
|
||||
{ key: 4, label: '商户名称', visible: true },
|
||||
{ key: 5, label: '企业法人', visible: true },
|
||||
{ key: 6, label: '证件号', visible: true },
|
||||
{ key: 7, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
// } else {
|
||||
// this.selectedTab = '2'
|
||||
// this.isPersonage = false
|
||||
// this.isCommercial = false
|
||||
// this.isFirm = true
|
||||
// this.custType = '2'
|
||||
// this.searchPlace = '输入企业名/证件号/手机号'
|
||||
// this.columns.push(
|
||||
// { key: 8, label: '企业名称', visible: true },
|
||||
// { key: 9, label: '企业法人', visible: true },
|
||||
// { key: 10, label: '证件号', visible: true },
|
||||
// { key: 11, label: '手机号', visible: true }
|
||||
// )
|
||||
// this.initListData()
|
||||
// }
|
||||
for (let key in this.$route.query) {
|
||||
delete this.$route.query[key];
|
||||
}
|
||||
// } else {
|
||||
// if (this.isPublic) {
|
||||
// this.isPersonage = false
|
||||
// this.isCommercial = false
|
||||
// this.isFirm = true
|
||||
// this.selectedTab = '2'
|
||||
// this.custType = '2'
|
||||
// this.searchPlace = '输入企业名/证件号/手机号'
|
||||
// this.columns.push(
|
||||
// { key: 8, label: '企业名称', visible: true },
|
||||
// { key: 9, label: '企业法人', visible: true },
|
||||
// { key: 10, label: '证件号', visible: true },
|
||||
// { key: 11, label: '手机号', visible: true }
|
||||
// )
|
||||
// this.initListData()
|
||||
// } else if (this.isPrivate) {
|
||||
// this.isPersonage = true
|
||||
// this.isCommercial = false
|
||||
// this.isFirm = false
|
||||
// this.selectedTab = '0'
|
||||
// this.custType = '0'
|
||||
// this.searchPlace = '输入客户名/证件号/手机号'
|
||||
// this.columns.push(
|
||||
// { key: 0, label: '客户姓名', visible: true },
|
||||
// { key: 1, label: '证件号', visible: true },
|
||||
// { key: 2, label: '手机号', visible: true },
|
||||
// { key: 3, label: '客户号', visible: true }
|
||||
// )
|
||||
// this.initListData()
|
||||
// } else {
|
||||
// this.isPersonage = false
|
||||
// this.isCommercial = false
|
||||
// this.isFirm = true
|
||||
// this.custType = '2'
|
||||
// this.selectedTab = '2'
|
||||
// this.searchPlace = '输入企业名/证件号/手机号'
|
||||
// this.columns.push(
|
||||
// { key: 8, label: '企业名称', visible: true },
|
||||
// { key: 9, label: '企业法人', visible: true },
|
||||
// { key: 10, label: '证件号', visible: true },
|
||||
// { key: 11, label: '手机号', visible: true }
|
||||
// )
|
||||
// this.initListData()
|
||||
// }
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
this.columns = []
|
||||
this.searchQuery = ''
|
||||
if (this.selectedTab == '0') {
|
||||
this.isPersonage = true
|
||||
this.isCommercial = false
|
||||
this.isFirm = false
|
||||
this.custType = '0'
|
||||
this.searchPlace = '输入客户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 0, label: '客户姓名', visible: true },
|
||||
{ key: 1, label: '证件号', visible: true },
|
||||
{ key: 2, label: '手机号', visible: true },
|
||||
{ key: 3, label: '客户号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.isPersonage = false
|
||||
this.isCommercial = true
|
||||
this.isFirm = false
|
||||
this.custType = '1'
|
||||
this.searchPlace = '输入商户名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 4, label: '商户名称', visible: true },
|
||||
{ key: 5, label: '企业法人', visible: true },
|
||||
{ key: 6, label: '证件号', visible: true },
|
||||
{ key: 7, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
this.custType = '2'
|
||||
this.searchPlace = '输入企业名/证件号/手机号'
|
||||
this.columns.push(
|
||||
{ key: 8, label: '企业名称', visible: true },
|
||||
{ key: 9, label: '企业法人', visible: true },
|
||||
{ key: 10, label: '证件号', visible: true },
|
||||
{ key: 11, label: '手机号', visible: true }
|
||||
)
|
||||
this.initListData()
|
||||
}
|
||||
},
|
||||
initListData() {
|
||||
|
||||
let params = {}
|
||||
if (this.selectedTab == '2') {
|
||||
params = {
|
||||
keyword: this.searchQuery,
|
||||
pageSize: this.firmPageSize,
|
||||
pageNum: this.firmPageNum,
|
||||
custType: this.custType
|
||||
}
|
||||
} else if (this.selectedTab == '1') {
|
||||
params = {
|
||||
keyword: this.searchQuery,
|
||||
pageSize: this.commercialPageSize,
|
||||
pageNum: this.commercialPageNum,
|
||||
custType: this.custType
|
||||
}
|
||||
} else if (this.selectedTab == '0') {
|
||||
params = {
|
||||
keyword: this.searchQuery,
|
||||
pageSize: this.pageSize,
|
||||
pageNum: this.pageNum,
|
||||
custType: this.custType
|
||||
}
|
||||
}
|
||||
custLeadList(params).then(res => {
|
||||
|
||||
if (res.code == 200) {
|
||||
if (this.selectedTab == '2') {
|
||||
this.firmTableData = res.rows
|
||||
this.firmTotal = res.total
|
||||
this.isPersonage = false
|
||||
this.isCommercial = false
|
||||
this.isFirm = true
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.commercialTableData = res.rows
|
||||
this.commercialTotal = res.total
|
||||
this.isPersonage = false
|
||||
this.isCommercial = true
|
||||
this.isFirm = false
|
||||
} else if (this.selectedTab == '0') {
|
||||
this.tableData = res.rows
|
||||
this.total = res.total
|
||||
this.isPersonage = true
|
||||
this.isCommercial = false
|
||||
this.isFirm = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
handleSizeChange(newSize) {
|
||||
this.pageSize = newSize
|
||||
this.initListData()
|
||||
},
|
||||
handleCurrentChange(newPage) {
|
||||
this.pageNum = newPage
|
||||
this.initListData()
|
||||
},
|
||||
|
||||
commercialSizeChange(val) {
|
||||
this.commercialPageSize = val
|
||||
this.initListData()
|
||||
},
|
||||
commercialCurrentChange(val) {
|
||||
this.commercialPageNum = val
|
||||
this.initListData()
|
||||
},
|
||||
|
||||
firmSizeChange(val) {
|
||||
this.firmPageSize = val
|
||||
this.initListData()
|
||||
},
|
||||
firmCurrentChange(val) {
|
||||
this.firmPageNum = val
|
||||
this.initListData()
|
||||
},
|
||||
handleSearch() {
|
||||
if (this.selectedTab == '0') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.initListData()
|
||||
}
|
||||
},
|
||||
handleRefersh() {
|
||||
this.searchQuery = ''
|
||||
if (this.selectedTab == '0') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.initListData()
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.initListData()
|
||||
}
|
||||
},
|
||||
handleCustDetail(id) {
|
||||
this.$router.push({ path: '/filing/filingpersonDetail', query: { id: id, type: '0', selectType: '0' } })
|
||||
|
||||
},
|
||||
handleCommercialDetail(v) {
|
||||
this.$router.push({ path: '/filingqk/filingpersonDetail', query: { custId: v.id } })
|
||||
},
|
||||
handleFirmDetail(id) {
|
||||
this.$router.push({ path: '/filing/filingpersonDetail', query: { id: id, type: '2', selectType: '2' } })
|
||||
},
|
||||
|
||||
handleAdd() {
|
||||
if (this.selectedTab == '0') {
|
||||
this.$router.push({ path: '/customer/charts/filing/personFiling' })
|
||||
} else if (this.selectedTab == '1') {
|
||||
this.$router.push({ path: '/customer/charts/filing/commercialFiling' })
|
||||
} else if (this.selectedTab == '2') {
|
||||
this.$router.push({ path: '/customer/charts/filing/firmFiling' })
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.customer-wrap {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
|
||||
.header-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.btn-disabled {
|
||||
::v-deep .el-radio-button__inner {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
|
||||
.el-radio-button {
|
||||
flex: 1;
|
||||
|
||||
::v-deep .el-radio-button__inner {
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.44px;
|
||||
line-height: 25px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
padding: 11px 0 12px 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||||
background-color: #4886f8;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 21px;
|
||||
width: 1px;
|
||||
background: #ebebeb;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 24px 0 0 0;
|
||||
|
||||
.search-cnt {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 23px;
|
||||
border: 1px solid #ebebeb;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
border: 1px solid #4886f8;
|
||||
background-color: #4886f8;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
.el-icon-search {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
display: flex;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #3d3d3d;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-labels {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #3d3d3d;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-right: 30px;
|
||||
|
||||
&::after {
|
||||
content: '*';
|
||||
left: 5px;
|
||||
color: #ff4d42;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 24px 0;
|
||||
|
||||
.search-cnt {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-input__inner {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-radius: 23px;
|
||||
border: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
right: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
border: 1px solid #4886f8;
|
||||
background-color: #4886f8;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
.el-icon-search {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(7, 58, 177);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
margin: 0 30px;
|
||||
|
||||
.checkBox {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate-cnt {
|
||||
margin: 24px 0 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.top-right-btn {
|
||||
margin-right: 24px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.plain-raido-btn {
|
||||
::v-deep .el-radio-button__inner {
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||||
border: 1px solid #4886f8;
|
||||
color: #4886f8;
|
||||
background-color: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addDialog {
|
||||
::v-deep .el-input {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.commit_btn {
|
||||
margin-left: 50px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,498 @@
|
||||
<template>
|
||||
<div class="common-wrap-cnt">
|
||||
<section class="header-top">
|
||||
<p class="common-title">法人信息</p>
|
||||
</section>
|
||||
<el-form :model="baseInfo" label-width="140px" style="margin-top:20px;">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operatorName" label="经营者姓名：">
|
||||
<span>{{ baseInfo.operatorName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operatorCustIdc" label="身份证号：">
|
||||
<span>{{ baseInfo.operatorCustIdc }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operatorGender" label="性别：">
|
||||
<span>{{ baseInfo.operatorGender }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operatorBirth" label="出生日期：">
|
||||
<span>{{ baseInfo.operatorBirth }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operatorAge" label="年龄：">
|
||||
<span>{{ baseInfo.operatorAge }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operatorPhone" label="经营者手机号：">
|
||||
<span>{{ baseInfo.operatorPhone }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<section class="header-top">
|
||||
<p class="common-title">商户信息</p>
|
||||
</section>
|
||||
<el-form :model="baseInfo" label-width="140px" style="margin-top:20px;">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="custName" label="商户名称：">
|
||||
<span>{{ baseInfo.custName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="usci" label="统信码：">
|
||||
<span>{{ baseInfo.usci }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operaStatus" label="经营状态：">
|
||||
<span>{{ baseInfo.operaStatus }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operaScope" label="经营范围：">
|
||||
<span>{{ baseInfo.operaScope }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operaAddress" label="经营地址：">
|
||||
<span>{{ baseInfo.operaAddress }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="operaAddressDetail" label="门牌号：">
|
||||
<span>{{ baseInfo.operaAddressDetail }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="lng" label="经度：">
|
||||
<span>{{ baseInfo.lng }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="lat" label="维度：">
|
||||
<span>{{ baseInfo.lat }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="regAddress" label="注册地址：">
|
||||
<span>{{ baseInfo.regAddress }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="regAddressDetail" label="门牌号：">
|
||||
<span>{{ baseInfo.regAddressDetail }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="industry" label="行业名称：">
|
||||
<span>{{ baseInfo.industry }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="custPhone" label="企业电话：">
|
||||
<span>{{ baseInfo.custPhone }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="regStatus" label="建档状态：">
|
||||
<span>{{ baseInfo.regStatus?'是':'否' }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<section class="header-top">
|
||||
<p class="common-title">关联人信息</p>
|
||||
</section>
|
||||
<el-table :data="relatePersonsList" style="margin-top:20px;">
|
||||
<el-table-column label="关联人" prop="relatePerson" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column label="身份证号" prop="relateCustIdc" min-width="100" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<section class="header-top" style="margin-top:20px;">
|
||||
<p class="common-title">其他信息</p>
|
||||
</section>
|
||||
<el-form :model="baseInfo" label-width="140px" style="margin-top:20px;">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="relateDeptName" label="客户经理归属机构：">
|
||||
<span>{{ baseInfo.relateDeptName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item prop="relateUserName" label="客户经理：">
|
||||
<span>{{ baseInfo.relateUserName }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<section class="header-top">
|
||||
<p class="common-title">照片信息</p>
|
||||
</section>
|
||||
<div class="top_item">
|
||||
<div
|
||||
style="display:flex;flex-wrap:wrap;flex:1"
|
||||
v-if="baseInfo.imageList && baseInfo.imageList.length != 0"
|
||||
>
|
||||
<div v-for="(item, index) in baseInfo.imageList" :key="index">
|
||||
<img
|
||||
:src="`data:image/png;base64,${item}`"
|
||||
alt
|
||||
style="width: 50px; height: 50px; margin: 10px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { custLeadSelect } from "@/api/system/listByRetailKeywords.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseInfo: {
|
||||
imageList: []
|
||||
},
|
||||
relatePersonsList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
custId() {
|
||||
return this.$route.query.custId;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
custLeadSelect({ custId: this.custId }).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.baseInfo = res.data;
|
||||
if (this.baseInfo.relatePersons) {
|
||||
this.relatePersonsList = JSON.parse(this.baseInfo.relatePersons);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.common-wrap-cnt {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
height: calc(100vh - 135px);
|
||||
overflow-y: auto;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t360-production {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t360-production-item {
|
||||
width: 250px;
|
||||
height: 43px;
|
||||
background: #eaf5ff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
margin-right: 20px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.t360-production-1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.t360-production-item-1 {
|
||||
width: 250px;
|
||||
height: 43px;
|
||||
background: #eaf5ff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
margin-right: 20px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.file-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 320px;
|
||||
|
||||
.group-input {
|
||||
width: 702px;
|
||||
height: 288px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.group-select {
|
||||
width: 702px;
|
||||
height: 288px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.file-upload-bg {
|
||||
width: 702px;
|
||||
height: 288px;
|
||||
background: #f7f8fa;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.el-icon-upload {
|
||||
text-align: center;
|
||||
font-size: 47.36px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.file-upload-desc {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.file-upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.file-upload-download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.file-upload-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.preview-cnt {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.chose-cnt {
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button {
|
||||
width: 88px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title_box1 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title_box1:hover .ejTitle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title_box2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title_box2:hover .ejTitle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title_box3 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title_box3:hover .ejTitle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title_box4 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title_box4:hover .ejTitle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ejTitle {
|
||||
width: 250px;
|
||||
line-height: 32px;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 16px 0 #1e1f2714;
|
||||
margin-right: 20px;
|
||||
margin-top: 8px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 10px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ejTitle_item {
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-box {
|
||||
display: flex;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.message-box-left {
|
||||
display: flex;
|
||||
width: 10%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 200px;
|
||||
}
|
||||
.ccyc {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.add_btn {
|
||||
text-align: right;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.fimalyDialog {
|
||||
::v-deep .el-dialog__header {
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
border-top: 1px solid #ebedf0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 30px 37px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.glShBox {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: center;
|
||||
min-width: 250px;
|
||||
height: 60px;
|
||||
background-color: rgb(221, 233, 244);
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: center;
|
||||
min-width: 250px;
|
||||
height: 60px;
|
||||
background-color: rgb(247, 247, 247);
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.top_item {
|
||||
background-color: #ffffff;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
3
ruoyi-ui/src/views/customer/filingqk/index.vue
Normal file
3
ruoyi-ui/src/views/customer/filingqk/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
45
ruoyi-ui/src/views/customer/mock/data.js
Normal file
45
ruoyi-ui/src/views/customer/mock/data.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// const Mock = require('mockjs')
|
||||
|
||||
// Mock.mock('/api/users','get',function(options){
|
||||
// return {
|
||||
// code:0,
|
||||
// data:{
|
||||
// users:[
|
||||
// {id:1,name:"xxx"},
|
||||
// {id:2,name:"yyy"}
|
||||
// ]
|
||||
// }
|
||||
// };
|
||||
// });
|
||||
|
||||
// Mock.mock('/api/users','post',function(options){
|
||||
// const userData = JSON.parse(options.body);
|
||||
// return {
|
||||
// code:0,
|
||||
// data:{
|
||||
// id:Mock.Random.id(),
|
||||
// name:userData.name,
|
||||
// }
|
||||
// };
|
||||
// });
|
||||
|
||||
// Mock.mock('/api/users/:id','get',function(options){
|
||||
// const id = options.params.id;
|
||||
// return {
|
||||
// code:0,
|
||||
// data:{
|
||||
// id:id,
|
||||
// name:'zzz'
|
||||
// }
|
||||
// };
|
||||
// });
|
||||
|
||||
// const express = require('express');
|
||||
// const app = express();
|
||||
// const port = 3000;
|
||||
|
||||
// app.use(Mock.express());
|
||||
|
||||
// app.listen(port,()=>{
|
||||
// console.log(`Mock server running at http://localhost:${port}`)
|
||||
// })
|
||||
3
ruoyi-ui/src/views/customer/tagSyetem/index.vue
Normal file
3
ruoyi-ui/src/views/customer/tagSyetem/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="ruleBox" v-for="(item, index) in obj.ruleConditionsList" :key="index">
|
||||
<div class="ruleBox_left">
|
||||
<div v-if="index == 0">满足条件</div>
|
||||
</div>
|
||||
<div class="ruleBox_line_box">
|
||||
<div class="ruleBox_line_left">
|
||||
<span v-if="index > 0" @click="isUnabled?()=>{}:handleRelation(item)" class="relation">{{ item.relation }}</span>
|
||||
</div>
|
||||
<div class="ruleBox_line"></div>
|
||||
</div>
|
||||
<div class="ruleBox_right">
|
||||
<div class="ruleBtnBox" v-if="index == obj.ruleConditionsList.length - 1">
|
||||
<el-button round v-for="(el, i) in typeList" :key="i" @click="handleAddRule(el, item)"
|
||||
:disabled="obj.ruleConditionsList.length > 3 || isUnabled">{{ el }}</el-button>
|
||||
</div>
|
||||
<div class="ruleTitle" v-if="obj.ruleConditionsList.length == 1">请选择任意条件开始创建一个分群</div>
|
||||
<div class="ruleSelectBox" v-if="index != obj.ruleConditionsList.length - 1">
|
||||
<div class="ruleSelect_top" v-if="item.ruleList.length > 0">
|
||||
<div class="ruleSelect_left">-</div>
|
||||
<div class="ruleSelect_right">{{ item.selectTitle }}</div>
|
||||
<div v-if="!isUnabled" class="ruleSelect_right_icon">
|
||||
<el-button type="text"
|
||||
icon="el-icon-remove-outline"
|
||||
@click="handleDeleteRule(index)"
|
||||
class="gray-color"></el-button>
|
||||
<!-- <i class="el-icon-close" ></i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="ruleSelect_main">
|
||||
<div class="line_box" v-if="item.ruleList.length > 1">
|
||||
<div class="ruleSelect_main_left"></div>
|
||||
<div class="line_text" @click="isUnabled?()=>{}:handleRelationItem(item)">{{ item.relationItem }}</div>
|
||||
<div class="ruleSelect_main_left"></div>
|
||||
</div>
|
||||
|
||||
<div class="ruleSelect_main_right">
|
||||
<el-row class="ruleSelect_main_right_item" v-for="(v, vi) in item.ruleList" :key="vi">
|
||||
<el-col :span="6">
|
||||
<el-select filterable v-model="v.leftValue"
|
||||
@change="handleChange(v.leftValue, vi, index, item.selectTitle)"
|
||||
@focus="handleFocusLeft(v.leftValue, vi, index, item.selectTitle)"
|
||||
:disabled="isUnabled"
|
||||
>
|
||||
<div slot="prefix">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
<el-option v-for="item in rowLeftList" :key="item.potId" :label="item.potName"
|
||||
:value="item.potId"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select filterable v-model="v.expression"
|
||||
@focus="handleFocusExpress(item.selectTitle)"
|
||||
:disabled="isUnabled"
|
||||
>
|
||||
<el-option v-for="item in expressionList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select filterable v-model="v.rightValue" v-if="v.isShow == 'select'"
|
||||
@focus="handleFocuRight(v.leftValue)"
|
||||
:disabled="isUnabled">
|
||||
<el-option v-for="item in rowRightList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-input filterable v-model="v.rightValue" v-if="v.isShow == 'input'" :disabled="isUnabled"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3" class="addIcon" v-if="!isUnabled">
|
||||
<el-button type="text"
|
||||
icon="el-icon-remove-outline"
|
||||
@click="handleDeleteRules(index, vi)"
|
||||
class="gray-color" v-if="item.ruleList.length > 1"></el-button>
|
||||
<el-button type="text"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
class="gray-color"
|
||||
@click="handleAddRuleItem(index)"
|
||||
v-if="vi == item.ruleList.length - 1 && item.ruleList.length < 3"
|
||||
></el-button>
|
||||
<!-- <i class="el-icon-plus ruleIcon"
|
||||
></i>
|
||||
<i class="el-icon-close ruleIcon"
|
||||
></i> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="drawerTwoForm" :model="drawerTwoForm" :rules="drawerTwoFormRules" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="加工类型" prop="computType">
|
||||
<el-radio-group v-model="drawerTwoForm.computType" :disabled="isUnabled">
|
||||
<el-radio label="0">手动执行</el-radio>
|
||||
<el-radio label="1">周期执行</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label-width="0">
|
||||
<el-select filterable v-model="drawerTwoForm.zxzq"
|
||||
v-if="drawerTwoForm.computType != '0' && drawerTwoForm.computType != ''" :disabled="isUnabled">
|
||||
<el-option v-for="item in dateList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="到期时间" prop="endTime">
|
||||
<el-date-picker v-model="drawerTwoForm.endTime" type="date" value-format="yyyy-MM-dd"
|
||||
:picker-options="pickdqDateOption" :clearable = "false" :disabled="isUnabled">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listPot } from '@/api/tag/tagList.js'
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
editForm: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
isUnabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
obj: this.content,
|
||||
typeList: ['属性指标', '统计指标'],
|
||||
rowLeftList: [],
|
||||
expressionList: [
|
||||
|
||||
],
|
||||
rowRightList: [],
|
||||
// isUnabled:false,
|
||||
dateList: [
|
||||
{ label: '每日', value: '1' },
|
||||
{ label: '每周', value: '2' },
|
||||
{ label: '每月', value: '3' },
|
||||
{ label: '每年', value: '4' },
|
||||
],
|
||||
drawerTwoForm:{
|
||||
computType:'',
|
||||
zxzq:'',
|
||||
endTime:'',
|
||||
},
|
||||
drawerTwoFormRules: {
|
||||
computType: [{ required: true, message: "请选择加工类型", trigger: 'change' }],
|
||||
zxzq: [{ required: true, message: "请选择加工类型", trigger: 'change' }],
|
||||
endTime: [{ required: true, message: "请选择到期时间", trigger: 'change' }],
|
||||
},
|
||||
pickdqDateOption: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() <= Date.now()
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'obj.ruleConditionsList': {
|
||||
deep: true,
|
||||
handler(newVal, oldval) {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initListpot()
|
||||
this.expressionList = [
|
||||
{ label: '>', value: '1' },
|
||||
{ label: '>=', value: '2' },
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '<=', value: '4' },
|
||||
{ label: '<', value: '5' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
console.log(this.editForm);
|
||||
this.drawerTwoForm.computType = this.editForm.computType == '0'?'0':'1';
|
||||
this.drawerTwoForm.zxzq = this.editForm.computType !='0'?this.editForm.computType:''
|
||||
this.drawerTwoForm.endTime = this.editForm.endDate;
|
||||
},
|
||||
methods: {
|
||||
handleAddRule(el, item) {
|
||||
if (el == '属性指标') {
|
||||
this.obj.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: 'select' }] })
|
||||
} else if (el == '统计指标') {
|
||||
this.obj.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: 'input' }] })
|
||||
}
|
||||
item.selectTitle = el
|
||||
},
|
||||
handleDeleteRule(index) {
|
||||
this.obj.ruleConditionsList.splice(index, 1)
|
||||
},
|
||||
handleRelation(item) {
|
||||
item.num++
|
||||
if (item.num % 2 === 0) {
|
||||
this.$set(item, 'relation', '且')
|
||||
} else {
|
||||
this.$set(item, 'relation', '或')
|
||||
}
|
||||
},
|
||||
handleRelationItem(item) {
|
||||
item.itemNum++
|
||||
if (item.itemNum % 2 === 0) {
|
||||
this.$set(item, 'relationItem', '且')
|
||||
} else {
|
||||
this.$set(item, 'relationItem', '或')
|
||||
}
|
||||
},
|
||||
handleAddRuleItem(index) {
|
||||
this.obj.ruleConditionsList[index].ruleList.push({ leftValue: '', expression: '', rightValue: '', isShow: 'input' })
|
||||
},
|
||||
handleDeleteRules(index, vi) {
|
||||
this.obj.ruleConditionsList[index].ruleList.splice(vi, 1)
|
||||
},
|
||||
initListpot() {
|
||||
listPot('').then(res => {
|
||||
this.rowLeftList = res.data
|
||||
})
|
||||
},
|
||||
handleFocusLeft(val, vi, index, title) {
|
||||
|
||||
if (title == '属性指标') {
|
||||
listPot(3).then(res => {
|
||||
console.log(res, '111')
|
||||
this.rowLeftList = res.data
|
||||
})
|
||||
} else if (title == '统计指标') {
|
||||
listPot(1).then(res => {
|
||||
console.log(res, '333')
|
||||
this.rowLeftList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
handleFocusExpress(title) {
|
||||
if (title == '属性指标') {
|
||||
this.expressionList = [
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
} else if (title == '统计指标') {
|
||||
this.expressionList = [
|
||||
{ label: '>', value: '1' },
|
||||
{ label: '>=', value: '2' },
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '<=', value: '4' },
|
||||
{ label: '<', value: '5' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
}
|
||||
},
|
||||
handleFocuRight(val) {
|
||||
let arr = this.rowLeftList.filter(item => item.potId == val)
|
||||
let enumArr = arr[0].enums.split('|')
|
||||
console.log(enumArr, 'enumArr')
|
||||
this.rowRightList = enumArr.map(item => {
|
||||
return {
|
||||
label: item,
|
||||
value: item
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChange(val, vi, index, title) {
|
||||
if (title == '属性指标') {
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].isShow = 'select'
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].tabThresholdType = arr[0].potType
|
||||
} else if (title == '统计指标') {
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].isShow = 'input'
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].towOrThree = '1'
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].tabThresholdType = arr[0].potType
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleBox {
|
||||
::v-deep .el-select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleBox {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ruleBox_left {
|
||||
padding-top: 10px;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ruleBox_line_box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ruleBox_line {
|
||||
width: 3px;
|
||||
margin-left: 20px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.ruleBox_line_left {
|
||||
width: 16px;
|
||||
color: rgb(64, 149, 229);
|
||||
}
|
||||
|
||||
.relation {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.ruleBox_right {
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.ruleTitle {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ruleSelect_top {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ruleSelect_left {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
line-height: 13px;
|
||||
background-color: rgb(64, 149, 229);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ruleSelect_right {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ruleSelect_right_icon {
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
::v-deep .el-icon-remove-outline {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .gray-color {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleSelect_main {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line_box {
|
||||
display: flex;
|
||||
width: 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.line_text {
|
||||
|
||||
margin: 5px 0 5px 6px;
|
||||
color: rgb(64, 149, 229);
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
line-height: 21px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ruleSelect_main_left {
|
||||
width: 3px;
|
||||
margin-left: 15px;
|
||||
height: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.ruleSelect_main_right {
|
||||
width: 100%;
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
.addIcon {
|
||||
line-height: 40px;
|
||||
margin-left: 15px;
|
||||
::v-deep .el-icon-circle-plus-outline {
|
||||
color: #4886f8;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-icon-remove-outline {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .gray-color {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleSelect_main_right_item {
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
::v-deep .el-input__prefix{
|
||||
top:8px;
|
||||
}
|
||||
::v-deep .el-input__inner{
|
||||
padding-left: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleIcon {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.updateType_box {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="ruleBox" v-for="(item, index) in obj.ruleConditionsList" :key="index">
|
||||
<div class="ruleBox_left">
|
||||
<div v-if="index == 0">满足条件</div>
|
||||
</div>
|
||||
<div class="ruleBox_line_box">
|
||||
<div class="ruleBox_line_left">
|
||||
<span v-if="index > 0" @click="handleRelation(item)" class="relation">{{ item.relation }}</span>
|
||||
</div>
|
||||
<div class="ruleBox_line"></div>
|
||||
</div>
|
||||
<div class="ruleBox_right">
|
||||
<div class="ruleBtnBox" v-if="index == obj.ruleConditionsList.length - 1">
|
||||
<el-button round v-for="(el, i) in typeList" :key="i" @click="handleAddRule(el, item)"
|
||||
:disabled="obj.ruleConditionsList.length > 3">{{ el }}</el-button>
|
||||
</div>
|
||||
<div class="ruleTitle" v-if="obj.ruleConditionsList.length == 1">请选择任意条件开始创建一个分群</div>
|
||||
<div class="ruleSelectBox" v-if="index != obj.ruleConditionsList.length - 1">
|
||||
<div class="ruleSelect_top" v-if="item.ruleList.length > 0">
|
||||
<div class="ruleSelect_left">-</div>
|
||||
<div class="ruleSelect_right">{{ item.selectTitle }}</div>
|
||||
<div class="ruleSelect_right_icon"><i class="el-icon-close" @click="handleDeleteRule(index)"></i></div>
|
||||
</div>
|
||||
<div class="ruleSelect_main">
|
||||
<div class="line_box" v-if="item.ruleList.length > 1">
|
||||
<div class="ruleSelect_main_left"></div>
|
||||
<div class="line_text" @click="handleRelationItem(item)">{{ item.relationItem }}</div>
|
||||
<div class="ruleSelect_main_left"></div>
|
||||
</div>
|
||||
|
||||
<div class="ruleSelect_main_right">
|
||||
<el-row class="ruleSelect_main_right_item" v-for="(v, vi) in item.ruleList" :key="vi">
|
||||
<el-col :span="6">
|
||||
<el-select filterable v-model="v.leftValue" @change="handleChange(v.leftValue, vi, index)"
|
||||
@focus="handleFocusLeft(v.leftValue, vi, index, item.selectTitle)">
|
||||
<el-option v-for="item in rowLeftList" :key="item.potId" :label="item.potName"
|
||||
:value="item.potId"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select filterable v-model="v.expression" @focus="handleFocusExpress(item.selectTitle)">
|
||||
<el-option v-for="item in expressionList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select filterable v-model="v.rightValue" v-if="v.isShow == 'select'"
|
||||
@focus="handleFocuRight(v.leftValue)">
|
||||
<el-option v-for="item in rowRightList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-input filterable v-model="v.rightValue" v-if="v.isShow == 'input'"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3" class="addIcon">
|
||||
<!-- <i class="el-icon-plus ruleIcon" @click="handleAddRuleItem(index)"
|
||||
v-if="vi == item.ruleList.length - 1 && item.ruleList.length < 3"></i>
|
||||
<i class="el-icon-close ruleIcon" @click="handleDeleteRules(index, vi)"
|
||||
v-if="item.ruleList.length > 1"></i> -->
|
||||
<el-button type="text"
|
||||
icon="el-icon-remove-outline"
|
||||
@click="handleDeleteRules(index, vi)"
|
||||
class="gray-color" v-if="item.ruleList.length > 1"></el-button>
|
||||
<el-button type="text"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
class="gray-color"
|
||||
@click="handleAddRuleItem(index)"
|
||||
v-if="vi == item.ruleList.length - 1 && item.ruleList.length < 3"
|
||||
></el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listPot } from '@/api/tag/tagList.js'
|
||||
export default {
|
||||
props: {
|
||||
obj: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
|
||||
typeList: ['属性指标', '统计指标'],
|
||||
rowLeftList: [],
|
||||
expressionList: [],
|
||||
rowRightList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initListpot()
|
||||
this.expressionList = [
|
||||
{ label: '>', value: '1' },
|
||||
{ label: '>=', value: '2' },
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '<=', value: '4' },
|
||||
{ label: '<', value: '5' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
console.log(this.obj, 'objjjjjjj')
|
||||
},
|
||||
methods: {
|
||||
initListpot() {
|
||||
listPot('').then(res => {
|
||||
this.rowLeftList = res.data
|
||||
})
|
||||
},
|
||||
handleAddRule(el, item) {
|
||||
|
||||
if (el == '属性指标') {
|
||||
this.obj.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: 'select' }] })
|
||||
} else if (el == '统计指标') {
|
||||
this.obj.ruleConditionsList.push({ selectTitle: el, relation: '且', num: 0, relationItem: '或', itemNum: 0, ruleList: [{ leftValue: '', expression: '', rightValue: '', isShow: 'input' }] })
|
||||
}
|
||||
item.selectTitle = el
|
||||
},
|
||||
handleDeleteRule(index) {
|
||||
this.obj.ruleConditionsList.splice(index, 1)
|
||||
},
|
||||
handleRelation(item) {
|
||||
item.num++
|
||||
if (item.num % 2 === 0) {
|
||||
this.$set(item, 'relation', '且')
|
||||
} else {
|
||||
this.$set(item, 'relation', '或')
|
||||
}
|
||||
},
|
||||
handleRelationItem(item) {
|
||||
item.itemNum++
|
||||
if (item.itemNum % 2 === 0) {
|
||||
this.$set(item, 'relationItem', '且')
|
||||
} else {
|
||||
this.$set(item, 'relationItem', '或')
|
||||
}
|
||||
},
|
||||
handleAddRuleItem(index) {
|
||||
this.obj.ruleConditionsList[index].ruleList.push({ leftValue: '', expression: '', rightValue: '', isShow: 'input' })
|
||||
},
|
||||
handleDeleteRules(index, vi) {
|
||||
this.obj.ruleConditionsList[index].ruleList.splice(vi, 1)
|
||||
},
|
||||
handleFocusLeft(val, vi, index, title) {
|
||||
if (title == '属性指标') {
|
||||
listPot(3).then(res => {
|
||||
console.log(res, '111')
|
||||
this.rowLeftList = res.data
|
||||
})
|
||||
} else if (title == '统计指标') {
|
||||
listPot(1).then(res => {
|
||||
console.log(res, '333')
|
||||
this.rowLeftList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
handleFocusExpress(title) {
|
||||
if (title == '属性指标') {
|
||||
this.expressionList = [
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
} else if (title == '统计指标') {
|
||||
this.expressionList = [
|
||||
{ label: '>', value: '1' },
|
||||
{ label: '>=', value: '2' },
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '<=', value: '4' },
|
||||
{ label: '<', value: '5' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
}
|
||||
},
|
||||
handleFocuRight(val) {
|
||||
let arr = this.rowLeftList.filter(item => item.potId == val)
|
||||
let enumArr = arr[0].enums.split('|')
|
||||
console.log(enumArr, 'enumArr')
|
||||
this.rowRightList = enumArr.map(item => {
|
||||
return {
|
||||
label: item,
|
||||
value: item
|
||||
}
|
||||
})
|
||||
},
|
||||
handleChange(val, vi, index) {
|
||||
let arr = this.rowLeftList.filter(item => item.potId == val)
|
||||
if (arr[0].potType == '1') {
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].isShow = 'input'
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].towOrThree = '1'
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].tabThresholdType = arr[0].potType
|
||||
this.expressionList = [
|
||||
{ label: '>', value: '1' },
|
||||
{ label: '>=', value: '2' },
|
||||
{ label: '=', value: '3' },
|
||||
{ label: '<=', value: '4' },
|
||||
{ label: '<', value: '5' },
|
||||
{ label: '!=', value: '6' },
|
||||
]
|
||||
} else if (arr[0].potType == '3') {
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].isShow = 'select'
|
||||
this.obj.ruleConditionsList[index].ruleList[vi].tabThresholdType = arr[0].potType
|
||||
this.expressionList = [
|
||||
{ label: '=', value: '3' },
|
||||
]
|
||||
let enumArr = arr[0].enums.split('|')
|
||||
console.log(enumArr, 'enumArr')
|
||||
this.rowRightList = enumArr.map(item => {
|
||||
return {
|
||||
label: item,
|
||||
value: item
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 0 #00000017;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.common-title {
|
||||
position: relative;
|
||||
color: #222222;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translatey(-50%);
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 3px;
|
||||
background-color: #4886f8;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.baseForm {
|
||||
::v-deep .el-select {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
::v-deep .el-input {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.ruleBox {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ruleBox_left {
|
||||
padding-top: 10px;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ruleBox_line_box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ruleBox_line {
|
||||
width: 3px;
|
||||
margin-left: 20px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.ruleBox_line_left {
|
||||
width: 16px;
|
||||
color: rgb(64, 149, 229);
|
||||
}
|
||||
|
||||
.relation {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.ruleBox_right {
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.ruleTitle {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ruleSelect_top {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ruleSelect_left {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
line-height: 13px;
|
||||
background-color: rgb(64, 149, 229);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ruleSelect_right {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ruleSelect_right_icon {
|
||||
margin-left: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.ruleSelect_main {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.line_box {
|
||||
display: flex;
|
||||
width: 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.line_text {
|
||||
|
||||
margin: 5px 0 5px 6px;
|
||||
color: rgb(64, 149, 229);
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
line-height: 21px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ruleSelect_main_left {
|
||||
width: 3px;
|
||||
margin-left: 15px;
|
||||
height: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.ruleSelect_main_right {
|
||||
width: 100%;
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
.addIcon {
|
||||
line-height: 40px;
|
||||
margin-left: 15px;
|
||||
::v-deep .el-icon-circle-plus-outline {
|
||||
color: #4886f8;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-icon-remove-outline {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::v-deep .gray-color {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ruleSelect_main_right_item {
|
||||
margin-top: 10px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ruleIcon {
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.updateType_box {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
1711
ruoyi-ui/src/views/customer/tagSyetem/tagHome/index.vue
Normal file
1711
ruoyi-ui/src/views/customer/tagSyetem/tagHome/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user