From 2b728186c745b598e8ccb9dcc37360eed49375f6 Mon Sep 17 00:00:00 2001
From: quanwei <419654421@qq.com>
Date: Thu, 30 Oct 2025 18:58:21 +0800
Subject: [PATCH] 完成名片列表功能 完成名片筛选功能 完成查看名片详情 完成购买名片查看联系方式
---
shop_vue/src/views/plus/business/business/index.vue | 1111 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,109 insertions(+), 2 deletions(-)
diff --git a/shop_vue/src/views/plus/business/business/index.vue b/shop_vue/src/views/plus/business/business/index.vue
index cee12a5..f237443 100644
--- a/shop_vue/src/views/plus/business/business/index.vue
+++ b/shop_vue/src/views/plus/business/business/index.vue
@@ -1,7 +1,1114 @@
<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>
-<style scoped>
+<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';
-</style>
+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>
\ No newline at end of file
--
Gitblit v1.9.2