|
| 1 | +import { getTemplate, getSlotContent, getStringTypeAttr } from '@/components/template' |
| 2 | +import guid from '@/utils/guid' |
| 3 | +// 深度合并 |
| 4 | +import mergeDeep from '@/utils/mergeDeep' |
| 5 | +var handle = function(_attr, _slots, { id }) { |
| 6 | + //定义默认属性 |
| 7 | + let attributes = { |
| 8 | + quantity:{ |
| 9 | + type:'number', |
| 10 | + value:2 |
| 11 | + }, |
| 12 | + value:{ |
| 13 | + type:'text', |
| 14 | + value:'' |
| 15 | + } |
| 16 | + }, |
| 17 | + slots = { |
| 18 | + default: [] |
| 19 | + } |
| 20 | + |
| 21 | + //覆盖默认属性 |
| 22 | + Object.assign(slots, _slots) |
| 23 | + Object.assign(attributes, _attr) |
| 24 | + if (attributes.quantity.value < 0) |
| 25 | + attributes.quantity.value = 0 |
| 26 | + |
| 27 | + //根据组件不同需要做的不同操作 |
| 28 | + let max = _attr.quantity ? _attr.quantity.value : attributes.quantity.value |
| 29 | + let components = JSON.parse(JSON.stringify(_Vue.$store.state.components)) |
| 30 | + let component = components.find(c => c.info.id === id) || { slots } |
| 31 | + let oldSlots = component.slots |
| 32 | + let defaul = [] //default |
| 33 | + let addComponent = (_attr, _slots) => { |
| 34 | + let info = { |
| 35 | + name: 'Checkbox', |
| 36 | + ui: 'iView-UI', |
| 37 | + id: guid() |
| 38 | + } |
| 39 | + let colComponent = getTemplate(info, _attr, _slots) |
| 40 | + colComponent.parentId = id |
| 41 | + components.push(colComponent) |
| 42 | + return colComponent |
| 43 | + } |
| 44 | + for (let i = 0; i < max; i++) { |
| 45 | + if (oldSlots.default[i]) { |
| 46 | + defaul.push(oldSlots.default[i]) |
| 47 | + } else { |
| 48 | + defaul.push({ id: addComponent().info.id }) |
| 49 | + } |
| 50 | + } |
| 51 | + |
| 52 | + //quantity数值减少时，子属性要对应的删除 |
| 53 | + let arr = oldSlots.default.filter(item => { //得到所有要删除的对象 |
| 54 | + return defaul.findIndex(({ id }) => id === item.id) === -1 |
| 55 | + }) |
| 56 | + arr.forEach(({ id }) => { |
| 57 | + let index = components.findIndex(c => c.info.id === id) |
| 58 | + components.splice(index, 1) |
| 59 | + }) |
| 60 | + slots.default = defaul |
| 61 | + _Vue.$store.commit('setState', { components: components }) |
| 62 | + |
| 63 | + //获取插槽模板内容 |
| 64 | + let subContent = getSlotContent(slots) |
| 65 | + |
| 66 | + //设置当前组件的slot |
| 67 | + if (attributes.slot && attributes.slot !== 'default') { |
| 68 | + attributes.slot = { |
| 69 | + type: 'text', |
| 70 | + value: attributes.slot |
| 71 | + } |
| 72 | + } else { |
| 73 | + attributes.slot = { |
| 74 | + type: 'text', |
| 75 | + value: '' |
| 76 | + } |
| 77 | + } |
| 78 | + |
| 79 | + //字符串模板操作 |
| 80 | + let stringAttr = getStringTypeAttr(attributes) |
| 81 | + let template = `<Checkbox-group |
| 82 | + ${stringAttr}> |
| 83 | + ${subContent} |
| 84 | + </Checkbox-group>` |
| 85 | + |
| 86 | + //删除自定义非ui属性 |
| 87 | + template = template.replace(`:quantity="${attributes.quantity.value}"`, '') |
| 88 | + |
| 89 | + return { template, attributes, slots } |
| 90 | +} |
| 91 | +export default handle |
0 commit comments