|
@@ -0,0 +1,189 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="ul-radio-group">
|
|
|
+ <a-checkbox-group v-model="selectedVal" :disabled="disabled" style="width: 100%">
|
|
|
+ <a-checkbox
|
|
|
+ v-for="item of selectOption"
|
|
|
+ :label="item.label"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :class="{ item: true, selection: selectedVal.indexOf(item.value) > -1, bgcolor: item.disabled }"
|
|
|
+ >{{ item.label }}</a-checkbox
|
|
|
+ >
|
|
|
+ </a-checkbox-group>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import { dictionary } from '@/components/service/core/dictionary'
|
|
|
+import { isArray } from '@/utils/Tools'
|
|
|
+import { httpAction, getAction } from '@/api/manage'
|
|
|
+export default {
|
|
|
+ name: 'CheckboxGroup', // checkbox组件二次封装
|
|
|
+ props: {
|
|
|
+ code: {
|
|
|
+ // 参数code
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ allValue: {
|
|
|
+ type: Boolean,
|
|
|
+ default() {
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ // 外部传入的option 可替代请求项
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ // v-model绑定值
|
|
|
+ type: [Array, String],
|
|
|
+ default() {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ // label 绑定值
|
|
|
+ type: [Array, String],
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ radioStyle: {
|
|
|
+ // 是否复选框模拟单选效果
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ // 是否禁用
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectOption: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ options(val) {
|
|
|
+ if (isArray(val)) {
|
|
|
+ this.selectOption.splice(0, this.selectOption.length)
|
|
|
+ this.selectOption.push(...val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectedVal(n, o) {
|
|
|
+ console.log(n, o)
|
|
|
+ if (this.radioStyle && !this.allValue) {
|
|
|
+ if (n.length == 0) {
|
|
|
+ this.selectedVal = o
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectedVal: {
|
|
|
+ get: function () {
|
|
|
+ return this.value
|
|
|
+ },
|
|
|
+ set: function (val) {
|
|
|
+ this.selectChange(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.code && this.options.length == 0) {
|
|
|
+ // 如果code值不为空且options.lengt==0, 则去请求字典项
|
|
|
+ this.getOptions()
|
|
|
+ } else {
|
|
|
+ // 否则直接获取外部传入的options
|
|
|
+ this.selectOption.splice(0, this.selectOption.length)
|
|
|
+ this.selectOption.push(...this.options)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getOptions() {
|
|
|
+ // 获取字典项
|
|
|
+ getAction('/sys/dictItem/list', { dictId: this.code, pageSize: 1000, pageNo: 1 }).then((res) => {
|
|
|
+ if (res.success && isArray(res.result.records)) {
|
|
|
+ var data = res.result.records
|
|
|
+ data = data.map((item) => {
|
|
|
+ return {
|
|
|
+ label: item.itemText,
|
|
|
+ value: item.itemValue,
|
|
|
+ ...item,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.allValue) {
|
|
|
+ data.unshift({ label: '不限', value: '' })
|
|
|
+ }
|
|
|
+ this.selectOption.push(...data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectChange(val) {
|
|
|
+ // 选择事件
|
|
|
+ if (!this.radioStyle) {
|
|
|
+ // 多选
|
|
|
+ var retrunData = []
|
|
|
+ let label = this.selectOption.filter((v) => val.findIndex((item) => item == v.value) > -1).map((v) => v.label)
|
|
|
+ if (this.allValue) {
|
|
|
+ if (val.findIndex((item) => item == '') == 0) {
|
|
|
+ retrunData = val.slice(-1)
|
|
|
+ } else if (val.findIndex((item) => item == '') == val.length - 1) {
|
|
|
+ retrunData = ['']
|
|
|
+ } else {
|
|
|
+ retrunData = val
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ retrunData = val
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$emit('input', retrunData)
|
|
|
+ this.$emit('update:label', label)
|
|
|
+ this.$emit('change', val)
|
|
|
+ this.consoleFun('VALUE: ', val, 'LABEL:', label)
|
|
|
+ } else {
|
|
|
+ // 模拟单选radio效果
|
|
|
+ let selectVal = []
|
|
|
+ if (this.allValue) {
|
|
|
+ if (val.length == 0) {
|
|
|
+ selectVal = ['']
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (val.length == 0) {
|
|
|
+ selectVal = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val.length > 0) {
|
|
|
+ selectVal = val.slice(-1)
|
|
|
+ }
|
|
|
+ let label = this.selectOption
|
|
|
+ .filter((v) => selectVal.findIndex((item) => item == v.value) > -1)
|
|
|
+ .map((v) => v.label)
|
|
|
+ this.$emit('input', selectVal)
|
|
|
+ this.$emit('update:label', label)
|
|
|
+ this.$emit('change', selectVal)
|
|
|
+ this.consoleFun('VALUE: ', selectVal, 'LABEL:', label)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emitChange(...args) {
|
|
|
+ // emit change事件
|
|
|
+ this.$emit('change', ...args)
|
|
|
+ },
|
|
|
+ consoleFun(...args) {
|
|
|
+ // 打印信息
|
|
|
+ if (process.env.NODE_ENV == 'development') {
|
|
|
+ console.log(...args)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|