integrated_traffic_uniapp/components/select_measures/index.vue

<template>
  <page-meta :page-style="'overflow:'+(visible?'hidden':'visible')"></page-meta>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <scroll-view scroll-y style="width: 100vw;height: 100vh;">
      <view :style="{padding: this.CustomBar + 15 + 'px 15px 15px 15px'}">
        <checkbox-group @change="change">
          <view v-for="(item,index) in withSelectMeasuresList" :key="index" style="display: flex;margin-top: 15upx">
            <checkbox :value="item[rowKey]" :checked="item.check"/>
            <view style="padding-left: 10upx;">{{ item.PROTECTIVE_MEASURES }}</view>
          </view>
        </checkbox-group>
      </view>
      <view class="cu-bar btn-group" style="margin-top: 50upx;">
        <button class="cu-btn bg-blue margin-tb-sm lg" @click="determine">确定</button>
        <button class="cu-btn bg-grey margin-tb-sm lg" @click="close">关闭</button>
      </view>
    </scroll-view>
  </uni-popup>
</template>

<script>
import uniPopup from '@/components/more-select/uni-popup/uni-popup.vue';
import {basePath, loginUser} from "@/common/tool";

export default {
  components: {
    uniPopup,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    measuresList: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: Array,
      required: true,
      default: () => []
    },
    index: {
      type: Number,
      required: true,
      default: 0
    },
    rowKey: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      selectValue: [],
      withSelectMeasuresList: [],
    }
  },
  watch: {
    visible: {
      handler(newValue) {
        if (newValue) {
          this.$nextTick(() => {
            this.$refs.popup.open()
          })
          this.getWithSelectMeasuresList()
        }
      },
      immediate: true
    }
  },
  methods: {
    getSelectedMeasuresList() {
      const index = this.index
      const value = this.value
      const allSelectedMeasuresList = []
      const currentIndexSelectedMeasuresList = []
      for (let i = 0; i < value.length; i++) {
        for (let j = 0; j < value[i].selectMeasures.length; j++) {
          allSelectedMeasuresList.push(value[i].selectMeasures[j])
          if (i === index) {
            currentIndexSelectedMeasuresList.push({...value[i].selectMeasures[j], check: true})
          }
        }
      }
      return {allSelectedMeasuresList, currentIndexSelectedMeasuresList}
    },
    getWithSelectMeasuresList() {
      const {allSelectedMeasuresList, currentIndexSelectedMeasuresList} = this.getSelectedMeasuresList()
      const withSelectMeasuresList = [...this.measuresList]
      if (allSelectedMeasuresList.length > 0) {
        for (let i = 0; i < allSelectedMeasuresList.length; i++) {
          for (let j = 0; j < withSelectMeasuresList.length; j++) {
            if (allSelectedMeasuresList[i][this.rowKey] === withSelectMeasuresList[j][this.rowKey]) {
              withSelectMeasuresList.splice(j, 1)
            }
          }
        }
      }
      withSelectMeasuresList.push(...currentIndexSelectedMeasuresList)
      this.withSelectMeasuresList = withSelectMeasuresList
    },
    change(event) {
      this.selectValue = event.detail.value
    },
    close() {
      this.selectValue = []
      this.withSelectMeasuresList = []
      this.$emit('update:visible', false)
      this.$refs.popup.close()
    },
    determine() {
      const value = []
      const selectValue = this.selectValue
      const withSelectMeasuresList = this.withSelectMeasuresList
      for (let i = 0; i < selectValue.length; i++) {
        for (let j = 0; j < withSelectMeasuresList.length; j++) {
          if (selectValue[i] === withSelectMeasuresList[j][this.rowKey]) {
            value.push(withSelectMeasuresList[j])
          }
        }
      }
      this.value[this.index].selectMeasures = value
      this.$emit('input', [...this.value])
      this.close()
    }
  },
}
</script>

<style scoped>

</style>