Skip to content

D
dsk-cr20g
Commit 82fd2ffb authored by lcl's avatar lcl
Browse files
Options

Merge branch 'V20230915' of http://192.168.60.201/root/dsk-operate-sys into V20230915

parents 31a3a9d2 36cbb902
Hide whitespace changes
Inline Side-by-side
Showing with 580 additions and 40 deletions
dsk-operate-ui/src/views/custom/customList/index.vue
View file @ 82fd2ffb
...@@ -17,40 +17,54 @@ ...@@ -17,40 +17,54 @@
<div class="table_search"> <div class="table_search">
<div> <div>
<el-form ref="queryForm" :model="searchParam" :inline="true" size="small"> <el-form ref="queryForm" :model="searchParam" :inline="true" size="small">
<el-form-item prop="companyName">
<div class="newSearch">
<el-input type="text" v-model="searchParam.companyName" clearable placeholder="输入企业名称查询" @change="clearname" >
<i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/sousuo.png" width="16px" @click="handleCurrentChange(1)"></i>
</el-input>
</div>
</el-form-item>
<el-form-item> <el-form-item>
<el-cascader <el-cascader
ref="address1" ref="address1"
:class="[`select-adaptive-${inputID1}`]"
:options="addressList" :options="addressList"
:props="addressProps" :props="addressProps"
v-model="address" v-model="address"
@change="handleSearch" @change="iptAdaptive(inputID1,true)"
placeholder="地区选择" placeholder="地区选择"
collapse-tags collapse-tags
style="width: 200px;" style="width: 130px;"
clearable></el-cascader> clearable></el-cascader>
</el-form-item> </el-form-item>
<el-form-item prop="companyNatures"> <el-form-item prop="companyNatures">
<el-select v-model="searchParam.companyNatures" style="width: 175px;" @change="handleSearch" filterable collapse-tags multiple class="form-content-width" placeholder="客户性质"> <el-select v-model="searchParam.companyNatures" :class="[`select-adaptive-${inputID2}`]" style="width: 130px;" @change="iptAdaptive(inputID2,true)" multiple collapse-tags clearable class="form-content-width" placeholder="客户性质">
<el-option v-for="(item, index) in companyNaturelist" :key="index" :label="item.dictLabel" :value="item.dictValue" /> <el-option v-for="(item, index) in companyNaturelist" :key="index" :label="item.dictLabel" :value="item.dictValue" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="isOn"> <el-form-item prop="isOn">
<el-select v-model="searchParam.isOn" filterable clearable style="width: 175px;" @change="handleSearch" class="form-content-width" placeholder="上市公司"> <el-select v-model="searchParam.isOn" :class="[`select-adaptive-${inputID3}`]" filterable clearable style="width: 130px;" @change="iptAdaptive(inputID3)" class="form-content-width" placeholder="上市公司">
<el-option v-for="(item, index) in isMajorlist" :key="index" :label="item.dictLabel" :value="item.dictValue" /> <el-option v-for="(item, index) in isMajorlist" :key="index" :label="item.dictLabel" :value="item.dictValue" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="creditLevels"> <el-form-item prop="creditLevels">
<el-select v-model="searchParam.creditLevels" style="width: 175px;" @change="handleSearch" multiple filterable collapse-tags class="form-content-width" placeholder="资信评级"> <el-select v-model="searchParam.creditLevels" :class="[`select-adaptive-${inputID4}`]" style="width: 130px;" @change="iptAdaptive(inputID4,true)" multiple collapse-tags clearable class="form-content-width" placeholder="资信评级">
<el-option v-for="(item, index) in creditLevellist" :key="index" :label="item.dictLabel" :value="item.dictValue" /> <el-option v-for="(item, index) in creditLevellist" :key="index" :label="item.dictLabel" :value="item.dictValue" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="companyName">
<!--<div class="newSearch">-->
<!--<el-input type="text" v-model="searchParam.companyName" clearable placeholder="输入企业名称查询" @change="clearname" >-->
<!--<i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/sousuo.png" width="16px" @click="handleCurrentChange(1)"></i>-->
<!--</el-input>-->
<!--</div>-->
<!-- 未点击前的输入框样式 -->
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>搜索</span>
</div>
<!-- 输入框展开后样式 -->
<transition @enter="onEnter" appear mode="out-in">
<div class="cooperate-name enterprise-search-container" id="focus1" v-if="showSearchBox">
<el-input clearable @clear="handleSearch" @focus="clickFocus('focus1')" @blur="clickFocus('focus1')" v-model="searchParam.companyName"
placeholder="输入关键词查询"></el-input>
<span @click="handleSearch">搜索</span>
</div>
</transition>
</el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -296,6 +310,8 @@ ...@@ -296,6 +310,8 @@
import batchimport from '../../project/projectList/component/batchImport' import batchimport from '../../project/projectList/component/batchImport'
import skeleton from '../../project/projectList/component/skeleton' import skeleton from '../../project/projectList/component/skeleton'
import { encodeStr } from '@/assets/js/common' import { encodeStr } from '@/assets/js/common'
import { v4 } from "uuid";
import gsap from "gsap";
export default { export default {
name: 'CustomList', name: 'CustomList',
components:{batchimport,skeleton}, components:{batchimport,skeleton},
...@@ -366,6 +382,11 @@ ...@@ -366,6 +382,11 @@
isSkeleton:true, isSkeleton:true,
companypage:1, companypage:1,
isscroll:false, isscroll:false,
inputID1:this.getUid(),
inputID2:this.getUid(),
inputID3:this.getUid(),
inputID4:this.getUid(),
showSearchBox: false
} }
}, },
created() { created() {
...@@ -394,6 +415,21 @@ ...@@ -394,6 +415,21 @@
) )
}, },
methods:{ methods:{
onEnter(el, done) {
gsap.from(el, {
opacity: 0,
width: 0,
});
gsap.to(el, {
opacity: 1,
width: 242,
onComplete() {
// 完成动画聚焦输入框
el.querySelector("input").focus();
done();
}
});
},
async handleQuery() { async handleQuery() {
let [type1,type2] = await Promise.all([ let [type1,type2] = await Promise.all([
getDictType('company_nature_type'), getDictType('company_nature_type'),
...@@ -703,6 +739,98 @@ ...@@ -703,6 +739,98 @@
this.queryParam.registerCapital = value this.queryParam.registerCapital = value
else else
this.queryParam.registerCapital = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入6位小数 this.queryParam.registerCapital = value.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1')//输入6位小数
},
iptAdaptive(uid, multiple = false) {
multiple ? this.multipleAdaptiveHandle(uid) : this.iptAdaptiveHandle(uid);
},
getUid() {
return v4();
},
// 多选处理
async multipleAdaptiveHandle(uid) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 50}px`);
this.handleSearch();
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
// let containerWidth = textContainer.offsetWidth + 12 + 8;
let containerWidth = 130;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleSearch();
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
// let containerWidth = textContainer.offsetWidth + 12 + 8;
let containerWidth=0
if(iptChild.value){
containerWidth = 70;
}else {
containerWidth = 130;
}
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleSearch();
} catch (error) {
}
},
clickFocus(e) {
document.getElementById(e).classList.toggle('span-ba');
} }
} }
} }
...@@ -713,9 +841,28 @@ ...@@ -713,9 +841,28 @@
height: calc(100vh - 134px) height: calc(100vh - 134px)
} }
.box-card{ .box-card{
@import "@/assets/styles/search-common.scss";
padding-top: 16px; padding-top: 16px;
width: 100%; width: 100%;
height: 100%; height: 100%;
::v-deep .el-form{
.el-input{
line-height: 32px;
.el-input__inner{
height: 32px;
line-height: 32px;
border-radius: 4px;
border: 0;
}
}
.is-focus{
.el-input__inner{
background: #F4F6F9;
}
}
}
} }
.box{ .box{
position: relative; position: relative;
...@@ -785,13 +932,82 @@ ...@@ -785,13 +932,82 @@
flex-wrap: inherit; flex-wrap: inherit;
margin-top: 1px; margin-top: 1px;
.el-tag{ .el-tag{
max-width: 120px; /*max-width: 120px;*/
} }
} }
.el-input__suffix{ .el-input__suffix{
top: 1px; top: 1px;
} }
} }
.normal-search-container {
margin-left: 12px;
display: flex;
align-items: center;
cursor: pointer;
height: 34px;
&:hover {
& > span {
color: #0081ff;
}
}
& > img {
width: 16px;
height: 16px;
margin-left: 12px;
}
& > span {
color: #232323;
color: rgba(35, 35, 35, 0.4);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
}
}
.cooperate-name {
margin-left: 12px;
display: flex;
border-radius: 2px;
border: 1px solid #d9d9d9;
line-height: 34px;
height: 34px;
float: left;
span {
width: 60px;
height: 32px;
line-height: 32px;
font-size: 14px;
background: #f5f5f5;
text-align: center;
color: #0081ff;
border: 1px solid #efefef;
border-left: 0;
cursor: pointer;
}
&.span-ba {
border: 1px solid #0081ff;
span {
color: #ffffff;
background: #0081ff;
border: 1px solid #0081ff;
}
}
::v-deep .el-input {
flex: 1;
}
::v-deep .el-input__inner {
border: 0;
line-height: 32px;
height: 32px;
position: absolute;
top: 0;
padding-right: 28px;
font-size: 12px;
padding-left: 8px;
}
}
} }
} }
.ps1{ .ps1{
......
dsk-operate-ui/src/views/detail/groupAccount/component/zbxmfx.vue
View file @ 82fd2ffb
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
></head-form-new> ></head-form-new>
<span class="check">查看集团招标<i class="el-icon-arrow-right"></i></span> <span class="check">查看集团招标<i class="el-icon-arrow-right"></i></span>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<div class="table-item" v-if="!isSkeleton"> <div class="table-item" v-if="!isSkeleton && tableData.length >0">
<el-table class="fixed-table" :data="tableData" border max-height="235"> <el-table class="fixed-table" :data="tableData" border max-height="235">
<el-table-column label="项目名称" prop="title" min-width="350"> <el-table-column label="项目名称" prop="title" min-width="350">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</el-table-column> </el-table-column>
<el-table-column label="招标金额" prop="projectAmount" width="110"> <el-table-column label="招标金额" prop="projectAmount" width="110">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.projectAmount ? scope.row.projectAmount : '0.00'}}{{scope.row.projectAmount ? '万元':''}} {{scope.row.projectAmount ? scope.row.projectAmount : '--'}}{{scope.row.projectAmount ? '万元':''}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="项目类型" prop="projectCategory" width="110"></el-table-column> <el-table-column label="项目类型" prop="projectCategory" width="110"></el-table-column>
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</el-table-column> </el-table-column>
<el-table-column label="历史发包总金额" prop="sum" width="140"> <el-table-column label="历史发包总金额" prop="sum" width="140">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.sum ? scope.row.sum : '0.00'}}{{scope.row.sum ? '万元':''}} {{scope.row.sum ? scope.row.sum : '--'}}{{scope.row.sum ? '万元':''}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发包金额最高成员" prop="companyName" min-width="200"> <el-table-column label="发包金额最高成员" prop="companyName" min-width="200">
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
</el-table-column> </el-table-column>
<el-table-column label="发包总金额" prop="sum" width="140"> <el-table-column label="发包总金额" prop="sum" width="140">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.sum ? scope.row.sum : '0.00'}}{{scope.row.sum ? '万元':''}} {{scope.row.sum ? scope.row.sum : '--'}}{{scope.row.sum ? '万元':''}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="发包金额最大成员" prop="companyName" min-width="200"> <el-table-column label="发包金额最大成员" prop="companyName" min-width="200">
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
:isExcel="false" :isExcel="false"
></head-form> ></head-form>
<skeleton v-if="isSkeleton6" style="padding: 16px"></skeleton> <skeleton v-if="isSkeleton6" style="padding: 16px"></skeleton>
<div class="table-item" v-if="!isSkeleton6"> <div class="table-item" v-if="!isSkeleton6 && peojectTopData.length > 0">
<el-table class="fixed-table" :data="peojectTopData" border max-height="235"> <el-table class="fixed-table" :data="peojectTopData" border max-height="235">
<el-table-column label="项目名称" prop="projectName" min-width="350"> <el-table-column label="项目名称" prop="projectName" min-width="350">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
<el-table-column label="中标日期" prop="winBidTime" width="100"></el-table-column> <el-table-column label="中标日期" prop="winBidTime" width="100"></el-table-column>
<el-table-column label="中标金额" prop="winBidAmount" width="130"> <el-table-column label="中标金额" prop="winBidAmount" width="130">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.winBidAmount ? scope.row.winBidAmount : '0.00'}}{{scope.row.winBidAmount ? '万元':''}} {{scope.row.winBidAmount ? scope.row.winBidAmount : '--'}}{{scope.row.winBidAmount ? '万元':''}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="项目类型" prop="projectTypeNew" width="100"></el-table-column> <el-table-column label="项目类型" prop="projectTypeNew" width="100"></el-table-column>
......
dsk-operate-ui/src/views/detail/party-a/opport/announcement.vue
View file @ 82fd2ffb
...@@ -10,6 +10,10 @@ ...@@ -10,6 +10,10 @@
v-html="scope.row.projectName"></router-link> v-html="scope.row.projectName"></router-link>
<div v-else v-html="scope.row.projectName || '--'"></div> <div v-else v-html="scope.row.projectName || '--'"></div>
</template> </template>
<template slot="agency" slot-scope="scope">
<router-link :to="`/company/${encodeStr(scope.row.agencyId)}`" tag="a" class="a-link" v-if="scope.row.agencyId&&scope.row.agency" v-html="scope.row.agency"></router-link>
<div v-else v-html="scope.row.agency || '--'"></div>
</template>
<template slot="province" slot-scope="scope"> <template slot="province" slot-scope="scope">
{{scope.row.province}}{{`${scope.row.city?'-'+scope.row.city:''}`}}{{`${scope.row.area?'-'+scope.row.area:''}`}} {{scope.row.province}}{{`${scope.row.city?'-'+scope.row.city:''}`}}{{`${scope.row.area?'-'+scope.row.area:''}`}}
</template> </template>
...@@ -48,7 +52,7 @@ export default { ...@@ -48,7 +52,7 @@ export default {
{label: '招标阶段', prop: 'tenderStage', width: '90'}, {label: '招标阶段', prop: 'tenderStage', width: '90'},
{label: '招采单位联系人', prop: 'contact', width: '120'}, {label: '招采单位联系人', prop: 'contact', width: '120'},
{label: '招采单位联系方式', prop: 'contactTel', width: '130'}, {label: '招采单位联系方式', prop: 'contactTel', width: '130'},
{label: '代理单位', prop: 'agency', minWidth: '170'}, {label: '代理单位', prop: 'agency', minWidth: '170', slot: true},
{label: '代理单位联系人', prop: 'agencyContact', width: '120'}, {label: '代理单位联系人', prop: 'agencyContact', width: '120'},
{label: '代理单位联系方式', prop: 'agencyContactTel', width: '130'}, {label: '代理单位联系方式', prop: 'agencyContactTel', width: '130'},
{label: '报名截止日期', prop: 'overTime', width: '110'} {label: '报名截止日期', prop: 'overTime', width: '110'}
......
dsk-operate-ui/src/views/detail/party-a/urbanLnvestment/sameRegion.vue
View file @ 82fd2ffb
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
</template> </template>
</head-form-new> </head-form-new>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
<tables v-if="!isSkeleton" :tableLoading="tableLoading" :tableData="tableData" :forData="forData" :tableDataTotal="tableDataTotal" <tables v-if="!isSkeleton" :indexFixed="true" :tableLoading="tableLoading" :tableData="tableData" :forData="forData" :tableDataTotal="tableDataTotal"
:queryParams="queryParams" @handle-current-change="handleCurrentChange" @sort-change="sortChange"> :queryParams="queryParams" @handle-current-change="handleCurrentChange" @sort-change="sortChange">
<template slot="companyName" slot-scope="scope"> <template slot="companyName" slot-scope="scope">
<router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a" <router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a"
...@@ -139,7 +139,7 @@ export default { ...@@ -139,7 +139,7 @@ export default {
pageSize: 20 pageSize: 20
}, },
forData: [ forData: [
{ label: '企业名称', prop: 'companyName', width: '369', slot: true }, { label: '企业名称', prop: 'companyName', width: '369', slot: true,fixed:true },
{ label: '区域', prop: 'area', width: '120', slot: true }, { label: '区域', prop: 'area', width: '120', slot: true },
{ label: '招标数量', prop: 'biddingCount', width: '100', sortable: true }, { label: '招标数量', prop: 'biddingCount', width: '100', sortable: true },
{ label: '城投拿地', prop: 'landInfoCount', width: '100', sortable: true }, { label: '城投拿地', prop: 'landInfoCount', width: '100', sortable: true },
......
dsk-operate-ui/src/views/macro/enterprises/index.vue
View file @ 82fd2ffb
...@@ -14,21 +14,37 @@ ...@@ -14,21 +14,37 @@
ref="aptitudeCode" ref="aptitudeCode"
:options="aptitudeCodeList" :options="aptitudeCodeList"
:props="props" :props="props"
:class="[`select-adaptive-${inputID1}`]"
v-model="queryParams.codeStr" v-model="queryParams.codeStr"
@change="handleChange" @change="iptAdaptive(inputID1,true,'handleChange')"
placeholder="资质资格" placeholder="资质资格"
collapse-tags collapse-tags
clearable></el-cascader> clearable></el-cascader>
<custom-time-select <custom-time-select
style="display: inline-block" style="display: inline-block"
:timeList="timeList" :timeList="timeList"
:class="[`select-adaptive-${inputID2}`,'custom-select']"
v-model="queryParams.time" v-model="queryParams.time"
:placeholder="timePlaceholder" :placeholder="timePlaceholder"
@handle-search="changeSelect" /> @handle-search="iptAdaptive(inputID2,'','changeSelect')"
<el-input placeholder="输入关键词查询" v-model="queryParams.ename" clearable @clear="handleSearch()"> />
<i slot="prefix" class="el-icon-search"></i> <!--<el-input placeholder="输入关键词查询" v-model="queryParams.ename" clearable @clear="handleSearch()">-->
<el-button slot="append" @click="handleSearch()">搜索</el-button> <!--<i slot="prefix" class="el-icon-search"></i>-->
</el-input> <!--<el-button slot="append" @click="handleSearch()">搜索</el-button>-->
<!--</el-input>-->
<!-- 未点击前的输入框样式 -->
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>搜索</span>
</div>
<!-- 输入框展开后样式 -->
<transition @enter="onEnter" appear mode="out-in">
<div class="cooperate-name enterprise-search-container" id="focus1" v-if="showSearchBox">
<el-input clearable @clear="handleSearch" @focus="clickFocus('focus1')" @blur="clickFocus('focus1')" v-model="queryParams.ename"
placeholder="输入关键词查询"></el-input>
<span @click="handleSearch">搜索</span>
</div>
</transition>
<span class="total">共{{tableDataTotal}}条</span> <span class="total">共{{tableDataTotal}}条</span>
</div> </div>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton> <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
...@@ -102,6 +118,8 @@ ...@@ -102,6 +118,8 @@
import { enterprise,location,getUipIdByCid } from '@/api/macro/macro' import { enterprise,location,getUipIdByCid } from '@/api/macro/macro'
import Region from '../component/region' import Region from '../component/region'
import skeleton from '../component/skeleton' import skeleton from '../component/skeleton'
import { v4 } from "uuid";
import gsap from "gsap";
export default { export default {
name: 'Enterprises', name: 'Enterprises',
components: {Region,skeleton,CustomTimeSelect}, components: {Region,skeleton,CustomTimeSelect},
...@@ -137,6 +155,9 @@ export default { ...@@ -137,6 +155,9 @@ export default {
isSkeleton:true, isSkeleton:true,
timeList: ['近半月', '近一月', '近半年', '近一年', '自定义'], timeList: ['近半月', '近一月', '近半年', '近一年', '自定义'],
timePlaceholder:'中标时间', timePlaceholder:'中标时间',
inputID1:this.getUid(),
inputID2:this.getUid(),
showSearchBox: false
} }
}, },
created() { created() {
...@@ -155,6 +176,21 @@ export default { ...@@ -155,6 +176,21 @@ export default {
// window.removeEventListener("scroll", this.scrolling); // window.removeEventListener("scroll", this.scrolling);
}, },
methods: { methods: {
onEnter(el, done) {
gsap.from(el, {
opacity: 0,
width: 0,
});
gsap.to(el, {
opacity: 1,
width: 242,
onComplete() {
// 完成动画聚焦输入框
el.querySelector("input").focus();
done();
}
});
},
scrolling() { scrolling() {
let el = document.getElementsByClassName("el-table__fixed-header-wrapper")[0] let el = document.getElementsByClassName("el-table__fixed-header-wrapper")[0]
let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop; let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
...@@ -267,12 +303,17 @@ export default { ...@@ -267,12 +303,17 @@ export default {
codeStr:'', codeStr:'',
time:'', time:'',
} }
this.showSearchBox=false;
this.pageIndex=1; this.pageIndex=1;
this.querySubmit() this.querySubmit()
}, },
handleSearch(){ handleSearch(name){
this.pageIndex=1; if(name === 'handleChange'){
this.querySubmit() this.handleChange()
}else {
this.pageIndex=1;
this.querySubmit()
}
}, },
formatStatus: function(row, column, cellValue) { formatStatus: function(row, column, cellValue) {
return cellValue? cellValue : '-' return cellValue? cellValue : '-'
...@@ -326,6 +367,91 @@ export default { ...@@ -326,6 +367,91 @@ export default {
this.pageIndex=1; this.pageIndex=1;
this.querySubmit() this.querySubmit()
}, },
getUid() {
return v4();
},
iptAdaptive(uid, multiple = false,name) {
multiple ? this.multipleAdaptiveHandle(uid,name) : this.iptAdaptiveHandle(uid);
},
// 多选处理
async multipleAdaptiveHandle(uid,name) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 60}px`);
this.handleSearch(name);
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
// let containerWidth = textContainer.offsetWidth + 12 + 8;
let containerWidth = 120;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleSearch(name);
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 50;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.changeSelect();
} catch (error) {
}
},
clickFocus(e) {
document.getElementById(e).classList.toggle('span-ba');
}
} }
} }
</script> </script>
...@@ -335,6 +461,7 @@ export default { ...@@ -335,6 +461,7 @@ export default {
padding: 0; padding: 0;
} }
.enterprises{ .enterprises{
@import "@/assets/styles/search-common.scss";
.eco-header{ .eco-header{
justify-content: space-between; justify-content: space-between;
height: 48px; height: 48px;
...@@ -377,8 +504,12 @@ export default { ...@@ -377,8 +504,12 @@ export default {
margin-top: 12px; margin-top: 12px;
padding: 16px; padding: 16px;
.search{ .search{
height: 34px;
>div{
float: left;
}
::v-deep .el-cascader{ ::v-deep .el-cascader{
width: 180px; width: 120px;
margin-right: 12px; margin-right: 12px;
height: 34px; height: 34px;
line-height: 34px !important; line-height: 34px !important;
...@@ -386,14 +517,20 @@ export default { ...@@ -386,14 +517,20 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
.el-input__inner{ .el-input__inner{
border: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.is-focus{
.el-input__inner {
background: #F4F6F9;
}
}
.el-cascader__tags{ .el-cascader__tags{
flex-wrap: inherit; flex-wrap: inherit;
.el-tag{ .el-tag{
max-width: 100px; /*max-width: 100px;*/
margin: 5px 0 2px 6px; margin: 5px 0 2px 6px;
} }
} }
...@@ -456,6 +593,75 @@ export default { ...@@ -456,6 +593,75 @@ export default {
margin-bottom: 3px; margin-bottom: 3px;
} }
} }
.normal-search-container {
margin-left: 12px;
display: flex;
align-items: center;
cursor: pointer;
height: 34px;
&:hover {
& > span {
color: #0081ff;
}
}
& > img {
width: 16px;
height: 16px;
margin-left: 12px;
}
& > span {
color: #232323;
color: rgba(35, 35, 35, 0.4);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
}
}
.cooperate-name {
margin-left: 12px;
display: flex;
border-radius: 2px;
border: 1px solid #d9d9d9;
line-height: 34px;
height: 34px;
float: left;
span {
width: 60px;
height: 32px;
line-height: 32px;
font-size: 14px;
background: #f5f5f5;
text-align: center;
color: #0081ff;
border: 1px solid #efefef;
border-left: 0;
cursor: pointer;
}
&.span-ba {
border: 1px solid #0081ff;
span {
color: #ffffff;
background: #0081ff;
border: 1px solid #0081ff;
}
}
::v-deep .el-input {
flex: 1;
}
::v-deep .el-input__inner {
border: 0;
line-height: 32px;
height: 32px;
position: absolute;
top: 0;
padding-right: 28px;
font-size: 12px;
padding-left: 8px;
}
}
} }
.table-item{ .table-item{
margin-top: 14px; margin-top: 14px;
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/qgjjdq.vue
View file @ 82fd2ffb
...@@ -6,17 +6,18 @@ ...@@ -6,17 +6,18 @@
<span class="common-title">全国经济大全</span> <span class="common-title">全国经济大全</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small"> <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<el-form-item prop="year"> <el-form-item prop="year">
<el-select v-model="queryParams.year" filterable class="form-content-width" placeholder="请选择" @change="handleSearch" :popper-append-to-body='false'> <el-select v-model="queryParams.year" filterable class="form-content-width same-select-com" placeholder="请选择" :class="[`select-adaptive-${inputID1}`]" @change="handleSearch" :popper-append-to-body='false'>
<el-option v-for="(item, index) in yearOptions" :key="index" :label="item.year" :value="item.year" /> <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.year" :value="item.year" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="area"> <el-form-item prop="area">
<el-cascader <el-cascader
ref="address" ref="address"
:class="[`select-adaptive-${inputID2}`]"
:options="addressList" :options="addressList"
:props="props" :props="props"
v-model="queryParams.address" v-model="queryParams.address"
@change="handleSearch" @change="iptAdaptive(inputID2,true)"
placeholder="地区选择" placeholder="地区选择"
collapse-tags collapse-tags
clearable></el-cascader> clearable></el-cascader>
...@@ -124,6 +125,7 @@ ...@@ -124,6 +125,7 @@
import dataRegion from '@/assets/json/dataRegion' import dataRegion from '@/assets/json/dataRegion'
import economiesDetail from './economies-detail' import economiesDetail from './economies-detail'
import skeleton from '../../component/skeleton' import skeleton from '../../component/skeleton'
import { v4 } from "uuid";
export default { export default {
name: 'NationalEconomies', name: 'NationalEconomies',
components: { components: {
...@@ -149,7 +151,9 @@ ...@@ -149,7 +151,9 @@
tableDataTotal: null, tableDataTotal: null,
show_page:true, show_page:true,
MaxPage:500, MaxPage:500,
isSkeleton:true isSkeleton:true,
inputID1:this.getUid(),
inputID2:this.getUid()
} }
}, },
created() { created() {
...@@ -353,7 +357,89 @@ ...@@ -353,7 +357,89 @@
path: '/macro/economies', path: '/macro/economies',
query:params query:params
}) })
} },
iptAdaptive(uid, multiple = false) {
multiple ? this.multipleAdaptiveHandle(uid) : this.iptAdaptiveHandle(uid);
},
getUid() {
return v4();
},
// 多选处理
async multipleAdaptiveHandle(uid) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const iptChild = dom.querySelector(".el-input__inner");
if (dom) {
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
const selectChildren = dom.querySelectorAll(".el-tag");
if (selectChildren.length) {
let width = 0;
selectChildren.forEach(item => {
const text = item.textContent;
const itemInfo = window.getComputedStyle(item);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", itemInfo.padding);
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = text;
document.body.append(textContainer);
width += textContainer.offsetWidth + parseInt(itemInfo.marginLeft) + parseInt(itemInfo.marginRight);
textContainer.remove();
});
dom.style.setProperty("width", `${width + 20}px`);
this.handleSearch();
return;
}
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
textContainer.style.setProperty("padding", "0px 8px");
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.getAttribute("placeholder");
document.body.append(textContainer);
// let containerWidth = textContainer.offsetWidth + 12 + 8;
let containerWidth = 150;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
this.handleSearch();
}
} catch (error) {
console.log(error);
}
},
// 单选处理
async iptAdaptiveHandle(uid) {
try {
await this.$nextTick();
const dom = document.querySelector(`.select-adaptive-${uid}`);
const realStyles = window.getComputedStyle(dom);
if (dom) {
const iptChild = dom.querySelector(".el-input__inner");
const textContainer = document.createElement("span");
const textName = `text-${uid}`;
textContainer.classList.add(textName);
textContainer.style.setProperty("visibility", "hidden");
textContainer.style.setProperty("display", "inline-block");
textContainer.style.setProperty("font-size", "14px");
const hasPadding = (parseInt(realStyles.paddingLeft) || parseInt(realStyles.paddingRight)) ? true : false;
hasPadding ? textContainer.style.setProperty("padding", "0px 8px") : null;
textContainer.style.setProperty("box-sizing", "border-box");
textContainer.textContent = iptChild.value ? iptChild.value : iptChild.getAttribute("placeholder");
document.body.append(textContainer);
let containerWidth = textContainer.offsetWidth + 12 + 8;
textContainer.remove();
dom.style.setProperty("width", `${containerWidth}px`);
}
this.handleSearch();
} catch (error) {
}
},
} }
} }
</script> </script>
...@@ -361,6 +447,7 @@ ...@@ -361,6 +447,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.qgjjdq{ .qgjjdq{
@import "@/assets/styles/search-common.scss";
.query-box{ .query-box{
margin: -8px 0 8px 0; margin: -8px 0 8px 0;
.a-link:hover{ .a-link:hover{
...@@ -370,15 +457,42 @@ ...@@ -370,15 +457,42 @@
.el-form{ .el-form{
margin-left: 24px; margin-left: 24px;
} }
::v-deep .el-form{
.el-form-item--small.el-form-item{
margin-top: 0;
margin-bottom: 0;
}
.el-form-item{
height: 32px;
}
.el-form-item__content{
line-height: 32px;
}
.el-input{
line-height: 32px;
.el-input__inner{
height: 32px;
line-height: 32px;
border-radius: 4px;
border: 0;
}
}
.is-focus{
.el-input__inner{
background: #F4F6F9;
}
}
}
.form-content-width{ .form-content-width{
width: 110px; width: 90px;
} }
::v-deep .el-cascader{ ::v-deep .el-cascader{
width: 200px; width: 180px;
.el-cascader__tags{ .el-cascader__tags{
flex-wrap: inherit; flex-wrap: inherit;
.el-tag{ .el-tag{
max-width: 130px; /*max-width: 130px;*/
} }
} }
} }
......
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