hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
1 lines • 7.22 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/tree-transfer/src/index.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n prefix + '-tree-transfer',\n ]\"\n class=\"hl-transfer\"\n >\n <tree-panel\n ref=\"treePanel\"\n :title=\"leftPanelTitle\"\n :placeholder=\"panelFilterPlaceholder\"\n :filterable=\"filterable\"\n :option-render=\"optionTreeRender\"\n :tree-props=\"treeProps\"\n @checked-change=\"onTreeCheckedChange\"\n >\n <slot name=\"left-footer\"></slot>\n </tree-panel>\n <target-panel\n ref=\"targetPanel\"\n :data=\"checkedData\"\n :option-render=\"optionTargetRender\"\n :placeholder=\"panelFilterPlaceholder\"\n :filterable=\"filterable\"\n :filter-method=\"filterMethod\"\n :title=\"rightPanelTitle\"\n :props=\"treeProps.props\"\n @checked-change=\"onTargetCheckedChange\"\n >\n <slot name=\"right-footer\"></slot>\n </target-panel>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, h, ref, watch, onMounted } from 'vue'\nimport { FormItemEvents, formItemContextKey, useLocale } from 'hongluan-ui'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\nimport TargetPanel from './target-panel.vue'\nimport TreePanel from './tree-panel.vue'\nimport { useTreeProp } from './useTreeProp'\n\nimport type { PropType, VNode, Slot } from 'vue'\nimport type { FormItemContext } from 'hongluan-ui'\nimport type { TreeProps } from '@hongluan-business-ui/components/tree-selector'\n\nexport default defineComponent({\n name: 'TreeTransfer',\n\n components: {\n TargetPanel,\n TreePanel,\n },\n\n props: {\n modelValue: {\n type: Array as PropType<Array<string | number>>,\n default: () => [],\n },\n treeProps: {\n type: Object as PropType<TreeProps>,\n default: () => ({}),\n },\n titles: {\n type: Array as PropType<any> as PropType<[string, string]>,\n default: () => [],\n },\n filterPlaceholder: {\n type: String,\n default: '',\n },\n renderContent: Function as PropType<(h, data, mark) => VNode>,\n filterable: {\n type: Boolean,\n default: false,\n },\n },\n emits: ['update:modelValue'],\n setup(props, { emit, slots }) {\n const { t } = useLocale()\n const { prefix } = usePrefix()\n const formItem = inject(formItemContextKey, {} as FormItemContext)\n const treePanel = ref(null)\n const rightPanel = ref(null)\n const checkedData = ref([])\n\n const clearQuery = (which: 'left' | 'right') => {\n if (which === 'left') {\n treePanel.value.query = ''\n } else if (which === 'right') {\n rightPanel.value.query = ''\n }\n }\n\n const leftPanelTitle = computed(() => props.titles[0] || t('hl.transfer.titles.0'))\n const rightPanelTitle = computed(() => props.titles[1] || t('hl.transfer.titles.1'))\n\n const panelFilterPlaceholder = computed(() => props.filterPlaceholder || t('hl.transfer.filterPlaceholder'))\n const filterMethod = computed(() => {\n return props.treeProps.filterNodeMethod || (() => true)\n })\n\n watch(() => props.modelValue, () => {\n formItem.validate?.(FormItemEvents.change)\n })\n\n const { label: treeLabel } = useTreeProp(props.treeProps)\n\n const optionTreeRender = computed(() => data => {\n if (props.renderContent) return props.renderContent(h, data, 'left')\n const treeNodeSlot: Slot = slots.treeNode || slots['tree-node']\n if (treeNodeSlot) return treeNodeSlot({ data })\n\n return h('span', { class: 'tree-node-label' }, data[treeLabel.value])\n })\n\n const optionTargetRender = computed(() => data => {\n if (props.renderContent) return props.renderContent(h, data, 'right')\n const targetNodeSlot: Slot = slots.targetNode || slots['target-node']\n if (targetNodeSlot) return targetNodeSlot({ data })\n\n return h('span', data[treeLabel.value])\n })\n\n const onTreeCheckedChange = () => {\n const leafOnly = !props.treeProps.checkStrictly\n const keys = treePanel.value.callTreeMethod('getCheckedKeys', leafOnly)\n const nodes = treePanel.value.callTreeMethod('getCheckedNodes', leafOnly)\n emit('update:modelValue', keys)\n checkedData.value = [...nodes]\n }\n\n const onTargetCheckedChange = key => {\n const leafOnly = !props.treeProps.checkStrictly\n const keys = treePanel.value.callTreeMethod('getCheckedKeys', leafOnly)\n keys.indexOf(key) !== -1 && keys.splice(keys.indexOf(key), 1)\n treePanel.value.callTreeMethod('setCheckedKeys', keys, leafOnly)\n }\n\n onMounted(() => {\n const leafOnly = !props.treeProps.checkStrictly\n treePanel.value.callTreeMethod('setCheckedKeys', props.modelValue, leafOnly)\n const defaultCheckedData = []\n props.modelValue.forEach(id => {\n defaultCheckedData.push(treePanel.value.callTreeMethod('getNode', id))\n })\n checkedData.value = [...defaultCheckedData.map(c => c.data)]\n })\n\n return {\n t,\n prefix,\n treePanel,\n rightPanel,\n checkedData,\n filterMethod,\n\n leftPanelTitle,\n rightPanelTitle,\n panelFilterPlaceholder,\n clearQuery,\n optionTreeRender,\n optionTargetRender,\n\n onTreeCheckedChange,\n onTargetCheckedChange,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AA8CA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAO;AAAA,IAElB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM;AAAA;AAAA,IAEjB,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,eAAe;AAAA,IACf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,EAAE,MAAM,SAAS;AAC5B,UAAM,EAAE,MAAM;AACd,UAAM,EAAE,WAAW;AACnB,UAAM,WAAW,OAAO,oBAAoB;AAC5C,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,cAAc,IAAI;AAExB,UAAM,aAAa,CAAC,UAA4B;AAC9C,UAAI,UAAU,QAAQ;AACpB,kBAAU,MAAM,QAAQ;AAAA,iBACf,UAAU,SAAS;AAC5B,mBAAW,MAAM,QAAQ;AAAA;AAAA;AAI7B,UAAM,iBAAiB,SAAS,MAAM,MAAM,OAAO,MAAM,EAAE;AAC3D,UAAM,kBAAkB,SAAS,MAAM,MAAM,OAAO,MAAM,EAAE;AAE5D,UAAM,yBAAyB,SAAS,MAAM,MAAM,qBAAqB,EAAE;AAC3E,UAAM,eAAe,SAAS,MAAM;AAClC,aAAO,MAAM,UAAU,2BAA2B;AAAA;AAGpD,UAAM,MAAM,MAAM,YAAY,MAAM;AAClC;AAAmC;AAGrC;AAEA,UAAM,kCAAkC;AACtC,UAAI;AAAqB,eAAO;AAChC,mDAAmD;AACnD;AAAkB;AAElB,eAAS;AAAqD;AAGhE;AACE,UAAI;AAAqB,eAAO;AAChC,mCAAmC;AACnC;AAAoB;AAEpB,eAAS,uBAAuB;AAAA;AAGlC;AACE;AACA,YAAM,iBAAiB;AACvB,YAAM;AACN;AACA,8BAAwB;AAAA;AAG1B;AACE;AACA,YAAM,iBAAiB;AACvB,mBAAa,SAAS,MAAM;AAC5B,sBAAgB;AAAuC;AAGzD;AACE;AACA;AACA;AACA,YAAM;AACJ,gCAAwB;AAA0C;AAEpE;AAAsD;AAGxD;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;AAtIE;AA7BE;AAAgB;AAGhB;;AAYO;AATP,MACH;AAAO,MACP;AAAa,MACb;AAAY,MACZ,iBAAe;AAAA,MACf;AAAY,MACZ;AAAgB;;AAEe;AAAA;AAAA;;;AAcnB;AAXT,MACH;AAAM,MACN;AAAe,MACf;AAAa,MACb;AAAY,MACZ,iBAAe;AAAA,MACf;AAAO,MACP,OAAO;AAAU,MACjB;AAAgB;;AAEgB;AAAA;AAAA;;;;;;;;;"}