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 @@
<div class="table_search">
<div>
<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-cascader
ref="address1"
:class="[`select-adaptive-${inputID1}`]"
:options="addressList"
:props="addressProps"
v-model="address"
@change="handleSearch"
@change="iptAdaptive(inputID1,true)"
placeholder="地区选择"
collapse-tags
style="width: 200px;"
style="width: 130px;"
clearable></el-cascader>
</el-form-item>
<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-select>
</el-form-item>
<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-select>
</el-form-item>
<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-select>
</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>
</div>
......@@ -296,6 +310,8 @@
import batchimport from '../../project/projectList/component/batchImport'
import skeleton from '../../project/projectList/component/skeleton'
import { encodeStr } from '@/assets/js/common'
import { v4 } from "uuid";
import gsap from "gsap";
export default {
name: 'CustomList',
components:{batchimport,skeleton},
......@@ -366,6 +382,11 @@
isSkeleton:true,
companypage:1,
isscroll:false,
inputID1:this.getUid(),
inputID2:this.getUid(),
inputID3:this.getUid(),
inputID4:this.getUid(),
showSearchBox: false
}
},
created() {
......@@ -394,6 +415,21 @@
)
},
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() {
let [type1,type2] = await Promise.all([
getDictType('company_nature_type'),
......@@ -703,6 +739,98 @@
this.queryParam.registerCapital = value
else
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 @@
height: calc(100vh - 134px)
}
.box-card{
@import "@/assets/styles/search-common.scss";
padding-top: 16px;
width: 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{
position: relative;
......@@ -785,13 +932,82 @@
flex-wrap: inherit;
margin-top: 1px;
.el-tag{
max-width: 120px;
/*max-width: 120px;*/
}
}
.el-input__suffix{
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{
......
dsk-operate-ui/src/views/detail/groupAccount/component/zbxmfx.vue
View file @ 82fd2ffb
......@@ -12,7 +12,7 @@
></head-form-new>
<span class="check">查看集团招标<i class="el-icon-arrow-right"></i></span>
<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-column label="项目名称" prop="title" min-width="350">
<template slot-scope="scope">
......@@ -29,7 +29,7 @@
</el-table-column>
<el-table-column label="招标金额" prop="projectAmount" width="110">
<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>
</el-table-column>
<el-table-column label="项目类型" prop="projectCategory" width="110"></el-table-column>
......@@ -71,7 +71,7 @@
</el-table-column>
<el-table-column label="历史发包总金额" prop="sum" width="140">
<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>
</el-table-column>
<el-table-column label="发包金额最高成员" prop="companyName" min-width="200">
......@@ -160,7 +160,7 @@
</el-table-column>
<el-table-column label="发包总金额" prop="sum" width="140">
<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>
</el-table-column>
<el-table-column label="发包金额最大成员" prop="companyName" min-width="200">
......@@ -220,7 +220,7 @@
:isExcel="false"
></head-form>
<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-column label="项目名称" prop="projectName" min-width="350">
<template slot-scope="scope">
......@@ -231,7 +231,7 @@
<el-table-column label="中标日期" prop="winBidTime" width="100"></el-table-column>
<el-table-column label="中标金额" prop="winBidAmount" width="130">
<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>
</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 @@
v-html="scope.row.projectName"></router-link>
<div v-else v-html="scope.row.projectName || '--'"></div>
</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">
{{scope.row.province}}{{`${scope.row.city?'-'+scope.row.city:''}`}}{{`${scope.row.area?'-'+scope.row.area:''}`}}
</template>
......@@ -48,7 +52,7 @@ export default {
{label: '招标阶段', prop: 'tenderStage', width: '90'},
{label: '招采单位联系人', prop: 'contact', width: '120'},
{label: '招采单位联系方式', prop: 'contactTel', width: '130'},
{label: '代理单位', prop: 'agency', minWidth: '170'},
{label: '代理单位', prop: 'agency', minWidth: '170', slot: true},
{label: '代理单位联系人', prop: 'agencyContact', width: '120'},
{label: '代理单位联系方式', prop: 'agencyContactTel', width: '130'},
{label: '报名截止日期', prop: 'overTime', width: '110'}
......
dsk-operate-ui/src/views/detail/party-a/urbanLnvestment/sameRegion.vue
View file @ 82fd2ffb
......@@ -86,7 +86,7 @@
</template>
</head-form-new>
<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">
<template slot="companyName" slot-scope="scope">
<router-link :to="scope.row.uipId?`/enterprise/${encodeStr(scope.row.companyId)}`:`/company/${encodeStr(scope.row.companyId)}`" tag="a"
......@@ -139,7 +139,7 @@ export default {
pageSize: 20
},
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: 'biddingCount', 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 @@
ref="aptitudeCode"
:options="aptitudeCodeList"
:props="props"
:class="[`select-adaptive-${inputID1}`]"
v-model="queryParams.codeStr"
@change="handleChange"
@change="iptAdaptive(inputID1,true,'handleChange')"
placeholder="资质资格"
collapse-tags
clearable></el-cascader>
<custom-time-select
style="display: inline-block"
:timeList="timeList"
:class="[`select-adaptive-${inputID2}`,'custom-select']"
v-model="queryParams.time"
:placeholder="timePlaceholder"
@handle-search="changeSelect" />
<el-input placeholder="输入关键词查询" v-model="queryParams.ename" clearable @clear="handleSearch()">
<i slot="prefix" class="el-icon-search"></i>
<el-button slot="append" @click="handleSearch()">搜索</el-button>
</el-input>
@handle-search="iptAdaptive(inputID2,'','changeSelect')"
/>
<!--<el-input placeholder="输入关键词查询" v-model="queryParams.ename" clearable @clear="handleSearch()">-->
<!--<i slot="prefix" class="el-icon-search"></i>-->
<!--<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>
</div>
<skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
......@@ -102,6 +118,8 @@
import { enterprise,location,getUipIdByCid } from '@/api/macro/macro'
import Region from '../component/region'
import skeleton from '../component/skeleton'
import { v4 } from "uuid";
import gsap from "gsap";
export default {
name: 'Enterprises',
components: {Region,skeleton,CustomTimeSelect},
......@@ -137,6 +155,9 @@ export default {
isSkeleton:true,
timeList: ['近半月', '近一月', '近半年', '近一年', '自定义'],
timePlaceholder:'中标时间',
inputID1:this.getUid(),
inputID2:this.getUid(),
showSearchBox: false
}
},
created() {
......@@ -155,6 +176,21 @@ export default {
// window.removeEventListener("scroll", this.scrolling);
},
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() {
let el = document.getElementsByClassName("el-table__fixed-header-wrapper")[0]
let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
......@@ -267,12 +303,17 @@ export default {
codeStr:'',
time:'',
}
this.showSearchBox=false;
this.pageIndex=1;
this.querySubmit()
},
handleSearch(){
this.pageIndex=1;
this.querySubmit()
handleSearch(name){
if(name === 'handleChange'){
this.handleChange()
}else {
this.pageIndex=1;
this.querySubmit()
}
},
formatStatus: function(row, column, cellValue) {
return cellValue? cellValue : '-'
......@@ -326,6 +367,91 @@ export default {
this.pageIndex=1;
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>
......@@ -335,6 +461,7 @@ export default {
padding: 0;
}
.enterprises{
@import "@/assets/styles/search-common.scss";
.eco-header{
justify-content: space-between;
height: 48px;
......@@ -377,8 +504,12 @@ export default {
margin-top: 12px;
padding: 16px;
.search{
height: 34px;
>div{
float: left;
}
::v-deep .el-cascader{
width: 180px;
width: 120px;
margin-right: 12px;
height: 34px;
line-height: 34px !important;
......@@ -386,14 +517,20 @@ export default {
width: 100%;
height: 100%;
.el-input__inner{
border: 0;
width: 100%;
height: 100%;
}
}
.is-focus{
.el-input__inner {
background: #F4F6F9;
}
}
.el-cascader__tags{
flex-wrap: inherit;
.el-tag{
max-width: 100px;
/*max-width: 100px;*/
margin: 5px 0 2px 6px;
}
}
......@@ -456,6 +593,75 @@ export default {
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{
margin-top: 14px;
......
dsk-operate-ui/src/views/macro/nationalEconomies/component/qgjjdq.vue
View file @ 82fd2ffb
......@@ -6,17 +6,18 @@
<span class="common-title">全国经济大全</span>
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
<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-select>
</el-form-item>
<el-form-item prop="area">
<el-cascader
ref="address"
:class="[`select-adaptive-${inputID2}`]"
:options="addressList"
:props="props"
v-model="queryParams.address"
@change="handleSearch"
@change="iptAdaptive(inputID2,true)"
placeholder="地区选择"
collapse-tags
clearable></el-cascader>
......@@ -124,6 +125,7 @@
import dataRegion from '@/assets/json/dataRegion'
import economiesDetail from './economies-detail'
import skeleton from '../../component/skeleton'
import { v4 } from "uuid";
export default {
name: 'NationalEconomies',
components: {
......@@ -149,7 +151,9 @@
tableDataTotal: null,
show_page:true,
MaxPage:500,
isSkeleton:true
isSkeleton:true,
inputID1:this.getUid(),
inputID2:this.getUid()
}
},
created() {
......@@ -353,7 +357,89 @@
path: '/macro/economies',
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>
......@@ -361,6 +447,7 @@
<style lang="scss" scoped>
.qgjjdq{
@import "@/assets/styles/search-common.scss";
.query-box{
margin: -8px 0 8px 0;
.a-link:hover{
......@@ -370,15 +457,42 @@
.el-form{
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{
width: 110px;
width: 90px;
}
::v-deep .el-cascader{
width: 200px;
width: 180px;
.el-cascader__tags{
flex-wrap: inherit;
.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