| | |
| | | <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"> |
| | | <img v-if="scope.row.file_path" :src="scope.row.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 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 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" v-auth="'/plus/business/business/view'" @click="viewBusiness(scope.row)">查看</el-button> |
| | | <el-button type="text" v-auth="'/plus/business/business/edit'" @click="editBusiness(scope.row)">编辑</el-button> |
| | | <el-button type="text" v-auth="'/plus/business/business/delete'" @click="deleteBusiness(scope.row)"></el-button> |
| | | <el-button type="text" v-auth="'/plus/business/business/view'" |
| | | @click="viewBusiness(scope.row)">查看</el-button> |
| | | <el-button type="text" v-auth="'/plus/business/business/edit'" |
| | | @click="editBusiness(scope.row)">编辑</el-button> |
| | | <el-button type="text" v-auth="'/plus/business/business/delete'" |
| | | @click="deleteBusiness(scope.row)"></el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | |
| | | <!-- 分页 --> |
| | | <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" |
| | | <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> |
| | |
| | | <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> |
| | | <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="名片等级"> |
| | | <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 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" |
| | | <el-cascader v-model="formData.industry_id" placeholder="请选择行业" :options="industryList" |
| | | :props="{ label: 'name', value: 'industry_id', children: 'child' }" |
| | | style="width: 100%;" |
| | | ></el-cascader> |
| | | 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 v-model="formData.is_default" :active-value="1" :inactive-value="0"> |
| | | </el-switch> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | |
| | | <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-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-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-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> |
| | | |
| | | <el-form-item label="简介"> |
| | | <el-input |
| | | type="textarea" |
| | | v-model="formData.Introduction" |
| | | placeholder="请输入个人或公司简介" |
| | | :rows="3"> |
| | | <el-input type="textarea" v-model="formData.Introduction" placeholder="请输入个人或公司简介" :rows="3"> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-tab-pane> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="头像"> |
| | | <el-button icon="el-icon-picture" @click="selectAvatar">选择头像</el-button> |
| | | <div> |
| | | <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> |
| | | </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> |
| | | <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> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <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"> |
| | | <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> |
| | |
| | | <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 label="行业"> |
| | | <span>{{ detailData.industry.name }}</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 label="省份"> |
| | | <span>{{ detailData.region.province }}</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-col :span="8"> |
| | | <el-form-item label="城市"> |
| | | <span>{{ detailData.region.city}}</span> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="区域"> |
| | | <span>{{ 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-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" /> |
| | | <img v-if="detailData.file_path" :src="detailData.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" /> |
| | | <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-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"> |
| | | <el-form-item label="名片预览" v-if="detailData.mp"> |
| | | <div class="template-preview"> |
| | | <img :src="detailData.template.image" class="template-image" /> |
| | | <img :src="detailData.mp" 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> |
| | |
| | | <GetUser :is_open="showUserSelector" @close="handleUserSelect"></GetUser> |
| | | |
| | | <!-- 图片选择组件 --> |
| | | <Upload |
| | | v-if="showImageSelector" |
| | | :config="uploadConfig" |
| | | :isupload="showImageSelector" |
| | | <Upload v-if="showImageSelector" :config="uploadConfig" :isupload="showImageSelector" |
| | | @returnImgs="handleImageSelect"> |
| | | </Upload> |
| | | </div> |
| | |
| | | Introduction: '', |
| | | create_time: '', |
| | | update_time: '', |
| | | region: null |
| | | industry:{name:[]}, |
| | | region: {province: "", city: "", region: ""} |
| | | |
| | | }, |
| | | rules: { |
| | | user_id: [ |
| | | { required: true, message: '请输入用户ID', trigger: 'blur' }, |
| | | { type: 'number', message: '用户ID必须为数字', trigger: 'blur' } |
| | | 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' } |
| | | ] |
| | | 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, |
| | |
| | | }, |
| | | filters: { |
| | | sexFilter(val) { |
| | | const sexMap = { 10: '未知', 20: '男', 30: '女' }; |
| | | const sexMap = { |
| | | 10: '未知', |
| | | 20: '男', |
| | | 30: '女' |
| | | }; |
| | | return sexMap[val] || '未知'; |
| | | } |
| | | }, |
| | |
| | | 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), |
| | | (row.sex === '未知' ? 10 : row.sex === '男' ? 20 : 30) : (row.sex || 10), |
| | | mobile: row.mobile, |
| | | mobile_phone: row.mobile_phone, |
| | | wechat: row.wechat || '', |
| | |
| | | if (row.user) { |
| | | this.selectedUser = row.user; |
| | | } |
| | | |
| | | console.log(row); |
| | | // 设置选中的图片 |
| | | if (row.image) { |
| | | this.avatarImage = row.image; |
| | | if (row.file_id) { |
| | | this.avatarImage = { |
| | | file_id: row.file_id, |
| | | file_path: row.file_path |
| | | }; |
| | | } |
| | | |
| | | if (row.logoImage) { |
| | |
| | | |
| | | // 查看详情 |
| | | viewBusiness(row) { |
| | | BusinessApi.businessDetail({ business_card_id: row.business_card_id }).then(res => { |
| | | BusinessApi.businessDetail({ |
| | | business_card_id: row.business_card_id |
| | | }).then(res => { |
| | | if (res.code === 1) { |
| | | this.detailData = res.data; |
| | | this.detailActiveTab = 'basic'; |
| | |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | BusinessApi.businessDelete({ business_card_id: row.business_card_id }).then(res => { |
| | | BusinessApi.businessDelete({ |
| | | business_card_id: row.business_card_id |
| | | }).then(res => { |
| | | if (res.code === 1) { |
| | | this.$message.success('删除成功'); |
| | | this.loadData(); |
| | |
| | | this.$refs.formData.validate((valid) => { |
| | | if (valid) { |
| | | // 处理数组字段 |
| | | const paramsData = { ...this.formData }; |
| | | 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]); |
| | |
| | | .selected-user { |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .img { |
| | | margin-top: 10px; |
| | | } |