gitadmin/eden-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

初始化项目 #1

Open
zengqiyang wants to merge 21 commits from zqy-mst into main
pull from: zqy-mst
merge into: gitadmin:main
Conversation 0 Commits 21 Files Changed 108 +499 -500
16 changed files with 499 additions and 500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7e8237190a - Show all commits

4
pc/.env.development Normal file
View File

@ -0,0 +1,4 @@
NODE_ENV = 'development'
# 开发环境API地址
VUE_APP_BASE_API = http://192.168.137.3:8080/api

4
pc/.env.production Normal file
View File

@ -0,0 +1,4 @@
NODE_ENV = 'production'
# 生产环境API地址
VUE_APP_BASE_API = http://192.168.137.3:8080/api

59
pc/src/api/asset/label.js
View File

@ -1,10 +1,11 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询标签模板列表 // 查询资产标签列表
export function listLabelTemplates() { export function listLabelTemplates(query) {
return request({ return request({
url: '/asset/label/template/list', url: '/asset/label/list',
method: 'get' method: 'get',
params: query
}) })
} }
@ -16,19 +17,19 @@ export function getLabelTemplate(id) {
}) })
} }
// 添加标签模板 // 新增资产标签
export function addLabelTemplate(data) { export function addLabelTemplate(data) {
return request({ return request({
url: '/asset/label/template', url: '/asset/label',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 更新标签模板 // 修改资产标签
export function updateLabelTemplate(data) { export function updateLabelTemplate(id, data) {
return request({ return request({
url: '/asset/label/template', url: '/asset/label/' + id,
method: 'put', method: 'put',
data: data data: data
}) })
@ -52,10 +53,42 @@ export function setDefaultTemplate(id) {
// 获取可用的标签字段 // 获取可用的标签字段
export function getLabelFields() { export function getLabelFields() {
return request({ const fieldData = [
url: '/asset/label/fields', { id: 1, name: '资产名称' },
method: 'get' { id: 2, name: '资产分类' },
}) { id: 3, name: '资产编码' },
{ id: 4, name: '资产位置' },
{ id: 5, name: '品牌' },
{ id: 6, name: '型号' },
{ id: 7, name: '设备序列号' },
{ id: 8, name: '管理员' },
{ id: 9, name: '保养到期时间' },
{ id: 10, name: '保养说明' },
{ id: 11, name: '使用部门' }
];
return Promise.resolve({
code: '000000',
msg: 'success',
data: fieldData
});
}
// 获取字段对应的示例值
export function getFieldSampleValues() {
return {
'1': 'ThinkPad笔记本',
'2': '电脑/笔记本电脑',
'3': 'ASSET-001',
'4': '研发部-A区',
'5': 'Lenovo',
'6': 'X1 Carbon',
'7': 'SN12345678',
'8': '张三',
'9': '2024-12-31',
'10': '每季度保养一次',
'11': '研发部'
};
} }
// 打印标签预览 // 打印标签预览

5
pc/src/api/building.js
View File

@ -84,9 +84,8 @@ export function getBuildingStatistics(id) {
// 查询楼层列表 // 查询楼层列表
export function getFloorList(query) { export function getFloorList(query) {
return request({ return request({
url: '/room/floor/list', url: `/room/floor/list/${query}`,
method: 'get', method: 'get'
params: query
}) })
} }

BIN
pc/src/assets/images/tag_01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
pc/src/assets/images/tag_02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
pc/src/assets/images/tag_03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
pc/src/assets/images/tag_04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
pc/src/utils/request.js
View File

@ -4,7 +4,7 @@ import { Message } from 'element-ui'
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// baseURL: '/api', // 修改为相对路径，使用代理 // baseURL: '/api', // 修改为相对路径，使用代理
baseURL: 'http://192.168.137.3:8080/api', // 接口地址 baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的接口地址
timeout: 10000 // 请求超时时间 timeout: 10000 // 请求超时时间
}) })

538
pc/src/views/asset/labelPage/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card class="box-card"> <el-card class="box-card" v-loading="loading">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>资产标签设置</span> <span>资产标签设置</span>
</div> </div>
@ -14,8 +14,9 @@
:class="['template-item', selectedTemplateIndex === index ? 'selected' : '']" :class="['template-item', selectedTemplateIndex === index ? 'selected' : '']"
@click="selectTemplate(index)"> @click="selectTemplate(index)">
<div class="template-preview"> <div class="template-preview">
<div class="qr-preview"></div> <div class="qr-preview">
<div v-if="index <= 1" class="logo-indicator">支持Logo</div> <img :src="template.img" alt="模板预览" class="qr-image">
</div>
</div> </div>
<div class="template-name">模板{{ index + 1 }}</div> <div class="template-name">模板{{ index + 1 }}</div>
<div class="template-limit">{{ getTemplateLimitText(index) }}</div> <div class="template-limit">{{ getTemplateLimitText(index) }}</div>
@ -31,7 +32,7 @@
<div class="qr-code-container"> <div class="qr-code-container">
<img src="@/assets/images/qrcode.svg" alt="QR Code" class="qr-image" /> <img src="@/assets/images/qrcode.svg" alt="QR Code" class="qr-image" />
<div class="asset-info"> <div class="asset-info">
<div class="asset-icon" v-if="selectedTemplateIndex <= 1"><i class="el-icon-coin"></i> 资产</div> <!-- <div class="asset-icon"><i class="el-icon-coin"></i> 资产</div> -->
<div class="label-fields"> <div class="label-fields">
<div v-for="(field, index) in selectedTemplateFields" :key="index" class="label-field-item"> <div v-for="(field, index) in selectedTemplateFields" :key="index" class="label-field-item">
<span class="field-name">{{ field.name }}{{ index === 1 ? field.name.length > 2 ? '' : '　' : '' <span class="field-name">{{ field.name }}{{ index === 1 ? field.name.length > 2 ? '' : '　' : ''
@ -41,9 +42,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="label-footer">预览效果：模板{{ selectedTemplateIndex + 1 }}</div> <div class="label-footer">预览效果：模板{{ selectedTemplateIndex + 1 }}</div>
</div> </div>
</div> </div>
@ -66,21 +65,8 @@
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div>
<div class="section-title" v-if="selectedTemplateIndex <= 1">设置Logo</div>
<!-- Logo上传组件，仅模板1和2显示 --> <!-- <div class="section-title">打印设置</div>
<div v-if="selectedTemplateIndex <= 1" class="setting-group logo-upload-group">
<div class="setting-content">
<el-upload class="logo-uploader" action="" :http-request="handleLogoUpload" :show-file-list="false"
:before-upload="beforeLogoUpload">
<img v-if="logoUrl" :src="logoUrl" class="logo-image">
<i v-else class="el-icon-plus logo-uploader-icon"></i>
</el-upload>
<div class="upload-tip">建议上传尺寸为720*280像素且不大于2M的jpg或png图片</div>
</div>
</div>
<div class="section-title">打印设置</div>
<div class="settings-section"> <div class="settings-section">
<div class="setting-group"> <div class="setting-group">
@ -106,14 +92,11 @@
<el-input v-model="labelHeight" type="number" placeholder="请输入高度"></el-input> <el-input v-model="labelHeight" type="number" placeholder="请输入高度"></el-input>
</div> </div>
</div> </div>
</div> -->
</div>
<div class="button-group"> <div class="button-group">
<el-button type="primary" @click="saveTemplate">保存</el-button> <el-button type="primary" @click="saveTemplate">保存</el-button>
<el-button @click="resetTemplate">重置</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -123,8 +106,8 @@
<script> <script>
import { import {
listLabelTemplates, getLabelTemplate, addLabelTemplate, updateLabelTemplate, listLabelTemplates, addLabelTemplate, updateLabelTemplate,
deleteLabelTemplate, setDefaultTemplate, getLabelFields, previewLabel getLabelFields, getFieldSampleValues
} from '@/api/asset/label' } from '@/api/asset/label'
export default { export default {
@ -133,83 +116,115 @@ export default {
return { return {
// 模板列表 // 模板列表
templates: [ templates: [
{ id: 1, name: '模板1', default: true, maxFields: 1, supportLogo: true }, { id: 1, name: '模板1', maxFields: 1, img: require('@/assets/images/tag_01.png') },
{ id: 2, name: '模板2', default: false, maxFields: 2, supportLogo: true }, { id: 2, name: '模板2', maxFields: 2, img: require('@/assets/images/tag_02.png') },
{ id: 3, name: '模板3', default: false, maxFields: 3, supportLogo: false }, { id: 3, name: '模板3', maxFields: 3, img: require('@/assets/images/tag_03.png') },
{ id: 4, name: '模板4', default: false, maxFields: 4, supportLogo: false } { id: 4, name: '模板4', maxFields: 4, img: require('@/assets/images/tag_04.png') }
], ],
// 当前选中的模板索引 // 当前选中的模板索引
selectedTemplateIndex: 0, selectedTemplateIndex: 0,
// 可用的字段列表 // 可用的字段列表
availableFields: [ availableFields: [],
{ id: 'assetNo', name: '资产编号' },
{ id: 'deviceNo', name: '设备序列号' },
{ id: 'assetName', name: '资产名称' },
{ id: 'brand', name: '品牌' },
{ id: 'model', name: '规格型号' },
{ id: 'manager', name: '管理员' },
{ id: 'location', name: '位置' },
{ id: 'purchaseTime', name: '购买时间' }
],
// 当前选中的字段 // 当前选中的字段
selectedFields: ['assetNo'], selectedFields: [],
// 当前模板中的字段及预览值 // 当前模板中的字段及预览值
selectedTemplateFields: [ selectedTemplateFields: [],
{ id: 'assetNo', name: '资产编号', value: 'ASSET-001' }
],
// 标签设置 // 标签设置
paperType: 1, paperType: 3,
labelWidth: 80, labelWidth: 50,
labelHeight: 40, labelHeight: 30,
// Logo URL
logoUrl: '',
// 字段数量超出标志 // 字段数量超出标志
isFieldsLimitExceeded: false, isFieldsLimitExceeded: false,
// 加载状态 // 加载状态
loading: false loading: false,
// 资产标签记录ID
labelId: null
} }
}, },
created() { created() {
this.getTemplateList() // 先获取可用字段选项，再获取标签设置
this.getFieldOptions() this.getFieldOptions().then(() => {
this.getLabelSettings();
});
}, },
methods: { methods: {
// 获取模板列表 // 获取标签设置
async getTemplateList() { async getLabelSettings() {
try { try {
this.loading = true this.loading = true;
// 实际应用中应从API获取 const res = await listLabelTemplates();
// const res = await listLabelTemplates() if (res.code === '000000') {
// this.templates = res.data || [] if (res.data) {
this.loading = false const labelData = res.data;
this.labelId = labelData.id;
// 设置模板类型
const templateType = parseInt(labelData.templateType || '1');
this.selectedTemplateIndex = templateType - 1;
// 设置选中的字段
if (labelData.labelItems) {
this.selectedFields = labelData.labelItems.split(',').map(item => parseInt(item.trim()));
} else {
this.selectedFields = [1]; // 默认选择资产名称
}
// 设置纸张类型和尺寸
this.paperType = parseInt(labelData.paperType || '3');
if (this.paperType === 1) {
this.labelWidth = parseInt(labelData.labelWidth || '50');
this.labelHeight = parseInt(labelData.labelHeight || '30');
}
this.updateTemplateFields();
console.log("从接口获取的数据: ", {
id: this.labelId,
templateType,
selectedFields: this.selectedFields,
paperType: this.paperType,
labelWidth: this.labelWidth,
labelHeight: this.labelHeight
});
} else {
// 如果没有记录，使用默认设置
this.selectTemplate(0);
}
} else {
this.$message.error(res.msg || '获取标签设置失败');
// 使用默认设置
this.selectTemplate(0);
}
this.loading = false;
} catch (error) { } catch (error) {
console.error('获取模板列表失败', error) console.error('获取标签设置失败', error);
this.loading = false this.loading = false;
this.$message.error('获取标签设置失败');
// 使用默认设置
this.selectTemplate(0);
} }
}, },
// 获取可用字段选项 // 获取可用字段选项
async getFieldOptions() { async getFieldOptions() {
try { try {
// 实际应用中应从API获取 const res = await getLabelFields();
// const res = await getLabelFields() if (res.code === '000000') {
// this.availableFields = res.data || [] this.availableFields = res.data || [];
console.log("获取到的字段选项: ", this.availableFields);
} else {
this.$message.error(res.msg || '获取字段选项失败');
}
} catch (error) { } catch (error) {
console.error('获取字段选项失败', error) console.error('获取字段选项失败', error);
this.$message.error('获取字段选项失败');
} }
}, },
// 获取模板限制文字说明 // 获取模板限制文字说明
getTemplateLimitText(index) { getTemplateLimitText(index) {
if (index === 0) { const maxFields = this.templates[index].maxFields;
return '支持1个字段'; return maxFields === 1 ? '支持1个字段' : `支持最多${maxFields}个字段`;
} else if (index === 1) {
return '支持最多2个字段';
} else if (index === 2) {
return '支持最多3个字段';
} else {
return '支持最多4个字段';
}
}, },
// 获取当前模板最大字段数 // 获取当前模板最大字段数
@ -219,50 +234,48 @@ export default {
// 选择模板 // 选择模板
selectTemplate(index) { selectTemplate(index) {
this.selectedTemplateIndex = index this.selectedTemplateIndex = index;
// 清空logo（如果切换到不支持logo的模板） // 根据模板类型限制字段数
if (index > 1) { const maxFields = this.templates[index].maxFields;
this.logoUrl = ''; if (this.selectedFields.length > maxFields) {
this.selectedFields = this.selectedFields.slice(0, maxFields);
} else if (this.selectedFields.length === 0) {
// 如果没有选择字段，默认选择第一个
this.selectedFields = [1];
} }
// 模拟选择模板 // 默认纸张类型和尺寸
if (index === 0) { if (index === 0) {
this.selectedFields = this.selectedFields.slice(0, 1); // 限制为1个字段
this.paperType = 1; this.paperType = 1;
this.labelWidth = 80; this.labelWidth = 50;
this.labelHeight = 40;
} else if (index === 1) {
this.selectedFields = this.selectedFields.slice(0, 2); // 限制为2个字段
this.paperType = 2;
this.labelWidth = 100;
this.labelHeight = 50;
} else if (index === 2) {
this.selectedFields = this.selectedFields.slice(0, 3); // 限制为3个字段
this.paperType = 2;
this.labelWidth = 90;
this.labelHeight = 60;
} else {
this.selectedFields = this.selectedFields.slice(0, 4); // 限制为4个字段
this.paperType = 3;
this.labelWidth = 70;
this.labelHeight = 30; this.labelHeight = 30;
} else if (index === 1) {
this.paperType = 1;
this.labelWidth = 60;
this.labelHeight = 40;
} else if (index === 2) {
this.paperType = 2;
} else {
this.paperType = 3;
} }
this.updateTemplateFields() this.updateTemplateFields();
this.checkFieldsLimit() this.checkFieldsLimit();
}, },
// 更新模板字段 // 更新模板字段
updateTemplateFields() { updateTemplateFields() {
const sampleValues = getFieldSampleValues();
this.selectedTemplateFields = this.selectedFields.map(fieldId => { this.selectedTemplateFields = this.selectedFields.map(fieldId => {
const field = this.availableFields.find(f => f.id === fieldId) const field = this.availableFields.find(f => f.id === fieldId);
return { return {
id: fieldId, id: fieldId,
name: field ? field.name : '', name: field ? field.name : '',
value: this.getFieldSampleValue(fieldId) value: sampleValues[fieldId] || 'XXXXXXXXXX'
} };
}) });
}, },
// 检查字段数量限制 // 检查字段数量限制
@ -282,33 +295,12 @@ export default {
} }
}, },
// 获取字段示例值
getFieldSampleValue(fieldId) {
const sampleValues = {
'assetNo': 'ASSET-001',
'deviceNo': 'SN12345678',
'assetName': '办公电脑',
'brand': 'Dell',
'model': 'Latitude 7400',
'manager': '张三',
'location': '研发部-A区',
'purchaseTime': '2023-01-15'
}
return sampleValues[fieldId] || ''
},
// 纸张类型变更 // 纸张类型变更
handlePaperTypeChange(type) { handlePaperTypeChange(type) {
// 根据纸张类型设置默认尺寸 // 根据纸张类型设置默认尺寸
if (type === 1) { if (type === 1) {
this.labelWidth = 80 this.labelWidth = 50;
this.labelHeight = 40 this.labelHeight = 30;
} else if (type === 2) {
this.labelWidth = 100
this.labelHeight = 50
} else if (type === 3) {
this.labelWidth = 70
this.labelHeight = 30
} }
}, },
@ -318,103 +310,56 @@ export default {
this.updateTemplateFields(); this.updateTemplateFields();
}, },
// Logo上传前校验
beforeLogoUpload(file) {
const isImageType = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isImageType) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false;
}
return true;
},
// 处理Logo上传
handleLogoUpload(options) {
const file = options.file;
// 实际使用时应该调用上传API
// 这里使用FileReader模拟文件上传
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.logoUrl = reader.result;
};
},
// 保存模板 // 保存模板
saveTemplate() { saveTemplate() {
if (this.isFieldsLimitExceeded) { if (this.isFieldsLimitExceeded) {
this.$message.error(`字段数量超出限制，当前模板最多支持${this.getMaxFieldsCount()}个字段`); this.$message.error(`字段数量超出限制，当前模板最多支持${this.getMaxFieldsCount()}个字段`);
return; return;
} }
const templateData = { if (this.selectedFields.length === 0) {
id: this.templates[this.selectedTemplateIndex].id, this.$message.error('请至少选择一个标签字段');
name: this.templates[this.selectedTemplateIndex].name, return;
paperType: this.paperType, }
width: this.labelWidth,
height: this.labelHeight, if (this.paperType === 1 && (!this.labelWidth || !this.labelHeight)) {
fields: this.selectedFields, this.$message.error('使用标签专用纸时，请输入标签宽度和高度');
logoUrl: this.logoUrl return;
} }
// 实际应用中应该调用API保存 const templateData = {
// if (templateData.id) { templateType: String(this.selectedTemplateIndex + 1),
// updateLabelTemplate(templateData).then(res => { labelItems: this.selectedFields.join(','),
// if (res.code === '000000') { paperType: String(this.paperType),
// this.$message.success('模板保存成功') labelWidth: this.paperType === 1 ? String(this.labelWidth) : '',
// } else { labelHeight: this.paperType === 1 ? String(this.labelHeight) : ''
// this.$message.error(res.msg || '保存失败') };
// }
// })
// } else {
// addLabelTemplate(templateData).then(res => {
// if (res.code === '000000') {
// this.$message.success('模板创建成功')
// } else {
// this.$message.error(res.msg || '创建失败')
// }
// })
// }
this.$message.success('模板保存成功') console.log('保存的数据: ', templateData);
this.loading = true;
const savePromise = addLabelTemplate(templateData);
savePromise.then(res => {
this.loading = false;
if (res.code === '000000') {
this.$message.success('标签设置保存成功');
// 重新获取标签设置
this.getLabelSettings();
} else {
this.$message.error(res.msg || '保存失败');
}
}).catch(error => {
this.loading = false;
console.error('保存标签设置失败', error);
this.$message.error('保存标签设置失败');
});
}, },
// 重置模板 // 重置模板
resetTemplate() { resetTemplate() {
this.selectTemplate(this.selectedTemplateIndex) this.getLabelSettings();
this.logoUrl = '' this.$message.info('已重置为原始设置');
this.$message.info('已重置为原始设置')
},
// 打印标签
printLabel() {
if (this.isFieldsLimitExceeded) {
this.$message.error(`字段数量超出限制，当前模板最多支持${this.getMaxFieldsCount()}个字段`);
return;
}
this.$message.success('打印请求已发送')
// 实际应用中应该调用打印API
// const printData = {
// templateId: this.templates[this.selectedTemplateIndex].id,
// assetIds: [], // 这里需要选择具体的资产ID
// logoUrl: this.logoUrl
// }
// printLabel(printData).then(res => {
// if (res.code === '000000') {
// this.$message.success('打印任务已提交')
// } else {
// this.$message.error(res.msg || '打印失败')
// }
// })
} }
} }
} }
@ -470,60 +415,12 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
.qr-preview {
width: 60px;
height: 60px;
background-color: #fff;
border: 1px solid #ddd;
position: relative;
&:before,
&:after {
content: '';
position: absolute;
width: 16px;
height: 16px;
background-color: #000;
}
&:before {
top: 8px;
left: 8px;
}
&:after {
top: 8px;
right: 8px;
}
&::before {
content: '';
position: absolute;
bottom: 8px;
left: 8px;
width: 16px;
height: 16px;
background-color: #000;
}
}
.logo-indicator {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
background-color: #409EFF;
color: white;
font-size: 10px;
padding: 1px 6px;
border-radius: 8px;
}
} }
.template-name { .template-name {
font-size: 14px; font-size: 14px;
color: #606266; font-weight: 500;
margin-bottom: 3px; margin-bottom: 4px;
} }
.template-limit { .template-limit {
@ -592,7 +489,7 @@ export default {
.label-fields { .label-fields {
margin-top: 5px; margin-top: 5px;
.label-field-item { .label-field-item {
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
@ -621,9 +518,38 @@ export default {
.edit-area { .edit-area {
width: 300px; width: 300px;
border-left: 1px solid #ebeef5;
padding-left: 20px; padding-left: 20px;
} }
.fields-section {
margin-bottom: 20px;
.limit-warning {
color: #E6A23C;
font-size: 13px;
margin-bottom: 10px;
display: flex;
align-items: center;
i {
margin-right: 5px;
}
}
.field-selection {
display: flex;
flex-wrap: wrap;
::v-deep .el-checkbox {
margin-right: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
}
}
.settings-section { .settings-section {
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -632,87 +558,65 @@ export default {
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
}
.setting-label { .setting-label {
width: 110px; width: 120px;
font-size: 14px; color: #606266;
color: #606266; }
}
.setting-content { .setting-content {
flex: 1; flex: 1;
}
} }
.logo-upload-group { .logo-upload-group {
align-items: flex-start;
.logo-uploader { .logo-uploader {
.el-upload { width: 120px;
border: 1px dashed #d9d9d9; height: 120px;
border-radius: 6px; border: 1px dashed #d9d9d9;
cursor: pointer; border-radius: 6px;
position: relative; display: flex;
overflow: hidden; justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden;
margin-bottom: 10px;
&:hover { &:hover {
border-color: #409EFF; border-color: #409EFF;
}
} }
.logo-uploader-icon { .logo-uploader-icon {
font-size: 28px; font-size: 28px;
color: #8c939d; color: #8c939d;
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
} }
.logo-image { .logo-image {
width: 120px; width: 100%;
height: 60px; height: 100%;
display: block;
object-fit: contain; object-fit: contain;
} }
} }
.upload-tip { .upload-tip {
margin-top: 8px;
font-size: 12px; font-size: 12px;
color: #909399; color: #909399;
line-height: 1.4; line-height: 1.5;
}
}
.fields-section {
margin-bottom: 20px;
.limit-warning {
margin-top: 5px;
font-size: 12px;
color: #E6A23C;
margin-bottom: 5px;
i {
margin-right: 4px;
}
}
.field-selection {
margin-top: 10px;
.el-checkbox-group {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
} }
} }
.button-group { .button-group {
display: flex; text-align: center;
justify-content: end;
margin-top: 30px; margin-top: 30px;
} }
.qr-preview{
width: 120px;
object-fit: contain;
&>img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
</style> </style>

4
pc/src/views/project/building/index.vue
View File

@ -133,9 +133,9 @@
:min-width="col.width" :min-width="col.width"
align="center" align="center"
/> />
<el-table-column label="操作" width="250" fixed="right"> <el-table-column label="操作" width="200" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button> <!-- <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button> -->
<el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="text" @click="handleFloorManage(scope.row)">楼层管理</el-button> <el-button size="mini" type="text" @click="handleFloorManage(scope.row)">楼层管理</el-button>
<el-button size="mini" type="text" style="color: #F56C6C" @click="handleDelete(scope.row)">删除</el-button> <el-button size="mini" type="text" style="color: #F56C6C" @click="handleDelete(scope.row)">删除</el-button>

8
pc/src/views/project/room/components/DetailView.vue
View File

@ -178,7 +178,9 @@ export default {
const unitMap = { const unitMap = {
'1': '元/㎡/天', '1': '元/㎡/天',
'2': '元/㎡/月', '2': '元/㎡/月',
'3': '元/月' '3': '元/月',
'4': '元/天',
'5': '元/年'
} }
return unitMap[this.roomDetail.priceUnit] || '' return unitMap[this.roomDetail.priceUnit] || ''
}, },
@ -186,7 +188,9 @@ export default {
const unitMap = { const unitMap = {
'1': '元/㎡/天', '1': '元/㎡/天',
'2': '元/㎡/月', '2': '元/㎡/月',
'3': '元/月' '3': '元/月',
'4': '元/天',
'5': '元/年'
} }
return unitMap[this.roomDetail.floorPriceUnit] || '' return unitMap[this.roomDetail.floorPriceUnit] || ''
}, },

341
pc/src/views/project/room/components/RoomForm.vue
View File

@ -7,17 +7,18 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="项目" prop="projectId"> <el-form-item label="项目" prop="projectId">
<el-select v-model="form.projectId" placeholder="请选择项目" style="width: 100%" <el-select v-model="form.projectId" placeholder="请选择项目" style="width: 100%" :disabled="isEdit"
:disabled="isEdit" @change="handleProjectChange"> @change="handleProjectChange">
<el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" /> <el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="楼宇" prop="buildingId"> <el-form-item label="楼宇" prop="buildingId">
<el-select v-model="form.buildingId" placeholder="请选择楼宇" style="width: 100%" <el-select v-model="form.buildingId" placeholder="请选择楼宇" style="width: 100%" :disabled="isEdit"
:disabled="isEdit" @change="handleBuildingChange"> @change="handleBuildingChange">
<el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName" :value="item.id" /> <el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName"
:value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -29,7 +30,7 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="房号" prop="roomNumber"> <el-form-item label="房号" prop="roomNumber">
@ -47,7 +48,7 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="建筑面积" prop="buildingArea"> <el-form-item label="建筑面积" prop="buildingArea">
@ -71,7 +72,7 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="套内面积" prop="innerArea"> <el-form-item label="套内面积" prop="innerArea">
@ -94,12 +95,12 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="绑定业主" prop="ownerId"> <el-form-item label="绑定业主" prop="ownerId">
<el-select v-model="form.ownerId" placeholder="请选择业主" filterable remote reserve-keyword <el-select v-model="form.ownerId" placeholder="请选择业主" filterable remote reserve-keyword
:remote-method="remoteSearchOwner" :loading="ownerLoading" style="width: 100%"> :remote-method="remoteSearchOwner" :loading="ownerLoading" style="width: 100%">
<el-option v-for="item in ownerOptions" :key="item.id" :label="item.ownerName" :value="item.id"> <el-option v-for="item in ownerOptions" :key="item.id" :label="item.ownerName" :value="item.id">
<span style="float: left">{{ item.ownerName }}</span> <span style="float: left">{{ item.ownerName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span> <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
@ -107,17 +108,18 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<!-- 招商信息 Tab --> <!-- 招商信息 Tab -->
<el-tab-pane label="招商信息" name="merchant"> <el-tab-pane label="招商信息" name="merchant">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="产权性质" prop="propertyNature"> <el-form-item label="产权性质" prop="propertyNature">
<el-select v-model="form.propertyNature" placeholder="请选择产权性质" style="width: 100%" @change="handleInputChange"> <el-select v-model="form.propertyNature" placeholder="请选择产权性质" style="width: 100%"
@change="handleInputChange">
<el-option label="自持" value="1" /> <el-option label="自持" value="1" />
<el-option label="承租" value="2" /> <el-option label="承租" value="2" />
<el-option label="自持+承租" value="3" /> <el-option label="自持+承租" value="3" />
@ -126,7 +128,8 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="租赁状态" prop="rentalStatus"> <el-form-item label="租赁状态" prop="rentalStatus">
<el-select v-model="form.rentalStatus" placeholder="请选择租赁状态" style="width: 100%" disabled @change="handleInputChange"> <el-select v-model="form.rentalStatus" placeholder="请选择租赁状态" style="width: 100%" disabled
@change="handleInputChange">
<el-option label="待租" value="1" /> <el-option label="待租" value="1" />
<el-option label="已租" value="2" /> <el-option label="已租" value="2" />
</el-select> </el-select>
@ -134,7 +137,8 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="房源状态" prop="roomStatus"> <el-form-item label="房源状态" prop="roomStatus">
<el-select v-model="form.roomStatus" placeholder="请选择房源状态" style="width: 100%" @change="handleInputChange"> <el-select v-model="form.roomStatus" placeholder="请选择房源状态" style="width: 100%"
@change="handleInputChange">
<el-option label="公开" value="1" /> <el-option label="公开" value="1" />
<el-option label="关闭" value="2" /> <el-option label="关闭" value="2" />
<el-option label="私密" value="3" /> <el-option label="私密" value="3" />
@ -143,7 +147,8 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="房源类型" prop="roomType"> <el-form-item label="房源类型" prop="roomType">
<el-select v-model="form.roomType" placeholder="请选择房源类型" style="width: 100%" @change="handleInputChange"> <el-select v-model="form.roomType" placeholder="请选择房源类型" style="width: 100%"
@change="handleInputChange">
<el-option label="办公" value="1" /> <el-option label="办公" value="1" />
<el-option label="商业" value="2" /> <el-option label="商业" value="2" />
<el-option label="仓储" value="3" /> <el-option label="仓储" value="3" />
@ -167,21 +172,20 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> </el-row>
<el-form-item label="荷载值" prop="loadValue"> <el-row :gutter="20">
<el-input v-model="form.loadValue" placeholder="请输入荷载值" @input="handleInputChange" />
</el-form-item>
</el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="房源标签" prop="tagIds"> <el-form-item label="房源标签" prop="tagIds">
<el-select v-model="form.tagIds" placeholder="请选择房源标签" multiple style="width: 100%" @change="handleInputChange"> <el-select v-model="form.tagIds" placeholder="请选择房源标签" multiple style="width: 100%"
@change="handleInputChange">
<el-option v-for="tag in tagOptions" :key="tag.id" :label="tag.tagName" :value="tag.id" /> <el-option v-for="tag in tagOptions" :key="tag.id" :label="tag.tagName" :value="tag.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="招商状态" prop="businessStatus"> <el-form-item label="招商状态" prop="businessStatus">
<el-select v-model="form.businessStatus" placeholder="请选择招商状态" style="width: 100%" @change="handleInputChange"> <el-select v-model="form.businessStatus" placeholder="请选择招商状态" style="width: 100%"
@change="handleInputChange">
<el-option label="招商" value="1" /> <el-option label="招商" value="1" />
<el-option label="不招商" value="2" /> <el-option label="不招商" value="2" />
</el-select> </el-select>
@ -189,65 +193,83 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="可租日期" prop="availableDate"> <el-form-item label="可租日期" prop="availableDate">
<el-date-picker v-model="form.availableDate" type="date" placeholder="请选择可租日期" style="width: 100%" @change="handleInputChange" /> <el-date-picker v-model="form.availableDate" type="date" placeholder="请选择可租日期" style="width: 100%"
@change="handleInputChange" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> </el-row>
<el-form-item label="装修情况" prop="decorationStatus"> <el-row :gutter="20">
<el-select v-model="form.decorationStatus" placeholder="请选择装修情况" style="width: 100%" @change="handleInputChange"> <el-col :span="8">
<el-option label="精装" value="1" /> <el-form-item label="装修情况" prop="decorationStatus">
<el-option label="简装" value="2" /> <el-select v-model="form.decorationStatus" placeholder="请选择装修情况" style="width: 100%"
<el-option label="毛坯" value="3" /> @change="handleInputChange">
<el-option label="标准交付" value="4" /> <el-option label="精装" value="1" />
<el-option label="豪装" value="5" /> <el-option label="简装" value="2" />
<el-option label="毛坯" value="3" />
<el-option label="标准交付" value="4" />
<el-option label="豪装" value="5" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报价" prop="price">
<el-input v-model="form.price" placeholder="请输入报价" @input="handleInputChange">
<el-select slot="append" v-model="form.priceUnit" style="width: 100px" @change="handleInputChange">
<el-option label="元/㎡/天" value="1" />
<el-option label="元/㎡/月" value="2" />
<el-option label="元/月" value="3" />
<el-option label="元/天" value="4" />
<el-option label="元/年" value="5" />
</el-select> </el-select>
</el-form-item> </el-input>
</el-col> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报价" prop="price"> <el-col :span="8">
<el-input v-model="form.price" placeholder="请输入报价" @input="handleInputChange" /> <el-form-item label="底价" prop="floorPrice">
</el-form-item> <el-input v-model="form.floorPrice" placeholder="请输入底价" @input="handleInputChange">
</el-col> <el-select slot="append" v-model="form.floorPriceUnit" style="width: 100px" @change="handleInputChange">
<el-option label="元/㎡/天" value="1" />
<el-col :span="8"> <el-option label="元/㎡/月" value="2" />
<el-form-item label="底价" prop="floorPrice"> <el-option label="元/月" value="3" />
<el-input v-model="form.floorPrice" placeholder="请输入底价" @input="handleInputChange" /> <el-option label="元/天" value="4" />
</el-form-item> <el-option label="元/年" value="5" />
</el-col> </el-select>
</el-input>
</el-form-item>
<el-col :span="8"> </el-col>
<el-form-item label="房源招商编号" prop="businessNumber"> <el-col :span="8">
<el-input v-model="form.businessNumber" placeholder="请输入房源招商编号" @input="handleInputChange" /> <el-form-item label="荷载值" prop="loadValue">
</el-form-item> <el-input v-model="form.loadValue" placeholder="请输入荷载值" @input="handleInputChange" />
</el-col> </el-form-item>
<el-col :span="8"> </el-col>
<el-form-item label="招商条件" prop="businessCondition">
<el-input v-model="form.businessCondition" placeholder="请输入招商条件" @input="handleInputChange" /> <el-col :span="8">
</el-form-item> <el-form-item label="房源招商编号" prop="businessNumber">
</el-col> <el-input v-model="form.businessNumber" placeholder="请输入房源招商编号" @input="handleInputChange" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="招商条件" prop="businessCondition">
<el-input v-model="form.businessCondition" placeholder="请输入招商条件" @input="handleInputChange" />
</el-form-item>
</el-col>
</el-row> </el-row>
<el-form-item label="房源图片" prop="imageUrls"> <el-form-item label="房源图片" prop="imageUrls">
<el-upload <el-upload :action="uploadUrl" list-type="picture-card" :headers="uploadHeaders" :file-list="imageList"
:action="uploadUrl" :on-preview="handlePictureCardPreview" :on-success="handleImageSuccess" :on-remove="handleImageRemove"
list-type="picture-card" multiple>
:headers="uploadHeaders" <i class="el-icon-plus"></i>
:file-list="imageList" </el-upload>
:on-preview="handlePictureCardPreview" <el-dialog :visible.sync="dialogVisible">
:on-success="handleImageSuccess" <img width="100%" :src="dialogImageUrl" alt="">
:on-remove="handleImageRemove" </el-dialog>
multiple> </el-form-item>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
</el-tab-pane> </el-tab-pane>
<!-- 拓展信息 Tab --> <!-- 拓展信息 Tab -->
<el-tab-pane label="拓展信息" name="extension"> <el-tab-pane label="拓展信息" name="extension">
<el-row :gutter="20"> <el-row :gutter="20">
@ -277,34 +299,31 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="工位数量下限" prop="workstationMin"> <el-form-item label="工位数量下限" prop="workstationMin">
<el-input-number v-model="form.workstationMin" :min="0" :controls="false" placeholder="请输入最少工位数量" @change="handleInputChange" /> <el-input-number v-model="form.workstationMin" :min="0" :controls="false" placeholder="请输入最少工位数量"
@change="handleInputChange" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="工位数量上限" prop="workstationMax"> <el-form-item label="工位数量上限" prop="workstationMax">
<el-input-number v-model="form.workstationMax" :min="0" :controls="false" placeholder="请输入最多工位数量" @change="handleInputChange" /> <el-input-number v-model="form.workstationMax" :min="0" :controls="false" placeholder="请输入最多工位数量"
@change="handleInputChange" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="户型图说明" prop="floorPlanDesc"> <el-form-item label="户型图说明" prop="floorPlanDesc">
<el-input v-model="form.floorPlanDesc" type="textarea" :rows="3" placeholder="请输入户型图说明" @input="handleInputChange" /> <el-input v-model="form.floorPlanDesc" type="textarea" :rows="3" placeholder="请输入户型图说明"
@input="handleInputChange" />
</el-form-item> </el-form-item>
<el-form-item label="户型图" prop="floorPlanImageUrls"> <el-form-item label="户型图" prop="floorPlanImageUrls">
<el-upload <el-upload :action="uploadUrl" list-type="picture-card" :headers="uploadHeaders"
:action="uploadUrl" :file-list="floorPlanImageList" :on-preview="handlePictureCardPreview"
list-type="picture-card" :on-success="handleFloorPlanImageSuccess" :on-remove="handleFloorPlanImageRemove" multiple>
:headers="uploadHeaders"
:file-list="floorPlanImageList"
:on-preview="handlePictureCardPreview"
:on-success="handleFloorPlanImageSuccess"
:on-remove="handleFloorPlanImageRemove"
multiple>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
@ -313,7 +332,7 @@
</el-form-item> </el-form-item>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="form-footer"> <div class="form-footer">
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
@ -325,7 +344,7 @@
<script> <script>
import { getRoom, addRoom, updateRoom, listProjects, listBuildings, listFloors, listRoomTags, listOwners } from '@/api/room' import { getRoom, addRoom, updateRoom, listProjects, listBuildings, listFloors, listRoomTags, listOwners } from '@/api/room'
import { getProjectList } from '@/api/project' import { getProjectList } from '@/api/project'
import { getBuildingList,getFloorList } from '@/api/building' import { getBuildingList, getFloorList,getFloorListByBuilding} from '@/api/building'
export default { export default {
name: 'RoomForm', name: 'RoomForm',
props: { props: {
@ -365,9 +384,9 @@ export default {
// 户型图列表 // 户型图列表
floorPlanImageList: [], floorPlanImageList: [],
// 上传URL // 上传URL
uploadUrl: process.env.VUE_APP_BASE_API + '/park/common/upload', uploadUrl: process.env.VUE_APP_BASE_API + '/room/upload',
// 上传请求头 // 上传请求头
uploadHeaders: { }, uploadHeaders: {},
// 表单对象 // 表单对象
form: { form: {
projectId: undefined, projectId: undefined,
@ -445,7 +464,7 @@ export default {
getRoom(this.roomId).then(response => { getRoom(this.roomId).then(response => {
if (response.code === '000000') { if (response.code === '000000') {
this.form = { ...response.data } this.form = { ...response.data }
// 处理业务信息字段 // 处理业务信息字段
if (response.data.businessInfo) { if (response.data.businessInfo) {
this.form.rentalStatus = response.data.businessInfo.rentalStatus this.form.rentalStatus = response.data.businessInfo.rentalStatus
@ -459,7 +478,7 @@ export default {
this.form.businessNumber = response.data.businessInfo.businessNumber this.form.businessNumber = response.data.businessInfo.businessNumber
this.form.businessCondition = response.data.businessInfo.businessCondition this.form.businessCondition = response.data.businessInfo.businessCondition
} }
// 处理扩展信息字段 // 处理扩展信息字段
if (response.data.extendInfo) { if (response.data.extendInfo) {
this.form.roomRecordNumber = response.data.extendInfo.roomRecordNumber this.form.roomRecordNumber = response.data.extendInfo.roomRecordNumber
@ -475,7 +494,7 @@ export default {
this.form.tagIds = response.data.extendInfo.tags.split(',') this.form.tagIds = response.data.extendInfo.tags.split(',')
} }
} }
// 处理图片数据 // 处理图片数据
this.form.imageUrls = [] this.form.imageUrls = []
if (response.data.roomImages && Array.isArray(response.data.roomImages) && response.data.roomImages.length > 0) { if (response.data.roomImages && Array.isArray(response.data.roomImages) && response.data.roomImages.length > 0) {
@ -484,7 +503,7 @@ export default {
return { name: '图片' + (index + 1), url: item.imageUrl } return { name: '图片' + (index + 1), url: item.imageUrl }
}) })
} }
// 处理户型图数据 // 处理户型图数据
this.form.floorPlanImageUrls = [] this.form.floorPlanImageUrls = []
if (response.data.floorPlanImages && Array.isArray(response.data.floorPlanImages) && response.data.floorPlanImages.length > 0) { if (response.data.floorPlanImages && Array.isArray(response.data.floorPlanImages) && response.data.floorPlanImages.length > 0) {
@ -493,7 +512,7 @@ export default {
return { name: '户型图' + (index + 1), url: item.imageUrl } return { name: '户型图' + (index + 1), url: item.imageUrl }
}) })
} }
// 加载关联数据 // 加载关联数据
this.getProjectOptions().then(() => { this.getProjectOptions().then(() => {
if (this.form.projectId) { if (this.form.projectId) {
@ -504,7 +523,7 @@ export default {
}) })
} }
}) })
// 如果有业主ID，获取业主详情 // 如果有业主ID，获取业主详情
if (this.form.ownerId) { if (this.form.ownerId) {
this.getOwnerDetail(this.form.ownerId) this.getOwnerDetail(this.form.ownerId)
@ -517,7 +536,7 @@ export default {
this.loading = false this.loading = false
}) })
}, },
/** 获取项目选项 */ /** 获取项目选项 */
getProjectOptions() { getProjectOptions() {
getProjectList({ pageSize: 100 }).then(res => { getProjectList({ pageSize: 100 }).then(res => {
@ -528,17 +547,17 @@ export default {
} }
}) })
}, },
/** 获取楼宇选项 */ /** 获取楼宇选项 */
getBuildingOptions(projectId) { getBuildingOptions(projectId) {
if(!projectId){ if (!projectId) {
this.buildingOptions = [] this.buildingOptions = []
this.form.buildingId = undefined this.form.buildingId = undefined
this.floorOptions = [] this.floorOptions = []
this.form.floorId = undefined this.form.floorId = undefined
return return
} }
const params = { const params = {
projectId: projectId, projectId: projectId,
pageNum: 1, pageNum: 1,
pageSize: 100, pageSize: 100,
@ -551,14 +570,14 @@ export default {
} }
}) })
}, },
/** 获取楼层选项 */ /** 获取楼层选项 */
getFloorOptions(buildingId) { getFloorOptions(buildingId) {
if(!buildingId){ if (!buildingId) {
this.floorOptions = [] this.floorOptions = []
this.form.floorId = undefined this.form.floorId = undefined
return return
} }
return listFloors(buildingId).then(response => { return listFloors(buildingId).then(response => {
if (response.code === '000000') { if (response.code === '000000') {
this.floorOptions = response.data || [] this.floorOptions = response.data || []
@ -567,7 +586,7 @@ export default {
} }
}) })
}, },
/** 获取房源标签选项 */ /** 获取房源标签选项 */
getTagOptions() { getTagOptions() {
listRoomTags().then(response => { listRoomTags().then(response => {
@ -578,7 +597,7 @@ export default {
} }
}) })
}, },
/** 获取业主详情 */ /** 获取业主详情 */
getOwnerDetail(ownerId) { getOwnerDetail(ownerId) {
listOwners({ id: ownerId }).then(response => { listOwners({ id: ownerId }).then(response => {
@ -587,7 +606,7 @@ export default {
} }
}) })
}, },
/** 远程搜索业主 */ /** 远程搜索业主 */
remoteSearchOwner(query) { remoteSearchOwner(query) {
if (query) { if (query) {
@ -606,7 +625,7 @@ export default {
this.ownerOptions = [] this.ownerOptions = []
} }
}, },
/** 项目选择改变事件 */ /** 项目选择改变事件 */
handleProjectChange(projectId) { handleProjectChange(projectId) {
// 清空楼宇和楼层的选择 // 清空楼宇和楼层的选择
@ -614,36 +633,36 @@ export default {
this.form.floorId = undefined this.form.floorId = undefined
this.buildingOptions = [] this.buildingOptions = []
this.floorOptions = [] this.floorOptions = []
if (projectId) { if (projectId) {
this.getBuildingOptions(projectId) this.getBuildingOptions(projectId)
} }
}, },
/** 楼宇选择改变事件 */ /** 楼宇选择改变事件 */
handleBuildingChange(buildingId) { handleBuildingChange(buildingId) {
// 清空楼层的选择 // 清空楼层的选择
this.form.floorId = undefined this.form.floorId = undefined
this.floorOptions = [] this.floorOptions = []
if (buildingId) { if (buildingId) {
getFloorList(buildingId).then(response => { getFloorListByBuilding(buildingId).then(response => {
if (response.code === '000000') { if (response.code === '000000') {
this.floorOptions = response.data.list || [] this.floorOptions = response.data || []
} else { } else {
this.$message.error(response.msg || '获取楼层列表失败') this.$message.error(response.msg || '获取楼层列表失败')
} }
}) })
} }
}, },
/** 图片预览 */ /** 图片预览 */
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.dialogImageUrl = file.url this.dialogImageUrl = file.url
this.dialogVisible = true this.dialogVisible = true
}, },
/** 房源图片上传成功 */ /** 房源图片上传成功 */
handleImageSuccess(response, file, fileList) { handleImageSuccess(response, file, fileList) {
if (response.code === '000000') { if (response.code === '000000') {
@ -659,14 +678,14 @@ export default {
this.$message.error('图片上传失败') this.$message.error('图片上传失败')
} }
}, },
/** 房源图片删除 */ /** 房源图片删除 */
handleImageRemove(file, fileList) { handleImageRemove(file, fileList) {
const url = file.url || (file.response && file.response.data.url) const url = file.url || (file.response && file.response.data.url)
this.form.imageUrls = this.form.imageUrls.filter(item => item !== url) this.form.imageUrls = this.form.imageUrls.filter(item => item !== url)
this.imageList = fileList this.imageList = fileList
}, },
/** 户型图上传成功 */ /** 户型图上传成功 */
handleFloorPlanImageSuccess(response, file, fileList) { handleFloorPlanImageSuccess(response, file, fileList) {
if (response.code === '000000') { if (response.code === '000000') {
@ -682,20 +701,20 @@ export default {
this.$message.error('户型图上传失败') this.$message.error('户型图上传失败')
} }
}, },
/** 户型图删除 */ /** 户型图删除 */
handleFloorPlanImageRemove(file, fileList) { handleFloorPlanImageRemove(file, fileList) {
const url = file.url || (file.response && file.response.data.url) const url = file.url || (file.response && file.response.data.url)
this.form.floorPlanImageUrls = this.form.floorPlanImageUrls.filter(item => item !== url) this.form.floorPlanImageUrls = this.form.floorPlanImageUrls.filter(item => item !== url)
this.floorPlanImageList = fileList this.floorPlanImageList = fileList
}, },
/** 提交表单 */ /** 提交表单 */
submitForm() { submitForm() {
this.$refs.form.validate(valid => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
this.loading = true this.loading = true
// 准备提交数据 // 准备提交数据
const formData = { const formData = {
id: this.form.id, id: this.form.id,
@ -718,7 +737,7 @@ export default {
roomStatus: this.form.roomStatus, roomStatus: this.form.roomStatus,
roomType: this.form.roomType, roomType: this.form.roomType,
remark: this.form.remark, remark: this.form.remark,
// 业务信息 // 业务信息
businessInfo: { businessInfo: {
rentalStatus: this.form.rentalStatus, rentalStatus: this.form.rentalStatus,
@ -732,7 +751,7 @@ export default {
businessNumber: this.form.businessNumber, businessNumber: this.form.businessNumber,
businessCondition: this.form.businessCondition businessCondition: this.form.businessCondition
}, },
// 扩展信息 // 扩展信息
extendInfo: { extendInfo: {
roomRecordNumber: this.form.roomRecordNumber, roomRecordNumber: this.form.roomRecordNumber,
@ -746,7 +765,7 @@ export default {
floorPlanDesc: this.form.floorPlanDesc, floorPlanDesc: this.form.floorPlanDesc,
tags: this.form.tagIds ? this.form.tagIds.join(',') : '' tags: this.form.tagIds ? this.form.tagIds.join(',') : ''
}, },
// 图片信息 // 图片信息
roomImages: this.form.imageUrls ? this.form.imageUrls.map((url, index) => { roomImages: this.form.imageUrls ? this.form.imageUrls.map((url, index) => {
return { return {
@ -755,7 +774,7 @@ export default {
sortOrder: index sortOrder: index
} }
}) : [], }) : [],
// 户型图信息 // 户型图信息
floorPlanImages: this.form.floorPlanImageUrls ? this.form.floorPlanImageUrls.map((url, index) => { floorPlanImages: this.form.floorPlanImageUrls ? this.form.floorPlanImageUrls.map((url, index) => {
return { return {
@ -765,7 +784,7 @@ export default {
} }
}) : [] }) : []
} }
const method = this.isEdit ? updateRoom : addRoom const method = this.isEdit ? updateRoom : addRoom
method(formData).then(response => { method(formData).then(response => {
if (response.code === '000000') { if (response.code === '000000') {
@ -782,12 +801,12 @@ export default {
} }
}) })
}, },
/** 取消按钮 */ /** 取消按钮 */
cancel() { cancel() {
this.$emit('close') this.$emit('close')
}, },
/** 格式化日期为 YYYY-MM-DD */ /** 格式化日期为 YYYY-MM-DD */
formatDate(date) { formatDate(date) {
if (!date) return '' if (!date) return ''
@ -797,7 +816,7 @@ export default {
const day = d.getDate().toString().padStart(2, '0') const day = d.getDate().toString().padStart(2, '0')
return `${year}-${month}-${day}` return `${year}-${month}-${day}`
}, },
/** 处理输入变化 */ /** 处理输入变化 */
handleInputChange() { handleInputChange() {
this.$forceUpdate() this.$forceUpdate()
@ -809,33 +828,55 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.room-form-container { .room-form-container {
padding: 10px; padding: 10px;
.el-form { .el-form {
margin-top: 10px; margin-top: 10px;
} }
.form-footer { .form-footer {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
::v-deep .el-form-item__label {
width: 120px !important;
text-align: right;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
border-color: #409EFF;
}
::v-deep .el-input-group__append {
padding: 0;
.el-select {
margin: 0;
}
.el-select .el-input__inner {
border: none;
background-color: #f5f7fa;
}
}
::v-deep .el-upload-list--picture-card .el-upload-list__item { ::v-deep .el-upload-list--picture-card .el-upload-list__item {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
::v-deep .el-upload--picture-card { ::v-deep .el-upload--picture-card {
width: 120px; width: 120px;
height: 120px; height: 120px;
line-height: 120px; line-height: 120px;
} }
::v-deep .el-input-number { ::v-deep .el-input-number {
width: 100%; width: 100%;
} }
::v-deep .el-input-number .el-input__inner { ::v-deep .el-input-number .el-input__inner {
text-align: left; text-align: left;
} }
} }
</style> </style>

34
pc/src/views/project/room/index.vue
View File

@ -97,10 +97,7 @@
<el-table-column label="楼层" prop="floorName" min-width="80" /> <el-table-column label="楼层" prop="floorName" min-width="80" />
<el-table-column label="房号" prop="roomNumber" min-width="100" /> <el-table-column label="房号" prop="roomNumber" min-width="100" />
<el-table-column label="计租面积(㎡)" prop="rentalArea" min-width="110" /> <el-table-column label="计租面积(㎡)" prop="rentalArea" min-width="110" />
<el-table-column label="报价" min-width="120"> <el-table-column label="报价" align="center" prop="price" width="150">
<template slot-scope="scope">
{{ scope.row.price }} {{ scope.row.priceUnit === 1 ? '元/㎡/天' : scope.row.priceUnit === 2 ? '元/㎡/月' : '元/月' }}
</template>
</el-table-column> </el-table-column>
<el-table-column label="租赁状态" min-width="100"> <el-table-column label="租赁状态" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
@ -163,7 +160,7 @@
</el-card> </el-card>
<!-- 导入对话框 --> <!-- 导入对话框 -->
<el-dialog :title="importTitle" :visible.sync="importOpen" width="500px" append-to-body> <el-dialog :title="importTitle" :visible.sync="importOpen" width="400px" append-to-body>
<el-upload <el-upload
ref="upload" ref="upload"
:limit="1" :limit="1"
@ -194,7 +191,7 @@
</el-dialog> </el-dialog>
<!-- 添加/修改房源对话框 --> <!-- 添加/修改房源对话框 -->
<el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
<room-form <room-form
v-if="open" v-if="open"
ref="roomForm" ref="roomForm"
@ -210,7 +207,7 @@
<script> <script>
import { listRoom, exportRoom, downloadTemplate, importRoom, listRoomTags, listProjects, listBuildings, listFloors, delRoom } from '@/api/room' import { listRoom, exportRoom, downloadTemplate, importRoom, listRoomTags, listProjects, listBuildings, listFloors, delRoom } from '@/api/room'
import { getProjectList } from '@/api/project' import { getProjectList } from '@/api/project'
import { getBuildingList,getFloorList } from '@/api/building' import { getBuildingList,getFloorList,getFloorListByBuilding } from '@/api/building'
import DetailView from './components/DetailView' import DetailView from './components/DetailView'
import RoomForm from './components/RoomForm' import RoomForm from './components/RoomForm'
@ -285,7 +282,7 @@ export default {
// 设置上传的请求头部 // 设置上传的请求头部
headers: { }, headers: { },
// 上传的URL // 上传的URL
url: process.env.VUE_APP_BASE_API + '/room/import' url: process.env.VUE_APP_BASE_API + '/room/template/import'
} }
} }
}, },
@ -421,9 +418,9 @@ export default {
this.floorOptions = [] this.floorOptions = []
if (buildingId) { if (buildingId) {
getFloorList(buildingId).then(response => { getFloorListByBuilding(buildingId).then(response => {
if (response.code === '000000') { if (response.code === '000000') {
this.floorOptions = response.data.list || [] this.floorOptions = response.data || []
} else { } else {
this.$message.error(response.msg || '获取楼层列表失败') this.$message.error(response.msg || '获取楼层列表失败')
} }
@ -522,10 +519,10 @@ export default {
this.$refs.upload.clearFiles() this.$refs.upload.clearFiles()
this.importOpen = false this.importOpen = false
if (response.code === '000000') { if (response.code === '000000') {
this.$alert('导入成功' + (response.data ? response.data.successCount || 0 : 0) + '条数据', '导入结果', { type: 'success' }) this.$alert(`response.data.message `, { type: 'success' })
this.getList() this.getList()
} else { } else {
this.$alert(response.msg || '导入失败', '导入结果', { type: 'error' }) this.$alert(response.msg || '导入失败，正在下载错误文件', '导入结果', { type: 'error' })
} }
}, },
@ -586,6 +583,19 @@ export default {
handleCurrentChange(val) { handleCurrentChange(val) {
this.queryParams.pageNum = val this.queryParams.pageNum = val
this.getList() this.getList()
},
/** 获取价格单位文本 */
getPriceUnitText(unitType) {
if (!unitType) return '';
const unitMap = {
'1': '元/㎡/天',
'2': '元/㎡/月',
'3': '元/月',
'4': '元/天',
'5': '元/年'
};
return unitMap[unitType] || '';
} }
} }
} }

BIN
pc/web (2).zip Normal file
View File

Binary file not shown.

BIN
pc/web.zip Normal file
View File

Binary file not shown.