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

房源资产标签对接

Browse Source
This commit is contained in:
zengqiyang 2025-04-08 17:30:36 +08:00
parent 3b92d34a26
commit 7e8237190a
16 changed files with 499 additions and 500 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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'
// 查询标签模板列表
export function listLabelTemplates() {
// 查询资产标签列表
export function listLabelTemplates(query) {
return request({
url: '/asset/label/template/list',
method: 'get'
url: '/asset/label/list',
method: 'get',
params: query
})
}
@ -16,19 +17,19 @@ export function getLabelTemplate(id) {
})
}
// 添加标签模板
// 新增资产标签
export function addLabelTemplate(data) {
return request({
url: '/asset/label/template',
url: '/asset/label',
method: 'post',
data: data
})
}
// 更新标签模板
export function updateLabelTemplate(data) {
// 修改资产标签
export function updateLabelTemplate(id, data) {
return request({
url: '/asset/label/template',
url: '/asset/label/' + id,
method: 'put',
data: data
})
@ -52,10 +53,42 @@ export function setDefaultTemplate(id) {
// 获取可用的标签字段
export function getLabelFields() {
return request({
url: '/asset/label/fields',
method: 'get'
})
const fieldData = [
{ id: 1, name: '资产名称' },
{ 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) {
return request({
url: '/room/floor/list',
method: 'get',
params: query
url: `/room/floor/list/${query}`,
method: 'get'
})
}

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实例
const service = axios.create({
// baseURL: '/api', // 修改为相对路径，使用代理
baseURL: 'http://192.168.137.3:8080/api', // 接口地址
baseURL: process.env.VUE_APP_BASE_API, // 使用环境变量中的接口地址
timeout: 10000 // 请求超时时间
})

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

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<el-card class="box-card">
<el-card class="box-card" v-loading="loading">
<div slot="header" class="clearfix">
<span>资产标签设置</span>
</div>
@ -14,8 +14,9 @@
:class="['template-item', selectedTemplateIndex === index ? 'selected' : '']"
@click="selectTemplate(index)">
<div class="template-preview">
<div class="qr-preview"></div>
<div v-if="index <= 1" class="logo-indicator">支持Logo</div>
<div class="qr-preview">
<img :src="template.img" alt="模板预览" class="qr-image">
</div>
</div>
<div class="template-name">模板{{ index + 1 }}</div>
<div class="template-limit">{{ getTemplateLimitText(index) }}</div>
@ -31,7 +32,7 @@
<div class="qr-code-container">
<img src="@/assets/images/qrcode.svg" alt="QR Code" class="qr-image" />
<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 v-for="(field, index) in selectedTemplateFields" :key="index" class="label-field-item">
<span class="field-name">{{ field.name }}{{ index === 1 ? field.name.length > 2 ? '' : '　' : ''
@ -41,9 +42,7 @@
</div>
</div>
</div>
<div class="label-footer">预览效果：模板{{ selectedTemplateIndex + 1 }}</div>
</div>
</div>
@ -66,21 +65,8 @@
</el-checkbox-group>
</div>
</div>
<div class="section-title" v-if="selectedTemplateIndex <= 1">设置Logo</div>
<!-- Logo上传组件，仅模板1和2显示 -->
<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="section-title">打印设置</div>
<div class="settings-section">
<div class="setting-group">
@ -106,14 +92,11 @@
<el-input v-model="labelHeight" type="number" placeholder="请输入高度"></el-input>
</div>
</div>
</div>
</div> -->
<div class="button-group">
<el-button type="primary" @click="saveTemplate">保存</el-button>
<el-button @click="resetTemplate">重置</el-button>
</div>
</div>
</div>
@ -123,8 +106,8 @@
<script>
import {
listLabelTemplates, getLabelTemplate, addLabelTemplate, updateLabelTemplate,
deleteLabelTemplate, setDefaultTemplate, getLabelFields, previewLabel
listLabelTemplates, addLabelTemplate, updateLabelTemplate,
getLabelFields, getFieldSampleValues
} from '@/api/asset/label'
export default {
@ -133,83 +116,115 @@ export default {
return {
// 模板列表
templates: [
{ id: 1, name: '模板1', default: true, maxFields: 1, supportLogo: true },
{ id: 2, name: '模板2', default: false, maxFields: 2, supportLogo: true },
{ id: 3, name: '模板3', default: false, maxFields: 3, supportLogo: false },
{ id: 4, name: '模板4', default: false, maxFields: 4, supportLogo: false }
{ id: 1, name: '模板1', maxFields: 1, img: require('@/assets/images/tag_01.png') },
{ id: 2, name: '模板2', maxFields: 2, img: require('@/assets/images/tag_02.png') },
{ id: 3, name: '模板3', maxFields: 3, img: require('@/assets/images/tag_03.png') },
{ id: 4, name: '模板4', maxFields: 4, img: require('@/assets/images/tag_04.png') }
],
// 当前选中的模板索引
selectedTemplateIndex: 0,
// 可用的字段列表
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: '购买时间' }
],
availableFields: [],
// 当前选中的字段
selectedFields: ['assetNo'],
selectedFields: [],
// 当前模板中的字段及预览值
selectedTemplateFields: [
{ id: 'assetNo', name: '资产编号', value: 'ASSET-001' }
],
selectedTemplateFields: [],
// 标签设置
paperType: 1,
labelWidth: 80,
labelHeight: 40,
// Logo URL
logoUrl: '',
paperType: 3,
labelWidth: 50,
labelHeight: 30,
// 字段数量超出标志
isFieldsLimitExceeded: false,
// 加载状态
loading: false
loading: false,
// 资产标签记录ID
labelId: null
}
},
created() {
this.getTemplateList()
this.getFieldOptions()
// 先获取可用字段选项，再获取标签设置
this.getFieldOptions().then(() => {
this.getLabelSettings();
});
},
methods: {
// 获取模板列表
async getTemplateList() {
// 获取标签设置
async getLabelSettings() {
try {
this.loading = true
// 实际应用中应从API获取
// const res = await listLabelTemplates()
// this.templates = res.data || []
this.loading = false
this.loading = true;
const res = await listLabelTemplates();
if (res.code === '000000') {
if (res.data) {
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) {
console.error('获取模板列表失败', error)
this.loading = false
console.error('获取标签设置失败', error);
this.loading = false;
this.$message.error('获取标签设置失败');
// 使用默认设置
this.selectTemplate(0);
}
},
// 获取可用字段选项
async getFieldOptions() {
try {
// 实际应用中应从API获取
// const res = await getLabelFields()
// this.availableFields = res.data || []
const res = await getLabelFields();
if (res.code === '000000') {
this.availableFields = res.data || [];
console.log("获取到的字段选项: ", this.availableFields);
} else {
this.$message.error(res.msg || '获取字段选项失败');
}
} catch (error) {
console.error('获取字段选项失败', error)
console.error('获取字段选项失败', error);
this.$message.error('获取字段选项失败');
}
},
// 获取模板限制文字说明
getTemplateLimitText(index) {
if (index === 0) {
return '支持1个字段';
} else if (index === 1) {
return '支持最多2个字段';
} else if (index === 2) {
return '支持最多3个字段';
} else {
return '支持最多4个字段';
}
const maxFields = this.templates[index].maxFields;
return maxFields === 1 ? '支持1个字段' : `支持最多${maxFields}个字段`;
},
// 获取当前模板最大字段数
@ -219,50 +234,48 @@ export default {
// 选择模板
selectTemplate(index) {
this.selectedTemplateIndex = index
this.selectedTemplateIndex = index;
// 清空logo（如果切换到不支持logo的模板）
if (index > 1) {
this.logoUrl = '';
// 根据模板类型限制字段数
const maxFields = this.templates[index].maxFields;
if (this.selectedFields.length > maxFields) {
this.selectedFields = this.selectedFields.slice(0, maxFields);
} else if (this.selectedFields.length === 0) {
// 如果没有选择字段，默认选择第一个
this.selectedFields = [1];
}
// 模拟选择模板
// 默认纸张类型和尺寸
if (index === 0) {
this.selectedFields = this.selectedFields.slice(0, 1); // 限制为1个字段
this.paperType = 1;
this.labelWidth = 80;
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.labelWidth = 50;
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.checkFieldsLimit()
this.updateTemplateFields();
this.checkFieldsLimit();
},
// 更新模板字段
updateTemplateFields() {
const sampleValues = getFieldSampleValues();
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 {
id: fieldId,
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) {
// 根据纸张类型设置默认尺寸
if (type === 1) {
this.labelWidth = 80
this.labelHeight = 40
} else if (type === 2) {
this.labelWidth = 100
this.labelHeight = 50
} else if (type === 3) {
this.labelWidth = 70
this.labelHeight = 30
this.labelWidth = 50;
this.labelHeight = 30;
}
},
@ -318,103 +310,56 @@ export default {
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() {
if (this.isFieldsLimitExceeded) {
this.$message.error(`字段数量超出限制，当前模板最多支持${this.getMaxFieldsCount()}个字段`);
return;
}
const templateData = {
id: this.templates[this.selectedTemplateIndex].id,
name: this.templates[this.selectedTemplateIndex].name,
paperType: this.paperType,
width: this.labelWidth,
height: this.labelHeight,
fields: this.selectedFields,
logoUrl: this.logoUrl
if (this.selectedFields.length === 0) {
this.$message.error('请至少选择一个标签字段');
return;
}
if (this.paperType === 1 && (!this.labelWidth || !this.labelHeight)) {
this.$message.error('使用标签专用纸时，请输入标签宽度和高度');
return;
}
// 实际应用中应该调用API保存
// if (templateData.id) {
// updateLabelTemplate(templateData).then(res => {
// if (res.code === '000000') {
// this.$message.success('模板保存成功')
// } else {
// this.$message.error(res.msg || '保存失败')
// }
// })
// } else {
// addLabelTemplate(templateData).then(res => {
// if (res.code === '000000') {
// this.$message.success('模板创建成功')
// } else {
// this.$message.error(res.msg || '创建失败')
// }
// })
// }
const templateData = {
templateType: String(this.selectedTemplateIndex + 1),
labelItems: this.selectedFields.join(','),
paperType: String(this.paperType),
labelWidth: this.paperType === 1 ? String(this.labelWidth) : '',
labelHeight: this.paperType === 1 ? String(this.labelHeight) : ''
};
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() {
this.selectTemplate(this.selectedTemplateIndex)
this.logoUrl = ''
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 || '打印失败')
// }
// })
this.getLabelSettings();
this.$message.info('已重置为原始设置');
}
}
}
@ -470,60 +415,12 @@ export default {
margin-bottom: 8px;
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 {
font-size: 14px;
color: #606266;
margin-bottom: 3px;
font-weight: 500;
margin-bottom: 4px;
}
.template-limit {
@ -592,7 +489,7 @@ export default {
.label-fields {
margin-top: 5px;
.label-field-item {
display: flex;
margin-bottom: 10px;
@ -621,9 +518,38 @@ export default {
.edit-area {
width: 300px;
border-left: 1px solid #ebeef5;
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 {
margin-bottom: 20px;
}
@ -632,87 +558,65 @@ export default {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.setting-label {
width: 110px;
font-size: 14px;
color: #606266;
}
.setting-label {
width: 120px;
color: #606266;
}
.setting-content {
flex: 1;
.setting-content {
flex: 1;
}
}
.logo-upload-group {
align-items: flex-start;
.logo-uploader {
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden;
margin-bottom: 10px;
&:hover {
border-color: #409EFF;
}
&:hover {
border-color: #409EFF;
}
.logo-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 60px;
line-height: 60px;
text-align: center;
}
.logo-image {
width: 120px;
height: 60px;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
}
.upload-tip {
margin-top: 8px;
font-size: 12px;
color: #909399;
line-height: 1.4;
}
}
.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;
}
line-height: 1.5;
}
}
.button-group {
display: flex;
justify-content: end;
text-align: center;
margin-top: 30px;
}
.qr-preview{
width: 120px;
object-fit: contain;
&>img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
</style>

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

@ -133,9 +133,9 @@
:min-width="col.width"
align="center"
/>
<el-table-column label="操作" width="250" fixed="right">
<el-table-column label="操作" width="200" fixed="right">
<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="handleFloorManage(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 = {
'1': '元/㎡/天',
'2': '元/㎡/月',
'3': '元/月'
'3': '元/月',
'4': '元/天',
'5': '元/年'
}
return unitMap[this.roomDetail.priceUnit] || ''
},
@ -186,7 +188,9 @@ export default {
const unitMap = {
'1': '元/㎡/天',
'2': '元/㎡/月',
'3': '元/月'
'3': '元/月',
'4': '元/天',
'5': '元/年'
}
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-col :span="8">
<el-form-item label="项目" prop="projectId">
<el-select v-model="form.projectId" placeholder="请选择项目" style="width: 100%"
:disabled="isEdit" @change="handleProjectChange">
<el-select v-model="form.projectId" placeholder="请选择项目" style="width: 100%" :disabled="isEdit"
@change="handleProjectChange">
<el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="楼宇" prop="buildingId">
<el-select v-model="form.buildingId" placeholder="请选择楼宇" style="width: 100%"
:disabled="isEdit" @change="handleBuildingChange">
<el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName" :value="item.id" />
<el-select v-model="form.buildingId" placeholder="请选择楼宇" style="width: 100%" :disabled="isEdit"
@change="handleBuildingChange">
<el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
@ -29,7 +30,7 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="房号" prop="roomNumber">
@ -47,7 +48,7 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="建筑面积" prop="buildingArea">
@ -71,7 +72,7 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="套内面积" prop="innerArea">
@ -94,12 +95,12 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="绑定业主" prop="ownerId">
<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">
<span style="float: left">{{ item.ownerName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
@ -107,17 +108,18 @@
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<!-- 招商信息 Tab -->
<el-tab-pane label="招商信息" name="merchant">
<el-row :gutter="20">
<el-col :span="8">
<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="2" />
<el-option label="自持+承租" value="3" />
@ -126,7 +128,8 @@
</el-col>
<el-col :span="8">
<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="2" />
</el-select>
@ -134,7 +137,8 @@
</el-col>
<el-col :span="8">
<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="2" />
<el-option label="私密" value="3" />
@ -143,7 +147,8 @@
</el-col>
<el-col :span="8">
<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="2" />
<el-option label="仓储" value="3" />
@ -167,21 +172,20 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="荷载值" prop="loadValue">
<el-input v-model="form.loadValue" placeholder="请输入荷载值" @input="handleInputChange" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<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-select>
</el-form-item>
</el-col>
<el-col :span="8">
<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="2" />
</el-select>
@ -189,65 +193,83 @@
</el-col>
<el-col :span="8">
<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-col>
<el-col :span="8">
<el-form-item label="装修情况" prop="decorationStatus">
<el-select v-model="form.decorationStatus" placeholder="请选择装修情况" style="width: 100%" @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-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="装修情况" prop="decorationStatus">
<el-select v-model="form.decorationStatus" placeholder="请选择装修情况" style="width: 100%"
@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-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-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="报价" prop="price">
<el-input v-model="form.price" placeholder="请输入报价" @input="handleInputChange" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="底价" prop="floorPrice">
<el-input v-model="form.floorPrice" placeholder="请输入底价" @input="handleInputChange" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="房源招商编号" prop="businessNumber">
<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-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="底价" prop="floorPrice">
<el-input v-model="form.floorPrice" placeholder="请输入底价" @input="handleInputChange">
<el-select slot="append" v-model="form.floorPriceUnit" 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-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="荷载值" prop="loadValue">
<el-input v-model="form.loadValue" placeholder="请输入荷载值" @input="handleInputChange" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="房源招商编号" prop="businessNumber">
<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-form-item label="房源图片" prop="imageUrls">
<el-upload
:action="uploadUrl"
list-type="picture-card"
:headers="uploadHeaders"
:file-list="imageList"
:on-preview="handlePictureCardPreview"
:on-success="handleImageSuccess"
:on-remove="handleImageRemove"
multiple>
<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-upload :action="uploadUrl" list-type="picture-card" :headers="uploadHeaders" :file-list="imageList"
:on-preview="handlePictureCardPreview" :on-success="handleImageSuccess" :on-remove="handleImageRemove"
multiple>
<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>
<!-- 拓展信息 Tab -->
<el-tab-pane label="拓展信息" name="extension">
<el-row :gutter="20">
@ -277,34 +299,31 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<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-col>
<el-col :span="8">
<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-col>
</el-row>
<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 label="户型图" prop="floorPlanImageUrls">
<el-upload
:action="uploadUrl"
list-type="picture-card"
:headers="uploadHeaders"
:file-list="floorPlanImageList"
:on-preview="handlePictureCardPreview"
:on-success="handleFloorPlanImageSuccess"
:on-remove="handleFloorPlanImageRemove"
multiple>
<el-upload :action="uploadUrl" list-type="picture-card" :headers="uploadHeaders"
:file-list="floorPlanImageList" :on-preview="handlePictureCardPreview"
:on-success="handleFloorPlanImageSuccess" :on-remove="handleFloorPlanImageRemove" multiple>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
@ -313,7 +332,7 @@
</el-form-item>
</el-tab-pane>
</el-tabs>
<div class="form-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@ -325,7 +344,7 @@
<script>
import { getRoom, addRoom, updateRoom, listProjects, listBuildings, listFloors, listRoomTags, listOwners } from '@/api/room'
import { getProjectList } from '@/api/project'
import { getBuildingList,getFloorList } from '@/api/building'
import { getBuildingList, getFloorList,getFloorListByBuilding} from '@/api/building'
export default {
name: 'RoomForm',
props: {
@ -365,9 +384,9 @@ export default {
// 户型图列表
floorPlanImageList: [],
// 上传URL
uploadUrl: process.env.VUE_APP_BASE_API + '/park/common/upload',
uploadUrl: process.env.VUE_APP_BASE_API + '/room/upload',
// 上传请求头
uploadHeaders: { },
uploadHeaders: {},
// 表单对象
form: {
projectId: undefined,
@ -445,7 +464,7 @@ export default {
getRoom(this.roomId).then(response => {
if (response.code === '000000') {
this.form = { ...response.data }
// 处理业务信息字段
if (response.data.businessInfo) {
this.form.rentalStatus = response.data.businessInfo.rentalStatus
@ -459,7 +478,7 @@ export default {
this.form.businessNumber = response.data.businessInfo.businessNumber
this.form.businessCondition = response.data.businessInfo.businessCondition
}
// 处理扩展信息字段
if (response.data.extendInfo) {
this.form.roomRecordNumber = response.data.extendInfo.roomRecordNumber
@ -475,7 +494,7 @@ export default {
this.form.tagIds = response.data.extendInfo.tags.split(',')
}
}
// 处理图片数据
this.form.imageUrls = []
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 }
})
}
// 处理户型图数据
this.form.floorPlanImageUrls = []
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 }
})
}
// 加载关联数据
this.getProjectOptions().then(() => {
if (this.form.projectId) {
@ -504,7 +523,7 @@ export default {
})
}
})
// 如果有业主ID，获取业主详情
if (this.form.ownerId) {
this.getOwnerDetail(this.form.ownerId)
@ -517,7 +536,7 @@ export default {
this.loading = false
})
},
/** 获取项目选项 */
getProjectOptions() {
getProjectList({ pageSize: 100 }).then(res => {
@ -528,17 +547,17 @@ export default {
}
})
},
/** 获取楼宇选项 */
getBuildingOptions(projectId) {
if(!projectId){
this.buildingOptions = []
this.form.buildingId = undefined
this.floorOptions = []
this.form.floorId = undefined
return
}
const params = {
if (!projectId) {
this.buildingOptions = []
this.form.buildingId = undefined
this.floorOptions = []
this.form.floorId = undefined
return
}
const params = {
projectId: projectId,
pageNum: 1,
pageSize: 100,
@ -551,14 +570,14 @@ export default {
}
})
},
/** 获取楼层选项 */
getFloorOptions(buildingId) {
if(!buildingId){
this.floorOptions = []
this.form.floorId = undefined
return
}
if (!buildingId) {
this.floorOptions = []
this.form.floorId = undefined
return
}
return listFloors(buildingId).then(response => {
if (response.code === '000000') {
this.floorOptions = response.data || []
@ -567,7 +586,7 @@ export default {
}
})
},
/** 获取房源标签选项 */
getTagOptions() {
listRoomTags().then(response => {
@ -578,7 +597,7 @@ export default {
}
})
},
/** 获取业主详情 */
getOwnerDetail(ownerId) {
listOwners({ id: ownerId }).then(response => {
@ -587,7 +606,7 @@ export default {
}
})
},
/** 远程搜索业主 */
remoteSearchOwner(query) {
if (query) {
@ -606,7 +625,7 @@ export default {
this.ownerOptions = []
}
},
/** 项目选择改变事件 */
handleProjectChange(projectId) {
// 清空楼宇和楼层的选择
@ -614,36 +633,36 @@ export default {
this.form.floorId = undefined
this.buildingOptions = []
this.floorOptions = []
if (projectId) {
this.getBuildingOptions(projectId)
}
},
/** 楼宇选择改变事件 */
handleBuildingChange(buildingId) {
// 清空楼层的选择
this.form.floorId = undefined
this.floorOptions = []
if (buildingId) {
getFloorList(buildingId).then(response => {
getFloorListByBuilding(buildingId).then(response => {
if (response.code === '000000') {
this.floorOptions = response.data.list || []
this.floorOptions = response.data || []
} else {
this.$message.error(response.msg || '获取楼层列表失败')
}
})
}
},
/** 图片预览 */
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
/** 房源图片上传成功 */
handleImageSuccess(response, file, fileList) {
if (response.code === '000000') {
@ -659,14 +678,14 @@ export default {
this.$message.error('图片上传失败')
}
},
/** 房源图片删除 */
handleImageRemove(file, fileList) {
const url = file.url || (file.response && file.response.data.url)
this.form.imageUrls = this.form.imageUrls.filter(item => item !== url)
this.imageList = fileList
},
/** 户型图上传成功 */
handleFloorPlanImageSuccess(response, file, fileList) {
if (response.code === '000000') {
@ -682,20 +701,20 @@ export default {
this.$message.error('户型图上传失败')
}
},
/** 户型图删除 */
handleFloorPlanImageRemove(file, fileList) {
const url = file.url || (file.response && file.response.data.url)
this.form.floorPlanImageUrls = this.form.floorPlanImageUrls.filter(item => item !== url)
this.floorPlanImageList = fileList
},
/** 提交表单 */
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.loading = true
// 准备提交数据
const formData = {
id: this.form.id,
@ -718,7 +737,7 @@ export default {
roomStatus: this.form.roomStatus,
roomType: this.form.roomType,
remark: this.form.remark,
// 业务信息
businessInfo: {
rentalStatus: this.form.rentalStatus,
@ -732,7 +751,7 @@ export default {
businessNumber: this.form.businessNumber,
businessCondition: this.form.businessCondition
},
// 扩展信息
extendInfo: {
roomRecordNumber: this.form.roomRecordNumber,
@ -746,7 +765,7 @@ export default {
floorPlanDesc: this.form.floorPlanDesc,
tags: this.form.tagIds ? this.form.tagIds.join(',') : ''
},
// 图片信息
roomImages: this.form.imageUrls ? this.form.imageUrls.map((url, index) => {
return {
@ -755,7 +774,7 @@ export default {
sortOrder: index
}
}) : [],
// 户型图信息
floorPlanImages: this.form.floorPlanImageUrls ? this.form.floorPlanImageUrls.map((url, index) => {
return {
@ -765,7 +784,7 @@ export default {
}
}) : []
}
const method = this.isEdit ? updateRoom : addRoom
method(formData).then(response => {
if (response.code === '000000') {
@ -782,12 +801,12 @@ export default {
}
})
},
/** 取消按钮 */
cancel() {
this.$emit('close')
},
/** 格式化日期为 YYYY-MM-DD */
formatDate(date) {
if (!date) return ''
@ -797,7 +816,7 @@ export default {
const day = d.getDate().toString().padStart(2, '0')
return `${year}-${month}-${day}`
},
/** 处理输入变化 */
handleInputChange() {
this.$forceUpdate()
@ -809,33 +828,55 @@ export default {
<style lang="scss" scoped>
.room-form-container {
padding: 10px;
.el-form {
margin-top: 10px;
}
.form-footer {
text-align: center;
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 {
width: 120px;
height: 120px;
}
::v-deep .el-upload--picture-card {
width: 120px;
height: 120px;
line-height: 120px;
}
::v-deep .el-input-number {
width: 100%;
}
::v-deep .el-input-number .el-input__inner {
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="roomNumber" min-width="100" />
<el-table-column label="计租面积(㎡)" prop="rentalArea" min-width="110" />
<el-table-column label="报价" min-width="120">
<template slot-scope="scope">
{{ scope.row.price }} {{ scope.row.priceUnit === 1 ? '元/㎡/天' : scope.row.priceUnit === 2 ? '元/㎡/月' : '元/月' }}
</template>
<el-table-column label="报价" align="center" prop="price" width="150">
</el-table-column>
<el-table-column label="租赁状态" min-width="100">
<template slot-scope="scope">
@ -163,7 +160,7 @@
</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
ref="upload"
:limit="1"
@ -194,7 +191,7 @@
</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
v-if="open"
ref="roomForm"
@ -210,7 +207,7 @@
<script>
import { listRoom, exportRoom, downloadTemplate, importRoom, listRoomTags, listProjects, listBuildings, listFloors, delRoom } from '@/api/room'
import { getProjectList } from '@/api/project'
import { getBuildingList,getFloorList } from '@/api/building'
import { getBuildingList,getFloorList,getFloorListByBuilding } from '@/api/building'
import DetailView from './components/DetailView'
import RoomForm from './components/RoomForm'
@ -285,7 +282,7 @@ export default {
// 设置上传的请求头部
headers: { },
// 上传的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 = []
if (buildingId) {
getFloorList(buildingId).then(response => {
getFloorListByBuilding(buildingId).then(response => {
if (response.code === '000000') {
this.floorOptions = response.data.list || []
this.floorOptions = response.data || []
} else {
this.$message.error(response.msg || '获取楼层列表失败')
}
@ -522,10 +519,10 @@ export default {
this.$refs.upload.clearFiles()
this.importOpen = false
if (response.code === '000000') {
this.$alert('导入成功' + (response.data ? response.data.successCount || 0 : 0) + '条数据', '导入结果', { type: 'success' })
this.$alert(`response.data.message `, { type: 'success' })
this.getList()
} else {
this.$alert(response.msg || '导入失败', '导入结果', { type: 'error' })
this.$alert(response.msg || '导入失败，正在下载错误文件', '导入结果', { type: 'error' })
}
},
@ -586,6 +583,19 @@ export default {
handleCurrentChange(val) {
this.queryParams.pageNum = val
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.