664 lines
21 KiB
Vue
664 lines
21 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>房源列表</span>
|
||
<el-button-group style="float: right;">
|
||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增房源</el-button>
|
||
<el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleImport">批量导入</el-button>
|
||
<el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">批量导出</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
|
||
<!-- 标签页切换 -->
|
||
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||
<el-tab-pane label="全部房源" name="all"></el-tab-pane>
|
||
<el-tab-pane label="招商房源" name="commercial"></el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<!-- 搜索条件 -->
|
||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
|
||
<el-form-item label="项目" prop="projectId">
|
||
<el-select v-model="queryParams.projectId" placeholder="请选择项目" clearable
|
||
@change="handleProjectChange" style="width: 240px;">
|
||
<el-option v-for="item in projectOptions" :key="item.id" :label="item.projectName" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="楼宇" prop="buildingId">
|
||
<el-select v-model="queryParams.buildingId" placeholder="请选择楼宇" clearable
|
||
@change="handleBuildingChange" style="width: 240px;">
|
||
<el-option v-for="item in buildingOptions" :key="item.id" :label="item.buildingName" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="楼层" prop="floorId">
|
||
<el-select v-model="queryParams.floorId" placeholder="请选择楼层" clearable style="width: 240px;">
|
||
<el-option v-for="item in floorOptions" :key="item.id" :label="item.floorName" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="房号" prop="roomNumber">
|
||
<el-input v-model="queryParams.roomNumber" placeholder="请输入房号" clearable style="width: 240px;" />
|
||
</el-form-item>
|
||
<el-form-item label="标签" prop="tags">
|
||
<el-select v-model="queryParams.tags" placeholder="请选择房源标签" clearable multiple style="width: 240px;">
|
||
<el-option v-for="tag in tagOptions" :key="tag.id" :label="tag.tagName" :value="tag.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||
<el-button @click="toggleAdvanced" type="text">
|
||
{{ advanced ? '收起' : '展开' }}
|
||
<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 高级搜索条件，展开时显示 -->
|
||
<el-form v-show="advanced" :model="queryParams" ref="advancedQueryForm" :inline="true" label-width="100px">
|
||
<el-form-item label="租赁状态" prop="rentalStatus">
|
||
<el-select v-model="queryParams.rentalStatus" placeholder="请选择租赁状态" clearable style="width: 240px;">
|
||
<el-option label="待租" value="1" />
|
||
<el-option label="已租" value="2" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="activeTab === 'all'" label="招商状态" prop="businessStatus">
|
||
<el-select v-model="queryParams.businessStatus" placeholder="请选择招商状态" clearable style="width: 240px;">
|
||
<el-option label="招商" value="1" />
|
||
<el-option label="不招商" value="2" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="装修情况" prop="decorationStatus">
|
||
<el-select v-model="queryParams.decorationStatus" placeholder="请选择装修情况" clearable style="width: 240px;">
|
||
<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-form-item label="创建时间">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
style="width: 240px;"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 列表展示区域 -->
|
||
<el-table v-loading="loading" :data="roomList" border style="width: 100%; margin-top: 15px;"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="项目名称" prop="projectName" min-width="140" show-overflow-tooltip />
|
||
<el-table-column label="楼宇名称" prop="buildingName" min-width="120" show-overflow-tooltip />
|
||
<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="报价" align="center" prop="price" width="150">
|
||
</el-table-column>
|
||
<el-table-column label="租赁状态" min-width="100">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.rentalStatus === '1' ? 'success' : scope.row.rentalStatus === '2' ? 'danger' : 'warning'">
|
||
{{ scope.row.rentalStatus === '1' ? '待租' : scope.row.rentalStatus === '2' ? '已租' : '暂无' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="装修情况" min-width="100">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.decorationStatus === '1' ? '精装' :
|
||
scope.row.decorationStatus === '2' ? '简装' :
|
||
scope.row.decorationStatus === '3' ? '毛坯' :
|
||
scope.row.decorationStatus === '4' ? '标准交付' :
|
||
scope.row.decorationStatus === '5' ? '豪装' : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="交付时间" prop="deliveryTime" min-width="110" />
|
||
<el-table-column label="可租日期" prop="availableDate" min-width="110" />
|
||
<el-table-column label="房源标签" min-width="120">
|
||
<template slot-scope="scope">
|
||
<el-tag v-for="tag in scope.row.tagList" :key="tag.id" type="info" size="mini" style="margin-right: 4px">
|
||
{{ tag.tagName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="虚拟房源" min-width="90">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.isVirtual === '1' ? '是' : '否' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="招商状态" min-width="90">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.businessStatus === '1' ? 'primary' : 'info'">
|
||
{{ scope.row.businessStatus === '1' ? '招商' : '不招商' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" prop="createTime" min-width="150" />
|
||
<el-table-column label="操作" width="200" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
|
||
<el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
|
||
<el-button type="text" size="mini" @click="handleDelete(scope.row)" style="color: #F56C6C;">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="queryParams.pageNum"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="queryParams.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
class="pagination">
|
||
</el-pagination>
|
||
</el-card>
|
||
|
||
<!-- 导入对话框 -->
|
||
<el-dialog :title="importTitle" :visible.sync="importOpen" width="400px" append-to-body>
|
||
<el-upload
|
||
ref="upload"
|
||
:limit="1"
|
||
accept=".xlsx, .xls"
|
||
:headers="upload.headers"
|
||
:action="upload.url"
|
||
:disabled="upload.isUploading"
|
||
:on-progress="handleFileUploadProgress"
|
||
:on-success="handleFileSuccess"
|
||
:auto-upload="false"
|
||
drag>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
<el-button type="text" @click="downloadImportTemplate">下载模板</el-button>
|
||
<div>只允许导入xls、xlsx格式文件。</div>
|
||
</div>
|
||
</el-upload>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||
<el-button @click="importOpen = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 查看详情对话框 -->
|
||
<el-dialog :title="viewTitle" :visible.sync="viewOpen" width="900px" append-to-body>
|
||
<detail-view v-if="viewOpen" :roomId="currentRoomId" />
|
||
</el-dialog>
|
||
|
||
<!-- 添加/修改房源对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
|
||
<room-form
|
||
v-if="open"
|
||
ref="roomForm"
|
||
:roomId="currentRoomId"
|
||
:isEdit="isEdit"
|
||
@refreshList="getList"
|
||
@close="open = false" />
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listRoom, exportRoom, downloadTemplate, importRoom, listRoomTags, listProjects, listBuildings, listFloors, delRoom } from '@/api/room'
|
||
import { getProjectList,getTagByType } from '@/api/project'
|
||
import { getBuildingList,getFloorList,getFloorListByBuilding } from '@/api/building'
|
||
|
||
import DetailView from './components/DetailView'
|
||
import RoomForm from './components/RoomForm'
|
||
|
||
export default {
|
||
name: 'ProjectRoom',
|
||
components: {
|
||
DetailView,
|
||
RoomForm
|
||
},
|
||
data() {
|
||
return {
|
||
// 遮罩层
|
||
loading: false,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
advanced: false,
|
||
// 总条数
|
||
total: 0,
|
||
// 房源表格数据
|
||
roomList: [],
|
||
// 弹出层标题
|
||
title: '',
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 是否显示详情弹出层
|
||
viewOpen: false,
|
||
// 是否显示导入弹出层
|
||
importOpen: false,
|
||
// 导入标题
|
||
importTitle: '导入房源数据',
|
||
// 详情标题
|
||
viewTitle: '房源详情',
|
||
// 日期范围
|
||
dateRange: [],
|
||
// 当前处理的房源ID
|
||
currentRoomId: null,
|
||
// 是否编辑模式
|
||
isEdit: false,
|
||
// 当前激活的Tab页
|
||
activeTab: 'all',
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
projectId: undefined,
|
||
buildingId: undefined,
|
||
floorId: undefined,
|
||
roomNumber: undefined,
|
||
tags: [],
|
||
rentalStatus: undefined,
|
||
businessStatus: undefined,
|
||
decorationStatus: undefined
|
||
},
|
||
// 项目选项
|
||
projectOptions: [],
|
||
// 楼宇选项
|
||
buildingOptions: [],
|
||
// 楼层选项
|
||
floorOptions: [],
|
||
// 标签选项
|
||
tagOptions: [],
|
||
// 上传参数
|
||
upload: {
|
||
// 是否禁用上传
|
||
isUploading: false,
|
||
// 设置上传的请求头部
|
||
headers: { },
|
||
// 上传的URL
|
||
url: process.env.VUE_APP_BASE_API + '/room/template/import'
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getProjectOptions()
|
||
this.getTagOptions()
|
||
},
|
||
methods: {
|
||
/** 处理Tab切换 */
|
||
handleTabClick() {
|
||
// 重置页码
|
||
this.queryParams.pageNum = 1
|
||
|
||
if (this.activeTab === 'all') {
|
||
// 全部房源，清除businessStatus的查询条件
|
||
this.queryParams.businessStatus = undefined
|
||
} else if (this.activeTab === 'commercial') {
|
||
// 招商房源，设置businessStatus为1
|
||
this.queryParams.businessStatus = '1'
|
||
}
|
||
|
||
// 重新加载列表
|
||
this.getList()
|
||
},
|
||
|
||
/** 获取房源列表 */
|
||
getList() {
|
||
this.loading = true
|
||
|
||
// 添加日期范围参数
|
||
const params = {...this.queryParams}
|
||
if (this.dateRange && this.dateRange.length > 0) {
|
||
params.beginTime = this.dateRange[0]
|
||
params.endTime = this.dateRange[1]
|
||
}
|
||
|
||
listRoom(params).then(response => {
|
||
if (response.code === '000000') {
|
||
this.roomList = response.data.list || []
|
||
this.total = response.data.total
|
||
} else {
|
||
this.$message.error(response.msg || '获取房源列表失败')
|
||
this.roomList = []
|
||
this.total = 0
|
||
}
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
/** 获取项目选项 */
|
||
getProjectOptions() {
|
||
// 调用项目列表接口获取项目选项
|
||
getProjectList({ pageSize: 100 }).then(res => {
|
||
if (res.code === '000000') {
|
||
this.projectOptions = res.data.list.map(item => {
|
||
return { id: item.id, projectName: item.projectName }
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 获取楼宇选项 */
|
||
getBuildingOptions(projectId) {
|
||
if (!projectId) {
|
||
this.buildingOptions = []
|
||
this.queryParams.buildingId = undefined
|
||
this.floorOptions = []
|
||
this.queryParams.floorId = undefined
|
||
return
|
||
}
|
||
const params = {
|
||
projectId: projectId,
|
||
pageNum: 1,
|
||
pageSize: 100,
|
||
}
|
||
getBuildingList(params).then(response => {
|
||
if (response.code === '000000') {
|
||
this.buildingOptions = response.data.list || []
|
||
} else {
|
||
this.$message.error(response.msg || '获取楼宇列表失败')
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 获取楼层选项 */
|
||
getFloorOptions(buildingId) {
|
||
if (!buildingId) {
|
||
this.floorOptions = []
|
||
this.queryParams.floorId = undefined
|
||
return
|
||
}
|
||
|
||
listFloors(buildingId).then(response => {
|
||
if (response.code === '000000') {
|
||
this.floorOptions = response.data || []
|
||
} else {
|
||
this.$message.error(response.msg || '获取楼层列表失败')
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 获取房源标签选项 */
|
||
getTagOptions() {
|
||
getTagByType({ tagType: "房源标签", tagName: "房源标签" }).then(res => {
|
||
this.tagOptions = res.data
|
||
}).catch(() => {
|
||
this.tagOptions = [
|
||
{ id: '1', tagName: '标签1' },
|
||
{ id: '2', tagName: '标签2' }
|
||
]
|
||
})
|
||
},
|
||
|
||
/** 项目选择改变事件 */
|
||
handleProjectChange(projectId) {
|
||
// 清空楼宇和楼层的选择
|
||
this.queryParams.buildingId = undefined
|
||
this.queryParams.floorId = undefined
|
||
this.buildingOptions = []
|
||
this.floorOptions = []
|
||
|
||
if (projectId) {
|
||
this.getBuildingOptions(projectId)
|
||
}
|
||
},
|
||
|
||
/** 楼宇选择改变事件 */
|
||
handleBuildingChange(buildingId) {
|
||
// 清空楼层的选择
|
||
this.queryParams.floorId = undefined
|
||
this.floorOptions = []
|
||
|
||
if (buildingId) {
|
||
getFloorListByBuilding(buildingId).then(response => {
|
||
if (response.code === '000000') {
|
||
this.floorOptions = response.data || []
|
||
} else {
|
||
this.$message.error(response.msg || '获取楼层列表失败')
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
/** 查询房源列表 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
|
||
/** 重置查询条件 */
|
||
resetQuery() {
|
||
this.dateRange = []
|
||
this.resetForm('queryForm')
|
||
this.resetForm('advancedQueryForm')
|
||
|
||
// 保持当前Tab的状态
|
||
const tabBusinessStatus = this.activeTab === 'commercial' ? '1' : undefined
|
||
|
||
this.queryParams = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
projectId: undefined,
|
||
buildingId: undefined,
|
||
floorId: undefined,
|
||
roomNumber: undefined,
|
||
tags: [],
|
||
rentalStatus: undefined,
|
||
businessStatus: tabBusinessStatus,
|
||
decorationStatus: undefined
|
||
}
|
||
|
||
this.buildingOptions = []
|
||
this.floorOptions = []
|
||
this.handleQuery()
|
||
},
|
||
|
||
/** 切换高级搜索 */
|
||
toggleAdvanced() {
|
||
this.advanced = !this.advanced
|
||
},
|
||
|
||
/** 多选框选中数据 */
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.id)
|
||
this.single = selection.length !== 1
|
||
this.multiple = !selection.length
|
||
},
|
||
|
||
/** 导出房源数据 */
|
||
handleExport() {
|
||
const params = this.ids
|
||
if(this.ids.length === 0){
|
||
this.$message.warning('请至少选择一条数据')
|
||
return
|
||
}
|
||
|
||
this.$confirm('是否确认导出所选房源数据?', '警告', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.loading = true
|
||
exportRoom(params).then(response => {
|
||
this.download(response, '房源信息.xlsx')
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
})
|
||
},
|
||
|
||
/** 下载导入模板 */
|
||
downloadImportTemplate() {
|
||
downloadTemplate().then(response => {
|
||
this.download(response, 'room_import.xlsx')
|
||
})
|
||
},
|
||
|
||
/** 导入按钮操作 */
|
||
handleImport() {
|
||
this.importOpen = true
|
||
},
|
||
|
||
/** 文件上传中处理 */
|
||
handleFileUploadProgress() {
|
||
this.upload.isUploading = true
|
||
},
|
||
|
||
/** 文件上传成功处理 */
|
||
handleFileSuccess(response) {
|
||
this.upload.isUploading = false
|
||
this.$refs.upload.clearFiles()
|
||
this.importOpen = false
|
||
if (response.code === '000000') {
|
||
this.$alert(`response.data.message `, { type: 'success' })
|
||
this.getList()
|
||
} else {
|
||
this.$alert(response.msg || '导入失败，正在下载错误文件', '导入结果', { type: 'error' })
|
||
}
|
||
},
|
||
|
||
/** 提交上传文件 */
|
||
submitFileForm() {
|
||
this.$refs.upload.submit()
|
||
},
|
||
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.currentRoomId = null
|
||
this.isEdit = false
|
||
this.title = '新增房源'
|
||
this.open = true
|
||
},
|
||
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.currentRoomId = row.id
|
||
this.isEdit = true
|
||
this.title = '修改房源'
|
||
this.open = true
|
||
},
|
||
|
||
/** 查看详情按钮操作 */
|
||
handleDetail(row) {
|
||
this.currentRoomId = row.id
|
||
this.viewTitle = '房源详情'
|
||
this.viewOpen = true
|
||
},
|
||
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const roomId = row.id
|
||
this.$confirm('是否确认删除该房源？删除后所有相关信息将被清除', '警告', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
delRoom(roomId).then(response => {
|
||
if (response.code === '000000') {
|
||
this.$message.success('删除成功')
|
||
this.getList()
|
||
} else {
|
||
this.$message.error(response.msg || '删除失败')
|
||
}
|
||
})
|
||
}).catch(() => {})
|
||
},
|
||
|
||
/** 分页大小改变 */
|
||
handleSizeChange(val) {
|
||
this.queryParams.pageSize = val
|
||
this.getList()
|
||
},
|
||
|
||
/** 分页页码改变 */
|
||
handleCurrentChange(val) {
|
||
this.queryParams.pageNum = val
|
||
this.getList()
|
||
},
|
||
|
||
/** 获取价格单位文本 */
|
||
getPriceUnitText(unitType) {
|
||
if (!unitType) return '';
|
||
const unitMap = {
|
||
'1': '元/㎡/天',
|
||
'2': '元/㎡/月',
|
||
'3': '元/月',
|
||
'4': '元/天',
|
||
'5': '元/年'
|
||
};
|
||
return unitMap[unitType] || '';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-container {
|
||
.el-card {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.el-table {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.el-tag + .el-tag {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 15px;
|
||
text-align: right;
|
||
}
|
||
|
||
.el-form {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
::v-deep .el-upload-dragger {
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep .el-upload {
|
||
width: 100%;
|
||
}
|
||
|
||
.el-select {
|
||
display: block;
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
height: 32px;
|
||
line-height: 32px;
|
||
}
|
||
|
||
::v-deep .el-input--suffix .el-input__inner {
|
||
padding-right: 30px;
|
||
}
|
||
|
||
/* 确保表格内容垂直居中 */
|
||
::v-deep .el-table td, ::v-deep .el-table th {
|
||
padding: 8px 0;
|
||
}
|
||
}
|
||
::v-deep .el-range-separator {
|
||
width: 30px !important; /* 增加分隔符宽度 */
|
||
padding: 0 5px !important;
|
||
line-height: 25px !important;
|
||
}
|
||
::v-deep .el-date-editor .el-range__icon {
|
||
line-height: 25px !important;
|
||
}
|
||
</style> |