Commit a964340a authored by huangjie's avatar huangjie

集团详情-土地交易

parent 97683cfa
...@@ -150,3 +150,22 @@ export function memberListExport(data) { ...@@ -150,3 +150,22 @@ export function memberListExport(data) {
data: data data: data
}) })
} }
//集团商机-土地交易
export function landMarketPage(data) {
return request({
url: '/combine/info/landMarket/page',
method: 'post',
data: data
})
}
//集团商机-土地交易导出
export function landMarketExport(data) {
return request({
url: '/export/combine/landMarket',
method: 'post',
data: data
})
}
...@@ -16,7 +16,13 @@ ...@@ -16,7 +16,13 @@
class="detail-menu" class="detail-menu"
@open="handleOpen"> @open="handleOpen">
<template v-for="(item, index) in sideRoute"> <template v-for="(item, index) in sideRoute">
<template> <el-submenu :index="index.toString()" v-if="item.children">
<template slot="title">
<span>{{item.title}}</span>
</template>
<el-menu-item :index="index+'-'+idx" v-for="(it, idx) in item.children" :key="idx" @click="handleItem(it)">{{it.title}}</el-menu-item>
</el-submenu>
<template v-else>
<el-menu-item :index="index.toString()" :disabled="item.disabled" @click="handleItem(item)">{{item.title}}</el-menu-item> <el-menu-item :index="index.toString()" :disabled="item.disabled" @click="handleItem(item)">{{item.title}}</el-menu-item>
</template> </template>
</template> </template>
...@@ -56,6 +62,20 @@ export default { ...@@ -56,6 +62,20 @@ export default {
sideRoute: [ sideRoute: [
{title: '集团成员', pathName: 'members'}, {title: '集团成员', pathName: 'members'},
{title: '集团资质', pathName: 'qualifications'}, {title: '集团资质', pathName: 'qualifications'},
{title: '集团商机', pathName: '', children: [
{ title: '土地交易', pathName: 'landtransaction' },
]
},
{title: '集团业绩', pathName: 'performance'},
{title: '集团招标', pathName: 'zhaobiao'},
],
sideRoute1: [
{title: '集团成员', pathName: 'members'},
{title: '集团资质', pathName: 'qualifications'},
{title: '集团商机', pathName: '', children: [
{ title: '土地交易', pathName: 'landtransaction' },
]
},
{title: '集团业绩', pathName: 'performance'}, {title: '集团业绩', pathName: 'performance'},
{title: '集团招标', pathName: 'zhaobiao'}, {title: '集团招标', pathName: 'zhaobiao'},
], ],
...@@ -63,6 +83,7 @@ export default { ...@@ -63,6 +83,7 @@ export default {
customer:[ customer:[
'members', 'members',
'qualifications', 'qualifications',
'landtransaction',
'performance', 'performance',
'zhaobiao', 'zhaobiao',
], ],
...@@ -128,7 +149,21 @@ export default { ...@@ -128,7 +149,21 @@ export default {
}, },
handleItem(item){ handleItem(item){
this.$emit("currentPath", item) let obj = item;
for (var i in this.sideRoute1) {
if (this.sideRoute1[i].children) {
for (var j in this.sideRoute1[i].children) {
if (item.title == this.sideRoute1[i].children[j].title) {
obj.pathName = this.sideRoute1[i].children[j].pathName;
}
}
} else {
if (item.title == this.sideRoute1[i].title) {
obj.pathName = this.sideRoute1[i].pathName;
}
}
}
this.$emit("currentPath", obj)
}, },
handleSearch(flag){ handleSearch(flag){
if((this.searchText&&!flag) || (!this.searchText&&flag)){ if((this.searchText&&!flag) || (!this.searchText&&flag)){
......
<template>
<div class="members">
<head-form-new
ref="headForm"
title="土地交易明细"
:form-data="formData"
:query-params="queryParams"
:total="tableDataTotal"
:headerFixed="true"
:isExcel="true"
@handle-excel="clickDialog"
@handle-search="handleSearch"
>
</head-form-new>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<tables
v-if="!isSkeleton"
:tableLoading="tableLoading"
:tableData="tableData"
:forData="forData"
:headerFixed="true"
:tableDataTotal="tableDataTotal"
:queryParams="queryParams"
:MaxPage=500
@handle-current-change="handleCurrentChange"
>
<template slot="companyName" slot-scope="scope">
<el-tooltip v-if="scope.row.Names.length>19" class="item" effect="dark" :content="scope.row.Names" placement="top">
<div class="minwid">
<div v-if="scope.row.companyId&&scope.row.companyName" class="a-link" @click="getUipIdByCid(scope.row.companyId)" v-html="scope.row.companyName"></div>
<div v-else v-html="scope.row.companyName || '--'"></div>
</div>
</el-tooltip>
<div v-else>
<div v-if="scope.row.companyId&&scope.row.companyName" class="a-link" @click="getUipIdByCid(scope.row.companyId)" v-html="scope.row.companyName"></div>
<div v-else v-html="scope.row.companyName || '--'"></div>
</div>
</template>
<template slot="projectName" slot-scope="scope">
<el-tooltip v-if="scope.row.projectName.length>19" class="item" effect="dark" :content="scope.row.projectName" placement="top">
<div class="minwid">
<div v-if="scope.row.id&&scope.row.projectName" class="a-link" @click="getDetail(scope.row.id)" v-html="scope.row.projectName"></div>
<div v-else v-html="scope.row.projectName || '--'"></div>
</div>
</el-tooltip>
<div v-else class="minwid">
<div class="minwid">
<div v-if="scope.row.id&&scope.row.projectName" class="a-link" @click="getDetail(scope.row.id)" v-html="scope.row.projectName"></div>
<div v-else v-html="scope.row.projectName || '--'"></div>
</div>
</div>
</template>
<template slot="landAddr" slot-scope="scope">
<el-tooltip v-if="scope.row.landAddr.length>19" class="item" effect="dark" :content="scope.row.landAddr" placement="top">
<div class="minwid">
<div>
{{scope.row.landAddr || '--'}}
</div>
</div>
</el-tooltip>
<div v-else>
{{scope.row.landAddr || '--'}}
</div>
</template>
<template slot="stockPercent" slot-scope="scope">
<div>{{scope.row.stockPercent || '--'}}{{scope.row.stockPercent ? '%':''}}</div>
</template>
</tables>
<ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>
</div>
</template>
<script>
import { landMarketPage, memberCount, memberList, landMarketExport } from '@/api/detail/groupAccount/groupAccount'
import { getUipIdByCid } from '@/api/macro/macro'
import dataRegion from '@/assets/json/dataRegion'
import { getDictType } from '@/api/main'
import mixin from '../../party-a/mixins/mixin'
import ExportDialog from '../../../component/export-dialog'
import api from '@/api/radar/radar.js'
export default {
name: 'landtransaction',
props: ['customerId','combineName'],
mixins: [mixin],
components:{ExportDialog},
data(){
return{
isSkeleton:true,
tableLoading:false,
isDetails: false,
defaultSort: {prop: 'time', order: 'descending'},
queryParams: {
combineId: this.customerId,
pageNum: 1,
pageSize: 20,
},
forData: [
{label: '受让人/集团成员', prop: 'companyName',minWidth: '285',slot:true},
{label: '持股比例', prop: 'stockPercent', minWidth: '100',slot:true},
{label: '项目名称', prop: 'projectName',minWidth: '285',slot:true},
{label: '成交金额(万元)', prop: 'transactionPrice',minWidth: '120'},
{label: '行政区划', prop: 'domicile',minWidth: '180'},
{label: '出让面积(平方米)', prop: 'acreage',minWidth: '150'},
{label: '土地用途', prop: 'landUse',minWidth: '120'},
{label: '供应方式', prop: 'supplyLandWay', minWidth: '100'},
{label: '土地坐落', prop: 'landAddr', minWidth: '285',slot:true},
{label: '合同签订日期', prop: 'contractSignTime', minWidth: '120'},
],
formData: [
{ type: 7, fieldName: 'area', value: '',props: {multiple: true,value: 'id',expandTrigger: 'hover'}, placeholder: '行政区划', options:[], uid: this.getUid()},
{ type: 4, fieldName: 'landUse', value: '', placeholder: '土地用途', options: [], uid: this.getUid() },
{ type: 4, fieldName: 'supplyLandWay', value: '', placeholder: '供应方式', options: [], uid: this.getUid() },
{ type: 8, fieldName: 'startAcreageList', value: '', placeholder: '出让面积', options: [], uid: this.getUid()},
{ type: 1, fieldName: 'StockPercent', value: '', placeholder: '持股比例', options: [], uid: this.getUid()},
{ type: 9, fieldName: 'money', value: '', placeholder: '成交金额', startMoney: 'startTransactionPrice', endMoney: 'endTransactionPrice',moneyList:[], uid: this.getUid() },
{ type: 5, fieldName: 'time', value: '', placeholder: '合同签订时间', startTime: 'contractSignTimeStart', endTime: 'contractSignTimeEnd',timeList:[],dateTo:this.formatDate(new Date()) , uid: this.getUid()},
{ type: 3, fieldName: 'keyword', value: '', placeholder: '输入关键词查询', uid: this.getUid()},
// { type: 0, fieldName: 'penalizeReasonType', value: '', placeholder: '筛选', options: [], uid: this.getUid()},
],
acreageOptions: [
{
value: "不限",
label: "不限",
},
{
value: [0, 500],
label: "500平以下",
},
{
value: [500, 1000],
label: "500-1000平",
},
{
value: [1000, 5000],
label: "1000-5000平",
},
{
value: [5000, 20000],
label: "5000-2万平",
},
{
value: [20000, 50000],
label: "2万-5万平",
},
{
value: [50000, 100000],
label: "5万-10万平",
},
{
value: [100000, ""],
label: "10万平以上",
},
],
supplyLandWayOptions: [
{name:'划拨供地',value:'划拨供地'},
{name:'协议出让',value:'协议出让'},
{name:'国有租赁',value:'国有租赁'},
{name:'拍卖出让',value:'拍卖出让'},
{name:'招标出让',value:'招标出让'},
{name:'挂牌出让',value:'挂牌出让'},
],
tableData:[],
tableDataTotal:0,
cgblList:[
{value:'100%',label:'100%'},
{value:'50%以上',label:'50%以上'},
{value:'20%以上',label:'20%以上'},
{value:'5%以上',label:'5%以上'},
{value:'1%-5%',label:'1%-5%'},
],
paramsData:{}, //储存组件筛选的条件
dataEXCEL:{},
exportData:{
title:'集团商机土地交易',
dialogExportVisible:false,
forData: [
{label: '受让人/集团成员', prop: 'srr',minWidth: '260'},
{label: '持股比例', prop: 'cgbl', minWidth: '100'},
{label: '项目名称', prop: 'xmmc',minWidth: '250'},
{label: '成交金额(万元)', prop: 'cjje',minWidth: '120'},
{label: '行政区划', prop: 'xzqh',minWidth: '120'},
{label: '出让面积(平方米)', prop: 'crmj',minWidth: '150'},
{label: '土地用途', prop: 'tdyt',minWidth: '100'},
{label: '供应方式', prop: 'gyfs', minWidth: '100'},
{label: '土地坐落', prop: 'tdzl', minWidth: '260'},
{label: '合同签订日期', prop: 'registeredDate', minWidth: '120'},
],
exportTableData:[
{
srr:'XX集团有限公司',
cgbl:'1.56%',
xmmc:'广州市产业园区配套基础设施建设',
cjje:'3000',
xzqh:'广州',
crmj:'1000',
tdyt:'工业用地',
gyfs:'划拨工地',
tdzl:'联港四路北侧、环港东路西侧',
registeredDate:'2023-11-07',
},
{
srr:'XX集团有限公司',
cgbl:'1.24%',
xmmc:'重庆江津市110KV输变电工程',
cjje:'300',
xzqh:'重庆',
crmj:'5000',
tdyt:'工业用地',
gyfs:'划拨工地',
tdzl:'联港四路北侧、环港东路西侧',
registeredDate:'2023-11-07',
},
],
exportEXCEL:false,
},
timeList: ['不限','近1个月', '近半年', '近1年', '近3年', '自定义'],
}
},
watch:{
},
created() {
this.searchDic()
this.handleSearch()
this.dataRegion()
this.formData[2].options=this.supplyLandWayOptions;
this.formData[3].options=this.acreageOptions;
this.formData[4].options=this.cgblList;
this.formData[6].timeList=this.timeList;
},
methods: {
//土地用途
searchDic(){
api.searchDic().then(res=>{
let data = []
res.landUse.forEach(item => {
let arr = {value:item,name:item}
data.push(arr)
});
this.formData[1].options = data
}).catch(error=>{
});
},
handleSearch(params=[],type){
let arr = {}
if(!type){
params.forEach(item=>{
arr[item.fieldName] = item.value
})
}else{
arr = params
}
this.paramsData = {}
if(arr){
if(arr.area){
let area = []
arr.area.forEach(item=>{
area.push(item[item.length-1])
})
this.paramsData.area = area.toString()
}
this.paramsData.landUse = arr.landUse?arr.landUse.toString():''
this.paramsData.supplyLandWay = arr.supplyLandWay?arr.supplyLandWay.toString():''
if (arr.StockPercent) {
let StockPercent = parseFloat(arr.StockPercent)
this.paramsData.minStockPercent = StockPercent
if (StockPercent == 1) {
this.paramsData.maxStockPercent = 5
}
if (StockPercent == 100) {
this.paramsData.maxStockPercent = StockPercent
}
}
if(arr.money){
this.paramsData.startTransactionPrice = arr.money[0]?parseFloat(arr.money[0]):null
this.paramsData.endTransactionPrice = arr.money[1]?parseFloat(arr.money[1]):null
}
if(arr.time){
this.paramsData.contractSignTimeStart = arr.time[0]?arr.time[0]:null
this.paramsData.contractSignTimeEnd = arr.time[1]?arr.time[1]:null
}
if(arr.startAcreageList && arr.startAcreageList != '不限'){
this.paramsData.startAcreage = arr.startAcreageList[0]?parseFloat(arr.startAcreageList[0]):null
this.paramsData.endAcreage = arr.startAcreageList[1]?parseFloat(arr.startAcreageList[1]):null
}
this.paramsData.keyword = arr.keyword
}
this.paramsData.combineId = this.customerId,
this.tableLoading=true;
var dateparams = {
page: {
page: this.queryParams.pageNum,
limit: this.queryParams.pageSize
},
landMarketDto: this.paramsData
}
// this.dataEXCEL=JSON.parse(JSON.stringify(data));
landMarketPage(JSON.stringify(dateparams)).then(res=>{
this.isSkeleton = false
this.tableLoading = false
if(res.code === 200){
this.tableData = res.data.list
this.tableData.forEach(item=>{
item.Names = item.companyName.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '');
})
this.tableDataTotal = res.data.total
}else {
this.tableData = []
}
})
},
//地区
async dataRegion() {
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < dataRegion.length; i++) {
if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == dataRegion[i].parentId) {
str[j].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId,
"children": []
});
}
}
} else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == dataRegion[i].parentId) {
str[j].children[k].children.push({
'id': dataRegion[i].id,
"label": dataRegion[i].regionName,
"short": dataRegion[i].short,
"value": dataRegion[i].parentId
// "children":[]
});
}
}
}
}
}
}
this.addressList = str;
this.formData[0].options=str;
},
//分页
handleCurrentChange(e){
let params = this.formParams()
params.pageNum = e
this.queryParams.pageNum = e
this.handleSearch(params,1)
this.$emit('handle-scroll')
},
getUipIdByCid(companyId){
this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
},
getDetail(id){
this.$router.push({path: '/radar/Land/details/'+id})
},
clickDialog(){
this.exportData.dialogExportVisible=true;
},
clickEXCEL(value,title) {
if(this.tableData.length === 0){
this.$message.error('当前信息列表数据为空,请重新筛选数据');
return
}
if(value > 2000){
return
}
this.dataEXCEL.exportExeclName=title;
if(value){
this.dataEXCEL.exportCount=value
}else {
this.dataEXCEL.exportCount=2000;
}
this.dataEXCEL.landMarketDto = this.paramsData
landMarketExport(this.dataEXCEL).then(res=>{
if(res.code === 200){
this.exportData.exportEXCEL=true;
}else {
this.$message.error(res.msg);
}
})
},
cancel(){
this.exportData.dialogExportVisible=false;
this.exportData.exportEXCEL={}
},
formatDate(timestamp) {
var time = new Date(timestamp)
let year = time.getFullYear();
let month = time.getMonth() + 1 >= 10 ? parseInt(time.getMonth() + 1) : "0" + parseInt(time.getMonth() + 1);
let day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
return year + '-' + month + '-' + day
},
}
}
</script>
<style lang="scss" scoped>
.members{
background: #ffffff;
border-radius: 4px;
padding: 16px;
.headForm{
margin-bottom: 14px;
.common-title{
margin-right: 24px;
}
}
.search-box {
display: inline-block;
border-radius: 4px;
/*border: 1px solid #D9D9D9;*/
width: 70px;
/*cursor: pointer;*/
position: relative;
.search-box-t {
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: rgba(35,35,35,0.8);
margin-right: 8px;
text-align: center;
width: 70px;
display: inline-block;
cursor: pointer;
i {
color: rgba(35, 35, 35, 0.4);
margin-left: 5px
}
}
.search-box-ta {
color: #0081FF;
i {
color: #0081FF;
}
}
.search-main{
background: #ffffff;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);
border-radius: 4px;
width: 500px;
//height: 337px;
padding: 16px;
position: absolute;
top: 34px;
left: 0;
z-index: 2001;
.item{
margin-bottom: 5px;
display: flex;
/*align-items: center;*/
font-size: 14px;
.wrap_label{
color: rgba(35,35,35,0.8);
margin-right: 12px;
line-height: 24px;
width: 77px;
text-align: right;
/*float: left;*/
}
.item_ckquery{
position: relative;
width: 400px;
/*float: left;*/
/*flex: 1;*/
span{
color: #232323;
padding: 3px 6px;
margin-bottom: 5px;
display: inline-block;
cursor: pointer;
margin-right: 8px;
}
.color_text{
background: #F3F4F5;
border-radius: 4px;
color: #0081FF;
}
.select-active{
color: #0081FF;
}
}
.cascader-region {
position: absolute;
left: 0;
top: -6px;
opacity: 0;
line-height: 22px;
}
}
}
}
::v-deep .el-table{
.has-gutter{
tr{
th:nth-last-child(2){
border-right:0;
}
td:nth-last-child(2){
border-right:0;
}
}
}
.el-table__cell.gutter{
background: #F0F3FA;
}
}
::v-deep .el-icon-arrow-down,.el-icon-arrow-up{
font-size: 14px;
color:#232323 !important;
}
.minwid{
>div{
width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@import "@/assets/styles/search-common.scss";
}
</style>
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<div id="groupBox" v-if="customerId"> <div id="groupBox" v-if="customerId">
<Members v-if="currentPath.pathName=='members'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/> <Members v-if="currentPath.pathName=='members'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/>
<Qualifications v-if="currentPath.pathName=='qualifications'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/> <Qualifications v-if="currentPath.pathName=='qualifications'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/>
<Landtransaction v-if="currentPath.pathName=='landtransaction'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/>
<Performance v-if="currentPath.pathName=='performance'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/> <Performance v-if="currentPath.pathName=='performance'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/>
<Zhaobiao v-if="currentPath.pathName=='zhaobiao'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/> <Zhaobiao v-if="currentPath.pathName=='zhaobiao'" @handle-scroll="scrollToTop" :customer-id="customerId" :isSkeleton="isSkeleton" :combineName="name"/>
</div> </div>
...@@ -27,6 +28,7 @@ ...@@ -27,6 +28,7 @@
import SideBar from "./component/Sidebar" import SideBar from "./component/Sidebar"
import Members from "./component/members" import Members from "./component/members"
import Qualifications from "./component/qualifications" import Qualifications from "./component/qualifications"
import Landtransaction from "./component/landtransaction"
import Performance from "./component/performance" import Performance from "./component/performance"
import Zhaobiao from "./component/zhaobiao" import Zhaobiao from "./component/zhaobiao"
import { infoHeader } from '@/api/detail/party-a/index' import { infoHeader } from '@/api/detail/party-a/index'
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
export default { export default {
name: 'GroupAccount', name: 'GroupAccount',
components:{ components:{
SideBar,Members,Qualifications,Performance,Zhaobiao SideBar,Members,Qualifications,Landtransaction,Performance,Zhaobiao
}, },
data(){ data(){
return{ return{
......
...@@ -178,6 +178,14 @@ export default { ...@@ -178,6 +178,14 @@ export default {
startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 15) startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 15)
timeStr = [this.formatDate(startTime), this.formatDate(endTime)] timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break; break;
case '近1个月':
startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 30)
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近半年':
startTime = new Date(endTime.getTime() - 3600 * 1000 * 24 * 180)
timeStr = [this.formatDate(startTime), this.formatDate(endTime)]
break;
case '近1年': case '近1年':
startTime = new Date().setFullYear(new Date().getFullYear() - 1) startTime = new Date().setFullYear(new Date().getFullYear() - 1)
if(this.dateTo){ if(this.dateTo){
......
<template>
<div :ref="refStr" class="custom-money-select screen-popper" id="custom-money-select">
<div :class="['input-block', isSelectOption?'rote':'']">
<div class="block" @click="isSelectOption=!isSelectOption" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<el-input class="custom-money-input" v-model="value" :placeholder="placeholder" readonly>
<template slot="suffix">
<span @click.stop="handleClear" :class="[isClear&&isHover?'el-icon-circle-close':'el-icon-arrow-down']"></span>
</template>
</el-input>
</div>
<div class="options-block" v-if="isSelectOption">
<div class="arrow"></div>
<div @click="handleClick(option)" :class="['option', value==option.value?'active':'']" :key="i" v-for="(option, i) in options">
<template v-if="option.value == '自定义'">
<!--<div class="number-box">-->
<!--<input type="number" v-model="startMoney" class="number-input" clearable>&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="endMoney" class="number-input" type="text" clearable>&nbsp;&nbsp;万元&nbsp;&nbsp;<el-button @click.stop="handleConfirm" class="number-button" type="primary">确定</el-button>-->
<!--</div>-->
<div style="position: relative">
自定义
<div class="popper_box" style="position: absolute" v-if="value === '自定义'">
<div class="popper_wrap">
<el-input class="popper_input" type="number" clearable v-model="startMoney"></el-input>
</div>
<div class="popper_wrap">
<el-input class="popper_input" type="number" clearable v-model="endMoney"></el-input>
</div>
<div style="">
<el-button size="mini" @click.stop="cancellation">取消</el-button>
<el-button type="primary" size="mini" @click.stop="handleConfirm">确定</el-button>
</div>
</div>
</div>
</template>
<template v-else>
<span>{{option.label}}</span> <span v-if="value==option.value" class="el-icon-check"></span>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
'placeholder': {
type: String,
default: '请选择'
},
'ref-str': {
type: String,
default: `timeselect${String(Math.random(0, 100)).slice(2)}`,
},
permissions: { //文本权限相关字段
type: Array,
default: () => {},
},
powerLabel: {
type: String,
default: ''
},
moneyList: {
type: Array,
default: () => [],
}
},
computed: {
isClear() {
if(!this.isSelectOption && this.value) {
return true
}else {
return false
}
}
},
data() {
return {
value: '',
options: [
{
value: [0, 100],
label: "100万元以下",
},
{
value: [100, 1000],
label: "100万-1000万元",
},
{
value: [1000, 5000],
label: "1000万-5000万元",
},
{
value: [5000, 20000],
label: "5000万-2亿元",
},
{
value: [20000, ""],
label: "2亿元以上",
},
{
value: '自定义',
label: '自定义',
},
],
isSelectOption: false,
startMoney: '',
endMoney: '',
isHover: false
}
},
mounted() {
this.handleAppClick()
if(this.moneyList&&this.moneyList.length>0){
this.options = this.moneyList
}
},
destroyed() {
const app = document.getElementById('app')
app.removeEventListener('click', ()=>{}, true)
},
methods: {
// 判断是否点击的为组件内部
handleAppClick() {
const app = document.getElementById('app')
app.addEventListener('click', (e) => {
const dom = this.$refs[this.refStr]
const flag = dom && dom.contains(e.target)
// const flag = document.getElementById('custom-money-select').contains(e.target)
!flag ? this.isSelectOption = false : ''
// if(this.value == '自定义' && !this.startMoney && !this.endMoney) {
// this.value = ''
// this.$emit('input', '')
// this.$emit('handle-search')
// }
}, true)
},
// 清除
handleClear() {
if(this.isClear && this.isHover) {
this.value = ''
this.startMoney = ''
this.endMoney = ''
this.$emit('input', '')
this.$emit('handle-search')
}else {
this.isSelectOption = true
}
},
// 鼠标移入后的回调
handleMouseenter() {
this.isHover = true
},
// 鼠标离开后的回调
handleMouseleave() {
this.isHover = false
},
// 选项点击后的回调
handleClick(value) {
this.value = value.label
let moneyStr = ''
if(value.label == '自定义') {
this.value = '自定义';
}else {
this.startMoney = ''
this.endMoney = ''
this.isSelectOption = false
moneyStr = value.value
this.$emit('input', moneyStr)
this.$emit('handle-search')
}
},
// 自定义取消
cancellation(){
this.isSelectOption = false
this.value = ''
this.$emit('input', '')
this.$emit('handle-search')
},
// 自定义确认点击后的回调
handleConfirm() {
this.isSelectOption = false
if(!this.startMoney && !this.endMoney) {
this.value = ''
this.$emit('input', '')
}else {
if(this.endMoney && this.startMoney) {
this.value = `${this.startMoney}-${this.endMoney}万`
}else {
if(this.startMoney) {
this.value = `大于等于${this.startMoney}万`
}
if(this.endMoney) {
this.value = `小于等于${this.endMoney}万`
}
}
let moneyStr = [this.startMoney, this.endMoney]
this.$emit('input', moneyStr)
}
this.$emit('handle-search')
}
}
}
</script>
<style lang="scss">
.custom-money-select {
/*width: 120px;*/
width: auto;
height: 34px;
position: relative;
.el-input__inner{
width: 100px !important;
}
.rote {
background: #F4F6F9;
.el-input__inner{
background: #F4F6F9;
}
}
.input-block {
margin: 0;
width: 100%;
height: 100%;
cursor: pointer;
.block {
width: 100%;
height: 100%;
>.custom-money-input.el-input {
width: 100%;
height: 100%;
.el-input__inner{
border: 0;
}
>input {
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 4px;
}
}
}
.el-input__suffix {
transform: rotateZ(0);
width: 25px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&.rote {
.el-input__suffix {
transform: rotateZ(180deg);
}
}
}
.options-block {
position: absolute;
margin-top: 5px;
min-width: 170px;
font-size: 14px;
color: #666666;
background-color: #fff;
/*padding: 6px 0;*/
border-radius: 4px;
z-index: 10;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
// .arrow {
// position: absolute;
// width: 0;
// height: 0;
// top: -12px;
// left: 35px;
// border: 6px solid transparent;
// border-bottom-color: #E4E7ED;
// &::after {
// position: absolute;
// display: inline-block;
// left: -4px;
// top: -2px;
// content: '';
// width: 0;
// height: 0;
// border: 4px solid transparent;
// border-bottom-color: #fff;
// z-index: 9;
// }
// }
.option {
padding: 0 24px 0 16px;
box-sizing: border-box;
width: 170px;
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
.number-box {
display: flex;
align-items: center;
>span {
margin: 0 10px;
}
.number-input {
padding: 0 24px 0 10px;
width: 100px !important;
height: 30px;
line-height: 30px;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 2px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"]{
-moz-appearance: textfield;
}
}
.number-button {
padding: 0;
width: 60px;
height: 30px;
line-height: 30px;
margin-left: 10px;
}
}
>span {
display: inline-block;
}
&.active {
background-color: #F2F7FF;
color: #0381FA;
}
&:hover {
background-color: #F5F7FA;
}
}
}
.number-input {
padding: 0 24px 0 10px;
width: 60px !important;
height: 30px;
line-height: 30px;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 206px;
border: 1px solid #DCDCDC;
border-radius: 2px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"]{
-moz-appearance: textfield;
}
}
.number-button {
padding: 0;
width: 60px;
height: 30px;
line-height: 30px;
margin-left: 10px;
}
.popper_box {
position: absolute;
left: 125px;
bottom: -15px;
background: #ffffff;
width: 186px;
color: #606266;
text-indent: 0;
padding: 16px;
padding-top: 0px;
border: 1px solid #E4E7ED;
.popper_wrap {
margin-top: 16px;
display: inline-block;
.popper_input {
width: 100px;
display: inline-block;
margin: 0px 8px;
line-height: 34px;
}
.el-input__inner {
width: 100px;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input[type='number'] {
-moz-appearance: textfield;
}
}
.popper_box div:last-child {
display: flex;
justify-content: center;
margin-top: 16px;
}
}
</style>
...@@ -64,6 +64,16 @@ ...@@ -64,6 +64,16 @@
<el-cascader :class="[`select-adaptive-${form.uid}`]" ref="cascader" :options="form.options" :props="form.props" v-model="form.value" <el-cascader :class="[`select-adaptive-${form.uid}`]" ref="cascader" :options="form.options" :props="form.props" v-model="form.value"
@change="iptAdaptive(form.uid,true)" :placeholder="form.placeholder" collapse-tags clearable></el-cascader> @change="iptAdaptive(form.uid,true)" :placeholder="form.placeholder" collapse-tags clearable></el-cascader>
</template> </template>
<!-- 出让面积、自定义 -->
<template v-else-if="form.type==8">
<start-acreage-select :class="[`select-adaptive-${form.uid}`,'custom-select']" :startAcreageList="form.startAcreageList" v-model="form.value"
:placeholder="form.placeholder" @handle-search="iptAdaptive(form.uid)" />
</template>
<!-- 金额 (集团户详情)-->
<template v-else-if="form.type==9">
<group-money-select :class="[`select-adaptive-${form.uid}`,'custom-select']" :moneyList="form.moneyList" v-model="form.value"
:placeholder="form.placeholder" @handle-search="iptAdaptive(form.uid)" />
</template>
<!-- 自定义 --> <!-- 自定义 -->
<template v-if="form.type==0"> <template v-if="form.type==0">
<slot name="slot"></slot> <slot name="slot"></slot>
...@@ -78,7 +88,7 @@ ...@@ -78,7 +88,7 @@
</template> </template>
<div v-else class="flex-box"> <div v-else class="flex-box">
<span class="flex-box ability-total" v-if="isTotal">共有{{ total }}条</span> <span class="flex-box ability-total" v-if="isTotal">共有{{ total }}条</span>
<span class="flex-box ability-excel" v-hasPermi="['combine:info:export:win:bid','combine:info:export:bid']" v-if="isExcel && title ==='集团业绩'|| title ==='集团招标' " <span class="flex-box ability-excel" v-hasPermi="['combine:info:export:win:bid','combine:info:export:bid']" v-if="isExcel && title ==='集团业绩'|| title ==='集团招标' || title ==='土地交易明细'"
@click="clickEXCEL"><img src="@/assets/images/ability_excel.png">导出EXCEL</span> @click="clickEXCEL"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
<span class="flex-box ability-excel" v-else @click="clickEXCEL"><img src="@/assets/images/ability_excel.png">导出EXCEL</span> <span class="flex-box ability-excel" v-else @click="clickEXCEL"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
</div> </div>
...@@ -90,6 +100,8 @@ ...@@ -90,6 +100,8 @@
<script> <script>
import CustomTimeSelect from './CustomTimeSelect'; import CustomTimeSelect from './CustomTimeSelect';
import CustomMoneySelect from './CustomMoneySelect'; import CustomMoneySelect from './CustomMoneySelect';
import GroupMoneySelect from './GroupMoneySelect';
import StartAcreageSelect from './StartAcreageSelect';
import gsap from "gsap"; import gsap from "gsap";
export default { export default {
name: "HeadForm", name: "HeadForm",
...@@ -127,9 +139,18 @@ export default { ...@@ -127,9 +139,18 @@ export default {
default: false default: false
} }
}, },
watch: {
formData: {
handler(newValue) {
this.comFormData = newValue;
},
deep: true
}
},
data() { data() {
return { return {
showSearchBox: false showSearchBox: false,
comFormData: this.formData
}; };
}, },
created() { created() {
...@@ -137,7 +158,9 @@ export default { ...@@ -137,7 +158,9 @@ export default {
}, },
components: { components: {
CustomTimeSelect, CustomTimeSelect,
CustomMoneySelect CustomMoneySelect,
StartAcreageSelect,
GroupMoneySelect
}, },
methods: { methods: {
searchFocus(event, formData) { searchFocus(event, formData) {
...@@ -244,7 +267,7 @@ export default { ...@@ -244,7 +267,7 @@ export default {
textContainer.remove(); textContainer.remove();
}); });
dom.style.setProperty("width", `${width + 60}px`); dom.style.setProperty("width", `${width + 60}px`);
this.$emit('handle-search'); this.$emit('handle-search', this.comFormData);
return; return;
} }
textContainer.style.setProperty("visibility", "hidden"); textContainer.style.setProperty("visibility", "hidden");
...@@ -257,7 +280,7 @@ export default { ...@@ -257,7 +280,7 @@ export default {
let containerWidth = textContainer.offsetWidth + 12 + 8; let containerWidth = textContainer.offsetWidth + 12 + 8;
textContainer.remove(); textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`); dom.style.setProperty("width", `${containerWidth}px`);
this.$emit('handle-search'); this.$emit('handle-search', this.comFormData);
} }
} catch (error) { } catch (error) {
...@@ -287,16 +310,16 @@ export default { ...@@ -287,16 +310,16 @@ export default {
textContainer.remove(); textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`); dom.style.setProperty("width", `${containerWidth}px`);
} }
this.$emit('handle-search'); this.$emit('handle-search', this.comFormData);
} catch (error) { } catch (error) {
} }
}, },
changeSelect(e) { changeSelect(e) {
this.$emit('handle-search'); this.$emit('handle-search', this.comFormData);
}, },
clickEXCEL() { clickEXCEL() {
if (this.title === '集团业绩' || this.title === '集团招标' || this.title === '集团成员') { if (this.title === '集团业绩' || this.title === '集团招标' || this.title === '集团成员'|| this.title === '土地交易明细') {
this.$emit('handle-excel'); this.$emit('handle-excel');
} else { } else {
this.$message({ this.$message({
......
<template>
<div :ref="refStr" class="custom-money-select screen-popper" id="custom-money-select">
<div :class="['input-block', isSelectOption?'rote':'']">
<div class="block" @click="isSelectOption=!isSelectOption" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<el-input class="custom-money-input" v-model="value" :placeholder="placeholder" readonly>
<template slot="suffix">
<span @click.stop="handleClear" :class="[isClear&&isHover?'el-icon-circle-close':'el-icon-arrow-down']"></span>
</template>
</el-input>
</div>
<div class="options-block" v-if="isSelectOption">
<div class="arrow"></div>
<div @click="handleClick(option)" :class="['option', value==option.value?'active':'']" :key="i" v-for="(option, i) in options">
<template v-if="option.label == '自定义'">
<!--<div class="number-box">-->
<!--<input type="number" v-model="volumeRateLow" class="number-input" clearable>&nbsp;&nbsp;&nbsp;&nbsp;<input v-model="volumeRateHigh" class="number-input" type="text" clearable>&nbsp;&nbsp;万元&nbsp;&nbsp;<el-button @click.stop="handleConfirm" class="number-button" type="primary">确定</el-button>-->
<!--</div>-->
<div style="position: relative" @click="value='自定义'">
自定义
<div class="popper_box" style="position: absolute" v-if="value === '自定义'">
<div class="popper_wrap">
<el-input class="popper_input" type="number" clearable v-model="volumeRateLow"></el-input>
</div>
<div class="popper_wrap">
<el-input class="popper_input" type="number" clearable v-model="volumeRateHigh"></el-input>
</div>
<div style="">
<el-button size="mini" @click.stop="cancellation">取消</el-button>
<el-button type="primary" size="mini" @click.stop="handleConfirm">确定</el-button>
</div>
</div>
</div>
</template>
<template v-else>
<span>{{option.label}}</span> <span v-if="value==option.label" class="el-icon-check"></span>
</template>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
'placeholder': {
type: String,
default: '请选择'
},
'ref-str': {
type: String,
default: `timeselect${String(Math.random(0, 100)).slice(2)}`,
},
permissions: { //文本权限相关字段
type: Array,
default: () => {},
},
powerLabel: {
type: String,
default: ''
},
startAcreageList: {
type: Array,
default: () => [],
}
},
computed: {
isClear() {
if(!this.isSelectOption && this.value) {
return true
}else {
return false
}
}
},
data() {
return {
value: '',
options: [
{
value: "不限",
label: "不限",
},
{
value: [0, 500],
label: "500平以下",
},
{
value: [500, 1000],
label: "500-1000平",
},
{
value: [1000, 5000],
label: "1000-5000平",
},
{
value: [5000, 20000],
label: "5000-2万平",
},
{
value: [20000, 50000],
label: "2万-5万平",
},
{
value: [50000, 100000],
label: "5万-10万平",
},
{
value: [100000, ""],
label: "10万平以上",
},
{
value: '自定义',
label: "自定义",
},
],
isSelectOption: false,
volumeRateLow: '',
volumeRateHigh: '',
isHover: false
}
},
mounted() {
this.handleAppClick()
if(this.startAcreageList&&this.startAcreageList.length>0){
this.options = this.startAcreageList
}
},
destroyed() {
const app = document.getElementById('app')
app.removeEventListener('click', ()=>{}, true)
},
methods: {
// 判断是否点击的为组件内部
handleAppClick() {
const app = document.getElementById('app')
app.addEventListener('click', (e) => {
const dom = this.$refs[this.refStr]
const flag = dom && dom.contains(e.target)
// const flag = document.getElementById('custom-money-select').contains(e.target)
!flag ? this.isSelectOption = false : ''
// if(this.value == '自定义' && !this.volumeRateLow && !this.volumeRateHigh) {
// this.value = ''
// this.$emit('input', '')
// this.$emit('handle-search')
// }
}, true)
},
// 清除
handleClear() {
if(this.isClear && this.isHover) {
this.value = ''
this.volumeRateLow = ''
this.volumeRateHigh = ''
this.$emit('input', '')
this.$emit('handle-search')
}else {
this.isSelectOption = true
}
},
// 鼠标移入后的回调
handleMouseenter() {
this.isHover = true
},
// 鼠标离开后的回调
handleMouseleave() {
this.isHover = false
},
// 选项点击后的回调
handleClick(value) {
this.value = value.label
let moneyStr = ''
if(value.label == '自定义') {
this.value = '自定义';
}else {
this.volumeRateLow = value.value[0]
this.volumeRateHigh = value.value[1]
this.isSelectOption = false
this.$emit('input',value.value )
this.$emit('handle-search')
}
},
// 自定义取消
cancellation(){
this.isSelectOption = false
this.value = ''
this.$emit('input', '')
this.$emit('handle-search')
},
// 自定义确认点击后的回调
handleConfirm() {
this.isSelectOption = false
if(!this.volumeRateLow && !this.volumeRateHigh) {
this.value = ''
this.$emit('input', '')
}else {
if(this.volumeRateHigh && this.volumeRateLow) {
this.value = `${this.volumeRateLow}-${this.volumeRateHigh}平`
}else {
if(this.volumeRateLow) {
this.value = [this.volumeRateLow,null]
this.value = `大于等于${this.volumeRateLow}平`
}
if(this.volumeRateHigh) {
this.value = `小于等于${this.volumeRateHigh}平`
}
}
let moneyStr = [this.volumeRateLow, this.volumeRateHigh]
this.$emit('input', moneyStr)
}
this.$emit('handle-search')
}
}
}
</script>
<style lang="scss">
.custom-money-select {
/*width: 120px;*/
width: auto;
height: 34px;
position: relative;
.el-input__inner{
width: 100px !important;
}
.rote {
background: #F4F6F9;
.el-input__inner{
background: #F4F6F9;
}
}
.input-block {
margin: 0;
width: 100%;
height: 100%;
cursor: pointer;
.block {
width: 100%;
height: 100%;
>.custom-money-input.el-input {
width: 100%;
height: 100%;
.el-input__inner{
border: 0;
}
>input {
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 4px;
}
}
}
.el-input__suffix {
transform: rotateZ(0);
width: 25px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&.rote {
.el-input__suffix {
transform: rotateZ(180deg);
}
}
}
.options-block {
position: absolute;
margin-top: 5px;
min-width: 120px;
font-size: 14px;
color: #666666;
background-color: #fff;
/*padding: 6px 0;*/
border-radius: 4px;
z-index: 10;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
// .arrow {
// position: absolute;
// width: 0;
// height: 0;
// top: -12px;
// left: 35px;
// border: 6px solid transparent;
// border-bottom-color: #E4E7ED;
// &::after {
// position: absolute;
// display: inline-block;
// left: -4px;
// top: -2px;
// content: '';
// width: 0;
// height: 0;
// border: 4px solid transparent;
// border-bottom-color: #fff;
// z-index: 9;
// }
// }
.option {
padding: 0 24px 0 16px;
box-sizing: border-box;
width: 170px;
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
.number-box {
display: flex;
align-items: center;
>span {
margin: 0 10px;
}
.number-input {
padding: 0 24px 0 10px;
width: 100px !important;
height: 30px;
line-height: 30px;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 2px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"]{
-moz-appearance: textfield;
}
}
.number-button {
padding: 0;
width: 60px;
height: 30px;
line-height: 30px;
margin-left: 10px;
}
}
>span {
display: inline-block;
}
&.active {
background-color: #F2F7FF;
color: #0381FA;
}
&:hover {
background-color: #F5F7FA;
}
}
}
.number-input {
padding: 0 24px 0 10px;
width: 60px !important;
height: 30px;
line-height: 30px;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 206px;
border: 1px solid #DCDCDC;
border-radius: 2px;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"]{
-moz-appearance: textfield;
}
}
.number-button {
padding: 0;
width: 60px;
height: 30px;
line-height: 30px;
margin-left: 10px;
}
.popper_box {
position: absolute;
left: 125px;
bottom: -15px;
background: #ffffff;
width: 186px;
color: #606266;
text-indent: 0;
padding: 16px;
padding-top: 0px;
border: 1px solid #E4E7ED;
.popper_wrap {
margin-top: 16px;
display: inline-block;
.popper_input {
width: 100px;
display: inline-block;
margin: 0px 8px;
line-height: 34px;
}
.el-input__inner {
width: 100px;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input[type='number'] {
-moz-appearance: textfield;
}
}
.popper_box div:last-child {
display: flex;
justify-content: center;
margin-top: 16px;
}
}
</style>
...@@ -352,7 +352,8 @@ ...@@ -352,7 +352,8 @@
], ],
page: 1, page: 1,
limit: 20, limit: 20,
acreageOptions: [{ acreageOptions: [
{
value: "不限", value: "不限",
label: "不限", label: "不限",
}, },
...@@ -385,7 +386,8 @@ ...@@ -385,7 +386,8 @@
label: "10万平以上", label: "10万平以上",
}, },
], ],
transactionPriceOptions: [{ transactionPriceOptions: [
{
value: "不限", value: "不限",
label: "不限", label: "不限",
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment