checkbox.vue 3.57 KB
<template>
  <div>
    <div v-if="prop == 'chcek9'" style="display: inline flex">
      <span>关键配置参数:</span>
      <el-checkbox-group v-model="value" :disabled="status" @change="input">
        <el-checkbox
          v-for="(i, k) in items.options"
          v-if="k < 4"
          :label="i.id"
          @change="
            e => {
              checkOne(i, e)
            }
          "
          :key="k"
        >
          {{ i.object }}
        </el-checkbox>
      </el-checkbox-group>
      <span></span>
    </div>

    <div v-if="prop == 'chcek9'" style="display: inline flex">
      <span>标定参数:</span>
      <el-checkbox-group v-model="value" :disabled="status" @change="input">
        <el-checkbox
          v-for="(i, k) in items.options"
          v-if="k >= 4"
          :label="i.id"
          @change="
            e => {
              checkOne(i, e)
            }
          "
          :key="k"
        >
          {{ i.object }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-checkbox-group
      v-if="prop != 'chcek9'"
      v-model="value"
      :disabled="status"
      @change="input"
    >
      <el-checkbox
        v-for="(i, k) in items.options"
        :label="i.id"
        @change="
          e => {
            checkOne(i, e)
          }
        "
        :key="k"
      >
        {{ i.object }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Object,
      default: () => {}
    },
    prop: {
      type: String,
      default: ''
    },
    status: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      default: ''
    },
    merge: {
      type: Boolean,
      default: false
    },
    result: {
      default: ''
    }
  },
  data() {
    return {
      value: []
    }
  },
  watch: {
    defaultValue(newVal) {
      this.value = newVal
    },
    status(newVal) {
      this.value = []
      this.$emit('changeVal', { name: this.prop, val: [] })
      this.$emit('makeRecord', { name: this.prop, record: [] })
    }
  },
  mounted() {
    if (this.defaultValue) {
      this.value = this.defaultValue
      this.$emit('changeVal', { name: this.prop, val: this.result })
      this.$emit('makeRecord', { name: this.prop, record: this.result })
    } else {
      this.reset()
    }
  },
  methods: {
    mergeSource({ name, flag }) {
      if (this.status) {
        return
      }
      let old = this.value || []
      this.items.options.map(i => {
        if (name) {
          if (Array.isArray(old) && flag.includes(String(i.id))) {
            old.push(i.id)
          }
        } else {
          if (flag.includes(String(i.id))) {
            console.log(i.id)
            old = this.removeItem(old, i.id) || []
          }
        }
      })

      this.value = old
      this.input()
    },

    removeItem(array, item) {
      let arr = []
      array.map(i => {
        if (i !== item) {
          arr.push(i)
        }
      })
      return arr
    },

    checkOne(i, e) {
      if (this.merge) {
        this.$emit('mergeVal', {
          name: e,
          flag: i.flag ? i.flag.split(',') : []
        })
      }
    },
    input() {
      let arr = []
      this.items.options.map(i => {
        if (this.value.includes(i.id)) {
          arr.push(i.useCaseNo)
        }
      })

      this.$emit('changeVal', { name: this.prop, val: arr.join(',') })
      this.$emit('makeRecord', { name: this.prop, record: this.value })
    },
    reset() {
      this.value = []
    },
    setDefaultValue(val) {
      this.value = val
    }
  }
}
</script>