123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 |
- <template>
- <view v-if="showProduct" class="popupbox" @tap.stop="closePopup" >
- <view class="popup_warp">
- <view class="popup_title">选择设备</view>
- <scroll-view scroll-y class="scrollbox" @tap.stop.prevent>
- <view class="pop_list">
- <view class="pop_li" v-for="(item,index) in list" :key="index">
- <view class="pop_info" @tap.stop="changeSelect(index)">
- <view class="pop_radio">
- <radio color='#ff7800' :checked="item.select" ></radio>
- </view>
- <view class="pop_info_right">
- <view class="pop_info_cen">
- <view class="pop_info_text">设备名称:{{item.name}}</view>
- <view class="pop_info_text">所属系统:{{item.cate_id_text}}</view>
- <view class="pop_info_text">安装时间:{{item.w_time_text}}</view>
- <view class="pop_info_text">安装位置:{{item.address}}</view>
- </view>
- </view>
- </view>
- </view>
- <view v-if="list.length == 0 || !list" class="noData">{{i18n['暂无更多']}}</view>
- </view>
- </scroll-view>
- <view class="popup_bottom" @tap.stop.prevent>
- <view class="pp_left">
- <radio color="#ff7800" :checked="isAll" @click="selectAll"></radio>{{i18n['全选']}}
- </view>
- <view class="pp_right">
- <view class="right_btn remove" @click="closePopup">{{i18n['取消']}}</view>
- <view class="right_btn sure" @click="sureSelectData">{{i18n['确定']}}</view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { netWorkOrderProduct } from '@/api/api.js'
-
- export default{
- props:{
- showProduct:{
- type:Boolean,
- default:false
- }
- },
- data(){
- return{
- name:'',
- list:[],
- isAll:false,
- }
- },
- computed:{
- i18n() {
- return this.$t("server")
- }
- },
- methods:{
- init(id,status) {
-
- this.list = []
- this.getProductList()
- },
- getProductList() {
- netWorkOrderProduct().then(res=>{
- if(res.data) {
- this.list = res.data
- this.handleData()
- }else{
- uni.showToast({
- title:res.msg,
- icon:'none',
- duration:3000
- })
- }
- })
- },
- handleData() {
- let arr = this.list
- arr.forEach(ele=>{
- ele.select = false
- })
- this.list = arr
- },
- changeNumber(e,index) {
- let obj = this.list[index]
- if(e.detail > 1){
- obj.select = true
- }
- obj.number = e.detail
- this.$set(this.list,index,obj)
- },
- //选择
- changeSelect(index) {
- console.log(index,'选择')
- let obj = this.list[index]
- obj.select = !obj.select
- this.$set(this.list,index,obj)
- },
- //全选
- selectAll() {
- this.isAll = !this.isAll
- let arr = this.list
- if(this.isAll){
- arr.forEach(ele=>{
- ele.select = true
- })
- }else{
- arr.forEach(ele=>{
- ele.select = false
- })
- }
- this.list = arr
- },
- closePopup() {
- this.$emit('close')
- },
- //确定
- sureSelectData() {
- let arr = this.list
- let newarr = []
- arr.forEach(ele=>{
- if(ele.select){
- newarr.push(ele)
- }
- })
- this.$emit('selectList',newarr)
- }
- }
- }
- </script>
- <style>
-
- </style>
- <style lang="scss" scoped>
- .conright{
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .conAdd, .reduce{
- width:40rpx;
- height:40rpx;
- border-radius: 8rpx;
- background:#f5f5f5;
- font-size:34rpx;
- text-align: center;
- line-height: 40rpx;
- }
- .numberinput{
- width:60rpx;
- height:40rpx;
- border-radius: 8rpx;
- background:#f5f5f5;
- font-size:34rpx;
- text-align: center;
- line-height: 40rpx;
- margin:0 10rpx;
- }
- }
- .popupbox{
- position: fixed;
- left:0;
- top:0;
- bottom:0;
- right:0;
- background:rgba(0,0,0,0.5);
- z-index: 9;
- .popup_warp{
- width:750rpx;
- background:#fff;
- position: absolute;
- left:0;
- bottom:0;
- z-index: 10;
- }
- .popup_title{
- text-align: center;
- font-size:34rpx;
- color:#333;
- padding:24rpx;
- }
- .searbox{
- padding:0 24rpx;
- }
- .scrollbox{
- width:100%;
- height:700rpx;
- .pop_list{
- padding:24rpx;
- .pop_li{
- background:#f5f5f5;
- border-radius: 8rpx;
- margin-bottom:24rpx;
- .pop_title{
- font-size:32rpx;
- color:#333;
- padding:24rpx;
- border-bottom:1rpx solid #d0d0d0;
- margin-bottom:24rpx;
- }
- .pop_info{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- padding:24rpx;
- .pop_radio{
- margin-right:24rpx;
- radio{
- transform: scale(0.7);
- }
- }
- .pop_info_right{
- display: flex;
- justify-content: flex-start;
- .infoimg{
- width:90rpx;
- height:90rpx;
- margin-right:24rpx;
- flex-shrink: 0;
- }
- .pop_info_cen{
- .pop_info_text{
- font-size:26rpx;
- color:#666;
- margin-bottom:15rpx;
- }
- }
- }
- }
- .pop_bottom{
- padding:0 24rpx 24rpx;
- display: flex;
- justify-content: flex-end;
- .conright{
- .conAdd, .reduce, .numberinput{
- background:#fff;
- }
- }
- }
- }
- }
- }
- .popup_bottom{
- width:100%;
- padding:0 24rpx;
- height:100rpx;
- border-top:1rpx solid #f5f5f5;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .pp_left{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- font-size:26rpx;
- color:3333;
- radio{
- transform: scale(0.7);
- }
- }
- .pp_right{
- display: flex;
- justify-content: flex-end;
- align-items: center;
- .right_btn{
- height:80rpx;
- font-size:26rpx;
- text-align: center;
- border-radius: 10rpx;
- }
- .remove{
- width:140rpx;
- border:1rpx solid #f5f5f5;
- color:#333;
- line-height: 78rpx;
- margin-right:24rpx;
- }
- .sure{
- width:200rpx;
- background:#14C2C1;
- color:#fff;
- line-height: 80rpx;
- }
- }
- }
- }
- </style>
|