<template>
|
<!--
|
作者：系统
|
时间：2025-10-30
|
描述：名片管理-名片列表
|
-->
|
<div class="common-seach-wrap">
|
<div class="search-left">
|
<el-button type="primary" @click="addBusiness">添加名片</el-button>
|
</div>
|
|
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
<el-form-item label="搜索">
|
<el-input v-model="searchForm.search" placeholder="姓名/职务/单位"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
<el-button @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="table-container">
|
<el-table v-loading="loading" :data="listData" border>
|
<el-table-column prop="business_card_id" label="名片ID" width="80" align="center"></el-table-column>
|
<el-table-column label="名片信息" align="center">
|
<template slot-scope="scope">
|
<div class="business-card-info">
|
<div class="avatar">
|
<img v-if="scope.row.image && scope.row.image.file_path" :src="scope.row.image.file_path" alt="头像" class="avatar-img">
|
<div v-else class="avatar-placeholder">默认头像</div>
|
</div>
|
<div class="info">
|
<div class="name">{{ scope.row.name }}</div>
|
<div class="position">{{ Array.isArray(scope.row.duties) ? scope.row.duties.join(', ') : scope.row.duties }}</div>
|
<div class="company">{{ Array.isArray(scope.row.unit) ? scope.row.unit.join(', ') : scope.row.unit }}</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="user.nickName" label="所属用户" align="center"></el-table-column>
|
<el-table-column prop="grade.name" label="名片等级" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.grade ? scope.row.grade.name : '默认等级' }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="mobile" label="联系电话" align="center"></el-table-column>
|
<el-table-column prop="create_time" label="创建时间" width="180" align="center"></el-table-column>
|
<el-table-column label="操作" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button type="text" @click="viewBusiness(scope.row)">查看</el-button>
|
<el-button type="text" @click="editBusiness(scope.row)">编辑</el-button>
|
<el-button type="text" @click="deleteBusiness(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- 分页 -->
|
<div class="pagination">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="curPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totalDataNumber">
|
</el-pagination>
|
</div>
|
|
<!-- 添加/编辑对话框 -->
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" @close="handleClose">
|
<el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="基本信息" name="basic">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="用户" prop="user_id">
|
<el-button @click="selectUser" icon="el-icon-plus">选择会员</el-button>
|
<div v-if="selectedUser" class="selected-user">
|
<div class="img" style="margin-top: 10px;">
|
<img :src="selectedUser.avatarUrl" width="100" height="100" />
|
</div>
|
<el-tag closable @close="clearSelectedUser" style="margin-top: 10px;">{{ selectedUser.nickName }}</el-tag>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="联系电话" prop="mobile">
|
<el-input v-model="formData.mobile" placeholder="请输入联系电话"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="名片类型">
|
<el-select v-model="formData.ilk" placeholder="请选择名片类型">
|
<el-option label="个人名片" :value="10"></el-option>
|
<el-option label="企业名片" :value="20"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="微信">
|
<el-input v-model="formData.wechat" placeholder="请输入微信"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="邮箱">
|
<el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="座机">
|
<el-input v-model="formData.phone" placeholder="请输入座机"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="名片等级">
|
<el-select v-model="formData.grade_id" placeholder="请选择名片等级">
|
<el-option
|
v-for="item in gradeList"
|
:key="item.grade_id"
|
:label="item.name"
|
:value="item.grade_id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="行业" prop="industry_id">
|
<el-cascader
|
v-model="formData.industry_id"
|
placeholder="请选择行业"
|
:options="industryList"
|
:props="{ label: 'name', value: 'industry_id', children: 'child' }"
|
style="width: 100%;"
|
></el-cascader>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="是否默认">
|
<el-switch
|
v-model="formData.is_default"
|
:active-value="1"
|
:inactive-value="0">
|
</el-switch>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
|
<el-tab-pane label="详细信息" name="detail">
|
<el-form-item label="职务">
|
<el-input v-model="formData.duties" placeholder="请输入职务"></el-input>
|
</el-form-item>
|
|
<el-form-item label="单位">
|
<el-input v-model="formData.unit" placeholder="请输入单位"></el-input>
|
</el-form-item>
|
|
<el-form-item label="地区">
|
<el-select v-model="formData.province_id" placeholder="省" @change="initCity">
|
<el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
|
</el-select>
|
<el-select v-if="formData.province_id" v-model="formData.city_id" placeholder="市" @change="initRegion">
|
<el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[formData.province_id]['city']" :key='index1'></el-option>
|
</el-select>
|
<el-select v-if="formData.city_id" v-model="formData.region_id" placeholder="区">
|
<el-option :label="item2.name" :value="item2.id" v-for="(item2,index2) in areaList[formData.province_id]['city'][formData.city_id]['region']" :key='index2'></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="地址">
|
<el-input v-model="formData.address" placeholder="请输入地址"></el-input>
|
</el-form-item>
|
|
<el-form-item label="简介">
|
<el-input
|
type="textarea"
|
v-model="formData.Introduction"
|
placeholder="请输入个人或公司简介"
|
:rows="3">
|
</el-input>
|
</el-form-item>
|
</el-tab-pane>
|
|
<el-tab-pane label="图片设置" name="images">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="头像">
|
<el-button icon="el-icon-picture" @click="selectAvatar">选择头像</el-button>
|
<div v-if="avatarImage" class="image-preview">
|
<img :src="avatarImage.file_path" class="preview-img">
|
<i class="el-icon-delete delete-icon" @click="clearAvatar"></i>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="Logo">
|
<el-button icon="el-icon-picture" @click="selectLogo">选择Logo</el-button>
|
<div v-if="logoImage" class="image-preview">
|
<img :src="logoImage.file_path" class="preview-img">
|
<i class="el-icon-delete delete-icon" @click="clearLogo"></i>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
|
<el-tab-pane label="模板设置" name="template">
|
<el-form-item label="选择模板">
|
<el-select v-model="formData.template_id" placeholder="请选择名片模板" @change="handleTemplateChange">
|
<el-option
|
v-for="item in templateList"
|
:key="item.template_id"
|
:label="item.name || '模板' + item.template_id"
|
:value="item.template_id">
|
<div class="template-option">
|
<img :src="item.image" class="template-thumb" />
|
<span>{{ item.name || '模板' + item.template_id }}</span>
|
</div>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="模板预览" v-if="selectedTemplate">
|
<div class="template-preview">
|
<img :src="selectedTemplate.image" class="template-image" />
|
</div>
|
</el-form-item>
|
</el-tab-pane>
|
</el-tabs>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 查看详情对话框 -->
|
<el-dialog title="名片详情" :visible.sync="detailDialogVisible" width="800px">
|
<el-tabs v-model="detailActiveTab">
|
<el-tab-pane label="基本信息" name="basic">
|
<el-form label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="名片ID">
|
<span>{{ detailData.business_card_id }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="姓名">
|
<span>{{ detailData.name }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="名片类型">
|
<span>{{ detailData.ilk == 10 ? '个人名片' : detailData.ilk == 20 ? '企业名片' : '' }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话">
|
<span>{{ detailData.mobile }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="微信">
|
<span>{{ detailData.wechat }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="邮箱">
|
<span>{{ detailData.mailbox }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="座机">
|
<span>{{ detailData.phone }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="名片等级">
|
<span>{{ detailData.grade ? detailData.grade.name : '默认等级' }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="是否默认">
|
<span>{{ detailData.is_default === 1 ? '是' : '否' }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="详细信息" name="detail">
|
<el-form label-width="100px">
|
<el-form-item label="职务">
|
<span>{{ Array.isArray(detailData.duties) ? detailData.duties.join(', ') : detailData.duties }}</span>
|
</el-form-item>
|
|
<el-form-item label="单位">
|
<span>{{ Array.isArray(detailData.unit) ? detailData.unit.join(', ') : detailData.unit }}</span>
|
</el-form-item>
|
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="行业ID">
|
<span>{{ detailData.industry_id }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="省份ID">
|
<span>{{ detailData.province_id }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="城市ID">
|
<span>{{ detailData.city_id }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="区域ID">
|
<span>{{ detailData.region_id }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="16">
|
<el-form-item label="地区信息">
|
<span>
|
{{ detailData.region ?
|
(detailData.region.province + (detailData.region.city ? ' ' + detailData.region.city : '') + (detailData.region.region ? ' ' + detailData.region.region : ''))
|
: '' }}
|
</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="地址">
|
<span>{{ Array.isArray(detailData.address) ? detailData.address.join(', ') : detailData.address }}</span>
|
</el-form-item>
|
<el-form-item label="简介">
|
<span>{{ detailData.Introduction }}</span>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="图片信息" name="images">
|
<el-form label-width="100px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="头像ID">
|
<span>{{ detailData.file_id }}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="Logo ID">
|
<span>{{ detailData.logo }}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="头像预览">
|
<img v-if="detailData.image && detailData.image.file_path" :src="detailData.image.file_path" class="preview-image" />
|
<div v-else class="no-image">暂无头像</div>
|
</el-form-item>
|
|
<el-form-item label="Logo预览">
|
<img v-if="detailData.logoImage && detailData.logoImage.file_path" :src="detailData.logoImage.file_path" class="preview-image" />
|
<div v-else class="no-image">暂无Logo</div>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="模板信息" name="template">
|
<el-form label-width="100px">
|
<el-form-item label="模板ID">
|
<span>{{ detailData.template_id }}</span>
|
</el-form-item>
|
|
<el-form-item label="模板预览" v-if="detailData.template">
|
<div class="template-preview">
|
<img :src="detailData.template.image" class="template-image" />
|
</div>
|
</el-form-item>
|
|
<el-form-item label="模板预览" v-else>
|
<div class="no-template">暂无模板信息</div>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
|
<el-tab-pane label="时间信息" name="time">
|
<el-form label-width="100px">
|
<el-form-item label="创建时间">
|
<span>{{ detailData.create_time }}</span>
|
</el-form-item>
|
<el-form-item label="更新时间">
|
<span>{{ detailData.update_time }}</span>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="detailDialogVisible = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 用户选择组件 -->
|
<GetUser :is_open="showUserSelector" @close="handleUserSelect"></GetUser>
|
|
<!-- 图片选择组件 -->
|
<Upload
|
v-if="showImageSelector"
|
:config="uploadConfig"
|
:isupload="showImageSelector"
|
@returnImgs="handleImageSelect">
|
</Upload>
|
</div>
|
</template>
|
|
<script>
|
import BusinessApi from '@/api/business.js';
|
import StoreApi from '@/api/store.js';
|
import GetUser from '@/components/user/GetUser';
|
import Upload from '@/components/file/Upload';
|
|
export default {
|
components: {
|
GetUser,
|
Upload
|
},
|
data() {
|
return {
|
loading: false,
|
listData: [],
|
gradeList: [],
|
templateList: [],
|
selectedTemplate: null,
|
searchForm: {
|
search: ''
|
},
|
formData: {
|
business_card_id: '',
|
user_id: '',
|
name: '',
|
sex: 10,
|
mobile: '',
|
mobile_phone: '',
|
wechat: '',
|
mailbox: '',
|
phone: '',
|
duties: '',
|
unit: '',
|
address: '',
|
industry_id: [],
|
province_id: '',
|
city_id: '',
|
region_id: '',
|
ilk: '',
|
grade_id: '',
|
is_default: 0,
|
file_id: '',
|
logo: '',
|
logo_width: '',
|
logo_height: '',
|
template_id: '',
|
Introduction: ''
|
},
|
detailData: {
|
business_card_id: '',
|
user_id: '',
|
name: '',
|
sex: 10,
|
mobile: '',
|
mobile_phone: '',
|
wechat: '',
|
mailbox: '',
|
phone: '',
|
duties: '',
|
unit: '',
|
address: '',
|
industry_id: '',
|
province_id: '',
|
city_id: '',
|
region_id: '',
|
ilk: '',
|
grade: null,
|
is_default: 0,
|
file_id: '',
|
logo: '',
|
logo_width: '',
|
logo_height: '',
|
template_id: '',
|
Introduction: '',
|
create_time: '',
|
update_time: '',
|
region: null
|
},
|
rules: {
|
user_id: [
|
{ required: true, message: '请输入用户ID', trigger: 'blur' },
|
{ type: 'number', message: '用户ID必须为数字', trigger: 'blur' }
|
],
|
name: [
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
],
|
mobile: [
|
{ required: false, pattern: /^1[3-9]\d{9}$|^$/, message: '请输入正确的手机号', trigger: 'blur' }
|
],
|
province_id: [
|
{ type: 'number', message: '省份ID必须为数字', trigger: 'blur' }
|
],
|
city_id: [
|
{ type: 'number', message: '城市ID必须为数字', trigger: 'blur' }
|
],
|
region_id: [
|
{ type: 'number', message: '区域ID必须为数字', trigger: 'blur' }
|
],
|
file_id: [
|
{ type: 'number', message: '头像ID必须为数字', trigger: 'blur' }
|
],
|
logo: [
|
{ type: 'number', message: 'Logo ID必须为数字', trigger: 'blur' }
|
]
|
},
|
dialogVisible: false,
|
detailDialogVisible: false,
|
dialogTitle: '',
|
isEdit: false,
|
activeTab: 'basic',
|
detailActiveTab: 'basic',
|
showUserSelector: false,
|
showImageSelector: false,
|
imageSelectType: '', // 'avatar' or 'logo'
|
uploadConfig: {
|
total: 1,
|
file_type: 'image'
|
},
|
// 分页相关
|
curPage: 1,
|
pageSize: 15,
|
totalDataNumber: 0,
|
industryList: [],
|
areaList: [],
|
selectedUser: null,
|
avatarImage: null,
|
logoImage: null,
|
};
|
},
|
filters: {
|
sexFilter(val) {
|
const sexMap = { 10: '未知', 20: '男', 30: '女' };
|
return sexMap[val] || '未知';
|
}
|
},
|
mounted() {
|
this.loadData();
|
this.loadGradeList();
|
this.loadTemplateList();
|
this.loadIndustryList(); // 加载行业列表
|
this.loadRegionList(); // 加载地区列表
|
},
|
methods: {
|
// 加载数据
|
loadData() {
|
this.loading = true;
|
const params = {
|
page: this.curPage,
|
listRow: this.pageSize,
|
search: this.searchForm.search
|
};
|
|
BusinessApi.businessList(params).then(res => {
|
this.loading = false;
|
if (res.data.list) {
|
// 适配后端实际返回的数据结构
|
this.listData = res.data.list.data || [];
|
this.totalDataNumber = res.data.list.total || 0;
|
} else {
|
this.listData = [];
|
this.totalDataNumber = 0;
|
}
|
}).catch(() => {
|
this.loading = false;
|
this.$message.error('获取数据失败');
|
});
|
},
|
|
// 加载名片等级列表
|
loadGradeList() {
|
BusinessApi.gradeList().then(res => {
|
this.gradeList = res.data.list || [];
|
}).catch(() => {
|
this.$message.error('获取名片等级失败');
|
});
|
},
|
|
// 加载模板列表
|
loadTemplateList() {
|
BusinessApi.businessTemplateList().then(res => {
|
this.templateList = res.data.list.data || [];
|
}).catch(() => {
|
this.$message.error('获取名片模板失败');
|
});
|
},
|
|
// 加载行业列表
|
loadIndustryList() {
|
BusinessApi.industryList().then(res => {
|
// 使用树形结构的数据作为行业列表
|
this.industryList = res.data.list && res.data.list.tree ? res.data.list.tree : [];
|
}).catch(() => {
|
this.$message.error('获取行业列表失败');
|
});
|
},
|
|
// 加载地区列表
|
loadRegionList() {
|
// 参考门店添加页面，调用获取地区数据的API
|
BusinessApi.businessList({}, true).then(res => {
|
if (res.data && res.data.regionData) {
|
this.areaList = res.data.regionData;
|
}
|
}).catch(() => {
|
this.areaList = [];
|
});
|
},
|
|
/*初始化城市id*/
|
initCity() {
|
this.formData.city_id = '';
|
this.formData.region_id = '';
|
},
|
|
/*初始化区id*/
|
initRegion() {
|
this.formData.region_id = '';
|
},
|
|
// 选择用户
|
selectUser() {
|
this.showUserSelector = true;
|
},
|
|
// 用户选择回调
|
handleUserSelect(selectedUsers) {
|
this.showUserSelector = false;
|
if (selectedUsers && selectedUsers.params && selectedUsers.params.length > 0) {
|
const user = selectedUsers.params[0];
|
this.formData.user_id = user.user_id;
|
this.selectedUser = user;
|
// 自动填充姓名和手机号
|
if (user.real_name) {
|
this.formData.name = user.real_name;
|
}
|
if (user.mobile) {
|
this.formData.mobile = user.mobile;
|
}
|
}
|
},
|
|
// 清除选择的用户
|
clearSelectedUser() {
|
this.formData.user_id = '';
|
this.selectedUser = null;
|
},
|
|
// 选择头像
|
selectAvatar() {
|
this.imageSelectType = 'avatar';
|
this.uploadConfig = {
|
total: 1,
|
file_type: 'image'
|
};
|
this.showImageSelector = true;
|
},
|
|
// 选择Logo
|
selectLogo() {
|
this.imageSelectType = 'logo';
|
this.uploadConfig = {
|
total: 1,
|
file_type: 'image'
|
};
|
this.showImageSelector = true;
|
},
|
|
// 图片选择回调
|
handleImageSelect(images) {
|
this.showImageSelector = false;
|
if (images && images.length > 0) {
|
const fileId = images[0].file_id;
|
const fileData = images[0];
|
if (this.imageSelectType === 'avatar') {
|
this.formData.file_id = fileId;
|
this.avatarImage = fileData;
|
} else if (this.imageSelectType === 'logo') {
|
this.formData.logo = fileId;
|
this.logoImage = fileData;
|
}
|
}
|
},
|
|
// 清除头像
|
clearAvatar() {
|
this.formData.file_id = '';
|
this.avatarImage = null;
|
},
|
|
// 清除Logo
|
clearLogo() {
|
this.formData.logo = '';
|
this.logoImage = null;
|
},
|
|
// 搜索
|
search() {
|
this.curPage = 1;
|
this.loadData();
|
},
|
|
// 重置搜索
|
reset() {
|
this.searchForm.search = '';
|
this.curPage = 1;
|
this.loadData();
|
},
|
|
// 添加名片
|
addBusiness() {
|
this.dialogTitle = '添加名片';
|
this.isEdit = false;
|
this.formData = {
|
business_card_id: '',
|
user_id: '',
|
name: '',
|
sex: 10,
|
mobile: '',
|
mobile_phone: '',
|
wechat: '',
|
mailbox: '',
|
phone: '',
|
duties: '',
|
unit: '',
|
address: '',
|
industry_id: '',
|
province_id: '',
|
city_id: '',
|
region_id: '',
|
ilk: '',
|
grade_id: '',
|
is_default: 0,
|
file_id: '',
|
logo: '',
|
logo_width: '',
|
logo_height: '',
|
template_id: '',
|
Introduction: ''
|
};
|
// 清空选择的数据
|
this.selectedUser = null;
|
this.avatarImage = null;
|
this.logoImage = null;
|
|
this.activeTab = 'basic';
|
this.dialogVisible = true;
|
},
|
|
// 编辑名片
|
editBusiness(row) {
|
this.dialogTitle = '编辑名片';
|
this.isEdit = true;
|
this.formData = {
|
business_card_id: row.business_card_id,
|
user_id: row.user_id,
|
name: row.name,
|
sex: row.sex && typeof row.sex === 'object' ?
|
(row.sex === '未知' ? 10 : row.sex === '男' ? 20 : 30) :
|
(row.sex || 10),
|
mobile: row.mobile,
|
mobile_phone: row.mobile_phone,
|
wechat: row.wechat || '',
|
mailbox: row.mailbox || '',
|
phone: row.phone || '',
|
duties: Array.isArray(row.duties) ? row.duties.join(', ') : (row.duties || ''),
|
unit: Array.isArray(row.unit) ? row.unit.join(', ') : (row.unit || ''),
|
address: Array.isArray(row.address) ? row.address.join(', ') : (row.address || ''),
|
industry_id: row.industry_id || '',
|
province_id: row.province_id || '',
|
city_id: row.city_id || '',
|
region_id: row.region_id || '',
|
ilk: row.ilk || '',
|
grade_id: row.grade_id,
|
is_default: row.is_default,
|
file_id: row.file_id || '',
|
logo: row.logo || '',
|
logo_width: row.logo_width || '',
|
logo_height: row.logo_height || '',
|
template_id: row.template_id || '',
|
Introduction: row.Introduction || ''
|
};
|
|
// 设置选中的用户
|
if (row.user) {
|
this.selectedUser = row.user;
|
}
|
|
// 设置选中的图片
|
if (row.image) {
|
this.avatarImage = row.image;
|
}
|
|
if (row.logoImage) {
|
this.logoImage = row.logoImage;
|
}
|
|
// 地区信息已经通过formData绑定，无需额外设置
|
|
// 设置选中的模板
|
if (row.template_id) {
|
this.selectedTemplate = this.templateList.find(template => template.template_id == row.template_id) || null;
|
} else {
|
this.selectedTemplate = null;
|
}
|
|
this.activeTab = 'basic';
|
this.dialogVisible = true;
|
},
|
|
// 查看详情
|
viewBusiness(row) {
|
BusinessApi.businessDetail({ business_card_id: row.business_card_id }).then(res => {
|
if (res.code === 1) {
|
this.detailData = res.data;
|
this.detailActiveTab = 'basic';
|
this.detailDialogVisible = true;
|
} else {
|
this.$message.error(res.msg || '获取详情失败');
|
}
|
}).catch(() => {
|
this.$message.error('获取详情失败');
|
});
|
},
|
|
// 删除名片
|
deleteBusiness(row) {
|
this.$confirm('确定要删除该名片吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
BusinessApi.businessDelete({ business_card_id: row.business_card_id }).then(res => {
|
if (res.code === 1) {
|
this.$message.success('删除成功');
|
this.loadData();
|
} else {
|
this.$message.error(res.msg || '删除失败');
|
}
|
}).catch(() => {
|
this.$message.error('删除失败');
|
});
|
}).catch(() => {});
|
},
|
|
// 关闭对话框
|
handleClose() {
|
this.$refs.formData.resetFields();
|
},
|
|
// 提交表单
|
submitForm() {
|
this.$refs.formData.validate((valid) => {
|
if (valid) {
|
// 处理数组字段
|
const paramsData = { ...this.formData };
|
// 处理行业级联值，取最后一级的值并确保为数字类型
|
if (Array.isArray(paramsData.industry_id) && paramsData.industry_id.length > 0) {
|
paramsData.industry_id = Number(paramsData.industry_id[paramsData.industry_id.length - 1]);
|
} else if (paramsData.industry_id !== '') {
|
// 如果不是数组但有值，也转换为数字
|
paramsData.industry_id = Number(paramsData.industry_id);
|
}
|
|
// 处理职务字段
|
if (paramsData.duties && typeof paramsData.duties === 'string') {
|
paramsData.duties = paramsData.duties.split(',').map(item => item.trim()).filter(item => item);
|
}
|
|
// 处理单位字段
|
if (paramsData.unit && typeof paramsData.unit === 'string') {
|
paramsData.unit = paramsData.unit.split(',').map(item => item.trim()).filter(item => item);
|
}
|
|
// 处理地址字段
|
if (paramsData.address && typeof paramsData.address === 'string') {
|
paramsData.address = paramsData.address.split(',').map(item => item.trim()).filter(item => item);
|
}
|
|
const params = {
|
business: paramsData
|
};
|
|
if (this.isEdit) {
|
// 编辑
|
BusinessApi.businessEdit(params).then(res => {
|
if (res.code === 1) {
|
this.$message.success('编辑成功');
|
this.dialogVisible = false;
|
this.loadData();
|
} else {
|
this.$message.error(res.msg || '编辑失败');
|
}
|
}).catch(() => {
|
this.$message.error('编辑失败');
|
});
|
} else {
|
// 添加
|
BusinessApi.businessAdd(params).then(res => {
|
if (res.code === 1) {
|
this.$message.success('添加成功');
|
this.dialogVisible = false;
|
this.loadData();
|
} else {
|
this.$message.error(res.msg || '添加失败');
|
}
|
}).catch(() => {
|
this.$message.error('添加失败');
|
});
|
}
|
}
|
});
|
},
|
|
// 模板选择变更
|
handleTemplateChange(templateId) {
|
this.selectedTemplate = this.templateList.find(template => template.template_id == templateId) || null;
|
},
|
|
// 分页相关方法
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.curPage = 1;
|
this.loadData();
|
},
|
|
handleCurrentChange(val) {
|
this.curPage = val;
|
this.loadData();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.common-seach-wrap {
|
padding: 20px;
|
background-color: #fff;
|
min-height: calc(100vh - 60px);
|
}
|
|
.search-left {
|
margin-bottom: 20px;
|
}
|
|
.business-card-info {
|
display: flex;
|
align-items: center;
|
text-align: left;
|
}
|
|
.avatar {
|
margin-right: 15px;
|
}
|
|
.avatar-img {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
object-fit: cover;
|
}
|
|
.avatar-placeholder {
|
width: 50px;
|
height: 50px;
|
border-radius: 50%;
|
background-color: #f0f0f0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #999;
|
font-size: 12px;
|
}
|
|
.info .name {
|
font-weight: bold;
|
font-size: 16px;
|
margin-bottom: 5px;
|
}
|
|
.info .position,
|
.info .company {
|
font-size: 14px;
|
color: #666;
|
margin-bottom: 3px;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
text-align: right;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
|
.template-option {
|
display: flex;
|
align-items: center;
|
}
|
|
.template-thumb {
|
width: 40px;
|
height: 40px;
|
margin-right: 10px;
|
object-fit: cover;
|
}
|
|
.template-preview {
|
text-align: center;
|
margin-top: 10px;
|
}
|
|
.template-image {
|
max-width: 100%;
|
max-height: 400px;
|
border: 1px solid #eee;
|
border-radius: 4px;
|
}
|
|
.preview-image {
|
max-width: 200px;
|
max-height: 200px;
|
border: 1px solid #eee;
|
border-radius: 4px;
|
}
|
|
.no-image,
|
.no-template {
|
color: #999;
|
font-style: italic;
|
}
|
|
.selected-user {
|
margin-top: 10px;
|
}
|
.img {
|
margin-top: 10px;
|
}
|
|
.image-preview {
|
position: relative;
|
display: inline-block;
|
margin-top: 10px;
|
}
|
|
.preview-img {
|
width: 100px;
|
height: 100px;
|
border-radius: 4px;
|
}
|
|
.delete-icon {
|
position: absolute;
|
top: -8px;
|
right: -8px;
|
background: #fff;
|
border-radius: 50%;
|
cursor: pointer;
|
color: #F56C6C;
|
font-size: 16px;
|
}
|
</style>
|
