Files
ibs-fullstack/ruoyi-ui/src/views/customer/charts/360charts/commercial/index.vue

2375 lines
70 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="common-wrap-cnt">
<section class="header-top">
<div class="header_top_left">
<div class="icon_box">
<div class="header_icon_box">
<img
src="../../../../../assets/imgs/icon_company.png"
alt=""
class="header_icon"
>
</div>
</div>
<div class="base-info">
<el-form ref="profileForm" :model="baseHeaderForm" class="headerForm">
<el-form-item prop="custName" label-width="20px">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/取新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
</span>
<span
v-if="!isEditing"
style="font-size: 24px; font-weight: 600; text-align: center"
>{{ baseHeaderForm.custName }}</span>
<!-- <el-tag v-if="isShow" type="danger" class="wjd">未建档</el-tag> -->
<el-tag v-if="canEdit" type="danger" class="wjd">行外客户</el-tag>
<el-input
v-if="isEditing"
v-model="baseHeaderForm.custName"
maxlength="18"
/>
</el-form-item>
<el-form-item
label-width="62px"
prop="socialCreditCode"
label="统信码:"
>
<span>{{ baseHeaderForm.socialCreditCode }}</span>
</el-form-item>
</el-form>
</div>
</div>
<section class="form-operate">
<span style="margin-right: 20px; color: #f50;font-weight: bold;">{{ customLevel }}</span>
<el-button
type="plain"
size="small"
@click="goBackToIndex"
>返回</el-button>
<el-button
v-if="!isEditing"
type="primary"
size="small"
:disabled="canEdit"
@click="handleEdit"
>编辑</el-button>
<el-button
v-if="isEditing"
type="primary"
size="small"
@click="handleCancle"
>取消</el-button>
<el-button
type="primary"
size="small"
:disabled="isSaveDisable"
@click="handleSave"
>保存</el-button>
<el-button
type="primary"
size="small"
@click="handleExport"
>导出</el-button>
<el-button
v-if="
isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin
"
type="primary"
size="small"
@click="handleAddZf"
>添加走访</el-button>
<el-button
type="primary"
size="small"
@click="handleSecondVisit"
>二次走访</el-button>
<el-button
type="primary"
size="small"
@click="handleRecource"
>资源申请</el-button>
</section>
</section>
<section class="common-create-main">
<p class="common-title">基础信息</p>
<div class="line" />
<el-form
ref="profileForm"
:model="baseForm"
:rules="rules"
class="profileForm"
>
<el-row>
<el-col :span="8">
<el-form-item prop="lpName" label-width="113px">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/取核心法人表信息"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
法人姓名:
</span>
<span v-if="!isEditing">{{ baseForm.lpName }}</span>
<el-input
v-if="isEditing"
v-model="baseForm.lpName"
maxlength="18"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="85px" prop="custGender">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="取身份证号17位值计算"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
性别:
</span>
<span v-if="!isEditing">{{ baseForm.custGender }}</span>
<el-select v-if="isEditing" v-model="baseForm.custGender">
<el-option
v-for="(item, index) in genderList"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="85px" prop="custAge">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="取身份证号7-14位值计算"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
年龄:
</span>
<span v-if="!isEditing">{{ baseForm.custAge }}</span>
<el-input
v-if="isEditing"
v-model="baseForm.custAge"
maxlength="3"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-width="113px" prop="custIdc">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/取核心法人信息表"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
身份证号:
</span>
<span>{{ baseForm.custIdc }}</span>
<!-- <el-input v-model="baseForm.custIdc" v-if="isEditing"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="141px" prop="custPhone">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/取核心法人信息表数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
法人联系方式:
</span>
<span v-if="!isEditing">{{ baseForm.custPhone }}</span>
<el-input v-if="isEditing" v-model="baseForm.custPhone" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="113px" prop="birthday">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="取身份证号7-14位值计算"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
出生日期:
</span>
<span v-if="!isEditing">{{ baseForm.birthday }}</span>
<el-date-picker
v-if="isEditing"
v-model="baseForm.birthday"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
@change="handleChangeBirthday"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-width="84px">
<span slot="label">
<!-- <el-tooltip placement="top" trigger="hover" content="新华社数据">
<span class="quesiton"><i class="el-icon-question"></i></span>
</el-tooltip> -->
实控人:
</span>
<span v-if="!isEditing">{{ baseForm.actualController }}</span>
<el-input v-if="isEditing" v-model="baseForm.actualController" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="113px">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
客户内码:
</span>
<span>{{ baseForm.custIsn }}</span>
<!-- <el-input v-model="baseForm.custIsn" v-if="isEditing"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="客户号:">
<span>{{ baseForm.custId }}</span>
<!-- <el-input v-model="baseForm.custId" v-if="isEditing"></el-input> -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-width="100px" prop="socialCreditCode">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
统信码:
</span>
<span>{{ baseForm.socialCreditCode }}</span>
<!-- <el-input v-model="baseForm.socialCreditCode" v-if="isEditing" maxlength="18"></el-input> -->
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="113px">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
行业名称:
</span>
<span v-if="!isEditing">{{
!isNaN(Number(baseForm.industry))
? baseForm.industry
? industryStr
: baseForm.belongBusiness
: baseForm.industry
}}</span>
<el-cascader
v-if="isEditing"
v-model="baseForm.industry"
:options="industryOptions"
:props="{
expandTrigger: 'hover',
label: 'label',
value: 'value',
checkStrictly: true,
}"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="113px">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
经营状态:
</span>
<span v-if="!isEditing">
<span>{{ initStatus(baseForm.status) }}</span>
</span>
<el-select v-if="isEditing" v-model="baseForm.status">
<el-option
v-for="(item, index) in statusList"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label-width="113px">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
经营范围:
</span>
<span
v-if="!isEditing"
:title="baseForm.businessScope"
class="ccyc"
>{{ baseForm.businessScope }}</span>
<el-input
v-if="isEditing"
v-model="baseForm.businessScope"
maxlength="18"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="更新时间:" label-width="96px">
<span>{{ baseForm.updateTime }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label-width="113px" prop="tel">
<span slot="label">
<el-tooltip
placement="top"
trigger="hover"
content="建档输入/新华社数据"
>
<span class="quesiton"><i class="el-icon-question" /></span>
</el-tooltip>
联系方式:
</span>
<span v-if="!isEditing">{{ baseForm.tel }}</span>
<el-input v-if="isEditing" v-model="baseForm.tel" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<!-- <el-col :span="8">
<el-form-item label="资产情况:">
<span>{{ profile.asset }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="信用状况:">
<span>{{ profile.credit }}</span>
</el-form-item>
</el-col> -->
<el-col :span="8">
<el-form-item label="行政归属网格区划:">
<span>{{ baseForm.community }}</span>
</el-form-item>
</el-col>
<el-col v-if="!isHeadOps" :span="8">
<el-form-item label="行政网格客户经理(零售部)">
<span>{{ baseForm.xzLsGridUserName }}</span>
</el-form-item>
</el-col>
<el-col v-if="!isHeadOps" :span="8">
<el-form-item label="行政归属网格(零售部)">
<span>{{ baseForm.xzLsGridName }}</span>
</el-form-item>
</el-col>
<el-col v-if="!isPrivate" :span="8">
<el-form-item label="行政网格客户经理(运管部)">
<span>{{ baseForm.xzYgGridUserName }}</span>
</el-form-item>
</el-col>
<el-col v-if="!isPrivate" :span="8">
<el-form-item label="行政归属网格(运管部)">
<span>{{ baseForm.xzYgGridName }}</span>
</el-form-item>
</el-col>
<el-col v-for="(item, index) in cliList" :key="index" :span="8">
<el-form-item
v-if="item.cmpmType == '贷款客户经理'"
:label="`${item.cmpmType}`"
>
<span>{{ is932Dept ? `${baseForm.belongUserName}-${baseForm.belongUserId}` : item.cmpmUserList }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</section>
<el-collapse v-model="activeName" accordion @change="handleCollapse">
<el-collapse-item name="0">
<template slot="title">
<p class="common-title">地址信息</p>
</template>
<div class="dzBox">
<div class="dzBox_top">
<div class="dzBox_item">
<div class="dzBox_title">经营地址</div>
<div class="dzBox_wapper">
<div
v-for="(item, index) in jydzList"
:key="index"
class="dzBox_content"
>
<div>
<span>{{ item.address }}</span>
<el-tag style="margin-left: 5px">{{ item.source }}</el-tag>
</div>
</div>
</div>
</div>
<div class="dzBox_item">
<div class="dzBox_title">注册地址</div>
<div class="dzBox_wapper">
<div
v-for="(item, index) in zcdzList"
:key="index"
class="dzBox_content"
>
<div>
<span>{{ item.address }}</span>
<el-tag style="margin-left: 5px">{{ item.source }}</el-tag>
</div>
</div>
</div>
</div>
</div>
</div>
</el-collapse-item>
<el-collapse-item name="1">
<template slot="title">
<p class="common-title">签约产品</p>
</template>
<div style="height: 250px">
<div
v-if="Object.keys(this.signedProducts).length != 0"
class="t360-production"
>
<div class="title_box1">
<div
v-if="this.signedProducts.deposit"
class="t360-production-item"
>
存款
</div>
<div class="ejTitle">
<div class="ejTitle_item">
{{
this.signedProducts.deposit
? this.signedProducts.deposit.currdeposFlag
? this.signedProducts.deposit.currdeposFlag
: ""
: ""
}}
</div>
</div>
</div>
<div class="t360-production">
<div class="title_box2">
<div
v-if="this.signedProducts.loan"
class="t360-production-item"
>
贷款
</div>
<div class="ejTitle">
<div class="ejTitle_item">
{{
this.signedProducts.loan
? this.signedProducts.loan.hatflowcostbookFlag
? this.signedProducts.loan.hatflowcostbookFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.loan
? this.signedProducts.loan.zheliloanFlag
? this.signedProducts.loan.zheliloanFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.loan
? this.signedProducts.loan.phmortgloanFlag
? this.signedProducts.loan.phmortgloanFlag
: ""
: ""
}}
</div>
</div>
</div>
</div>
<div class="t360-production">
<div class="title_box3">
<div
v-if="this.signedProducts.wealth"
class="t360-production-item"
>
财富
</div>
<div class="ejTitle">
<div class="ejTitle_item">
{{
this.signedProducts.wealth
? this.signedProducts.wealth.bondbookFlag
? this.signedProducts.wealth.bondbookFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.wealth
? this.signedProducts.wealth.financialbookFlag
? this.signedProducts.wealth.financialbookFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.wealth
? this.signedProducts.wealth.fundbookFlag
? this.signedProducts.wealth.fundbookFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.wealth
? this.signedProducts.wealth.frcdFlag
? this.signedProducts.wealth.frcdFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.wealth
? this.signedProducts.wealth.insurbookFlag
? this.signedProducts.wealth.insurbookFlag
: ""
: ""
}}
</div>
</div>
</div>
</div>
<div class="t360-production">
<div class="title_box4">
<div
v-if="this.signedProducts.intermediate"
class="t360-production-item"
>
中间业务
</div>
<div class="ejTitle">
<div class="ejTitle_item">
{{
this.signedProducts.intermediate
? this.signedProducts.intermediate.elefeeWhcFlag
? this.signedProducts.intermediate.elefeeWhcFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.intermediate
? this.signedProducts.intermediate.gasfeeWhcFlag
? this.signedProducts.intermediate.gasfeeWhcFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.intermediate
? this.signedProducts.intermediate.watfeeWhcFlag
? this.signedProducts.intermediate.watfeeWhcFlag
: ""
: ""
}}
</div>
<div class="ejTitle_item">
{{
this.signedProducts.intermediate
? this.signedProducts.intermediate.etcFlag
? this.signedProducts.intermediate.etcFlag
: ""
: ""
}}
</div>
</div>
</div>
</div>
</div>
<div v-if="Object.keys(this.signedProducts).length == 0">
<el-empty description="无签约产品" />
</div>
</div>
</el-collapse-item>
<el-collapse-item name="9">
<template slot="title">
<p class="common-title">自定义备注</p>
</template>
<el-form
ref="bzFormRef"
:model="bzForm"
:rules="bzRules"
class="special_bzform"
style="margin-top:20px"
>
<el-row>
<el-col :span="16">
<el-form-item label="备注" prop="label" label-width="85px">
<el-input
v-model="bzForm.label"
placeholder="请输入备注"
style="width:100%"
:disabled="bzFlag"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<div class="bz_row_end">
<el-button
type="primary"
size="small"
@click="bzEditFn"
>{{bzFlag?'编辑':'退出编辑'}}</el-button>
<el-button
type="primary"
size="small"
@click="bzSaveFn"
v-if="!bzFlag"
>保存</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
<el-collapse-item name="2">
<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 v-model="tagName" :options="selectTagsList" :props="tagProps" @change="tagChangeFn"></el-cascader>
</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)"
>{{ item.names }}</el-tag>
<div>
<el-button
v-if="!editTag"
size="mini"
type="primary"
@click="handleEditTag"
>编辑标签</el-button>
<el-button
v-if="editTag"
type="success"
size="mini"
@click="handleSaveTag"
>保存</el-button>
<el-button
v-if="editTag"
size="mini"
@click="handleCancelEditTag"
>取消</el-button>
</div>
<!-- <div style="margin-top:20px">
<el-input
v-if="editTag"
v-model="addTagName"
placeholder="请输入新增客户标签"
/>
<el-button
style="margin-left:20px"
v-if="editTag"
type="success"
@click="handleAddTag"
>新增</el-button>
</div> -->
</div>
</div>
</el-collapse-item>
<Custom :tagManualList="tagManualList" nameKey="10" typeKey="ls" @getDetailData="initMerchantDetail" />
<el-collapse-item name="4">
<template slot="title">
<p class="common-title">特色商户标签</p>
</template>
<div>
<div class="message-box-right">
<el-table ref="multipleTable" :data="tableData" class="table" style="width: 100%">
<template v-for="(item, index) in columns">
<el-table-column :prop="item" :label="item" :key="index">
</el-table-column>
</template>
</el-table>
</div>
</div>
</el-collapse-item>
<el-collapse-item name="3">
<template slot="title">
<p class="common-title">
走访记录(总共走访{{ visitRecords.length }}次)
</p>
</template>
<el-table
:data="visitRecords"
style="width: 100%"
max-height="600"
>
<el-table-column
align="left"
prop="campaignName"
label="活动名称"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="visName"
label="柜员名称"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="visId"
label="柜员号"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="deptId"
label="柜员部门"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="deptName"
label="部门名称"
show-overflow-tooltip
width="200px"
></el-table-column>
<el-table-column
align="left"
prop="custName"
label="走访客户名称"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="socialCreditCode"
label="企业(商户)统信码"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="custType"
label="客户类型"
show-overflow-tooltip
>
<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
align="left"
prop="signInTime"
label="签到时间"
show-overflow-tooltip
width="180px"
></el-table-column>
<el-table-column
align="left"
prop="signOutTime"
label="签退时间"
show-overflow-tooltip
width="180px"
></el-table-column>
<el-table-column
align="left"
prop="signInAddress"
label="签到地址"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="signOutAddress"
label="签退地址"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="signInCoordinate"
label="签到坐标"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="signOutCoordinate"
label="签退坐标"
show-overflow-tooltip
width="150px"
></el-table-column>
<el-table-column
align="left"
prop="abnormalVisitTag"
label="异常走访标签"
show-overflow-tooltip
width="150px"
v-if="is875"
>
<template slot-scope="scope">
<span v-if="scope.row.abnormalVisitTag == '0'">正常</span>
<span v-if="scope.row.abnormalVisitTag == '1'">走访频率异常</span>
<span v-if="scope.row.abnormalVisitTag == '2'">走访持续时长异常</span>
<span v-if="scope.row.abnormalVisitTag == '3'">签退时间异常</span>
</template>
</el-table-column>
<el-table-column
align="left"
prop="abnormalVisitInfo"
label="异常走访信息"
show-overflow-tooltip
width="150px"
v-if="is875"
></el-table-column>
<el-table-column
align="left"
prop="isValidCust"
label="是否为有效客户"
show-overflow-tooltip
width="150px"
>
<template slot-scope="scope">
<span v-if="scope.row.isValidCust == '0'">否</span>
<span v-if="scope.row.isValidCust == '1'">是</span>
</template>
</el-table-column>
<el-table-column
align="left"
prop="remark"
label="走访备注"
show-overflow-tooltip
width="150px"
></el-table-column>
</el-table>
<!-- <el-timeline v-if="visitRecords.length > 0" style="margin-top: 30px">
<el-timeline-item
v-for="(record, index) in visitRecords"
:key="index"
:timestamp="record.date"
>
<el-card>
<p class="record_item">任务名称:{{ record.campaignName }}</p>
<p class="record_item">走访时间:{{ record.visTime }}</p>
<p class="record_item">走访机构:{{ record.deptName }}</p>
<p class="record_item">走访人:{{ record.visName }}</p>
<p class="zfRemark record_item">
走访备注:
<span v-if="record.isRemarkEdit">{{ record.remark }}</span>
<el-input
v-if="!record.isRemarkEdit"
v-model="record.remark"
class="remarkTitle"
type="textarea"
:row="3"
/>
</p>
<div class="record_btn">
<el-button
v-if="record.isRemarkEdit && record.isZfEdit"
type="primary"
size="small"
@click="handleClickRecord(record, index)"
>编辑</el-button>
<el-button
v-if="!record.isRemarkEdit"
type="primary"
size="small"
@click="handleCommitRecord(record, index)"
>保存</el-button>
<el-button
v-if="!record.isRemarkEdit"
type="plain"
size="small"
@click="handleCancleRecord(record, index)"
>取消</el-button>
</div>
</el-card>
</el-timeline-item>
</el-timeline> -->
</el-collapse-item>
<!-- <el-collapse-item>
<template slot="title">
<p class="common-title">关联经营人
<el-tooltip placement="top" trigger="hover" content="大信贷股东信息表">
<span class="quesiton"><i class="el-icon-question"></i></span>
</el-tooltip>
</p>
</template>
<el-table :data="affiliatedData" class="affiliatedData">
<el-table-column label="姓名" align="center" prop="name"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="goIndexcharts(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
</el-collapse-item> -->
</el-collapse>
<el-dialog
title="该客户尚未建档,请先进行营销建档"
:visible.sync="filingVisible"
width="25%"
:before-close="handleClosefiling"
class="filingDialog"
>
<span slot="footer" class="person-footer">
<el-button @click="handleClosefiling">取消</el-button>
<el-button
type="primary"
class="commit_btn"
@click="handlFilingCommit"
>确定</el-button>
</span>
</el-dialog>
<el-dialog
:title="addressTitle"
:visible.sync="addressVisible"
width="500px"
class="fimalyDialog"
>
<el-table :data="addressList">
<el-table-column label="地址类型" align="center" prop="addressName" />
<el-table-column label="地址" align="center" prop="address" />
<el-table-column label="来源" align="center" prop="source" />
</el-table>
</el-dialog>
<el-dialog
title="添加走访"
:visible.sync="zfVisible"
width="25%"
:before-close="handleCloseZf"
class="zfDialog"
>
<el-form
ref="formObj"
:model="formObj"
:rules="formRules"
class="my-form"
>
<el-form-item label="" prop="campaignId" label-width="50px">
<el-select
v-model="formObj.campaignId"
style="width: 300px"
placeholder="请选择任务"
filterable
>
<el-option
v-for="item in taskOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>{{ item.label }}</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="person-footer">
<el-button @click="handleCloseZf">取消</el-button>
<el-button
type="primary"
class="commit_btn"
@click="handlZfCommit"
>确定</el-button>
</span>
</el-dialog>
<el-dialog
title="二次走访"
:visible.sync="secondVisitShow"
width="500px"
class="fimalyDialog"
>
<el-form ref="secondRef" :model="secondForm" :rules="secondRules" label-width="100px">
<el-form-item prop="visitTime" label="走访时间">
<el-date-picker
v-model="secondForm.visitTime"
align="right"
type="date"
clearable
placeholder="请选择走访时间"
value-format="yyyy-MM-DD"
format="yyyy-MM-DD"
/>
</el-form-item>
</el-form>
<span slot="footer" class="person-footer">
<el-button @click="handleCloseSecond">取消</el-button>
<el-button
type="primary"
class="commit_btn"
@click="handleSubmitSecond"
>确定</el-button>
</span>
</el-dialog>
<el-dialog
title="资源申请"
:visible.sync="secoureShow"
width="500px"
class="fimalyDialog"
>
<el-form ref="secoureRef" :model="secoureForm" :rules="secoureRules" label-width="100px">
<!-- <el-form-item prop="userName" label="客户经理">
<el-select v-model="secoureForm.userName" filterable clearable>
<el-option
v-for="(item, index) in secoureOption"
:key="index"
:label="item.nickName"
:value="item.userName"
/>
</el-select>
</el-form-item> -->
<el-form-item label="" label-width="0">
<section class="user-info">
<span>归属机构</span>
<treeselect
ref="orgTree"
size="small"
v-model="userDeptList"
:options="deptOptions"
placeholder="请选择"
:show-count="true"
noOptionsText="暂无数据"
noResultsText="暂无数据"
@select="(node) => onDeptTreeSelect(node)"
@deselect="clearTreeSelect"
@open="onOrgTreeFocus"
:flat="false"
style="margin-bottom: 10px"
/>
</section>
<section class="user-info">
<span>客户经理</span>
<el-select
@focus="onClientManagerFocus"
ref="clientManager"
v-model="authUser"
:multiple-limit="0"
filterable
placeholder="请选择"
class="input-box"
style="width: 100%"
>
<el-option
v-for="option in managerOptions"
:key="option.userId"
:label="`${option.deptName}-${option.userName}-${option.nickName}`"
:value="`${option.userName}-${option.nickName}`"
></el-option>
</el-select>
</section>
</el-form-item>
<el-form-item prop="applyRemark" label="备注">
<el-input v-model="secoureForm.applyRemark" :rows="5" type="textarea" />
</el-form-item>
</el-form>
<span slot="footer" class="person-footer">
<el-button @click="handleCloseSecoure">取消</el-button>
<el-button
type="primary"
class="commit_btn"
@click="handleSubmitSecoure"
>确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
getMerchantDetail,
updateMerchantDetail,
getIndustryTree,
exportMerchantDetail,
getRegStatus,
visitInfoList,
editVisitInfo,
editCustTag,
getcustomLevel,
appointmentSecondVisit,
systemUserAllTreeUser,
appointmentResourceAssist
} from '@/api/system/listByRetailKeywords.js'
import { getAddressTree, getDetailRegion, systemUserDeptTreeAll } from '@/api/grid/address/tree.js'
import { getVisitData } from '@/api/task/taskList.js'
import { getCurrentExistTask,systemRecordEditLable } from '@/api/system/grouplist'
import { addAppointCustCamp } from '@/api/grid/mycustomer.js'
import { getUserListByDeptIds } from "@/api/grid/region.js";
import { downloadFiles } from '@/utils'
import { mapGetters } from 'vuex'
import { Message } from 'element-ui'
import { cloneDeep, isEmpty } from 'lodash'
import _ from 'lodash'
import Custom from '../custom.vue'
export default {
data() {
var validatePhone = (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 {
customLevel: '',
baseHeaderForm: {
custName: '',
socialCreditCode: ''
},
activeName: '',
isSaveDisable: true,
filingVisible: false,
jydzList: [],
zcdzList: [],
isShow: false,
baseForm: {
lpName: '',
custGender: '',
custAge: '',
custIdc: '',
custPhone: '',
birthday: '',
custIsn: '',
custId: '',
socialCreditCode: '',
industry: '',
registerLocation: '',
custLocation: '',
status: '',
businessScope: '',
gridUserName: '',
belongUserName: '',
belongUserId: '',
updateTime: ''
},
registerLocationNum: '',
registerLocationStr: '',
custLocationNum: '',
custLocationStr: '',
rules: {
// socialCreditCode: [{ required: true, message: '请输入', trigger: 'blur' }],
// custName: [{ required: true, message: '请输入', trigger: 'blur' }],
// lpName: [{ required: true, message: '请输入', trigger: 'blur' }],
// custGender: [{ required: true, message: '请选择', trigger: 'change' }],
// custAge: [{ required: true, message: '请选择', trigger: 'change' }],
// custIdc: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
// custPhone: [{ validator: validatePhone, trigger: 'blur' }],
// birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
},
statusList: [],
genderList: [
{ label: '男', value: '男' },
{ label: '女', value: '女' }
],
canEdit: false,
isEditing: false,
visitList: [{ date: '2020-12-12' }, { date: '2020-12-16' }],
zfVisible: false,
formObj: {
campaignId: ''
},
taskOptions: [],
formRules: {
campaignId: [
{
required: true,
message: '任务不能为空',
trigger: 'blur'
}
]
},
isAddTag: false,
newTag: '',
affiliatedData: [],
signedProducts: {},
adressOptions: [],
regAddress: {
lazy: true,
lazyLoad(node, resolve) {
setTimeout(() => {
const nodes = []
const query = {
level: node.level + 1,
code: node.level == 0 ? '33' : node.value.value
}
getAddressTree(query).then((res) => {
res.data.map((item) => {
const obj = {
value: item,
label: item.label,
leaf: item.level >= 5
}
nodes.push(obj)
})
resolve(nodes)
})
}, 500)
}
},
originTagList: [],
editTag: false,
tagsList: [],
cliList: [],
industryOptions: [],
industryStr: '',
addressTitle: '',
addressVisible: false,
addressList: [],
adressArr: [],
visitRecords: [],
bzForm:{
label:"",
oldLabel:"",
},
bzRules:{},
bzFlag:true,
tagName:[],
tagProps:{
label:"names",
value:"names",
children:"children"
},
selectTagsList:[],
showTagsList:[],
addTagName:"",
newCustTag:[],
tagManualList: [],
secondVisitShow: false,
secoureShow: false,
secondForm: {
visitTime: null
},
secondRules: {
visitTime: [{ required: true, message:'请选择走访时间', trigger:'change' }]
},
secoureOption: [],
secoureForm: {
// userName: null,
applyRemark: null
},
secoureRules: {
// userName: [{ required: true, message:'请选择客户经理', trigger:'change' }],
},
authUser: '',
deptOptions: [],
userDeptList: null,
managerOptions: [],
tableData: [],
columns: []
}
},
watch: {
userDeptList(val) {
if (!val) {
this.managerOptions = []
this.authUser = ''
}
}
},
components: {
Custom
},
computed: {
...mapGetters(['roles', 'userName', 'deptId']),
isHeadAdmin() {
return this.roles.includes('headAdmin')
},
// 公司部
isPublic() {
return this.roles.includes('headPublic')
},
// 零售部
isPrivate() {
return this.roles.includes('headPrivate')
},
// 是否932开头部门
is932Dept() {
return String(this.deptId || '').substring(0, 3) === '932'
},
// 运管部
isHeadOps() {
return this.roles.includes('headOps')
},
// 支行
isBranchAdmin() {
return this.roles.includes('branchAdmin')
},
// 网点主任
isOutletAdmin() {
return this.roles.includes('outletAdmin')
},
// 客户经理
isCommonManager() {
return this.roles.includes('commonManager')
},
pageId() {
return this.$route.query.custId
},
// 海宁
is875() {
return this.userName.slice(0, 3) === '875'
}
},
created() {
// console.log(this.userName, 'userNameuserNameuserName')
// if (this.userName.indexOf('875') === 0 || this.userName.indexOf('965') === 0) {
// if (!this.pageId) return
// getcustomLevel(1, this.pageId).then(res => {
// if (res.code === 200) {
// this.customLevel = res.data
// }
// })
// }
this.initRegStatus()
this.initIndustryTree()
this.initMerchantDetail()
this.getDeptTreeSelect()
},
mounted() {
// systemUserAllTreeUser().then(res => {
// this.secoureOption = res
// })
},
methods: {
handleAddTag(){
if(!this.addTagName){
this.$message.error('请输入客户标签')
return;
}
let existsFlag=_.includes(_.map(this.showTagsList,'names'),this.addTagName)
if(existsFlag){
this.$message.error('客户标签已存在')
return;
}
this.showTagsList.push({
children: [],
enableFlag: true,
names: this.addTagName,
type: "",
useFlag: false,
})
this.updateListFn(this.showTagsList);
this.newCustTag.push({
custTagLevel1:this.tagName[0],
custTagLevel2:this.tagName[1],
custTagName:this.addTagName,
})
this.addTagName="";
},
bzEditFn(){
if(this.bzFlag){
this.bzForm.oldLabel=this.bzForm.label
}else{
this.bzForm.label=this.bzForm.oldLabel
}
this.bzFlag=!this.bzFlag
},
bzSaveFn(){
systemRecordEditLable({
custId:this.pageId,
custType:"1",
lable:this.bzForm.label
}).then((res) => {
this.$message.success('保存成功')
this.bzFlag=true;
})
},
initRegStatus() {
getRegStatus().then((res) => {
if (res.code == 200) {
this.statusList = res.data.map((item) => {
return {
label: item.dictLabel,
value: item.dictValue
}
})
}
})
},
initStatus(data) {
const arr = this.statusList.filter((item) => item.value === data)
if (arr && arr.length > 0) {
return arr[0].label
}
},
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
})
})
this.initIndustryBusiStr(this.baseForm.industry)
})
},
initMerchantDetail() {
getMerchantDetail(this.pageId).then((res) => {
console.log(res, '0000000000000')
if (res.code == 200) {
this.baseForm = res.data.custInfoMerchant
if (res.data.addressDetails && res.data.addressDetails.length > 0) {
this.adressArr = res.data.addressDetails
}
this.baseHeaderForm.custName = res.data.custInfoMerchant.custName
this.baseHeaderForm.socialCreditCode =
res.data.custInfoMerchant.socialCreditCode
this.signedProducts = res.data.signedProducts
? res.data.signedProducts
: {}
this.affiliatedData = res.data.corporateShareholders
this.id = res.data.custInfoMerchant.id
this.baseForm.community = res.data.community
this.baseForm.xzLsGridName = res.data.xzLsGridName
this.baseForm.xzLsGridUserName = res.data.xzLsGridUserName
this.baseForm.xzYgGridName = res.data.xzYgGridName
this.baseForm.xzYgGridUserName = res.data.xzYgGridUserName
this.cliList = res.data.cmpmUserLists
this.originTagList = cloneDeep(res.data.tabEnmuVos) || []
this.tagsList = cloneDeep(res.data.tabEnmuVos) || []
this.canEdit = res.data.radarCustFlag == '1'
this.customLevel = res.data.custInfoMerchant.custLevel
if (this.baseForm.recordStatus && this.baseForm.recordStatus != '0') {
this.isShow = false
} else {
this.isShow = true
}
// if ((!this.baseForm.socialCreditCode || this.baseForm.socialCreditCode == '') && (!this.baseForm.custIsn || this.baseForm.custIsn == '')) {
// this.isShow = true
// } else {
// this.isShow = false
// }
this.baseForm.industry = res.data.custInfoMerchant.industry
this.baseForm.belongBusiness =
res.data.custInfoMerchant.belongBusiness
this.registerLocationStr = res.data.custInfoMerchant.registerLocation
this.custLocationStr = res.data.custInfoMerchant.custLocation
this.bzForm.label = res.data.custInfoMerchant.label||"";
this.initGetVisitInfoList()
this.selectTagsList=this.getTwoLevels(this.tagsList);
this.tagName=[this.selectTagsList[0].names,this.selectTagsList[0].children[0].names];
this.tableData = res.data.specialTagList
if (this.tableData.length !== 0) {
this.columns = Object.keys(this.tableData[0])
}
console.log(111, this.columns, this.tableData)
this.showTagsList=this.tagsList[0].children[0].children||[];
this.tagManualList = cloneDeep(res.data.tagManual) || []
}
})
},
getTwoLevels(nodes){
return _.map(nodes, parent => ({
names: parent.names,
children: _.map(parent.children, child => ({
names: child.names // 清除子节点的 children 属性
// 或_.omit(child, ['children']) // 如果需要保留其他属性
}))
}));
},
initIndustryBusiStr(data) {
this.industryOptions.forEach((item) => {
if (item.value == data) {
this.industryStr = item.label
} else {
item.children.forEach((el) => {
if (el.value == data) {
this.industryStr = el.label
}
})
}
})
},
handleChangeBirthday(val) {
const currentYear = new Date().getFullYear()
const birthdayYear = Number(val.slice(0, 4))
this.baseForm.custAge = currentYear - birthdayYear
},
handleClosefiling() {
this.filingVisible = false
},
handlFilingCommit() {
this.$router.push({ path: '/individual' })
},
goBackToIndex() {
const { query } = this.$route
if (query.backUrl) {
this.$router.replace({
path: query.backUrl,
query
})
} else {
this.$router.go(-1)
}
},
handleEdit() {
this.isEditing = true
this.isSaveDisable = false
},
handleCancle() {
this.isEditing = false
this.isSaveDisable = true
this.$refs.profileForm.clearValidate()
this.initMerchantDetail()
},
handleCollapse(val) {},
initgetVisitData() {
getVisitData({ custId: this.pageId }).then((res) => {
if (res.code == 200) {
const list = res.data.addressDetails
this.jydzList = list.filter((item) => item.addressName == '经营地址')
this.zcdzList = list.filter((item) => item.addressName == '注册地址')
}
})
},
handleSave() {
if (
this.baseForm.custPhone == '' &&
this.baseForm.registerLocation == null &&
this.baseForm.custLocation == null
) {
Message.warning('请输入手机号或者任意一个地址!')
} else {
this.$refs.profileForm.validate((valid) => {
if (valid) {
let registerLocationStrs = ''
let custLocationStrs = ''
// 户籍地址
if (Array.isArray(this.baseForm.registerLocation)) {
const registerLocationArr = this.baseForm.registerLocation.map(
(item) => {
return item.label
}
)
registerLocationStrs = registerLocationArr
.join(' ')
.replace(/\s/g, '')
}
// 住宅地址
if (Array.isArray(this.baseForm.custLocation)) {
const custLocationArr = this.baseForm.custLocation.map((item) => {
return item.label
})
custLocationStrs = custLocationArr.join(' ').replace(/\s/g, '')
}
this.baseForm.registerLocation = Array.isArray(
this.baseForm.registerLocation
)
? `${registerLocationStrs}${this.registerLocationNum}`
: this.baseForm.registerLocation
this.baseForm.custLocation = Array.isArray(
this.baseForm.custLocation
)
? `${custLocationStrs}${this.custLocationNum}`
: this.baseForm.custLocation
this.baseForm.industry = Array.isArray(this.baseForm.industry)
? this.baseForm.industry.pop()
: this.baseForm.industry
updateMerchantDetail(this.baseForm).then((res) => {
console.log(res, 'ressssssssssssss')
if (res.code == 200) {
Message.success('保存成功!')
this.isEditing = false
this.isSaveDisable = true
this.initMerchantDetail()
this.initIndustryTree()
}
})
} else {
return false
}
})
}
},
handleExport() {
exportMerchantDetail(this.pageId).then((res) => {
downloadFiles(res, `商户详情_${new Date().getTime()}.xlsx`)
})
},
handleClickTag(val) {
if (!this.editTag || val.enableFlag == true) return
this.showTagsList.filter(
(item) => item.names === val.names
)[0].enableFlag = true
this.updateListFn(this.showTagsList);
},
handleCloseTag(val) {
this.showTagsList.filter(
(item) => item.names === val.names
)[0].enableFlag = false
this.updateListFn(this.showTagsList);
},
updateListFn(showTagsList){
for(let i=0;i<this.tagsList.length;i++){
if(this.tagsList[i].names == this.tagName[0]){
for(let j=0;j<this.tagsList[i].children.length;j++){
if(this.tagsList[i].children[j].names == this.tagName[1]){
this.tagsList[i].children[j].children=showTagsList;
}
}
}
}
},
handleEditTag() {
this.editTag = true
},
handleCancelEditTag() {
this.editTag = false
this.tagsList = cloneDeep(this.originTagList)
},
tagChangeFn(){
for(let i=0;i<this.tagsList.length;i++){
if(this.tagsList[i].names == this.tagName[0]){
for(let j=0;j<this.tagsList[i].children.length;j++){
if(this.tagsList[i].children[j].names == this.tagName[1]){
this.showTagsList=this.tagsList[i].children[j].children||[];
}
}
}
}
},
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.tagsList)
editCustTag({
custTagList: custTagList,
custId: this.$route.query.custId,
newCustTags:this.newCustTag,
custTagType:"ls"
}).then((res) => {
if (res.code === 200) {
this.$message.success('修改成功')
this.originTagList = cloneDeep(this.tagsList)
this.editTag = false
}
})
},
goIndexcharts(row) {
// this.$router.push({ path: '/360charts/indexcharts/', query: { id: row.id } })
},
handleViewRegisterLocation() {
this.addressTitle = '注册地址'
this.addressVisible = true
this.addressList = this.adressArr.filter(
(item) => item.addressName == '注册地址'
)
},
handleViewCustLocationStr() {
this.addressTitle = '经营地址'
this.addressVisible = true
this.addressList = this.adressArr.filter(
(item) => item.addressName == '经营地址'
)
},
handleCollapse(val) {
if (val == '0') {
this.initgetVisitData()
}
},
initGetVisitInfoList() {
visitInfoList((this.pageId+"").substring(3), 1).then((res) => {
if (res.code == 200) {
// const arr = res.rows.map((item) => {
// return item.infoList
// })
// const list = arr.flat()
// list.forEach((item) => {
// item.isRemarkEdit = true
// item.isZfEdit = item.visId == this.userName
// })
// this.visitRecords = JSON.parse(JSON.stringify(list))
this.visitRecords = res.rows
}
})
},
handleClickRecord(item, index) {
this.$set(this.visitRecords[index], 'isRemarkEdit', false)
},
handleCancleRecord(item, index) {
this.initGetVisitInfoList()
},
handleCommitRecord(item, index) {
const params = {
id: item.id,
remark: item.remark
}
editVisitInfo(params).then((res) => {
if (res.code == 200) {
Message.success('修改成功!')
this.initGetVisitInfoList()
}
})
},
handleAddZf() {
this.zfVisible = true
this.searchCurrentExistTask()
},
handleCloseZf() {
this.zfVisible = false
this.formObj.campaignId = ''
},
handlZfCommit() {
const params = {
custName: this.baseForm.custName,
custIdc: this.baseForm.custIdc,
custPhone: this.baseForm.custPhone,
custIsn: this.baseForm.custIsn,
socialCreditCode: this.baseForm.socialCreditCode,
lpName: this.baseForm.lpName,
custId: this.baseForm.custId,
campaignId: this.formObj.campaignId,
custType: 1
}
addAppointCustCamp(params).then((res) => {
if (res.code == 200) {
this.zfVisible = false
this.formObj.campaignId = ''
Message.success('添加成功!')
}
})
},
searchCurrentExistTask() {
const params = {
custType: 1
}
getCurrentExistTask(params).then((res) => {
if (res.code == 200) {
this.taskOptions = res.data.map((item) => {
return {
label: item.campaignName,
value: item.campaignId
}
})
}
})
},
handleSecondVisit() {
this.secondVisitShow = true
},
handleCloseSecond() {
this.secondVisitShow = false
this.secondForm.visitTime = null
},
handleSubmitSecond() {
this.$refs.secondRef.validate((valid) => {
if(valid) {
const params = {
custIdc: this.baseForm.custId,
custName: this.baseHeaderForm.custName,
custType: 1
}
appointmentSecondVisit(this.secondForm.visitTime, params).then(res => {
this.secondVisitShow = false
this.$message.success(res.msg)
this.secondForm.visitTime = null
})
}
})
},
handleRecource() {
this.secoureShow = true
},
handleCloseSecoure() {
this.secoureShow = false
this.secoureForm.userName = null
this.secoureForm.applyRemark = null
},
handleSubmitSecoure() {
this.$refs.secoureRef.validate((valid) => {
if(valid) {
// const nickName = this.secoureOption.filter(item => item.userName === this.secoureForm.userName)[0].nickName
if (!this.authUser) {
Message.success('客户经理不能为空!')
return
}
const nickName = this.authUser.split('-')[1]
const userName = this.authUser.split('-')[0]
const params = {
custIdc: this.baseForm.custId,
custName: this.baseHeaderForm.custName,
custType: 1,
applyRemark: this.secoureForm.applyRemark
}
appointmentResourceAssist(userName, nickName, params).then(res => {
this.secoureShow = false
this.$message.success(res.msg)
// this.secoureForm.userName = null
this.secoureForm.applyRemark = null
this.authUser = ''
this.userDeptList = null
})
}
})
},
getDeptTreeSelect() {
systemUserDeptTreeAll().then((response) => {
this.deptOptions = response.data
})
},
// 选择归属机构
onDeptTreeSelect(node) {
this.fetchSelectOptions([node.id]);
},
// 取消勾选归属机构
clearTreeSelect(node) {
const index = this.checkedArr.findIndex((id) => id === node.id);
if (index > -1) {
this.checkedArr.splice(index, 1);
}
const { children = [] } = node;
if (children.length > 0) {
children.map((child) => {
const index = this.checkedArr.findIndex((id) => id === child.id);
if (index > -1) {
this.checkedArr.splice(index, 1);
}
});
}
},
onOrgTreeFocus() {
// this.$refs.clientManager.blur()
},
onClientManagerFocus() {
// this.$refs.orgTree.blurInput()
},
fetchSelectOptions(deptIds) {
if (isEmpty(deptIds)) {
return (this.managerOptions = []);
}
getUserListByDeptIds({ deptIds: deptIds }).then((response) => {
this.managerOptions = response.data;
});
},
}
}
</script>
<style lang="scss" scoped>
.common-wrap-cnt {
background-color: rgb(242, 243, 245);
overflow: hidden;
box-shadow: 0 3px 8px 0 #00000017;
border-radius: 16px 16px 0 0;
height: calc(100vh - 135px);
overflow-y: auto;
padding: 10px;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 20px;
border-radius: 10px;
}
.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-create-main {
padding: 20px;
background-color: #ffffff;
margin-top: 20px;
border-radius: 10px;
::v-deep .el-form {
.el-form-item {
margin-bottom: 16px;
.el-input__inner {
border: 1px solid #ccc;
color: #3d3d3d;
}
.el-input {
width: 200px;
}
}
.el-form-item__label {
font-weight: 400;
line-height: 38px;
font-size: 14px;
color: #3d3d3d;
padding-right: 24px;
}
}
}
.edit-box {
display: flex;
}
.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;
}
.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;
}
}
.message-box {
display: flex;
margin: 20px;
}
.message-box-left {
display: flex;
width: 10%;
justify-content: center;
align-items: center;
}
.message-box-right-item {
padding: 10px;
}
.tag-box {
margin-bottom: 10px;
}
::v-deep .el-input {
width: 200px;
}
.wjd {
background-color: rgb(222, 134, 143);
color: #ffffff;
}
.affiliatedData {
margin-top: 20px;
}
.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;
}
.profileForm {
::v-deep .el-form-item__content {
padding-right: 20px;
}
}
.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;
}
.ccyc {
display: inline-block;
width: 95%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qbdz {
::v-deep .el-form-item__content {
display: flex;
}
}
.quesiton {
color: #b9b9b9;
}
.zfRemark {
display: flex;
}
.remarkTitle {
width: 70%;
}
.record_btn {
margin-top: 20px;
}
.record_item {
line-height: 30px;
}
.dzBox_top {
display: flex;
}
.dzBox_item {
width: 50%;
display: flex;
min-height: 80px;
gap: 2%;
border: 1px solid #ddd;
}
.dzBox_title {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
background-color: #eaf5ff;
border-right: 1px solid #ddd;
}
.dzBox_content {
padding: 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
div {
line-height: 25px;
}
}
.dzBox_wapper {
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.source {
background: #eaf5ff;
border-radius: 2px;
padding: 1px 0px;
// margin-left: 4px;
}
.headerForm {
::v-deep .el-form-item {
margin-bottom: 0px;
}
::v-deep .el-form-item__label {
padding-right: 5px;
}
::v-deep .el-form-item__content {
display: flex;
align-items: center;
}
}
.header_top_left {
display: flex;
}
.icon_box {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(231, 242, 255);
}
.header_icon_box {
background-color: #4886f8;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.header_icon {
width: 28px;
height: 28px;
}
.base-info {
margin-left: 20px;
}
.wjd {
margin-left: 20px;
}
.line {
width: 100%;
background-color: #ccc;
height: 1px;
margin: 15px 0;
}
::v-deep .el-collapse-item {
margin-top: 15px;
border-radius: 10px;
}
::v-deep .el-collapse-item__header {
padding-left: 20px;
}
::v-deep .el-collapse-item__content {
padding-left: 20px;
}
.my-form {
::v-deep .el-input {
width: 300px;
}
}
.bz_row_end{
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 20px;
}
.user-info {
margin-bottom: 5px;
margin-left: 26px;
display: flex;
align-items: center;
::v-deep .vue-treeselect__control {
width: 320px !important;
height: 32px;
}
::v-deep .el-input {
width: 100%
}
span {
width: 70px !important;
margin-right: 10px;
font-size: 14px;
color: #606266;
&::before {
content: "*";
left: -3px;
color: #ff4d42;
position: relative;
top: 2px;
}
}
.input-box {
width: 320px !important;
}
}
</style>