Compare commits
No commits in common. "680b26c6c10c606106d79ae51420403c3c04a97a" and "108bbaf598b074d56ebdbc00980712bdaa93e244" have entirely different histories.
680b26c6c1
...
108bbaf598
@ -1,444 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view :class="{ gray: store.isgray == 1 }">
|
|
||||||
<view class="wrapper f-col aic">
|
|
||||||
<view class="onduty">
|
|
||||||
<view class="title f-row aic jcb"><uni-title :title="strDate + '：生产数据'" type="h3" color="red" /></view>
|
|
||||||
<view class="info">
|
|
||||||
<!-- <uni-title :title="'天然气'" type="h3" color="blue" /> -->
|
|
||||||
<view v-for="(row, rowIndex) in groupedData" :key="rowIndex" class="data-row">
|
|
||||||
<uni-row>
|
|
||||||
<uni-col v-for="(item, colIndex) in row" :key="colIndex" :span="7">
|
|
||||||
<text style="color: black; font-size: 32; font-weight: bold">{{ item.gas }}</text>
|
|
||||||
<view class="value-group">
|
|
||||||
<text style="color: gray; font-size: 24">当日量:</text>
|
|
||||||
<text style="color: blue; font-size: 28; font-weight: bold">{{ item.dailyVolume }}</text>
|
|
||||||
<text style="color: gray; font-size: 24">年累计:</text>
|
|
||||||
<text style="color: blue; font-size: 28; font-weight: bold">{{ item.yearVolume }}</text>
|
|
||||||
</view>
|
|
||||||
</uni-col>
|
|
||||||
</uni-row>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, computed, nextTick } from 'vue';
|
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
|
||||||
import { queryJinriShengchansj, queryYearShengchansj } from '@/api/shengchan.js';
|
|
||||||
import { formatDate, getDateAfterDays } from '@/utils/dateTime.js';
|
|
||||||
import { beforeJump } from '@/utils/index.js';
|
|
||||||
import { useStore } from '@/store';
|
|
||||||
const store = useStore();
|
|
||||||
import dataCom from '@/bpm/dataCom.vue';
|
|
||||||
|
|
||||||
const shishiArr = ref([
|
|
||||||
{
|
|
||||||
gas: '气井气',
|
|
||||||
dailyVolume: '',
|
|
||||||
yearVolume: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gas: '伴生气',
|
|
||||||
dailyVolume: '',
|
|
||||||
yearVolume: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gas: '外部气',
|
|
||||||
dailyVolume: '',
|
|
||||||
yearVolume: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gas: '站输差',
|
|
||||||
dailyVolume: '',
|
|
||||||
yearVolume: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gas: '线输差',
|
|
||||||
dailyVolume: '',
|
|
||||||
yearVolume: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
gas: '综合输差',
|
|
||||||
dailyVolume: '',
|
|
||||||
yearVolume: ''
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getJinriShengchansj();
|
|
||||||
getYearShengchansj();
|
|
||||||
});
|
|
||||||
|
|
||||||
const strDate = ref('');
|
|
||||||
|
|
||||||
const dataJinri = ref([]);
|
|
||||||
const dataJinriSum = ref([]);
|
|
||||||
const dataJinriSumUnit = ref([]);
|
|
||||||
|
|
||||||
// 计算属性自动分组
|
|
||||||
const groupedData = computed(() => {
|
|
||||||
const groups = [];
|
|
||||||
for (let i = 0; i < shishiArr.value.length; i += 3) {
|
|
||||||
groups.push(shishiArr.value.slice(i, i + 3));
|
|
||||||
}
|
|
||||||
return groups;
|
|
||||||
});
|
|
||||||
const getJinriShengchansj = () => {
|
|
||||||
const now = new Date();
|
|
||||||
if (now.getHours() < 11) {
|
|
||||||
strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前 头一天的数据
|
|
||||||
} else {
|
|
||||||
strDate.value = formatDate(now).toString();
|
|
||||||
}
|
|
||||||
let queryParms = {};
|
|
||||||
dataJinri.value = [];
|
|
||||||
dataJinriSum.value = [];
|
|
||||||
dataJinriSumUnit.value = [];
|
|
||||||
queryParms.rqDate = strDate.value;
|
|
||||||
queryParms.pageSize = 100;
|
|
||||||
console.log(queryParms);
|
|
||||||
queryJinriShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
console.log(res);
|
|
||||||
dataJinri.value = res.result.records;
|
|
||||||
dataJinriSumUnit.value = sumByUnit(dataJinri.value); //包含gas unit rq cq totalGas
|
|
||||||
console.log(dataJinriSumUnit.value);
|
|
||||||
// 使用 nextTick 等待 DOM 更新
|
|
||||||
nextTick();
|
|
||||||
getYearShengchansj(); //再获取今年以来的数据
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getYearShengchansj = () => {
|
|
||||||
const now = new Date();
|
|
||||||
let year = formatDate(now).split('-')[0];
|
|
||||||
let queryParms = {};
|
|
||||||
queryParms.yearStart = year;
|
|
||||||
queryParms.yearEnd = year;
|
|
||||||
|
|
||||||
// console.log(2, queryParms.value);
|
|
||||||
queryYearShengchansj(queryParms).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
try {
|
|
||||||
// console.log(res.result);
|
|
||||||
let yearData = res.result[year];
|
|
||||||
console.log(dataJinriSumUnit.value.length, dataJinriSumUnit.value, yearData.length, yearData);
|
|
||||||
dataJinriSumUnit.value.forEach((item) => {
|
|
||||||
yearData.forEach((itemYear) => {
|
|
||||||
// console.log(item, itemYear);
|
|
||||||
if (item.unit === itemYear.unit) {
|
|
||||||
item.yearVolume = itemYear.yearSum || 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
dataJinriSum.value = sumByGas(dataJinriSumUnit.value);
|
|
||||||
console.log(dataJinriSum.value);
|
|
||||||
shishiArr.value.forEach((item) => {
|
|
||||||
dataJinriSum.value.forEach((itemjinri) => {
|
|
||||||
if (item.gas === itemjinri.gas) {
|
|
||||||
// if (item.gas.includes('线')) {
|
|
||||||
// item.dailyVolume = itemjinri.totalGas.toFixed(4);
|
|
||||||
// } else {
|
|
||||||
item.dailyVolume = itemjinri.rq.toFixed(4);
|
|
||||||
item.yearVolume = itemjinri.yearVolume.toFixed(4);
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function sumByGas(records) {
|
|
||||||
console.log(records);
|
|
||||||
const summaryMap = {};
|
|
||||||
try {
|
|
||||||
records.forEach((record) => {
|
|
||||||
const gas = record.gas;
|
|
||||||
if (!summaryMap[gas]) {
|
|
||||||
// 初始化该 gas 类型的汇总对象
|
|
||||||
summaryMap[gas] = {
|
|
||||||
gas: gas,
|
|
||||||
rq: 0,
|
|
||||||
sq: 0,
|
|
||||||
totalGas: 0,
|
|
||||||
yearVolume: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 无论是否是第一次遇到该 gas 类型，都进行累加操作
|
|
||||||
summaryMap[gas].rq += record.rq || 0;
|
|
||||||
summaryMap[gas].sq += record.sq || 0;
|
|
||||||
summaryMap[gas].totalGas += record.totalGas || 0;
|
|
||||||
summaryMap[gas].yearVolume += record.yearVolume || 0;
|
|
||||||
});
|
|
||||||
return Object.values(summaryMap);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sumByUnit(records) {
|
|
||||||
console.log(records);
|
|
||||||
const summaryMap = {};
|
|
||||||
try {
|
|
||||||
records.forEach((record) => {
|
|
||||||
const unit = record.unit;
|
|
||||||
if (!summaryMap[unit]) {
|
|
||||||
// 初始化该 gas 类型的汇总对象
|
|
||||||
summaryMap[unit] = {
|
|
||||||
unit: unit,
|
|
||||||
gas: record.gas,
|
|
||||||
rq: 0,
|
|
||||||
sq: 0,
|
|
||||||
totalGas: 0,
|
|
||||||
yearVolume: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
// 无论是否是第一次遇到该 unit 类型，都进行累加操作
|
|
||||||
summaryMap[unit].rq += record.rq || 0;
|
|
||||||
summaryMap[unit].sq += record.sq || 0;
|
|
||||||
summaryMap[unit].totalGas += record.totalGas || 0;
|
|
||||||
summaryMap[unit].yearVolume += record.yearVolume || 0;
|
|
||||||
});
|
|
||||||
return Object.values(summaryMap);
|
|
||||||
} catch (error) {
|
|
||||||
//TODO handle the exception
|
|
||||||
console.log(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
// .container {
|
|
||||||
// padding: 20rpx;
|
|
||||||
// background-color: #f8f8f8;
|
|
||||||
// min-height: 100vh;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 0 30rpx 20rpx 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-row {
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value-group {
|
|
||||||
background-color: aliceblue;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
border-color: #ff00ff;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
.uni-col {
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
border-radius: 15rpx;
|
|
||||||
}
|
|
||||||
.wrapper {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
// transform: translateY(-50rpx);
|
|
||||||
|
|
||||||
.onduty {
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 20rpx 24rpx 24rpx 24rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
background-size: 44rpx 12rpx;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: left bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
text-align: left;
|
|
||||||
width: 642rpx;
|
|
||||||
margin-top: 23rpx;
|
|
||||||
|
|
||||||
.info_title {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #333333;
|
|
||||||
padding: 24rpx 0;
|
|
||||||
border-bottom: 1px solid #efefef;
|
|
||||||
|
|
||||||
view {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.data_box {
|
|
||||||
font-size: 24rpx;
|
|
||||||
padding-bottom: 24rpx;
|
|
||||||
color: #888888;
|
|
||||||
|
|
||||||
.first {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data {
|
|
||||||
margin-top: 23rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 10rpx;
|
|
||||||
height: 18rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list_wrapper {
|
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 26rpx 24rpx 24rpx 24rpx;
|
|
||||||
position: relative;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
width: 642rpx;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 100rpx;
|
|
||||||
left: 0;
|
|
||||||
content: ' ';
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background-color: #efefef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zhidu {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666666;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-top: 40rpx;
|
|
||||||
|
|
||||||
view {
|
|
||||||
width: 120rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
line-height: 60rpx;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-right: 40rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
position: relative;
|
|
||||||
color: #3179d6;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
width: 120rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
border-radius: 60rpx;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
position: absolute;
|
|
||||||
background-color: rgba(49, 121, 214, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list_title {
|
|
||||||
text-align: center;
|
|
||||||
padding-bottom: 29rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #666666;
|
|
||||||
|
|
||||||
.active {
|
|
||||||
position: relative;
|
|
||||||
color: #3179d6;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ' ';
|
|
||||||
width: 120rpx;
|
|
||||||
height: 70rpx;
|
|
||||||
border-radius: 70rpx;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
position: absolute;
|
|
||||||
background-color: rgba(49, 121, 214, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list_box {
|
|
||||||
margin-top: 24rpx;
|
|
||||||
|
|
||||||
.list {
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
padding: 30rpx 30rpx 35rpx 30rpx;
|
|
||||||
// width: 570rpx;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
|
|
||||||
.topic {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time_Box {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #888888;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
|
|
||||||
.time {
|
|
||||||
margin-right: 62rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.look {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
left: -30rpx;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
content: ' ';
|
|
||||||
width: 2rpx;
|
|
||||||
height: 20rpx;
|
|
||||||
background: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 28rpx;
|
|
||||||
height: 22rpx;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="nav">生产经营数据</view>
|
|
||||||
<view class="placeholder"></view>
|
|
||||||
<ng-data></ng-data>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const res = wx.getSystemInfoSync();
|
|
||||||
const statusHeight = res.statusBarHeight; //状态栏高度
|
|
||||||
const cusnavbarheight = statusHeight + 44 + 'px';
|
|
||||||
import ngData from './NatrueGas/index.vue';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.nav {
|
|
||||||
width: calc(100% - 60rpx);
|
|
||||||
padding: 0 30rpx;
|
|
||||||
height: v-bind(cusnavbarheight);
|
|
||||||
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #ffffff;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 99;
|
|
||||||
background-image: url('../../static/my/navbg.png');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 750rpx 458rpx;
|
|
||||||
}
|
|
||||||
.placeholder {
|
|
||||||
height: v-bind(cusnavbarheight);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
BIN
static/tab/product1.png
Normal file
BIN
static/tab/product1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
@ -1,49 +0,0 @@
|
|||||||
## 1.0.20（2024-05-09）
|
|
||||||
1.修复APP点击下拉框无法关闭
|
|
||||||
## 1.0.19（2024-04-29）
|
|
||||||
1.修复点击多个下拉框无法关闭
|
|
||||||
2.优化多选类型支持一次选择多个
|
|
||||||
3.修复小程序点击有个蓝色底
|
|
||||||
4.优化下拉菜单溢出屏幕底部时改为向上弹出
|
|
||||||
## 1.0.15（2023-11-24）
|
|
||||||
1.优化多选选中样式（tianheng20**qq.com网友提供）
|
|
||||||
2.优化chang事件（chang事件中将返回所选中的对象）
|
|
||||||
## 1.0.14（2023-10-25）
|
|
||||||
优化vue3延时添加未渲染问题，处理37；分号警告问题
|
|
||||||
## 1.0.13（2023-10-12）
|
|
||||||
优化mixinDatacomResData报错和defValue报错
|
|
||||||
## 1.0.12（2023-09-27）
|
|
||||||
修复搜索输入内容的时候下拉框的箭头会跑到文本框前面去
|
|
||||||
优化当有选中项时不显示清除按钮
|
|
||||||
## 1.0.11（2023-09-05）
|
|
||||||
更换change事件执行顺序
|
|
||||||
修复多选更改值时未即时更改下拉框选项
|
|
||||||
修复单选搜索框选中了
|
|
||||||
修复多选筛选输入时点击其他未清空筛选值
|
|
||||||
## 1.0.10（2023-08-29）
|
|
||||||
修复单选搜索回显问题
|
|
||||||
## 1.0.9（2023-08-28）
|
|
||||||
更新文档
|
|
||||||
## 1.0.8（2023-08-28）
|
|
||||||
更新文档
|
|
||||||
## 1.0.7（2023-08-16）
|
|
||||||
修复组件禁用bug
|
|
||||||
修复数据回显问题
|
|
||||||
添加多选搜索功能
|
|
||||||
## 1.0.6（2023-08-05）
|
|
||||||
修复清空值多选下拉列表还是被选中bug
|
|
||||||
## 1.0.5（2023-07-10）
|
|
||||||
修复多选初始化异步数据不显示问题
|
|
||||||
## 1.0.4（2023-07-07）
|
|
||||||
修复微信小程序多选显示兼容问题
|
|
||||||
## 1.0.3（2023-07-06）
|
|
||||||
修复bug
|
|
||||||
多选情况下 初始化之后重新选择第一个不显示
|
|
||||||
## 1.0.2（2023-07-06）
|
|
||||||
更新VUE3兼容
|
|
||||||
## 1.0.1（2023-06-30）
|
|
||||||
添加多选合并功能
|
|
||||||
## 1.0.0（2023-06-16）
|
|
||||||
添加下拉框检索，多选功能，自定义数据
|
|
||||||
## 1.0.4（2023-06-16）
|
|
||||||
添加下拉框检索，多选功能，自定义数据
|
|
||||||
@ -1,823 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="uni-stat__select">
|
|
||||||
<!-- hide-on-phone -->
|
|
||||||
<span v-if="label" class="uni-label-text">{{label + '：'}}</span>
|
|
||||||
<view class="uni-stat-box" :class="{'uni-stat__actived': current}">
|
|
||||||
<view class="uni-select" :style="{height:multiple?'100%':' 35px'}"
|
|
||||||
:class="{'uni-select--disabled':disabled}">
|
|
||||||
<view class="uni-select__input-box" :style="{height:multiple?'100%':'35px'}" @click="toggleSelector">
|
|
||||||
<view class="" style="display: flex;flex-wrap: wrap;width: 100%;" v-if="multiple&¤t.length>0">
|
|
||||||
<view class="tag-calss"
|
|
||||||
v-for="(item,index) in collapseTags?current.slice(0,collapseTagsNum):current"
|
|
||||||
:key="item[dataValue]">
|
|
||||||
<span class="text">{{item[dataKey]}}</span>
|
|
||||||
<view class="" @click.stop="delItem(item)">
|
|
||||||
<uni-icons type="clear" style="margin-left: 4px;" color="#c0c4cc" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view v-if="current.length>collapseTagsNum&&collapseTags" class="tag-calss">
|
|
||||||
<span class="text">+{{current.length-collapseTagsNum}}</span>
|
|
||||||
</view>
|
|
||||||
<input v-if="filterable&&!disabled" @input="inputChange" class="uni-select__input-text"
|
|
||||||
type="text" style="font-size: 12px;height: 52rpx;margin-left: 6px;width: auto;"
|
|
||||||
placeholder="请输入" v-model="filterInput">
|
|
||||||
</view>
|
|
||||||
<view v-else-if="current&¤t.length>0&&!showSelector" class="uni-select__input-text">
|
|
||||||
{{current}}
|
|
||||||
</view>
|
|
||||||
<input v-else-if="filterable&&showSelector" :focus="isFocus" @input="inputChange"
|
|
||||||
:disabled="disabled" @click.stop="" class="uni-select__input-text" type="text"
|
|
||||||
style="font-size: 12px;position: absolute;z-index: 1;" :placeholder="placeholderOld"
|
|
||||||
v-model="filterInput">
|
|
||||||
<view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view>
|
|
||||||
<uni-icons v-if="(current.length>0 && clear&&!disabled)||(currentArr.length>0&&clear&&!disabled)"
|
|
||||||
type="clear" color="#c0c4cc" size="24" style="position: absolute;right: 0;" @click="clearVal" />
|
|
||||||
<uni-icons style="right: 0;position: absolute;" v-else :type="showSelector? 'top' : 'bottom'"
|
|
||||||
size="14" color="#999" />
|
|
||||||
</view>
|
|
||||||
<view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
|
|
||||||
<view class="uni-select__selector"
|
|
||||||
:class="isDown?'uni-select__selector__down':'uni-select__selector__upwards'" v-if="showSelector">
|
|
||||||
<view class="uni-popper__arrow"></view>
|
|
||||||
<scroll-view scroll-y="true" class="uni-select__selector-scroll">
|
|
||||||
<view class="uni-select__selector-empty" v-if="filterMixinDatacomResData.length === 0">
|
|
||||||
<span>{{emptyTips}}</span>
|
|
||||||
</view>
|
|
||||||
<view v-else :class="['uni-select__selector-item', {'uni-select_selector-item_active' :multiple
|
|
||||||
&& currentArr.includes(item[dataValue])}]"
|
|
||||||
style="display: flex;justify-content: space-between;align-items: center;"
|
|
||||||
v-for="(item,index) in filterMixinDatacomResData" :key="index" @click="change(item)">
|
|
||||||
<span
|
|
||||||
:class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</span>
|
|
||||||
<uni-icons v-if="multiple&¤tArr.includes(item[dataValue])" type="checkmarkempty"
|
|
||||||
color="#007aff" />
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* DataChecklist 数据选择器
|
|
||||||
* @description 通过数据渲染的下拉框组件
|
|
||||||
* @tutorial https://uniapp.dcloud.io/component/uniui/uni-data-select
|
|
||||||
* @property {String} collapseTagsNum 多选时选中值按文字的形式展示的数量
|
|
||||||
* @property {String} collapseTags 多选时是否将选中值按文字的形式展示
|
|
||||||
* @property {String} dataKey 作为 key 唯一标识的键名
|
|
||||||
* @property {String} dataValue 作为 value 唯一标识的键名
|
|
||||||
* @property {Array} multiple 是否多选
|
|
||||||
* @property {Array} filterable 是否开启搜索
|
|
||||||
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
|
||||||
* @property {Boolean} clear 是否可以清空已选项
|
|
||||||
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
|
||||||
* @property {String} label 左侧标题
|
|
||||||
* @property {String} placeholder 输入框的提示文字
|
|
||||||
* @property {Boolean} disabled 是否禁用
|
|
||||||
* @event {Function} change 选中发生变化触发
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "uni-stat-select",
|
|
||||||
mixins: [uniCloud.mixinDatacom || {}],
|
|
||||||
props: {
|
|
||||||
collapseTagsNum: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
collapseTags: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
dataKey: {
|
|
||||||
type: [String],
|
|
||||||
default: 'text'
|
|
||||||
},
|
|
||||||
dataValue: {
|
|
||||||
type: [String],
|
|
||||||
default: 'value'
|
|
||||||
},
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
filterable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
localdata: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// #ifndef VUE3
|
|
||||||
value: {
|
|
||||||
type: [String, Number, Array],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
// #ifdef VUE3
|
|
||||||
modelValue: {
|
|
||||||
type: [String, Number, Array],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
// #endif
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: '请选择'
|
|
||||||
},
|
|
||||||
emptyTips: {
|
|
||||||
type: String,
|
|
||||||
default: '无选项'
|
|
||||||
},
|
|
||||||
clear: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
defItem: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showSelector: false,
|
|
||||||
current: [],
|
|
||||||
mixinDatacomResData: [],
|
|
||||||
apps: [],
|
|
||||||
channels: [],
|
|
||||||
cacheKey: "uni-data-select-lastSelectedValue",
|
|
||||||
placeholderOld: "",
|
|
||||||
currentArr: [],
|
|
||||||
filterInput: "",
|
|
||||||
isFocus: false,
|
|
||||||
windowHeight:0,
|
|
||||||
isDown:true,//下拉框是否朝下
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.windowHeight=uni.getSystemInfoSync().windowHeight
|
|
||||||
if (this.multiple) {
|
|
||||||
// #ifndef VUE3
|
|
||||||
this.currentArr = this.value || []
|
|
||||||
// #endif
|
|
||||||
// #ifdef VUE3
|
|
||||||
this.currentArr = this.modelValue || []
|
|
||||||
// #endif
|
|
||||||
if (this.current.length > 0) {
|
|
||||||
this.current = []
|
|
||||||
}
|
|
||||||
// #ifndef VUE3
|
|
||||||
if (this.value && this.value.length > 0 && this.filterMixinDatacomResData.length > 0) {
|
|
||||||
this.current = this.value.map(item => {
|
|
||||||
let current = this.mixinDatacomResData.find(e =>
|
|
||||||
e[this.dataValue] == item
|
|
||||||
)
|
|
||||||
return {
|
|
||||||
...current
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifdef VUE3
|
|
||||||
if (this.modelValue && this.modelValue.length > 0 && this.filterMixinDatacomResData.length > 0) {
|
|
||||||
this.current = this.modelValue.map(item => {
|
|
||||||
let current = this.mixinDatacomResData.find(e =>
|
|
||||||
e[this.dataValue] == item
|
|
||||||
)
|
|
||||||
return {
|
|
||||||
...current
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
// #ifndef VUE3
|
|
||||||
if (this.value || this.value == 0) {
|
|
||||||
this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
|
|
||||||
e[this.dataValue] == this.value
|
|
||||||
))
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
// #ifdef VUE3
|
|
||||||
if (this.modelValue || this.value == 0) {
|
|
||||||
this.current = this.formatItemName(this.filterMixinDatacomResData.find(e =>
|
|
||||||
e[this.dataValue] == this.modelValue
|
|
||||||
))
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
this.placeholderOld = this.placeholder
|
|
||||||
this.debounceGet = this.debounce(() => {
|
|
||||||
this.query();
|
|
||||||
}, 300);
|
|
||||||
if (this.collection && !this.localdata.length) {
|
|
||||||
this.debounceGet();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
filterMixinDatacomResData() {
|
|
||||||
if (this.filterable && this.filterInput) {
|
|
||||||
return this.mixinDatacomResData.filter(e => e[this.dataKey].includes(this.filterInput))
|
|
||||||
} else {
|
|
||||||
return this.mixinDatacomResData
|
|
||||||
}
|
|
||||||
},
|
|
||||||
typePlaceholder() {
|
|
||||||
const text = {
|
|
||||||
'opendb-stat-app-versions': '版本',
|
|
||||||
'opendb-app-channels': '渠道',
|
|
||||||
'opendb-app-list': '应用'
|
|
||||||
}
|
|
||||||
const common = this.placeholder
|
|
||||||
const placeholder = text[this.collection]
|
|
||||||
return placeholder ?
|
|
||||||
common + placeholder :
|
|
||||||
common
|
|
||||||
},
|
|
||||||
valueCom() {
|
|
||||||
// #ifdef VUE3
|
|
||||||
return this.modelValue;
|
|
||||||
// #endif
|
|
||||||
// #ifndef VUE3
|
|
||||||
return this.value;
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
localdata: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val, old) {
|
|
||||||
if (Array.isArray(val) && old !== val) {
|
|
||||||
this.mixinDatacomResData = val || []
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
valueCom: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
// console.log(newVal, oldVal);
|
|
||||||
this.initDefVal()
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
immediate: true
|
|
||||||
},
|
|
||||||
mixinDatacomResData: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
if (val.length) {
|
|
||||||
this.initDefVal()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getIsDown(){
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
const _this=this
|
|
||||||
query
|
|
||||||
.select(".uni-stat-box")
|
|
||||||
.boundingClientRect((data) => {
|
|
||||||
if(_this.windowHeight-data.top>200){
|
|
||||||
_this.isDown=true
|
|
||||||
}else{
|
|
||||||
_this.isDown=false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
},
|
|
||||||
debounce(fn, time = 100) {
|
|
||||||
let timer = null
|
|
||||||
return function(...args) {
|
|
||||||
if (timer) clearTimeout(timer)
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
fn.apply(this, args)
|
|
||||||
}, time)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 执行数据库查询
|
|
||||||
query() {
|
|
||||||
this.mixinDatacomEasyGet();
|
|
||||||
},
|
|
||||||
// 监听查询条件变更事件
|
|
||||||
onMixinDatacomPropsChange() {
|
|
||||||
if (this.collection) {
|
|
||||||
this.debounceGet();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initDefVal() {
|
|
||||||
let defValue = ''
|
|
||||||
if ((this.valueCom || this.valueCom === 0) && !this.isDisabled(this.valueCom)) {
|
|
||||||
defValue = this.valueCom
|
|
||||||
} else {
|
|
||||||
let strogeValue
|
|
||||||
if (this.collection) {
|
|
||||||
strogeValue = this.getCache()
|
|
||||||
}
|
|
||||||
if (strogeValue || strogeValue === 0) {
|
|
||||||
defValue = strogeValue
|
|
||||||
} else {
|
|
||||||
let defItem = ''
|
|
||||||
if (this.defItem > 0 && this.defItem <= this.mixinDatacomResData.length) {
|
|
||||||
defItem = this.mixinDatacomResData[this.defItem - 1][this.dataValue]
|
|
||||||
}
|
|
||||||
defValue = defItem
|
|
||||||
}
|
|
||||||
if (defValue || defValue === 0) {
|
|
||||||
this.emit(defValue)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.multiple) {
|
|
||||||
const mixinDatacomResData = this.mixinDatacomResData || []
|
|
||||||
if (!defValue) defValue = []
|
|
||||||
this.current = defValue.map(item => {
|
|
||||||
const current = mixinDatacomResData.find(e => {
|
|
||||||
return e[this.dataValue] == item
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
...current
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.currentArr = this.current.map(e => e[this.dataValue])
|
|
||||||
if (defValue.length < 1) {
|
|
||||||
this.currentArr = []
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const def = this.mixinDatacomResData.find(item => item[this.dataValue] === defValue)
|
|
||||||
this.current = def ? this.formatItemName(def) : ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @param {[String, Number]} value
|
|
||||||
* 判断用户给的 value 是否同时为禁用状态
|
|
||||||
*/
|
|
||||||
isDisabled(value) {
|
|
||||||
let isDisabled = false;
|
|
||||||
|
|
||||||
this.mixinDatacomResData.forEach(item => {
|
|
||||||
if (item[this.dataValue] === value) {
|
|
||||||
isDisabled = item.disable
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return isDisabled;
|
|
||||||
},
|
|
||||||
inputChange(e) {
|
|
||||||
this.$emit('inputChange', e.detail.value)
|
|
||||||
},
|
|
||||||
clearVal() {
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.multiple) {
|
|
||||||
this.current = []
|
|
||||||
this.currentArr = []
|
|
||||||
this.emit([])
|
|
||||||
} else {
|
|
||||||
this.current = ""
|
|
||||||
this.currentArr = []
|
|
||||||
this.emit('')
|
|
||||||
}
|
|
||||||
if (this.collection) {
|
|
||||||
this.removeCache()
|
|
||||||
}
|
|
||||||
this.placeholderOld = this.placeholder
|
|
||||||
this.filterInput = ""
|
|
||||||
},
|
|
||||||
change(item) {
|
|
||||||
if (!item.disable) {
|
|
||||||
if (this.multiple) {
|
|
||||||
if (!this.current) {
|
|
||||||
this.current = []
|
|
||||||
}
|
|
||||||
if (!this.currentArr) {
|
|
||||||
this.currentArr = []
|
|
||||||
}
|
|
||||||
if (this.currentArr.includes(item[this.dataValue])) {
|
|
||||||
let index = this.current.findIndex(e => {
|
|
||||||
return e[this.dataValue] == item[this.dataValue]
|
|
||||||
})
|
|
||||||
this.current.splice(index, 1)
|
|
||||||
this.currentArr.splice(index, 1)
|
|
||||||
this.emit(this.current)
|
|
||||||
} else {
|
|
||||||
this.current.push(item)
|
|
||||||
this.currentArr.push(item[this.dataValue])
|
|
||||||
this.emit(this.current)
|
|
||||||
|
|
||||||
}
|
|
||||||
this.filterInput = ""
|
|
||||||
} else {
|
|
||||||
this.showSelector = false
|
|
||||||
this.current = this.formatItemName(item)
|
|
||||||
if (this.filterable) {
|
|
||||||
this.filterInput = item[this.dataKey]
|
|
||||||
}
|
|
||||||
this.emit(item[this.dataValue])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
delItem(item) {
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.currentArr.includes(item[this.dataValue])) {
|
|
||||||
let index = this.current.findIndex(e => {
|
|
||||||
return e[this.dataValue] == item[this.dataValue]
|
|
||||||
})
|
|
||||||
this.current.splice(index, 1)
|
|
||||||
this.currentArr.splice(index, 1)
|
|
||||||
this.emit(this.current)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emit(val) {
|
|
||||||
if (this.multiple) {
|
|
||||||
this.$emit('input', this.currentArr)
|
|
||||||
this.$emit('update:modelValue', this.currentArr)
|
|
||||||
const currentArr = this.mixinDatacomResData.filter(item => this.currentArr.includes(item[this
|
|
||||||
.dataValue]))
|
|
||||||
this.$emit('change', currentArr)
|
|
||||||
} else {
|
|
||||||
this.$emit('input', val)
|
|
||||||
this.$emit('update:modelValue', val)
|
|
||||||
const current = this.mixinDatacomResData.find(item => val == item[this.dataValue])
|
|
||||||
console.log(current);
|
|
||||||
this.$emit('change', current)
|
|
||||||
}
|
|
||||||
if (this.collection) {
|
|
||||||
this.setCache(val);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleSelector() {
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// if (this.filterable && this.filterInput && this.mixinDatacomResData.findIndex(e => {
|
|
||||||
// return e[this.dataKey] == this
|
|
||||||
// .filterInput
|
|
||||||
// }) < 0) {
|
|
||||||
// if (!this.multiple) {
|
|
||||||
// this.filterInput = ""
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
this.getIsDown()
|
|
||||||
this.showSelector = !this.showSelector
|
|
||||||
this.isFocus = this.showSelector
|
|
||||||
if (this.filterable && this.current && this.showSelector) {
|
|
||||||
if (!this.multiple) {
|
|
||||||
this.placeholderOld = this.current
|
|
||||||
// this.filterInput = ""
|
|
||||||
}
|
|
||||||
} else if (this.filterable && !this.current && !this.showSelector) {
|
|
||||||
if (this.placeholderOld != this.placeholder) {
|
|
||||||
if (!this.multiple) {
|
|
||||||
this.current = this.placeholderOld
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.filterInput = ""
|
|
||||||
|
|
||||||
},
|
|
||||||
formatItemName(item) {
|
|
||||||
if (!item) {
|
|
||||||
return ""
|
|
||||||
}
|
|
||||||
let text = item[this.dataKey]
|
|
||||||
let value = item[this.dataValue]
|
|
||||||
let {
|
|
||||||
channel_code
|
|
||||||
} = item
|
|
||||||
channel_code = channel_code ? `(${channel_code})` : ''
|
|
||||||
if (this.format) {
|
|
||||||
// 格式化输出
|
|
||||||
let str = "";
|
|
||||||
str = this.format;
|
|
||||||
for (let key in item) {
|
|
||||||
str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
} else {
|
|
||||||
return this.collection.indexOf('app-list') > 0 ?
|
|
||||||
`${text}(${value})` :
|
|
||||||
(
|
|
||||||
text ?
|
|
||||||
text :
|
|
||||||
`未命名${channel_code}`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 获取当前加载的数据
|
|
||||||
getLoadData() {
|
|
||||||
return this.mixinDatacomResData;
|
|
||||||
},
|
|
||||||
// 获取当前缓存key
|
|
||||||
getCurrentCacheKey() {
|
|
||||||
return this.collection;
|
|
||||||
},
|
|
||||||
// 获取缓存
|
|
||||||
getCache(name = this.getCurrentCacheKey()) {
|
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
|
||||||
return cacheData[name];
|
|
||||||
},
|
|
||||||
// 设置缓存
|
|
||||||
setCache(value, name = this.getCurrentCacheKey()) {
|
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
|
||||||
cacheData[name] = value;
|
|
||||||
uni.setStorageSync(this.cacheKey, cacheData);
|
|
||||||
},
|
|
||||||
// 删除缓存
|
|
||||||
removeCache(name = this.getCurrentCacheKey()) {
|
|
||||||
let cacheData = uni.getStorageSync(this.cacheKey) || {};
|
|
||||||
delete cacheData[name];
|
|
||||||
uni.setStorageSync(this.cacheKey, cacheData);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
$uni-base-color: #6a6a6a !default;
|
|
||||||
$uni-main-color: #333 !default;
|
|
||||||
$uni-secondary-color: #909399 !default;
|
|
||||||
$uni-border-3: #e5e5e5;
|
|
||||||
|
|
||||||
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.hide-on-phone {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* #endif */
|
|
||||||
.uni-stat__select {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
// padding: 15px;
|
|
||||||
// cursor: pointer;
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-stat-box {
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-stat__actived {
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
// outline: 1px solid #2979ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-label-text {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $uni-base-color;
|
|
||||||
margin: auto 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select {
|
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid $uni-border-3;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0 5px;
|
|
||||||
padding-left: 10px;
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
user-select: none;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: solid 1px $uni-border-3;
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
height: 35px;
|
|
||||||
min-height: 35px;
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__label {
|
|
||||||
font-size: 16px;
|
|
||||||
// line-height: 22px;
|
|
||||||
min-height: 35px;
|
|
||||||
height: 35px;
|
|
||||||
padding-right: 10px;
|
|
||||||
color: $uni-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 35px;
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tag-calss {
|
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
font-size: 12px;
|
|
||||||
border: 1px solid #d9ecff;
|
|
||||||
border-radius: 4px;
|
|
||||||
white-space: nowrap;
|
|
||||||
height: 24px;
|
|
||||||
padding: 0 4px 0px 8px;
|
|
||||||
line-height: 22px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 2px 0 2px 6px;
|
|
||||||
display: flex;
|
|
||||||
max-width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #f4f4f5;
|
|
||||||
border-color: #e9e9eb;
|
|
||||||
color: #909399;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
font-size: 12px;
|
|
||||||
white-space: nowrap;
|
|
||||||
line-height: 22px;
|
|
||||||
color: #909399;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 14px;
|
|
||||||
height: 22px;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-plac {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $uni-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector__down {
|
|
||||||
top: calc(100% + 12px);
|
|
||||||
|
|
||||||
.uni-popper__arrow {
|
|
||||||
transform: rotateX(0deg);
|
|
||||||
top: -6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector__upwards {
|
|
||||||
bottom: calc(100% + 12px);
|
|
||||||
|
|
||||||
.uni-popper__arrow {
|
|
||||||
transform: rotateX(180deg);
|
|
||||||
bottom: -6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border: 1px solid #EBEEF5;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
z-index: 3;
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-scroll {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
max-height: 200px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-empty,
|
|
||||||
.uni-select__selector-item {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
// cursor: pointer;
|
|
||||||
/* #endif */
|
|
||||||
line-height: 35px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
/* border-bottom: solid 1px $uni-border-3; */
|
|
||||||
padding: 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-item:hover {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector-empty:last-child,
|
|
||||||
.uni-select__selector-item:last-child {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
border-bottom: none;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select_selector-item_active {
|
|
||||||
color: #409eff;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__selector__disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* picker 弹出层通用的指示小三角 */
|
|
||||||
.uni-popper__arrow,
|
|
||||||
.uni-popper__arrow::after {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popper__arrow {
|
|
||||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
|
||||||
|
|
||||||
left: 10%;
|
|
||||||
margin-right: 3px;
|
|
||||||
border-top-width: 0;
|
|
||||||
border-bottom-color: #EBEEF5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popper__arrow::after {
|
|
||||||
content: " ";
|
|
||||||
top: 1px;
|
|
||||||
margin-left: -6px;
|
|
||||||
border-top-width: 0;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-text {
|
|
||||||
// width: 280px;
|
|
||||||
width: 90%;
|
|
||||||
color: $uni-main-color;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
-o-text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select__input-placeholder {
|
|
||||||
color: $uni-base-color;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-select--mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "zxz-uni-data-select",
|
|
||||||
"displayName": "zxz-uni-data-select 下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义数据)",
|
|
||||||
"version": "1.0.20",
|
|
||||||
"description": "通过数据驱动的下拉框选择器(添加下拉框检索，多选功能，多选搜索功能，自定义数据)",
|
|
||||||
"keywords": [
|
|
||||||
"uni-ui",
|
|
||||||
"select",
|
|
||||||
"uni-data-select",
|
|
||||||
"下拉框",
|
|
||||||
"下拉选择框"
|
|
||||||
],
|
|
||||||
"repository": "",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": "^3.1.1"
|
|
||||||
},
|
|
||||||
"directories": {
|
|
||||||
"example": "../../temps/example_temps"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": "",
|
|
||||||
"type": "component-vue"
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": ["uni-load-more"],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "y",
|
|
||||||
"aliyun": "y",
|
|
||||||
"alipay": "n"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"App": {
|
|
||||||
"app-vue": "y",
|
|
||||||
"app-nvue": "y"
|
|
||||||
},
|
|
||||||
"H5-mobile": {
|
|
||||||
"Safari": "y",
|
|
||||||
"Android Browser": "y",
|
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
|
||||||
"H5-pc": {
|
|
||||||
"Chrome": "y",
|
|
||||||
"IE": "y",
|
|
||||||
"Edge": "y",
|
|
||||||
"Firefox": "y",
|
|
||||||
"Safari": "y"
|
|
||||||
},
|
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y",
|
|
||||||
"京东": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "y",
|
|
||||||
"联盟": "y"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
## DataSelect 下拉框选择器 <strong style="color:orangered;"><em>先导入示例项目</em></strong> 看看是否满足需求，然后再下载插件，有问题可以加微<strong style="color:orangered;"><em>weiyila520</em></strong>
|
|
||||||
> **组件名：zxz-uni-data-select**
|
|
||||||
> 代码块： `zxz-uni-data-select`
|
|
||||||
|
|
||||||
本插件基于官方插件 [uni-data-select](https://ext.dcloud.net.cn/plugin?id=7993) 进行二次开发拓展功能，支持uni-data-select本身功能不变（表单验证等）
|
|
||||||
|
|
||||||
<h1>拓展功能</h1>
|
|
||||||
<ol>
|
|
||||||
<li>支持多选功能</li>
|
|
||||||
<li>支持选项禁用</li>
|
|
||||||
<li>支持自定义显示值</li>
|
|
||||||
<li>支持搜索</li>
|
|
||||||
<li>支持多选时将选中值按文字形式展示</li>
|
|
||||||
<li>支持下拉菜单溢出屏幕底部时自动改为向上弹出</li>
|
|
||||||
<li>监听搜索输入事件</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<h2>API</h2>
|
|
||||||
### zxz-uni-data-select Props
|
|
||||||
|
|
||||||
| 属性名 | 类型 | 默认值 | 说明 |
|
|
||||||
| - | - | - | - |
|
|
||||||
| v-model | String、Array、Number |- | 选中项绑定值 |
|
|
||||||
| multiple | Boolean | false | 是否多选 |
|
|
||||||
| disabled | Boolean |false | 是否禁用 |
|
|
||||||
| dataKey | String |"key" | 作为 key 唯一标识的键名 |
|
|
||||||
| dataValue | String | "value" | 作为 value 唯一标识的键名 |
|
|
||||||
| filterable | Boolean | false | 是否开启搜索 |
|
|
||||||
| collapseTags | Boolean | false | 多选时是否将选中值按文字的形式展示 |
|
|
||||||
|collapseTagsNum|Number | 1 | 多选时选中值按文字的形式展示的数量 |
|
|
||||||
| localdata | Array |- | 下拉列表本地数据 |
|
|
||||||
|label | String | - | 左侧标题 |
|
|
||||||
|placeholder | String | "请选择" | 输入框的提示文字 |
|
|
||||||
|emptyTips | String |"无选项" | 无选项提示 |
|
|
||||||
|clear | Boolean | true | 是否清空 |
|
|
||||||
|format | String | - | 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"|
|
|
||||||
|@inputChange | event | event(String) | 搜索输入事件 |
|
|
||||||
Loading…
Reference in New Issue
Block a user