7.14
commit
ac4a8aed1d
|
|
@ -0,0 +1,241 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-combox">
|
||||||
|
<view v-if="label" class="uni-combox__label" :style="labelStyle">
|
||||||
|
<text>{{label}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-combox__input-box">
|
||||||
|
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
|
||||||
|
<!-- <uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons> 源代码注释掉上下距离太高不好看,去掉源码中class-->
|
||||||
|
<uni-icons type="arrowdown" size="18" v-if="inputVal===''" color="#999999" @click="toggleSelector"></uni-icons> <!-- 下箭头颜色#999999 -->
|
||||||
|
<uni-icons type="clear" size="18" v-else color="#999999" @click="clearInputVal"></uni-icons> <!-- add by limeng 追加的代码片段用叉号图标快速清空输入框 -->
|
||||||
|
<view class="uni-combox__selector" v-if="showSelector">
|
||||||
|
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
|
||||||
|
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
|
||||||
|
<text>{{emptyTips}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
|
||||||
|
<text>{{item}}</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
||||||
|
export default {
|
||||||
|
name: 'uniCombox',
|
||||||
|
components: {
|
||||||
|
uniIcons
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
labelWidth: {
|
||||||
|
type: String,
|
||||||
|
default: 'auto'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/** 不再需要这个属性
|
||||||
|
candidates: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},*/
|
||||||
|
//add by limeng 20210702 增加 map 类型的属性
|
||||||
|
candidatesMap: {
|
||||||
|
type: Map,//这个类型会被警告但是不影响使用
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emptyTips: {
|
||||||
|
type: String,
|
||||||
|
default: '无匹配项'
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSelector: false,
|
||||||
|
inputVal: '', //输入框中输入的字符
|
||||||
|
inputValId: '',//add by limeng 真实往后台传递的下拉id标识(比如项目id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
labelStyle() {
|
||||||
|
if (this.labelWidth === 'auto') {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
width: this.labelWidth
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filterCandidates() {
|
||||||
|
//从candidatesMap 取值遍历所有key并赋值给内部变量candidates这个数组
|
||||||
|
var candidates = [];//数组清空
|
||||||
|
this.candidatesMap.forEach(function(value, key){
|
||||||
|
var key = key;
|
||||||
|
candidates.push(key);//获取的值给内部变量赋值
|
||||||
|
})
|
||||||
|
|
||||||
|
return candidates.filter((item) => {
|
||||||
|
return item.indexOf(this.inputVal) > -1
|
||||||
|
})
|
||||||
|
},
|
||||||
|
filterCandidatesLength() {
|
||||||
|
return this.filterCandidates.length
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.inputVal = newVal
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleSelector() {
|
||||||
|
this.showSelector = !this.showSelector
|
||||||
|
},
|
||||||
|
onFocus() {
|
||||||
|
this.showSelector = true
|
||||||
|
},
|
||||||
|
onBlur() {
|
||||||
|
/**update by limeng 20210710 上午周六
|
||||||
|
离开输入框焦点的时候输入框里的内容必须包含在下拉框列表中，
|
||||||
|
否则输入框内容是用户瞎写的没有意义，后台也无法识别
|
||||||
|
因此,强制用户必须以选中的为准
|
||||||
|
备注：提供输入功能仅仅是为了匹配合适的下拉选项，但不能以输入的值为准,必须以选中的为准
|
||||||
|
*/
|
||||||
|
//if(this.candidates.indexOf(this.inputVal) > -1){ //则包含该元素
|
||||||
|
if(this.filterCandidates.indexOf(this.inputVal) > -1){ //则包含该元素
|
||||||
|
//alert("你输值在列表中");
|
||||||
|
//关闭下拉(原代码保留)
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showSelector = false
|
||||||
|
}, 50)
|
||||||
|
}else {
|
||||||
|
//alert("你输的值不在列表中，此时下拉列表不能关闭，直到用户选中才能关闭下拉");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSelectorClick(index) {//index 只是这个数组中顺序的索引值比如 1,2,3...,和map中的key value没有关系
|
||||||
|
this.inputVal = this.filterCandidates[index]//选中后给控件的输入框赋值
|
||||||
|
this.inputValId = this.candidatesMap.get(this.inputVal);//根据输入框内容反查出对应的id或者code(以便提交到后台)
|
||||||
|
this.showSelector = false;//选中后关闭下拉列表
|
||||||
|
this.$emit('input', this.inputVal);//拿到子组件的值(name)赋值给父组件的input事件,即父组件的v-model绑定的属性
|
||||||
|
this.$emit("setId",this.inputValId);//将name对应的id或者code返回给父组件,通过调用父组件的setId方法传值给父组件data中声明的变量
|
||||||
|
},
|
||||||
|
onInput() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit('input', this.inputVal)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
clearInputVal(){
|
||||||
|
this.inputVal='';
|
||||||
|
this.inputValId = '';//同时清空输入框id
|
||||||
|
this.$emit("setId",'');//将父组件的值也置为空
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.uni-combox {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
height: 40px;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
/* border-bottom: solid 1px #DDDDDD;
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__label {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
padding-right: 10px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__input-box {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 33upx;/*16px*/
|
||||||
|
height: 25px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__input-arrow {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__selector {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
top: 42px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__selector-scroll {
|
||||||
|
max-height: 500px;/*200px*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__selector::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-bottom: solid 6px #FFFFFF;
|
||||||
|
border-right: solid 6px transparent;
|
||||||
|
border-left: solid 6px transparent;
|
||||||
|
left: 50%;
|
||||||
|
top: -6px;
|
||||||
|
margin-left: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__selector-empty,
|
||||||
|
.uni-combox__selector-item {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
line-height: 50px;/*36px*/
|
||||||
|
font-size: 33upx;/* 14px*/
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: solid 1px #DDDDDD;
|
||||||
|
margin: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-combox__selector-empty:last-child,
|
||||||
|
.uni-combox__selector-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -15,8 +15,8 @@ export default {
|
||||||
/**
|
/**
|
||||||
* @description api请求基础路径
|
* @description api请求基础路径
|
||||||
*/
|
*/
|
||||||
// local: "http://192.168.0.103:8891",
|
// local: "http://192.168.61.133/tos",
|
||||||
local: "http://61.184.202.72:8891",
|
local: "http://192.168.61.133/tos",
|
||||||
imgSrc: "http://116.205.142.169/HtRtosResource/assets/",
|
imgSrc: "http://116.205.142.169/HtRtosResource/assets/",
|
||||||
mapkey: "FUFBZ-KBIWW-P63RR-RR4W3-BNV4H-T6BGX"
|
mapkey: "FUFBZ-KBIWW-P63RR-RR4W3-BNV4H-T6BGX"
|
||||||
}
|
}
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
<superwei-combox :candidates="candidates_json" :isJSON="true" keyName="name"
|
<superwei-combox :candidates="candidates_json" :isJSON="true" keyName="name"
|
||||||
placeholder="请选择或输入" v-model="inputValue_json" @input="input_json"
|
placeholder="请选择或输入" v-model="inputValue_json" @input="input_json"
|
||||||
@select="select_json"></superwei-combox>
|
@select="select_json"></superwei-combox>
|
||||||
|
|
||||||
<uni-easyinput class="input" suffixIcon="search" v-model="value1" placeholder="港区"
|
<uni-easyinput class="input" suffixIcon="search" v-model="value1" placeholder="港区"
|
||||||
@iconClick="iconClick">
|
@iconClick="iconClick">
|
||||||
</uni-easyinput>
|
</uni-easyinput>
|
||||||
|
|
@ -85,6 +86,7 @@
|
||||||
id: '6',
|
id: '6',
|
||||||
name: '...'
|
name: '...'
|
||||||
}]
|
}]
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -100,12 +102,6 @@
|
||||||
url: '/pages/index/instruct'
|
url: '/pages/index/instruct'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
input_json(e) {
|
|
||||||
console.log(e) // 选项一
|
|
||||||
},
|
|
||||||
select_json(e) {
|
|
||||||
console.log(e) // {id: '1',name: '选项一'}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -6,50 +6,55 @@
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="form">
|
<view class="form">
|
||||||
<view class="select">
|
<view class="select">
|
||||||
<uni-data-select v-model="value" :localdata="range" @change="change">
|
<uni-data-select v-model="pamValue" :localdata="pamList" @change="pamChange"
|
||||||
|
placeholder="请选择港口">
|
||||||
</uni-data-select>
|
</uni-data-select>
|
||||||
</view>
|
</view>
|
||||||
<view class="input">
|
<view class="select">
|
||||||
<uni-easyinput class="input" suffixIcon="search" v-model="value1" placeholder="船名/航次"
|
<uni-data-select v-model="shipValue" :localdata="shipList" @change="shipChange"
|
||||||
@iconClick="iconClick">
|
placeholder="请选择船名航次">
|
||||||
</uni-easyinput>
|
</uni-data-select>
|
||||||
</view>
|
</view>
|
||||||
|
<van-button type="default" @click="search">搜索</van-button>
|
||||||
</view>
|
</view>
|
||||||
<view class="itemList">
|
<view class="itemList">
|
||||||
<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toGo">
|
<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toGo">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view class="name">
|
<view class="name">
|
||||||
海王星领袖
|
{{item.spmName}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="table">
|
<view class="table">
|
||||||
<view class="row">
|
<view class="row">
|
||||||
<view class="nitem">
|
<view class="nitem">
|
||||||
进口航次: <text>735546</text>
|
进口航次: <text>{{item.inVvyName}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="nitem">
|
<view class="nitem">
|
||||||
贸易类型: <text>内贸</text>
|
进口贸易类型: <text>{{item.inTradeTypeName}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
<view class="nitem">
|
<view class="nitem">
|
||||||
出口航次: <text>555546</text>
|
出口航次: <text>{{item.outVvyName}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="nitem">
|
<view class="nitem">
|
||||||
贸易类型: <text>外贸</text>
|
出口贸易类型: <text>{{item.outTradeTypeName}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
<view class="nitem">
|
<view class="nitem">
|
||||||
计划泊位: <text>一泊位</text>
|
计划泊位: <text>{{item.planBerthageName}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="nitem">
|
<view class="nitem">
|
||||||
实际泊位: <text>一泊位</text>
|
实际泊位: <text>{{item.actualBerthageName}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
<view class="nitem" v-if="item==1">
|
<view class="nitem">
|
||||||
|
<text>{{item.uploadStatusDesc}}</text>
|
||||||
|
<text>{{item.uploadTime}}</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="nitem" v-if="item==1">
|
||||||
<text class="green">●</text> 已下载
|
<text class="green">●</text> 已下载
|
||||||
<text>2023/09/21 12:00</text>
|
<text>2023/09/21 12:00</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -62,17 +67,16 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="nitem" v-if="item==2">
|
<view class="nitem" v-if="item==2">
|
||||||
<text>●</text> 未上传
|
<text>●</text> 未上传
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="footer">
|
<view class="footer">
|
||||||
<view class="fitem">
|
<view class="fitem" @click="download(item)">
|
||||||
下载
|
下载
|
||||||
</view>
|
</view>
|
||||||
<view class="fitem">
|
<view class="fitem" @click="upload">
|
||||||
上传
|
上传
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -88,22 +92,13 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: 0,
|
// 港口
|
||||||
value1: '',
|
pamValue: "",
|
||||||
range: [{
|
pamList: [],
|
||||||
value: 0,
|
// 船名航次
|
||||||
text: "一号港"
|
shipValue: '',
|
||||||
},
|
shipList: [],
|
||||||
{
|
ltemList: [],
|
||||||
value: 1,
|
|
||||||
text: "二号港"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 2,
|
|
||||||
text: "不冻港"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
ltemList: [1, 2, 1, 1, 2, 1, 1, 1, 1],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -111,12 +106,101 @@
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
SideBar,
|
SideBar,
|
||||||
HeadInfo
|
HeadInfo,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getPam();
|
||||||
|
this.getShip();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
change(e) {
|
// 获取船的数据
|
||||||
console.log("e:", e);
|
initData() {
|
||||||
|
uni.request({
|
||||||
|
url: this.$local + '/api/shipOperate/select?pamId=' + this.pamValue + "&vvyId=" + this
|
||||||
|
.shipValue,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json' //自定义请求头信息
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log('接口返回------', res);
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
this.ltemList = res.data.data.records
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
|
// 获取港区下拉数据
|
||||||
|
getPam() {
|
||||||
|
uni.request({
|
||||||
|
url: this.$local + '/api/shipOperate/queryPortArea',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json' //自定义请求头信息
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log('接口返回------', res);
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
let arr = res.data.data;
|
||||||
|
arr.forEach((v, index) => {
|
||||||
|
this.pamList.push({
|
||||||
|
text: v.pamName,
|
||||||
|
value: v.pamId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取船名航次下拉数据
|
||||||
|
getShip() {
|
||||||
|
uni.request({
|
||||||
|
url: this.$local + '/api/shipOperate/queryShipmentVoyageData?key=阳',
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json' //自定义请求头信息
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log('接口返回------', res);
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
// this.shipList = res.data.data
|
||||||
|
let arr = res.data.data;
|
||||||
|
arr.forEach((v, index) => {
|
||||||
|
this.shipList.push({
|
||||||
|
text: v.spmName,
|
||||||
|
value: v.vvyId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 港区下拉
|
||||||
|
pamChange(event) {},
|
||||||
|
// 船名航次下拉
|
||||||
|
shipChange(e) {},
|
||||||
|
// 点击搜索
|
||||||
|
search() {
|
||||||
|
this.initData()
|
||||||
|
},
|
||||||
|
// 点击下载
|
||||||
|
download(item) {
|
||||||
|
let ids = [item.outVvyName, item.inVvyName]
|
||||||
|
console.log(ids)
|
||||||
|
uni.request({
|
||||||
|
url: this.$local + '/api/shipOperate/download?vvyIds=' + ids,
|
||||||
|
header: {
|
||||||
|
'Content-Type': 'application/json' //自定义请求头信息
|
||||||
|
},
|
||||||
|
method: 'GET', //请求方式，必须为大写
|
||||||
|
success: (res) => {
|
||||||
|
console.log('接口返回------', res);
|
||||||
|
if (res.statusCode === 200) {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击上传
|
||||||
|
upload() {},
|
||||||
toGo() {
|
toGo() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/shipWork/documentList`
|
url: `/pages/shipWork/documentList`
|
||||||
|
|
@ -126,20 +210,23 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="less" scoped>
|
||||||
.container {
|
.container {
|
||||||
background-color: #f5f6fa;
|
background-color: #f5f6fa;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
min-height: calc(100vh - 44px - 40px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
min-height: calc(100vh - 44px - 40px);
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.select {
|
.select {
|
||||||
width: 100px;
|
width: 200px;
|
||||||
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
|
|
@ -148,6 +235,11 @@
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.van-button {
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemList {
|
.itemList {
|
||||||
|
|
@ -198,9 +290,7 @@
|
||||||
width: 50%;
|
width: 50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:nth-child(2n) {
|
.item:nth-child(2n) {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<<<<<<< HEAD
|
||||||
<template>
|
<template>
|
||||||
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||||
<template v-if="!isLocal">
|
<template v-if="!isLocal">
|
||||||
|
|
@ -199,11 +200,215 @@
|
||||||
|
|
||||||
// if (this.formItem) {
|
// if (this.formItem) {
|
||||||
// this.isTop = 6
|
// this.isTop = 6
|
||||||
|
=======
|
||||||
|
<template>
|
||||||
|
<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
|
||||||
|
<template v-if="!isLocal">
|
||||||
|
<view class="uni-data-loading">
|
||||||
|
<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
|
||||||
|
<text v-else>{{mixinDatacomErrorMessage}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
|
||||||
|
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||||
|
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||||
|
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner" :style="item.styleIcon">
|
||||||
|
<view class="checkbox__inner-icon"></view>
|
||||||
|
</view>
|
||||||
|
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||||
|
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||||
|
<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
|
||||||
|
</view>
|
||||||
|
</label>
|
||||||
|
</checkbox-group>
|
||||||
|
<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
|
||||||
|
<!-- -->
|
||||||
|
<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
|
||||||
|
:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
|
||||||
|
<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
|
||||||
|
<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
|
||||||
|
:style="item.styleBackgroud">
|
||||||
|
<view class="radio__inner-icon" :style="item.styleIcon"></view>
|
||||||
|
</view>
|
||||||
|
<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
|
||||||
|
<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
|
||||||
|
<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
|
||||||
|
</view>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* DataChecklist 数据选择器
|
||||||
|
* @description 通过数据渲染 checkbox 和 radio
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
|
||||||
|
* @property {String} mode = [default| list | button | tag] 显示模式
|
||||||
|
* @value default 默认横排模式
|
||||||
|
* @value list 列表模式
|
||||||
|
* @value button 按钮模式
|
||||||
|
* @value tag 标签模式
|
||||||
|
* @property {Boolean} multiple = [true|false] 是否多选
|
||||||
|
* @property {Array|String|Number} value 默认值
|
||||||
|
* @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
|
||||||
|
* @property {Number|String} min 最小选择个数 ，multiple为true时生效
|
||||||
|
* @property {Number|String} max 最大选择个数 ，multiple为true时生效
|
||||||
|
* @property {Boolean} wrap 是否换行显示
|
||||||
|
* @property {String} icon = [left|right] list 列表模式下icon显示位置
|
||||||
|
* @property {Boolean} selectedColor 选中颜色
|
||||||
|
* @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
|
||||||
|
* @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
|
||||||
|
* @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
|
||||||
|
* @value left 左侧显示
|
||||||
|
* @value right 右侧显示
|
||||||
|
* @event {Function} change 选中发生变化触发
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'uniDataChecklist',
|
||||||
|
mixins: [uniCloud.mixinDatacom || {}],
|
||||||
|
emits:['input','update:modelValue','change'],
|
||||||
|
props: {
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default () {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// TODO vue3
|
||||||
|
modelValue: {
|
||||||
|
type: [Array, String, Number],
|
||||||
|
default() {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
localdata: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
wrap: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
selectedColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
selectedTextColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
emptyText:{
|
||||||
|
type: String,
|
||||||
|
default: '暂无数据'
|
||||||
|
},
|
||||||
|
disabled:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
map:{
|
||||||
|
type: Object,
|
||||||
|
default(){
|
||||||
|
return {
|
||||||
|
text:'text',
|
||||||
|
value:'value'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
localdata: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.range = newVal
|
||||||
|
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
mixinDatacomResData(newVal) {
|
||||||
|
this.range = newVal
|
||||||
|
this.dataList = this.getDataList(this.getSelectedValue(newVal))
|
||||||
|
},
|
||||||
|
value(newVal) {
|
||||||
|
this.dataList = this.getDataList(newVal)
|
||||||
|
// fix by mehaotian is_reset 在 uni-forms 中定义
|
||||||
|
// if(!this.is_reset){
|
||||||
|
// this.is_reset = false
|
||||||
|
// this.formItem && this.formItem.setValue(newVal)
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
modelValue(newVal) {
|
||||||
|
this.dataList = this.getDataList(newVal);
|
||||||
|
// if(!this.is_reset){
|
||||||
|
// this.is_reset = false
|
||||||
|
// this.formItem && this.formItem.setValue(newVal)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dataList: [],
|
||||||
|
range: [],
|
||||||
|
contentText: {
|
||||||
|
contentdown: '查看更多',
|
||||||
|
contentrefresh: '加载中',
|
||||||
|
contentnomore: '没有更多'
|
||||||
|
},
|
||||||
|
isLocal:true,
|
||||||
|
styles: {
|
||||||
|
selectedColor: '#2979ff',
|
||||||
|
selectedTextColor: '#666',
|
||||||
|
},
|
||||||
|
isTop:0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
dataValue(){
|
||||||
|
if(this.value === '')return this.modelValue
|
||||||
|
if(this.modelValue === '') return this.value
|
||||||
|
return this.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.form = this.getForm('uniForms')
|
||||||
|
// this.formItem = this.getForm('uniFormsItem')
|
||||||
|
// this.formItem && this.formItem.setValue(this.value)
|
||||||
|
|
||||||
|
// if (this.formItem) {
|
||||||
|
// this.isTop = 6
|
||||||
|
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||||
// if (this.formItem.name) {
|
// if (this.formItem.name) {
|
||||||
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
|
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
|
||||||
// if(!this.is_reset){
|
// if(!this.is_reset){
|
||||||
// this.is_reset = false
|
// this.is_reset = false
|
||||||
// this.formItem.setValue(this.dataValue)
|
// this.formItem.setValue(this.dataValue)
|
||||||
|
<<<<<<< HEAD
|
||||||
// }
|
// }
|
||||||
// this.rename = this.formItem.name
|
// this.rename = this.formItem.name
|
||||||
// this.form.inputChildrens.push(this)
|
// this.form.inputChildrens.push(this)
|
||||||
|
|
@ -383,6 +588,187 @@
|
||||||
*/
|
*/
|
||||||
setStyleBackgroud(item) {
|
setStyleBackgroud(item) {
|
||||||
let styles = {}
|
let styles = {}
|
||||||
|
=======
|
||||||
|
// }
|
||||||
|
// this.rename = this.formItem.name
|
||||||
|
// this.form.inputChildrens.push(this)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (this.localdata && this.localdata.length !== 0) {
|
||||||
|
this.isLocal = true
|
||||||
|
this.range = this.localdata
|
||||||
|
this.dataList = this.getDataList(this.getSelectedValue(this.range))
|
||||||
|
} else {
|
||||||
|
if (this.collection) {
|
||||||
|
this.isLocal = false
|
||||||
|
this.loadData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadData() {
|
||||||
|
this.mixinDatacomGet().then(res=>{
|
||||||
|
this.mixinDatacomResData = res.result.data
|
||||||
|
if(this.mixinDatacomResData.length === 0){
|
||||||
|
this.isLocal = false
|
||||||
|
this.mixinDatacomErrorMessage = this.emptyText
|
||||||
|
}else{
|
||||||
|
this.isLocal = true
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
this.mixinDatacomErrorMessage = err.message
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniForms') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
chagne(e) {
|
||||||
|
const values = e.detail.value
|
||||||
|
|
||||||
|
let detail = {
|
||||||
|
value: [],
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.multiple) {
|
||||||
|
this.range.forEach(item => {
|
||||||
|
|
||||||
|
if (values.includes(item[this.map.value] + '')) {
|
||||||
|
detail.value.push(item[this.map.value])
|
||||||
|
detail.data.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const range = this.range.find(item => (item[this.map.value] + '') === values)
|
||||||
|
if (range) {
|
||||||
|
detail = {
|
||||||
|
value: range[this.map.value],
|
||||||
|
data: range
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.formItem && this.formItem.setValue(detail.value)
|
||||||
|
// TODO 兼容 vue2
|
||||||
|
this.$emit('input', detail.value);
|
||||||
|
// // TOTO 兼容 vue3
|
||||||
|
this.$emit('update:modelValue', detail.value);
|
||||||
|
this.$emit('change', {
|
||||||
|
detail
|
||||||
|
})
|
||||||
|
if (this.multiple) {
|
||||||
|
// 如果 v-model 没有绑定 ，则走内部逻辑
|
||||||
|
// if (this.value.length === 0) {
|
||||||
|
this.dataList = this.getDataList(detail.value, true)
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
this.dataList = this.getDataList(detail.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取渲染的新数组
|
||||||
|
* @param {Object} value 选中内容
|
||||||
|
*/
|
||||||
|
getDataList(value) {
|
||||||
|
// 解除引用关系，破坏原引用关系，避免污染源数据
|
||||||
|
let dataList = JSON.parse(JSON.stringify(this.range))
|
||||||
|
let list = []
|
||||||
|
if (this.multiple) {
|
||||||
|
if (!Array.isArray(value)) {
|
||||||
|
value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dataList.forEach((item, index) => {
|
||||||
|
item.disabled = item.disable || item.disabled || false
|
||||||
|
if (this.multiple) {
|
||||||
|
if (value.length > 0) {
|
||||||
|
let have = value.find(val => val === item[this.map.value])
|
||||||
|
item.selected = have !== undefined
|
||||||
|
} else {
|
||||||
|
item.selected = false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
item.selected = value === item[this.map.value]
|
||||||
|
}
|
||||||
|
|
||||||
|
list.push(item)
|
||||||
|
})
|
||||||
|
return this.setRange(list)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 处理最大最小值
|
||||||
|
* @param {Object} list
|
||||||
|
*/
|
||||||
|
setRange(list) {
|
||||||
|
let selectList = list.filter(item => item.selected)
|
||||||
|
let min = Number(this.min) || 0
|
||||||
|
let max = Number(this.max) || ''
|
||||||
|
list.forEach((item, index) => {
|
||||||
|
if (this.multiple) {
|
||||||
|
if (selectList.length <= min) {
|
||||||
|
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||||
|
if (have !== undefined) {
|
||||||
|
item.disabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectList.length >= max && max !== '') {
|
||||||
|
let have = selectList.find(val => val[this.map.value] === item[this.map.value])
|
||||||
|
if (have === undefined) {
|
||||||
|
item.disabled = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setStyles(item, index)
|
||||||
|
list[index] = item
|
||||||
|
})
|
||||||
|
return list
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置 class
|
||||||
|
* @param {Object} item
|
||||||
|
* @param {Object} index
|
||||||
|
*/
|
||||||
|
setStyles(item, index) {
|
||||||
|
// 设置自定义样式
|
||||||
|
item.styleBackgroud = this.setStyleBackgroud(item)
|
||||||
|
item.styleIcon = this.setStyleIcon(item)
|
||||||
|
item.styleIconText = this.setStyleIconText(item)
|
||||||
|
item.styleRightIcon = this.setStyleRightIcon(item)
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取选中值
|
||||||
|
* @param {Object} range
|
||||||
|
*/
|
||||||
|
getSelectedValue(range) {
|
||||||
|
if (!this.multiple) return this.dataValue
|
||||||
|
let selectedArr = []
|
||||||
|
range.forEach((item) => {
|
||||||
|
if (item.selected) {
|
||||||
|
selectedArr.push(item[this.map.value])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.dataValue.length > 0 ? this.dataValue : selectedArr
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置背景样式
|
||||||
|
*/
|
||||||
|
setStyleBackgroud(item) {
|
||||||
|
let styles = {}
|
||||||
|
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
if (this.selectedColor) {
|
if (this.selectedColor) {
|
||||||
if (this.mode !== 'list') {
|
if (this.mode !== 'list') {
|
||||||
|
|
@ -391,6 +777,7 @@
|
||||||
if (this.mode === 'tag') {
|
if (this.mode === 'tag') {
|
||||||
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
||||||
}
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
}
|
}
|
||||||
let classles = ''
|
let classles = ''
|
||||||
for (let i in styles) {
|
for (let i in styles) {
|
||||||
|
|
@ -400,6 +787,17 @@
|
||||||
},
|
},
|
||||||
setStyleIcon(item) {
|
setStyleIcon(item) {
|
||||||
let styles = {}
|
let styles = {}
|
||||||
|
=======
|
||||||
|
}
|
||||||
|
let classles = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleIcon(item) {
|
||||||
|
let styles = {}
|
||||||
|
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||||
let classles = ''
|
let classles = ''
|
||||||
if (this.selectedColor) {
|
if (this.selectedColor) {
|
||||||
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
|
@ -410,6 +808,7 @@
|
||||||
styles['background-color'] = '#F2F6FC'
|
styles['background-color'] = '#F2F6FC'
|
||||||
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
}
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
}
|
}
|
||||||
for (let i in styles) {
|
for (let i in styles) {
|
||||||
classles += `${i}:${styles[i]};`
|
classles += `${i}:${styles[i]};`
|
||||||
|
|
@ -819,3 +1218,414 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
=======
|
||||||
|
}
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleIconText(item) {
|
||||||
|
let styles = {}
|
||||||
|
let classles = ''
|
||||||
|
if (this.selectedColor) {
|
||||||
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
if (this.mode === 'tag') {
|
||||||
|
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
|
||||||
|
} else {
|
||||||
|
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
|
||||||
|
}
|
||||||
|
if(!item.selected && item.disabled){
|
||||||
|
styles.color = '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleRightIcon(item) {
|
||||||
|
let styles = {}
|
||||||
|
let classles = ''
|
||||||
|
if (this.mode === 'list') {
|
||||||
|
styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
|
||||||
|
}
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
|
||||||
|
return classles
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$uni-primary: #2979ff !default;
|
||||||
|
$border-color: #DCDFE6;
|
||||||
|
$disable:0.4;
|
||||||
|
|
||||||
|
@mixin flex {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-loading {
|
||||||
|
@include flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 36px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-data-checklist {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
flex: 1;
|
||||||
|
// 多选样式
|
||||||
|
.checklist-group {
|
||||||
|
@include flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&.is-list {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-box {
|
||||||
|
@include flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
margin: 5px 0;
|
||||||
|
margin-right: 25px;
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 文字样式
|
||||||
|
.checklist-content {
|
||||||
|
@include flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.checklist-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 5px;
|
||||||
|
line-height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkobx__list {
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-right-color: #007aff;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-bottom-width:1px;
|
||||||
|
border-bottom-color: #007aff;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
height: 12px;
|
||||||
|
width: 6px;
|
||||||
|
left: -5px;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 多选样式
|
||||||
|
.checkbox__inner {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
top: 2px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
top: 1px;
|
||||||
|
/* #endif */
|
||||||
|
left: 5px;
|
||||||
|
height: 8px;
|
||||||
|
width: 4px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-right-color: #fff;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-bottom-width:1px ;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: center;
|
||||||
|
transform: rotate(40deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 单选样式
|
||||||
|
.radio__inner {
|
||||||
|
@include flex;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.radio__inner-icon {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认样式
|
||||||
|
&.is--default {
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
.checkbox__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中
|
||||||
|
&.is-checked {
|
||||||
|
.checkbox__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
.radio__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
// 选中禁用
|
||||||
|
&.is-disable {
|
||||||
|
.checkbox__inner {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮样式
|
||||||
|
&.is--button {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px $border-color solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
border: 1px #eee solid;
|
||||||
|
opacity: $disable;
|
||||||
|
.checkbox__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
.checkbox__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
|
||||||
|
.radio__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中禁用
|
||||||
|
&.is-disable {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签样式
|
||||||
|
&.is--tag {
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px $border-color solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
margin: 0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked {
|
||||||
|
background-color: $uni-primary;
|
||||||
|
border-color: $uni-primary;
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 列表样式
|
||||||
|
&.is--list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
padding: 10px 15px;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&.is-list-border {
|
||||||
|
border-top: 1px #eee solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 禁用
|
||||||
|
&.is-disable {
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
.checkbox__inner {
|
||||||
|
background-color: #F2F6FC;
|
||||||
|
border-color: $border-color;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked {
|
||||||
|
.checkbox__inner {
|
||||||
|
border-color: $uni-primary;
|
||||||
|
background-color: $uni-primary;
|
||||||
|
|
||||||
|
.checkbox__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radio__inner {
|
||||||
|
.radio__inner-icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checklist-text {
|
||||||
|
color: $uni-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-content {
|
||||||
|
.checkobx__list {
|
||||||
|
opacity: 1;
|
||||||
|
border-color: $uni-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中禁用
|
||||||
|
&.is-disable {
|
||||||
|
.checkbox__inner {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checklist-text {
|
||||||
|
opacity: $disable;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
>>>>>>> cf4cde6399c3c847ec80ef42bece70d7d39de0b1
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue