@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
304 lines (276 loc) • 11 kB
JavaScript
import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { defineComponent, computed, ref, watch, onMounted } from "vue";
import { hasOwn, isEmpty, keys } from "@fe6/shared";
import cloneDeep from "lodash-es/cloneDeep";
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import PropTypes from '../../_util/vue-types';
import Trigger from '../../vc-trigger';
import { getOptionProps } from '../../_util/props-util';
import { tuple } from '../../_util/type';
import { placements, defaultFields } from './utils';
import { boxProps } from './props';
import Box from './Box';
var theDefPrefixCls = 'ant-checkbox-cascader';
export default defineComponent({
name: 'ACheckboxCascader',
inheritAttrs: false,
__ANT_CHECKBOX: true,
props: _extends({
align: PropTypes.object.def(function () {
return {};
}),
animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
disabled: PropTypes.looseBool,
transitionName: PropTypes.string,
dropdownClassName: PropTypes.string,
getCalendarContainer: PropTypes.func,
open: PropTypes.looseBool,
placement: PropTypes.any.def('bottomLeft'),
placeholder: PropTypes.string.def('请选择'),
inputStyle: PropTypes.any.def(''),
tagTextStyle: PropTypes.any.def('width:80px'),
separator: PropTypes.string.def('/'),
allowClear: PropTypes.looseBool.def(true),
maxTagCount: PropTypes.number.def(1),
size: PropTypes.oneOf(tuple('small', 'large', 'default')).def('default')
}, boxProps),
emits: ['update:value', 'change'],
setup: function setup(props) {
var theFields = computed(function () {
return _extends(_extends({}, defaultFields), props.fieldNames);
});
var sValue = ref({});
var viewDatas = ref([]);
var viewAllDatas = ref([]);
var showMore = ref(0);
var getViewDatas = function getViewDatas(newValue) {
viewDatas.value = [];
viewAllDatas.value = [];
var oneKeys = keys(newValue);
oneKeys.forEach(function (oneKey) {
var theOneItem = props.options.find(function (oneItem) {
return String(oneItem[theFields.value.value]) === oneKey;
});
if (theOneItem && hasOwn(theOneItem, theFields.value.children)) {
var twoKeys = keys(newValue[oneKey]);
twoKeys.forEach(function (twoKey) {
var theTwoItem = theOneItem[theFields.value.children].find(function (twoItem) {
return String(twoItem[theFields.value.value]) === twoKey;
});
if (theTwoItem && hasOwn(theTwoItem, theFields.value.children)) {
newValue[oneKey][twoKey].forEach(function (threeCode) {
var theThreeItem = theTwoItem[theFields.value.children].find(function (threeItem) {
return String(threeItem[theFields.value.value]) === threeCode;
});
if (theThreeItem) {
var theView = {
label: "".concat(theOneItem[theFields.value.label]).concat(props.separator).concat(theTwoItem[theFields.value.label]).concat(props.separator).concat(theThreeItem[theFields.value.label]),
value: [oneKey, twoKey, threeCode]
};
viewDatas.value.push(theView);
viewAllDatas.value.push(theView);
}
});
}
});
}
});
if (viewDatas.value.length > props.maxTagCount) {
showMore.value = viewDatas.value.length - props.maxTagCount;
viewDatas.value.length = props.maxTagCount;
}
};
var getValues = function getValues() {
// 必须都是字符串格式
viewDatas.value = [];
viewAllDatas.value = [];
sValue.value = {};
showMore.value = 0;
if (props.value && !isEmpty(props.value)) {
var oneKeys = keys(props.value);
oneKeys.forEach(function (oneCode) {
if (!hasOwn(sValue.value, String(oneCode))) {
sValue.value[oneCode] = {};
}
var twoKeys = keys(props.value[oneCode]);
twoKeys.forEach(function (twoCode) {
if (!hasOwn(sValue.value[oneCode], String(twoCode))) {
sValue.value[oneCode][twoCode] = {};
}
sValue.value[oneCode][twoCode] = props.value[oneCode][twoCode].map(function (threeCode) {
return String(threeCode);
});
});
});
getViewDatas(sValue.value);
}
};
watch(function () {
return props.options;
}, getValues, {
deep: true
});
watch(function () {
return props.value;
}, getValues, {
deep: true
});
onMounted(getValues);
return {
theFields: theFields,
sValue: sValue,
viewDatas: viewDatas,
viewAllDatas: viewAllDatas,
showMore: showMore,
getViewDatas: getViewDatas
};
},
data: function data() {
this.calendarElement = null;
return {
sOpen: false
};
},
methods: {
boxElement: function boxElement() {
return _createVNode(Box, {
"prefixCls": this.prefixCls,
"options": this.options,
"preWidth": this.preWidth,
"preHeight": this.preHeight,
"fieldNames": this.fieldNames,
"value": this.sValue,
"onChange": this.boxChange
}, null);
},
goEmit: function goEmit(newValue) {
this.$emit('update:value', newValue);
this.$emit('change', newValue);
},
boxChange: function boxChange(newValue) {
this.getViewDatas(newValue);
this.goEmit(newValue);
},
onVisibleChange: function onVisibleChange(open) {
this.sOpen = open;
},
removeOne: function removeOne(ev, oneValue) {
ev.stopPropagation();
if (oneValue.length > 2) {
var theValues = cloneDeep(this.sValue);
if (hasOwn(theValues, oneValue[0]) && hasOwn(theValues[oneValue[0]], oneValue[1])) {
var delIdx = theValues[oneValue[0]][oneValue[1]].findIndex(function (threeCode) {
return threeCode === oneValue[2];
});
if (delIdx > -1) {
theValues[oneValue[0]][oneValue[1]].splice(delIdx, 1);
}
if (theValues[oneValue[0]][oneValue[1]].length === 0) {
delete theValues[oneValue[0]][oneValue[1]];
}
if (isEmpty(theValues[oneValue[0]])) {
delete theValues[oneValue[0]];
}
}
this.goEmit(theValues);
}
},
renderTriggerNodes: function renderTriggerNodes() {
var _this = this;
var prefixCls = this.prefixCls || theDefPrefixCls;
if (this.viewDatas.length > 0) {
var theNodes = this.viewDatas.map(function (vItem) {
var removeIcon = null;
if (!_this.disabled) {
removeIcon = _createVNode("span", {
"class": "".concat(prefixCls, "-select-item-remove"),
"onClick": function onClick(ev) {
return _this.removeOne(ev, vItem.value);
}
}, [_createVNode(CloseOutlined, {
"class": "".concat(prefixCls, "-select-item-icon"),
"key": "remove-icon"
}, null)]);
}
return _createVNode("span", {
"class": "".concat(prefixCls, "-select-item")
}, [_createVNode("span", {
"class": "".concat(prefixCls, "-select-item-text"),
"style": _this.tagTextStyle,
"title": vItem.label
}, [vItem.label]), removeIcon]);
});
return this.showMore > 0 ? theNodes.concat([_createVNode("span", {
"class": "".concat(prefixCls, "-select-item")
}, [_createVNode("span", {
"class": "".concat(prefixCls, "-select-item-text")
}, [_createTextVNode("+"), this.showMore, _createTextVNode("...")])])]) : theNodes;
} else {
return _createVNode("span", {
"class": "".concat(prefixCls, "-select-placeholder")
}, [this.placeholder]);
}
},
clearAll: function clearAll(ev) {
ev.stopPropagation();
this.sValue = {};
this.goEmit(this.sValue);
}
},
render: function render() {
var _ref,
_this2 = this;
var props = getOptionProps(this);
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? theDefPrefixCls : _props$prefixCls,
placement = props.placement,
getCalendarContainer = props.getCalendarContainer,
align = props.align,
animation = props.animation,
disabled = props.disabled,
dropdownClassName = props.dropdownClassName,
transitionName = props.transitionName,
allowClear = props.allowClear;
if (this.sOpen || !this.calendarElement) {
this.calendarElement = this.boxElement();
}
var clearNode = null;
if (!disabled && allowClear && !isEmpty(this.sValue)) {
clearNode = _createVNode("span", {
"class": "".concat(prefixCls, "-clear"),
"onClick": this.clearAll
}, [_createVNode(CloseCircleFilled, {
"class": "".concat(prefixCls, "-clear-icon"),
"key": "clear-icon"
}, null)]);
}
return _createVNode(Trigger, {
"popupAlign": align,
"builtinPlacements": placements,
"popupPlacement": placement,
"action": disabled && !this.sOpen ? [] : ['click'],
"destroyPopupOnHide": true,
"getPopupContainer": getCalendarContainer,
"popupStyle": this.$attrs.style || {},
"popupAnimation": animation,
"popupTransitionName": transitionName,
"popupVisible": this.sOpen,
"onPopupVisibleChange": this.onVisibleChange,
"prefixCls": "".concat(prefixCls, "-alert"),
"popupClassName": dropdownClassName,
"popup": this.calendarElement
}, {
default: function _default() {
return [_createVNode("div", {
"class": ["".concat(prefixCls, "-select"), (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-select-disabled"), _this2.disabled), _defineProperty(_ref, "".concat(prefixCls, "-select-").concat(_this2.size), !!_this2.size), _ref)],
"style": _this2.inputStyle
}, [_createVNode("div", {
"class": "".concat(prefixCls, "-select-inner")
}, [_this2.renderTriggerNodes(), clearNode])])];
}
});
}
});