点位管理
This commit is contained in:
@@ -45,6 +45,14 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "pages/modules/pointmanage",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
// "pageOrientation": "landscape",
|
// "pageOrientation": "landscape",
|
||||||
|
|||||||
@@ -5,16 +5,14 @@
|
|||||||
<view class="zd_wrapper grid-wraper">
|
<view class="zd_wrapper grid-wraper">
|
||||||
<view class="locate_block" v-for="e in areaArr" :key="e.region_code">
|
<view class="locate_block" v-for="e in areaArr" :key="e.region_code">
|
||||||
<view class="locate_name" @click="getPonit (e)">
|
<view class="locate_name" @click="getPonit (e)">
|
||||||
<view class="title_1">{{e.region_name}}</view>
|
<view class="title_locate">{{e.region_name}}</view>
|
||||||
<view class="iconfont open_icon" :class="{'is_reverse': e.checked === true}"></view>
|
<view class="iconfont open_icon" :class="{'is_reverse': e.checked === true}"></view>
|
||||||
</view>
|
</view>
|
||||||
<view v-show="e.checked === true" class="site_block" ref="liCon">
|
<view v-show="e.checked === true" class="site_block" ref="liCon">
|
||||||
<view class="site_item" v-for="(el, i) in e.pointArr" :key="i">
|
<view class="site_item" v-for="(el, i) in e.pointArr" :key="i">
|
||||||
<view class="site_item_box">
|
<view class="site_item_box" @click="setcode(el)">
|
||||||
<text class="title_2">站点</text>
|
<text class="title_1">{{el.device_name}}</text>
|
||||||
<view class="site_item_box_inner_r" @click="setcode(el)">
|
<text class="title_2">{{el.source_device}}</text>
|
||||||
<text>{{el.device_name}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -180,31 +178,30 @@
|
|||||||
_fj(flex-start,,,wrap)
|
_fj(flex-start,,,wrap)
|
||||||
padding-bottom 10rpx
|
padding-bottom 10rpx
|
||||||
.site_item
|
.site_item
|
||||||
_wh(32%,100rpx)
|
_wh(calc(100% / 3),110rpx)
|
||||||
padding 0 10rpx
|
padding 5rpx 10rpx
|
||||||
margin-top 12rpx
|
|
||||||
background-color #e5e5e5
|
|
||||||
border-radius 5px
|
|
||||||
overflow hidden
|
overflow hidden
|
||||||
_fj(center)
|
_fj(center)
|
||||||
&:nth-child(3n+2)
|
|
||||||
margin-left 2%
|
|
||||||
margin-right 2%
|
|
||||||
.site_item_box
|
.site_item_box
|
||||||
_wh(100%, 80rpx)
|
_wh(100%, 100%)
|
||||||
_fj()
|
padding 10rpx 0
|
||||||
.title_2
|
background-color rgb(220, 223, 230)
|
||||||
width 36rpx
|
border-radius 10rpx
|
||||||
_font(28rpx,40rpx,#000,500)
|
.title_locate
|
||||||
.site_item_box_inner_r
|
width 50%
|
||||||
|
_font(30rpx,40rpx,#333,bold)
|
||||||
|
font-style italic
|
||||||
|
.title_1
|
||||||
|
_wh(100%, 60%)
|
||||||
_fj(center)
|
_fj(center)
|
||||||
_wh(calc(100% - 36rpx), 100%)
|
|
||||||
background-color #fff
|
|
||||||
border-radius 3px
|
|
||||||
padding 0 5rpx
|
|
||||||
overflow hidden
|
overflow hidden
|
||||||
text
|
_font(28rpx,28rpx,#303133,500, center)
|
||||||
_font(28rpx,40rpx,#999,,center)
|
.title_2
|
||||||
|
_wh(100%, 40%)
|
||||||
|
_fj(center)
|
||||||
|
overflow hidden
|
||||||
|
_font(24rpx,24rpx,#303133,500, center)
|
||||||
|
opacity .69
|
||||||
.submit-bar
|
.submit-bar
|
||||||
justify-content space-between
|
justify-content space-between
|
||||||
padding 10rpx
|
padding 10rpx
|
||||||
|
|||||||
334
pages/modules/pointmanage.vue
Normal file
334
pages/modules/pointmanage.vue
Normal file
@@ -0,0 +1,334 @@
|
|||||||
|
<template>
|
||||||
|
<view class="zd_container">
|
||||||
|
<nav-bar title="呼叫管理"></nav-bar>
|
||||||
|
<view class="zd_content">
|
||||||
|
<view class="state-wrap">
|
||||||
|
<view class="state-item-wrap" v-for="e in state">
|
||||||
|
<view class="state-color" :class="e.color"></view>
|
||||||
|
<view class="state-name">{{e.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="zd_wrapper grid-wraper">
|
||||||
|
<view class="locate_block" v-for="e in areaArr" :key="e.region_code">
|
||||||
|
<view class="locate_name" @click="getPonit (e)">
|
||||||
|
<view class="title_locate">{{e.region_name}}</view>
|
||||||
|
<view class="iconfont open_icon" :class="{'is_reverse': e.checked === true}"></view>
|
||||||
|
</view>
|
||||||
|
<view v-show="e.checked === true" class="site_block" ref="liCon">
|
||||||
|
<view class="site_item" v-for="(el, i) in e.pointArr" :key="i">
|
||||||
|
<view class="site_item_box" @click="setcode(el)">
|
||||||
|
<text class="title_1">{{el.device_name}}</text>
|
||||||
|
<text class="title_2">{{el.source_device}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-show="active" class="msg_wrapper">
|
||||||
|
<view class="msg_box">
|
||||||
|
<view class="msg_item">
|
||||||
|
<view class="label_item">当前设备</view>
|
||||||
|
<view class="from_item">
|
||||||
|
{{obj.device_name}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="msg_item">
|
||||||
|
<view class="label_item">设备状态</view>
|
||||||
|
<view class="from_item">
|
||||||
|
<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="msg_btns">
|
||||||
|
<button class="msg_btn" :disabled="disabled1" @click="msgSure">确认</button>
|
||||||
|
<button class="msg_btn" @click="msgCancle">取消</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-show="active" class="mask"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NavBar from '@/components/NavBar.vue'
|
||||||
|
import {queryArea, queryPointByArea, bindpoint} from '@/utils/getData2.js'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
NavBar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// interTime: this.$store.getters.setTime,
|
||||||
|
// timer: null,
|
||||||
|
state: [{color: 'bggray', name: '空位'}, {color: 'bggreen', name: '有货'}],
|
||||||
|
areaArr: [],
|
||||||
|
pointArr: [],
|
||||||
|
regobj: {},
|
||||||
|
disabled1: false,
|
||||||
|
value: '',
|
||||||
|
range: [{value: '0',text: "空位" },{value: '1',text: "有货"}],
|
||||||
|
obj: {},
|
||||||
|
active: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.initArea()
|
||||||
|
},
|
||||||
|
// beforeDestroy () {
|
||||||
|
// clearInterval(this.timer)
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
// refresh (e) {
|
||||||
|
// this.timer = setInterval(() => {
|
||||||
|
// this.initPonit(e)
|
||||||
|
// }, this.interTime)
|
||||||
|
// },
|
||||||
|
async initArea () {
|
||||||
|
let res = await queryArea()
|
||||||
|
this.areaArr = [...res.result]
|
||||||
|
this.areaArr.map(el => {
|
||||||
|
this.$set(el, 'checked', false)
|
||||||
|
this.$set(el, 'pointArr', [])
|
||||||
|
})
|
||||||
|
if (this.areaArr.length > 0) {
|
||||||
|
this.getPonit(this.areaArr[0])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async initPonit (e) {
|
||||||
|
let res = await queryPointByArea(e.region_code)
|
||||||
|
this.regobj = e
|
||||||
|
this.areaArr.map(el => {
|
||||||
|
if (el.region_code === e.region_code) {
|
||||||
|
this.$set(el, 'pointArr', [...res.result])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getPonit (e) {
|
||||||
|
// clearInterval(this.timer)
|
||||||
|
this.areaArr.map(el => {
|
||||||
|
if (el.region_code !== e.region_code) {
|
||||||
|
el.checked = false
|
||||||
|
}
|
||||||
|
if (el.region_code === e.region_code) {
|
||||||
|
e.checked = !e.checked
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (e.checked) {
|
||||||
|
this.initPonit(e)
|
||||||
|
// this.refresh(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setcode (el) {
|
||||||
|
this.active = true
|
||||||
|
this.obj = el
|
||||||
|
this.value = el.status
|
||||||
|
console.log(this.value)
|
||||||
|
},
|
||||||
|
change(e){
|
||||||
|
console.log(this.value)
|
||||||
|
},
|
||||||
|
msgCancle () {
|
||||||
|
this.obj = {}
|
||||||
|
this.active = false
|
||||||
|
this.disabled1 = false
|
||||||
|
},
|
||||||
|
msgSure () {
|
||||||
|
this.disabled1 = true
|
||||||
|
this._bindpoint()
|
||||||
|
},
|
||||||
|
async _bindpoint () {
|
||||||
|
try {
|
||||||
|
let res = await bindpoint(this.obj.device_code, this.value)
|
||||||
|
this.cancle()
|
||||||
|
uni.showToast({
|
||||||
|
title: res.desc,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
// clearInterval(this.timer)
|
||||||
|
// this.timer = null
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.refresh()
|
||||||
|
// this.cancle()
|
||||||
|
// }, 2000)
|
||||||
|
} catch (err) {
|
||||||
|
this.disabled1 = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus">
|
||||||
|
@import '../../common/style/mixin.styl';
|
||||||
|
.zd_content
|
||||||
|
padding-bottom 152rpx
|
||||||
|
.locate_block
|
||||||
|
width 100%
|
||||||
|
.locate_name
|
||||||
|
position relative
|
||||||
|
_wh(100%,48rpx)
|
||||||
|
.title_1
|
||||||
|
_font(32rpx,48rpx,#000,500)
|
||||||
|
.open_icon
|
||||||
|
position absolute
|
||||||
|
right 0
|
||||||
|
top 0
|
||||||
|
_wh(48rpx,48rpx)
|
||||||
|
_font(40rpx,48rpx,$red,,right)
|
||||||
|
transition all .3s
|
||||||
|
transform rotateZ(-90deg)
|
||||||
|
&:before
|
||||||
|
content: "\e6db";
|
||||||
|
.is_reverse
|
||||||
|
transform rotateZ(90deg)
|
||||||
|
.site_block
|
||||||
|
_wh(100%,auto)
|
||||||
|
overflow hidden
|
||||||
|
transition height .3s
|
||||||
|
_fj(flex-start,,,wrap)
|
||||||
|
padding-bottom 10rpx
|
||||||
|
.site_item
|
||||||
|
_wh(calc(100% / 3),110rpx)
|
||||||
|
padding 5rpx 10rpx
|
||||||
|
overflow hidden
|
||||||
|
_fj(center)
|
||||||
|
.site_item_box
|
||||||
|
_wh(100%, 100%)
|
||||||
|
padding 10rpx 0
|
||||||
|
background-color rgb(220, 223, 230)
|
||||||
|
border-radius 10rpx
|
||||||
|
.title_locate
|
||||||
|
width 50%
|
||||||
|
_font(30rpx,40rpx,#333,bold)
|
||||||
|
font-style italic
|
||||||
|
.title_1
|
||||||
|
_wh(100%, 60%)
|
||||||
|
_fj(center)
|
||||||
|
overflow hidden
|
||||||
|
_font(28rpx,28rpx,#303133,500, center)
|
||||||
|
.title_2
|
||||||
|
_wh(100%, 40%)
|
||||||
|
_fj(center)
|
||||||
|
overflow hidden
|
||||||
|
_font(24rpx,24rpx,#303133,500, center)
|
||||||
|
opacity .69
|
||||||
|
.submit-bar
|
||||||
|
justify-content space-between
|
||||||
|
padding 10rpx
|
||||||
|
.dot_item
|
||||||
|
width 35%
|
||||||
|
background-color #e5e5e5
|
||||||
|
_fj(center,,column)
|
||||||
|
.p1
|
||||||
|
_wh(100%, 52rpx)
|
||||||
|
_font(30rpx,52rpx,,,center)
|
||||||
|
border-bottom 1rpx solid #fff
|
||||||
|
overflow hidden
|
||||||
|
.p2
|
||||||
|
_wh(100%, 80rpx)
|
||||||
|
_fj(center)
|
||||||
|
padding 0 5rpx
|
||||||
|
_font(30rpx,40rpx,,,center)
|
||||||
|
overflow hidden
|
||||||
|
word-break break-all
|
||||||
|
.btn_block
|
||||||
|
_fj(,,column)
|
||||||
|
align-content: flex-end
|
||||||
|
.submit-button
|
||||||
|
line-height 56rpx
|
||||||
|
margin 0
|
||||||
|
&:nth-child(1)
|
||||||
|
margin-bottom 10rpx
|
||||||
|
.state-wrap
|
||||||
|
_wh(100%, 60rpx)
|
||||||
|
margin-bottom 10rpx
|
||||||
|
_fj(flex-start)
|
||||||
|
.state-item-wrap
|
||||||
|
height 60rpx
|
||||||
|
margin-right 20rpx
|
||||||
|
_fj()
|
||||||
|
.state-color
|
||||||
|
_wh(30rpx, 30rpx)
|
||||||
|
border-radius 50%
|
||||||
|
margin-right 10rpx
|
||||||
|
.state-name
|
||||||
|
_font(28rpx, 60rpx, #333)
|
||||||
|
.msg_wrapper
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
bottom 0
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
text-align center
|
||||||
|
z-index 100
|
||||||
|
&::after
|
||||||
|
content ""
|
||||||
|
display inline-block
|
||||||
|
height 100%
|
||||||
|
width 0
|
||||||
|
vertical-align middle
|
||||||
|
.msg_box
|
||||||
|
display inline-block
|
||||||
|
width 90%
|
||||||
|
max-width 420px
|
||||||
|
padding 20rpx
|
||||||
|
vertical-align middle
|
||||||
|
background-color #fff
|
||||||
|
border-radius 4px
|
||||||
|
border 1px solid #ebeef5
|
||||||
|
box-shadow 0 2px 12px 0 rgb(0 0 0 / 10%)
|
||||||
|
overflow hidden
|
||||||
|
backface-visibility hidden
|
||||||
|
.input_item
|
||||||
|
width 100%
|
||||||
|
height 70rpx
|
||||||
|
border-radius 4px
|
||||||
|
border 1px solid #DCDFE6
|
||||||
|
_font(28rpx,70rpx,#606266)
|
||||||
|
padding 0 10px
|
||||||
|
.mask
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
opacity .2
|
||||||
|
background #000
|
||||||
|
z-index 99
|
||||||
|
.msg_item
|
||||||
|
_fj()
|
||||||
|
height 70rpx
|
||||||
|
line-height 70rpx
|
||||||
|
margin-bottom 30rpx
|
||||||
|
.msg_txt
|
||||||
|
_font(32rpx,70rpx,#333)
|
||||||
|
.label_item
|
||||||
|
width 150rpx
|
||||||
|
_font(32rpx,70rpx,#333)
|
||||||
|
.from_item
|
||||||
|
width calc(100% - 160rpx)
|
||||||
|
_font(28rpx,70rpx,#606266)
|
||||||
|
.msg_btns
|
||||||
|
height 70rpx
|
||||||
|
line-height 70rpx
|
||||||
|
width 100%
|
||||||
|
margin 40rpx auto 0
|
||||||
|
_fj()
|
||||||
|
.msg_btn
|
||||||
|
width 160rpx
|
||||||
|
height 70rpx
|
||||||
|
line-height 70rpx
|
||||||
|
font-size 28rpx
|
||||||
|
color #fff
|
||||||
|
background-color #d7592f
|
||||||
|
border-radius 5px
|
||||||
|
text-align center
|
||||||
|
&:disabled
|
||||||
|
background-color $gray
|
||||||
|
/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner
|
||||||
|
border-color #e64e00
|
||||||
|
/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner .radio__inner-icon
|
||||||
|
background-color #e64e00
|
||||||
|
/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text
|
||||||
|
color #e64e00
|
||||||
|
</style>
|
||||||
BIN
static/image/menu/RF04.png
Normal file
BIN
static/image/menu/RF04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
45
uni_modules/uni-data-checkbox/changelog.md
Normal file
45
uni_modules/uni-data-checkbox/changelog.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
## 1.0.3（2022-09-16）
|
||||||
|
- 可以使用 uni-scss 控制主题色
|
||||||
|
## 1.0.2（2022-06-30）
|
||||||
|
- 优化 在 uni-forms 中的依赖注入方式
|
||||||
|
## 1.0.1（2022-02-07）
|
||||||
|
- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
|
||||||
|
## 1.0.0（2021-11-19）
|
||||||
|
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||||
|
## 0.2.5（2021-08-23）
|
||||||
|
- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
|
||||||
|
## 0.2.4（2021-08-17）
|
||||||
|
- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
|
||||||
|
## 0.2.3（2021-08-11）
|
||||||
|
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
|
||||||
|
## 0.2.2（2021-07-30）
|
||||||
|
- 优化 在uni-forms组件，与label不对齐的问题
|
||||||
|
## 0.2.1（2021-07-27）
|
||||||
|
- 修复 单选默认值为0不能选中的Bug
|
||||||
|
## 0.2.0（2021-07-13）
|
||||||
|
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 0.1.11（2021-07-06）
|
||||||
|
- 优化 删除无用日志
|
||||||
|
## 0.1.10（2021-07-05）
|
||||||
|
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
|
||||||
|
## 0.1.9（2021-07-05）
|
||||||
|
- 修复 nvue 黑框样式问题
|
||||||
|
## 0.1.8（2021-06-28）
|
||||||
|
- 修复 selectedTextColor 属性不生效的Bug
|
||||||
|
## 0.1.7（2021-06-02）
|
||||||
|
- 新增 map 属性，可以方便映射text/value属性
|
||||||
|
## 0.1.6（2021-05-26）
|
||||||
|
- 修复 不关联服务空间的情况下组件报错的Bug
|
||||||
|
## 0.1.5（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 0.1.4（2021-04-09）
|
||||||
|
- 修复 nvue 下无法选中的问题
|
||||||
|
## 0.1.3（2021-03-22）
|
||||||
|
- 新增 disabled属性
|
||||||
|
## 0.1.2（2021-02-24）
|
||||||
|
- 优化 默认颜色显示
|
||||||
|
## 0.1.1（2021-02-24）
|
||||||
|
- 新增 支持nvue
|
||||||
|
## 0.1.0（2021-02-18）
|
||||||
|
- “暂无数据”显示居中
|
||||||
@@ -0,0 +1,821 @@
|
|||||||
|
<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
|
||||||
|
// if (this.formItem.name) {
|
||||||
|
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
|
||||||
|
// if(!this.is_reset){
|
||||||
|
// this.is_reset = false
|
||||||
|
// this.formItem.setValue(this.dataValue)
|
||||||
|
// }
|
||||||
|
// 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 = {}
|
||||||
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
if (this.selectedColor) {
|
||||||
|
if (this.mode !== 'list') {
|
||||||
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
|
}
|
||||||
|
if (this.mode === 'tag') {
|
||||||
|
styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let classles = ''
|
||||||
|
for (let i in styles) {
|
||||||
|
classles += `${i}:${styles[i]};`
|
||||||
|
}
|
||||||
|
return classles
|
||||||
|
},
|
||||||
|
setStyleIcon(item) {
|
||||||
|
let styles = {}
|
||||||
|
let classles = ''
|
||||||
|
if (this.selectedColor) {
|
||||||
|
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
|
||||||
|
styles['background-color'] = item.selected?selectedColor:'#fff'
|
||||||
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
|
|
||||||
|
if(!item.selected && item.disabled){
|
||||||
|
styles['background-color'] = '#F2F6FC'
|
||||||
|
styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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>
|
||||||
84
uni_modules/uni-data-checkbox/package.json
Normal file
84
uni_modules/uni-data-checkbox/package.json
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-data-checkbox",
|
||||||
|
"displayName": "uni-data-checkbox 数据选择器",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "通过数据驱动的单选框和复选框",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"checkbox",
|
||||||
|
"单选",
|
||||||
|
"多选",
|
||||||
|
"单选多选"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"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": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-load-more","uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
uni_modules/uni-data-checkbox/readme.md
Normal file
18
uni_modules/uni-data-checkbox/readme.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## DataCheckbox 数据驱动的单选复选框
|
||||||
|
> **组件名：uni-data-checkbox**
|
||||||
|
> 代码块： `uDataCheckbox`
|
||||||
|
|
||||||
|
|
||||||
|
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
|
||||||
|
|
||||||
|
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
|
||||||
|
2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
|
||||||
|
3. 本组件合并了单选多选
|
||||||
|
4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
|
||||||
|
|
||||||
|
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
|
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
@@ -27,7 +27,8 @@ export const authority = () => {
|
|||||||
sonTree: [
|
sonTree: [
|
||||||
{menu_id: '1', imgsrc: 'RF01', name: '呼叫管理', path: '/pages/modules/callmanage'},
|
{menu_id: '1', imgsrc: 'RF01', name: '呼叫管理', path: '/pages/modules/callmanage'},
|
||||||
{menu_id: '2', imgsrc: 'RF02', name: '指令管理', path: '/pages/modules/zlmanage'},
|
{menu_id: '2', imgsrc: 'RF02', name: '指令管理', path: '/pages/modules/zlmanage'},
|
||||||
{menu_id: '3', imgsrc: 'RF03', name: '任务管理', path: '/pages/modules/taskmanage'}
|
{menu_id: '3', imgsrc: 'RF03', name: '任务管理', path: '/pages/modules/taskmanage'},
|
||||||
|
{menu_id: '4', imgsrc: 'RF04', name: '站点管理', path: '/pages/modules/pointmanage'}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
return res
|
return res
|
||||||
@@ -58,7 +59,9 @@ export const queryPointByArea = (code) => request({
|
|||||||
// let res = {
|
// let res = {
|
||||||
// result: [{
|
// result: [{
|
||||||
// device_code: '1',
|
// device_code: '1',
|
||||||
// device_name: 'JLDFJLLJ'
|
// device_name: 'JLDFJLLJ',
|
||||||
|
// source_device: 'FAL3LAA01',
|
||||||
|
// status: '1'
|
||||||
// }, {
|
// }, {
|
||||||
// device_code: '12',
|
// device_code: '12',
|
||||||
// device_name: 'JLDFJLLJ'
|
// device_name: 'JLDFJLLJ'
|
||||||
@@ -135,3 +138,15 @@ export const taskOperation = (uuid, type) => request({
|
|||||||
type: type
|
type: type
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 站点管理
|
||||||
|
*/
|
||||||
|
// 点位状态绑定
|
||||||
|
export const bindpoint = (code, status) => request({
|
||||||
|
url:'api/hand/bindpoint',
|
||||||
|
data: {
|
||||||
|
device_code: code,
|
||||||
|
status: status
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user