<template> <view class="content"> <view class="tit">应收对账单</view> <view class="con"> <u-cell-group :border="false"> <u-cell-item :title="item.paramName" v-for="(item, i) in systemList" :key="item.id" @click="openModal(item,i)"> <u-input v-show="item.remarks != 'FLAG'" slot="right-icon" v-model="item.value" disabled @click="openModal(item,i)" placeholder="请选择" placeholder-style="text-align:right" :custom-style="inputStyle" /> <u-switch v-show="item.remarks == 'FLAG'" :size="40" :active-color="activeColor" slot="right-icon" :value="item.paramValue == 1" @change=" status => { changeSwitch(status, i); } " ></u-switch> </u-cell-item> </u-cell-group> </view> <!-- 类似于picker单选 --> <redioPicker :showModal="showModal0" @chooseItem="chooseCycle" @close="showModal0 = false" :val="val0" code="sales_bill_period"></redioPicker> <!-- 类似于picker多选 --> <checkBoxPicker :showModal="showModal1" @chooseCon="chooseStatus" @close="showModal1 = false" :val="val1" :filtrate="true" code="SALES_BILL_STATUS"></checkBoxPicker> <checkBoxPicker :showModal="showModal2" @chooseCon="chooseStatus" @close="showModal2 = false" :val="val2" code="SALES_SOURCE"></checkBoxPicker> <redioPicker :showModal="showModal3" @chooseItem="chooseCycle" @close="showModal3 = false" :val="val3" code="verify_default_customer"></redioPicker> </view> </template> <script> import redioPicker from '@/components/customPicker/redioPicker.vue'; import checkBoxPicker from '@/components/customPicker/checkBoxPicker.vue'; import { queryVerifySalesParams, updateParam } from '@/api/dealerBizParam.js'; export default { components: { redioPicker, checkBoxPicker }, data() { return { systemList: null, showModal0: false, showModal1: false, showModal2: false, showModal3: false, siteNum:null, val0:undefined, val1:undefined, val2:undefined, val3:undefined, inputStyle: { 'text-align': 'right' }, activeColor: this.$config('primaryColor') }; }, onLoad() { this.getData(); }, methods: { getData() { queryVerifySalesParams({}).then(res => { res.data.forEach(item=>{ if(item.valueShow && item.valueShow.indexOf(",")!=-1){ let arr = item.valueShow.split(','); item.value = '已选' + arr.length + '项' }else{ item.value = item.valueShow } }) this.systemList = res.data; }); }, openModal(code,index) { const newArr = ['sales_bill_period','SALES_BILL_STATUS','SALES_SOURCE','verify_default_customer'] newArr.forEach((con,i)=>{ if(code.remarks==con){ this['showModal' + i] = true; this['val' + i] = code.paramValue; } }) //打开弹窗 this.siteNum=index; }, changeSwitch(status, i) { //是否参与对账单 0否 1是 this.systemList[i].paramValue = status ? 0 : 1; let ajaxObj = { id: this.systemList[i].id, paramValue: this.systemList[i].paramValue }; this.updateList(ajaxObj); }, chooseCycle(con) { this.systemList[this.siteNum].value=con.dispName; let ajaxObj = { id: this.systemList[this.siteNum].id, paramValue: con.code }; this.updateList(ajaxObj); }, chooseStatus(arr) { this.systemList[this.siteNum].value='已选' + arr.length + '项'; let newArr =arr.map(item=>{ return item.code }) let ajaxObj = { id: this.systemList[this.siteNum].id, paramValue: newArr.toString() }; this.updateList(ajaxObj); }, updateList(ajaxdata) {//修改系统参数 updateParam(ajaxdata).then(res => { if (res.status == 200) { uni.showToast({ title: res.message, icon: 'success' }); this.getData(); } else { uni.showToast({ title: res.message, icon: 'none' }); } }); } } }; </script> <style lang="scss" scoped> .content { width: 100%; height: 100vh; .tit { padding: 30rpx 20rpx 16rpx; } .con { box-sizing: border-box; width: calc(100% - 40rpx); margin: 0 auto; border-radius: 30rpx; overflow: hidden; .u-cell { padding: 14rpx 26rpx; color: #333; /deep/.u-cell_right { max-width: 40% !important; } } } } </style>