|
@@ -1,9 +1,35 @@
|
|
<template>
|
|
<template>
|
|
<div class="content" v-loading="loading">
|
|
<div class="content" v-loading="loading">
|
|
|
|
+ <div
|
|
|
|
+ style="
|
|
|
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
|
+ padding-bottom: 15px;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ "
|
|
|
|
+ >
|
|
|
|
+ <span
|
|
|
|
+ class="iconfont icon-icon_factory1"
|
|
|
|
+ style="margin-right: 8px; color: #0084ff"
|
|
|
|
+ ></span>
|
|
|
|
+ <span style="font-size: 14px; color: #000">{{ detailsData.name }}</span>
|
|
|
|
+ </div>
|
|
<div class="line">
|
|
<div class="line">
|
|
- <span class="title_" v-if="detailsData.customerCode">客户代码:{{ detailsData.customerCode }}</span>
|
|
|
|
- <span class="title_" v-if="detailsData.customerCode && detailsData.status" style="margin: 0 6px">|</span>
|
|
|
|
- <span class="title_" v-if="detailsData.status">客户类型:{{ dictValueLabel(detailsData.status, customerStatus) }}</span>
|
|
|
|
|
|
+ <span class="title_" v-if="detailsData.customerCode"
|
|
|
|
+ >客户代码:<span style="color: #000">{{
|
|
|
|
+ detailsData.customerCode
|
|
|
|
+ }}</span></span
|
|
|
|
+ >
|
|
|
|
+ <span
|
|
|
|
+ class="title_"
|
|
|
|
+ v-if="detailsData.customerCode && detailsData.status"
|
|
|
|
+ style="margin: 0 6px"
|
|
|
|
+ >|</span
|
|
|
|
+ >
|
|
|
|
+ <span class="title_" v-if="detailsData.status"
|
|
|
|
+ >客户类型:<span style="color: #000">{{
|
|
|
|
+ dictValueLabel(detailsData.status, customerStatus)
|
|
|
|
+ }}</span></span
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
<div class="line" v-if="detailsData.source">
|
|
<div class="line" v-if="detailsData.source">
|
|
<span class="title_">客户来源:</span>
|
|
<span class="title_">客户来源:</span>
|
|
@@ -20,46 +46,100 @@
|
|
<div class="contacts" v-if="detailsData.customerUserList.length > 0">
|
|
<div class="contacts" v-if="detailsData.customerUserList.length > 0">
|
|
<div style="display: flex; justify-content: space-between">
|
|
<div style="display: flex; justify-content: space-between">
|
|
<span> 相关联系人: </span>
|
|
<span> 相关联系人: </span>
|
|
- <el-button type="primary" size="small" style="padding: 0px" text @click="handleAddUserList(detailsData)">添加</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ size="small"
|
|
|
|
+ style="padding: 0px"
|
|
|
|
+ text
|
|
|
|
+ @click="handleAddUserList(detailsData)"
|
|
|
|
+ >添加</el-button
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item, index) in detailsData.customerUserList" :key="index" class="item" v-show="!(index > 1)">
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) in detailsData.customerUserList"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="item"
|
|
|
|
+ v-show="!(index > 1)"
|
|
|
|
+ >
|
|
<div class="img">
|
|
<div class="img">
|
|
- <i class="iconfont icon-iconm_kehd" style="font-size: 26px; color: #cccccc; margin-top: 2px"></i>
|
|
|
|
|
|
+ <i
|
|
|
|
+ class="iconfont icon-iconm_kehd"
|
|
|
|
+ style="font-size: 26px; color: #cccccc; margin-top: 2px"
|
|
|
|
+ ></i>
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="details">
|
|
<div>
|
|
<div>
|
|
<span> {{ item.name }} </span>
|
|
<span> {{ item.name }} </span>
|
|
</div>
|
|
</div>
|
|
<div class="information">
|
|
<div class="information">
|
|
- <div class="first"><span class="val">Tel:</span>{{ getPhone(item) }}</div>
|
|
|
|
- <div style="display: flex; justify-content: space-between; height: 20px; line-height: 20px">
|
|
|
|
|
|
+ <div class="first">
|
|
|
|
+ <span class="val">Tel:</span>{{ getPhone(item) }}
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ style="
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ "
|
|
|
|
+ >
|
|
<span class="val" style="flex: 1">Email:</span>{{ item.email }}
|
|
<span class="val" style="flex: 1">Email:</span>{{ item.email }}
|
|
<img
|
|
<img
|
|
src="@/assets/images/portrait/icon_email.png"
|
|
src="@/assets/images/portrait/icon_email.png"
|
|
alt=""
|
|
alt=""
|
|
- style="cursor: pointer; margin-left: 10px; transform: translateY(-1px)"
|
|
|
|
|
|
+ style="
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ transform: translateY(-1px);
|
|
|
|
+ "
|
|
@click="handleSendEmail(item)"
|
|
@click="handleSendEmail(item)"
|
|
- v-show="item.email" />
|
|
|
|
|
|
+ v-show="item.email"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div style="float: right" v-if="detailsData.customerUserList && detailsData.customerUserList.length > 1">
|
|
|
|
|
|
+ <div
|
|
|
|
+ style="float: right"
|
|
|
|
+ v-if="
|
|
|
|
+ detailsData.customerUserList &&
|
|
|
|
+ detailsData.customerUserList.length > 1
|
|
|
|
+ "
|
|
|
|
+ >
|
|
<el-button type="primary" link size="small">更多联系人</el-button>
|
|
<el-button type="primary" link size="small">更多联系人</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <el-dialog :title="'添加联系人'" v-if="dialogVisible" v-model="dialogVisible" width="800" v-loading="loadingOperation">
|
|
|
|
- <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
|
|
|
|
|
|
+ <el-dialog
|
|
|
|
+ :title="'添加联系人'"
|
|
|
|
+ v-if="dialogVisible"
|
|
|
|
+ v-model="dialogVisible"
|
|
|
|
+ width="800"
|
|
|
|
+ v-loading="loadingOperation"
|
|
|
|
+ >
|
|
|
|
+ <byForm
|
|
|
|
+ :formConfig="formConfig"
|
|
|
|
+ :formOption="formOption"
|
|
|
|
+ v-model="formData.data"
|
|
|
|
+ :rules="rules"
|
|
|
|
+ ref="submit"
|
|
|
|
+ >
|
|
<template #person>
|
|
<template #person>
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
- <el-table :data="formData.data.customerUserList" style="width: 100%; margin-top: 16px">
|
|
|
|
|
|
+ <el-table
|
|
|
|
+ :data="formData.data.customerUserList"
|
|
|
|
+ style="width: 100%; margin-top: 16px"
|
|
|
|
+ >
|
|
<el-table-column label="联系人" width="160">
|
|
<el-table-column label="联系人" width="160">
|
|
<template #default="{ row, $index }">
|
|
<template #default="{ row, $index }">
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
- <el-form-item :prop="'customerUserList.' + $index + '.name'" :rules="rules.name2" :inline-message="true">
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ :prop="'customerUserList.' + $index + '.name'"
|
|
|
|
+ :rules="rules.name2"
|
|
|
|
+ :inline-message="true"
|
|
|
|
+ >
|
|
<el-input v-model="row.name" placeholder="请输入联系人" />
|
|
<el-input v-model="row.name" placeholder="请输入联系人" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
@@ -68,15 +148,32 @@
|
|
<el-table-column label="电子邮箱">
|
|
<el-table-column label="电子邮箱">
|
|
<template #default="{ row, $index }">
|
|
<template #default="{ row, $index }">
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
- <el-form-item :prop="'customerUserList.' + $index + '.email'" :rules="rules.email" :inline-message="true">
|
|
|
|
- <el-input v-model="row.email" placeholder="请输入电子邮箱" />
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ :prop="'customerUserList.' + $index + '.email'"
|
|
|
|
+ :rules="rules.email"
|
|
|
|
+ :inline-message="true"
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="row.email"
|
|
|
|
+ placeholder="请输入电子邮箱"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column align="center" label="操作" width="120" fixed="right">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ label="操作"
|
|
|
|
+ width="120"
|
|
|
|
+ fixed="right"
|
|
|
|
+ >
|
|
<template #default="{ row, $index }">
|
|
<template #default="{ row, $index }">
|
|
- <el-button type="primary" link @click="clickInformationMore(row, $index)">更多</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ link
|
|
|
|
+ @click="clickInformationMore(row, $index)"
|
|
|
|
+ >更多</el-button
|
|
|
|
+ >
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
@@ -85,12 +182,28 @@
|
|
</byForm>
|
|
</byForm>
|
|
<template #footer>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false" size="large">取 消</el-button>
|
|
<el-button @click="dialogVisible = false" size="large">取 消</el-button>
|
|
- <el-button type="primary" @click="submitForm()" size="large" :loading="submitLoading">确 定</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="submitForm()"
|
|
|
|
+ size="large"
|
|
|
|
+ :loading="submitLoading"
|
|
|
|
+ >确 定</el-button
|
|
|
|
+ >
|
|
</template>
|
|
</template>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
|
- <el-dialog title="更多联系方式" v-if="openPerson" v-model="openPerson" width="700">
|
|
|
|
- <el-form :label-position="'top'" :model="formPerson.data" :rules="rulesPerson" ref="person">
|
|
|
|
|
|
+ <el-dialog
|
|
|
|
+ title="更多联系方式"
|
|
|
|
+ v-if="openPerson"
|
|
|
|
+ v-model="openPerson"
|
|
|
|
+ width="700"
|
|
|
|
+ >
|
|
|
|
+ <el-form
|
|
|
|
+ :label-position="'top'"
|
|
|
|
+ :model="formPerson.data"
|
|
|
|
+ :rules="rulesPerson"
|
|
|
|
+ ref="person"
|
|
|
|
+ >
|
|
<el-form-item label="联系人" prop="name">
|
|
<el-form-item label="联系人" prop="name">
|
|
<el-input v-model="formPerson.data.name" />
|
|
<el-input v-model="formPerson.data.name" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -99,14 +212,32 @@
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="更多联系方式">
|
|
<el-form-item label="更多联系方式">
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
- <el-button type="primary" @click="clickAddMoreInformation">添 加</el-button>
|
|
|
|
- <el-table :data="formPerson.data.contact" style="width: 100%; margin-top: 16px">
|
|
|
|
|
|
+ <el-button type="primary" @click="clickAddMoreInformation"
|
|
|
|
+ >添 加</el-button
|
|
|
|
+ >
|
|
|
|
+ <el-table
|
|
|
|
+ :data="formPerson.data.contact"
|
|
|
|
+ style="width: 100%; margin-top: 16px"
|
|
|
|
+ >
|
|
<el-table-column label="类型" width="180">
|
|
<el-table-column label="类型" width="180">
|
|
<template #default="{ row, $index }">
|
|
<template #default="{ row, $index }">
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
- <el-form-item :prop="'contact.' + $index + '.type'" :rules="rulesPerson.type" :inline-message="true">
|
|
|
|
- <el-select v-model="row.type" placeholder="请选择类型" style="width: 100%">
|
|
|
|
- <el-option v-for="item in contactType" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ :prop="'contact.' + $index + '.type'"
|
|
|
|
+ :rules="rulesPerson.type"
|
|
|
|
+ :inline-message="true"
|
|
|
|
+ >
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="row.type"
|
|
|
|
+ placeholder="请选择类型"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in contactType"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
@@ -115,15 +246,32 @@
|
|
<el-table-column label="联系号码">
|
|
<el-table-column label="联系号码">
|
|
<template #default="{ row, $index }">
|
|
<template #default="{ row, $index }">
|
|
<div style="width: 100%">
|
|
<div style="width: 100%">
|
|
- <el-form-item :prop="'contact.' + $index + '.contactNo'" :rules="rulesPerson.contactNo" :inline-message="true">
|
|
|
|
- <el-input v-model="row.contactNo" placeholder="请输入联系号码" />
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ :prop="'contact.' + $index + '.contactNo'"
|
|
|
|
+ :rules="rulesPerson.contactNo"
|
|
|
|
+ :inline-message="true"
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="row.contactNo"
|
|
|
|
+ placeholder="请输入联系号码"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column align="center" label="操作" width="120" fixed="right">
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ label="操作"
|
|
|
|
+ width="120"
|
|
|
|
+ fixed="right"
|
|
|
|
+ >
|
|
<template #default="{ $index }">
|
|
<template #default="{ $index }">
|
|
- <el-button type="primary" link @click="clickInformationDelete($index)">删除</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ link
|
|
|
|
+ @click="clickInformationDelete($index)"
|
|
|
|
+ >删除</el-button
|
|
|
|
+ >
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
@@ -132,7 +280,9 @@
|
|
</el-form>
|
|
</el-form>
|
|
<template #footer>
|
|
<template #footer>
|
|
<el-button @click="openPerson = false" size="large">取 消</el-button>
|
|
<el-button @click="openPerson = false" size="large">取 消</el-button>
|
|
- <el-button type="primary" @click="submitPerson()" size="large">确 定</el-button>
|
|
|
|
|
|
+ <el-button type="primary" @click="submitPerson()" size="large"
|
|
|
|
+ >确 定</el-button
|
|
|
|
+ >
|
|
</template>
|
|
</template>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
@@ -204,20 +354,22 @@ const customerSource = ref([]);
|
|
const customerStatus = ref([]);
|
|
const customerStatus = ref([]);
|
|
const contactType = ref([]);
|
|
const contactType = ref([]);
|
|
const getDict = () => {
|
|
const getDict = () => {
|
|
- proxy.getDictOne(["customer_source", "customer_status", "contact_type"]).then((res) => {
|
|
|
|
- customerSource.value = res["customer_source"].map((x) => ({
|
|
|
|
- label: x.dictValue,
|
|
|
|
- value: x.dictKey,
|
|
|
|
- }));
|
|
|
|
- customerStatus.value = res["customer_status"].map((x) => ({
|
|
|
|
- label: x.dictValue,
|
|
|
|
- value: x.dictKey,
|
|
|
|
- }));
|
|
|
|
- contactType.value = res["contact_type"].map((x) => ({
|
|
|
|
- label: x.dictValue,
|
|
|
|
- value: x.dictKey,
|
|
|
|
- }));
|
|
|
|
- });
|
|
|
|
|
|
+ proxy
|
|
|
|
+ .getDictOne(["customer_source", "customer_status", "contact_type"])
|
|
|
|
+ .then((res) => {
|
|
|
|
+ customerSource.value = res["customer_source"].map((x) => ({
|
|
|
|
+ label: x.dictValue,
|
|
|
|
+ value: x.dictKey,
|
|
|
|
+ }));
|
|
|
|
+ customerStatus.value = res["customer_status"].map((x) => ({
|
|
|
|
+ label: x.dictValue,
|
|
|
|
+ value: x.dictKey,
|
|
|
|
+ }));
|
|
|
|
+ contactType.value = res["contact_type"].map((x) => ({
|
|
|
|
+ label: x.dictValue,
|
|
|
|
+ value: x.dictKey,
|
|
|
|
+ }));
|
|
|
|
+ });
|
|
};
|
|
};
|
|
getDict();
|
|
getDict();
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
@@ -285,7 +437,10 @@ const submitPerson = () => {
|
|
};
|
|
};
|
|
const submitForm = () => {
|
|
const submitForm = () => {
|
|
submit.value.handleSubmit(() => {
|
|
submit.value.handleSubmit(() => {
|
|
- if (formData.data.customerUserList && formData.data.customerUserList.length > 0) {
|
|
|
|
|
|
+ if (
|
|
|
|
+ formData.data.customerUserList &&
|
|
|
|
+ formData.data.customerUserList.length > 0
|
|
|
|
+ ) {
|
|
submitLoading.value = true;
|
|
submitLoading.value = true;
|
|
const data = {
|
|
const data = {
|
|
customerId: detailsData.value.id,
|
|
customerId: detailsData.value.id,
|