@femessage/el-data-tree
Version:
base on element-ui, makes crud easily
1,356 lines (1,235 loc) • 52.1 kB
JavaScript
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _get from 'lodash.get';
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
/* template */
var __vue_render__ = function(_h, _vm) {
var _c = _vm._c;
return _c(
"svg",
{
staticClass: "feather feather-chevron-left",
attrs: {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}
},
[_c("polyline", { attrs: { points: "15 18 9 12 15 6" } })]
)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = true;
/* style inject */
/* style inject SSR */
var ChevronLeftIcon = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
{},
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);
var dataPath = 'payload.content';
var dialogForm = 'dialogForm';
var defaultParentKey = 'parentId';
var defaultTreeAttrs = {
defaultExpandedKeys: [],
highlightCurrent: true,
props: {
children: 'children',
label: 'name'
},
nodeKey: 'id' //tree配置，每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
};
var camelizeRE = /-(\w)/g;
var camelize = function camelize(str) {
return str.replace(camelizeRE, function (_, c) {
return c ? c.toUpperCase() : '';
});
};
var script = {
name: 'ElDataTree',
components: {
ChevronLeftIcon: ChevronLeftIcon
},
props: {
/**
* 标题文字
*/
title: {
type: String,
"default": ''
},
/**
* 是否有边框
*/
hasBorder: {
type: Boolean,
"default": true
},
/**
* el-tree 属性设置
* @link [el-tree文档](http://element-cn.eleme.io/#/zh-CN/component/tree)
*/
treeAttrs: {
type: Object,
"default": function _default() {
return {};
}
},
/**
* 请求url, 如果为空, 则不会发送请求; 改变url, 则tree会重新发送请求
*/
url: {
type: String,
"default": ''
},
/**
* 父级id的key，默认值 parentKey，
* 修改时会用到,请求会根据定义的属性值获取parentKey,即row[this.parentKey]
*/
parentKey: {
type: String,
"default": defaultParentKey
},
/**
* 接口返回的数据中的路径, 嵌套对象使用.表示即可
*/
dataPath: {
type: String,
"default": dataPath
},
/**
* 是否展示过滤框
*/
showFilter: {
type: Boolean,
"default": false
},
/**
* 通过 checkedKeys 设置目前勾选的节点，支持.sync修饰符
*/
checkedKeys: {
type: Array,
"default": function _default() {
return [];
}
},
/**
* 操作列的自定义菜单, 渲染的是element-ui的dropdown, 支持包括style在内的以下属性: {type: '', text: '', atClick: (data, node) => Promise.resolve(), show: (data, node) => return true时显示 } 点击事件 data参数表示该节点所对应的对象,node表示当前节点
*/
extraButtons: {
type: Array,
"default": function _default() {
return [];
}
},
/**
* 操作列自定义菜单样式, 默认是dropdown
* `text, dropdown`
*/
extraButtonsType: {
type: String,
"default": 'dropdown'
},
/**
* 弹窗表单, 用于新增与修改
* @link [el-form-renderer文档](https://github.com/FEMessage/el-form-renderer/blob/master/README.md)
*/
form: {
type: Array,
"default": function _default() {
return [];
}
},
/**
* 弹窗表单属性设置
* @link [el-form文档](http://element.eleme.io/#/zh-CN/component/form#form-attributes)
*/
formAttrs: {
type: Object,
"default": function _default() {
return {};
}
},
/**
* 新增/修改提交时注入额外的参数
*/
extraParams: {
type: Object,
"default": function _default() {
return {};
}
},
/**
* 外部的注入额外的查询参数, 键值对形式
*/
customQuery: {
type: Object,
"default": function _default() {
return {};
}
},
/**
* 是否有操作列
*/
hasOperation: {
type: Boolean,
"default": true
},
/**
* @deprecated
* 是否有标题栏，建议使用 hasHeader
*/
hasTitle: {
type: Boolean,
"default": false
},
/**
* 是否有标题栏
*/
hasHeader: {
type: Boolean,
"default": false
},
/**
* 是否有删除按钮
*/
hasDelete: {
type: Boolean,
"default": true
},
/**
* 是否有新增按钮
*/
hasNew: {
type: Boolean,
"default": true
},
/**
* 是否有编辑按钮
*/
hasEdit: {
type: Boolean,
"default": true
},
/**
* 用于转换获取的数据为目标数据
*/
transform: {
type: Function
},
/**
* 点击新增按钮时的方法, 当默认新增方法不满足需求时使用, 需要返回promise。
* 参数(data, row) data 是form表单的数据, row 是当前行的数据
*/
onNew: {
type: Function
},
/**
* 点击修改按钮时的方法, 当默认修改方法不满足需求时使用, 需要返回promise。
* 参数(data, row) data 是form表单的数据, row 是当前行的数据
*/
onEdit: {
type: Function
},
/**
* 点击删除按钮时的方法, 当默认删除方法不满足需求时使用, 需要返回promise。
* 参数(data, row) data 是form表单的数据, row 是当前行的数据
*/
onDelete: {
type: Function
},
/**
* 在新增/修改弹窗 点击确认时调用，返回Promise, 如果reject, 则不会发送新增/修改请求。
* 参数: (data, isNew) data为表单数据, isNew true 表示是新增弹窗, false 为 编辑弹窗
*/
beforeConfirm: {
type: Function,
"default": function _default() {
return Promise.resolve();
}
},
/**
* 默认新增操作菜单文字
*/
newText: {
type: String,
"default": '新增'
},
/**
* 默认修改操作菜单文字
*/
editText: {
type: String,
"default": '修改'
},
/**
* 默认删除操作菜单文字
*/
deleteText: {
type: String,
"default": '删除'
},
/**
* 是否可以折叠树
*/
collapsable: {
type: Boolean,
"default": function _default() {
return _get(this, '$elDataTreeOptions.collapsable') || false;
}
}
},
data: function data() {
return {
treeData: [],
//树形数据
filterText: '',
loading: false,
dialogTitle: '',
dialogVisible: false,
isNew: true,
isEdit: false,
confirmLoading: false,
// 要修改的那一行
row: {},
// 默认展开节点 keys
defaultExpandedKeys: [],
// 展开操作后的节点 keys，用于保存新增、编辑、删除等操作后的展开状态
cacheExpandedKeys: new Set(),
// 树折叠状态
isCollapsed: false
};
},
computed: {
// 连字符转驼峰
camelizeTreeAttrs: function camelizeTreeAttrs() {
var treeAttrs = this.treeAttrs;
return Object.keys(treeAttrs).reduce(function (sum, k) {
// 属性名转驼峰
var key = camelize(k);
sum[key] = treeAttrs[k];
return sum;
}, {});
},
treeAttributes: function treeAttributes() {
return Object.assign({}, defaultTreeAttrs, this.camelizeTreeAttrs);
}
},
watch: {
url: {
handler: function handler() {
//如果url变化，则重新拉取列表
this.fetchData();
},
immediate: true
},
filterText: function filterText(val) {
this.$refs.tree.filter(val);
},
checkedKeys: function checkedKeys(keys) {
this.updateCheckedKeys(keys);
},
'treeAttributes.defaultExpandedKeys': {
handler: function handler(val) {
var _this = this;
val.forEach(function (item) {
return _this.cacheExpandedKeys.add(item);
});
this.updateDefaultExpandKeys();
},
immediate: true
}
},
methods: {
updateDefaultExpandKeys: function updateDefaultExpandKeys() {
this.defaultExpandedKeys = _toConsumableArray(this.cacheExpandedKeys);
},
/**
* 更新树形列表
* @public
*/
fetchData: function fetchData() {
var _this2 = this;
//如果url为空，则不发送请求
if (!this.url) {
console.warn('ELDataTree: url 为空, 不发送请求');
return false;
}
this.loading = true;
this.$axios.get(this.url, {
params: this.customQuery
}).then(function (res) {
//从dataPath获取数据
var treeData = _get(res, _this2.dataPath) || [];
_this2.treeData = _this2.transform && _this2.transform(treeData) || treeData; // 保持展开状态，新增、删除、编辑不丢失数据
_this2.updateDefaultExpandKeys(); // 确保树已经有数据后再设置选中状态
_this2.updateCheckedKeys(_this2.checkedKeys);
/**
* 请求数据成功，返回transform处理后的值和接口返回的值
* @property {object} treeData - tree的数据
* @property {object} res - 请求返回的完整 response
*/
_this2.$emit('loaded', _this2.treeData, res);
})["catch"](function (error) {
_this2.$emit('error', error);
})["finally"](function () {
_this2.loading = false;
});
},
filterNode: function filterNode(value, data) {
if (!value) return true;
var label = this.treeAttributes.props.label;
return data[label].toLowerCase().includes(value.toLowerCase());
},
/**
* 获取el-tree对象，方便调用其方法
* @returns {tree object}
* @public
*/
getTree: function getTree() {
return this.$refs.tree;
},
/**
* 节点选中状态发生变化时的回调
* 共三个参数，依次为：
* 传递给 data 属性的数组中该节点所对应的对象
* 节点本身是否被选中
* 节点的子树中是否有被选中的节点
*/
handleCheckChange: function handleCheckChange() {
//获取选择的节点，如果节点被选中，则父节点也会选中
var checkNodes = this.$refs.tree.getCheckedNodes(false, true);
var nodeKey = this.treeAttributes.nodeKey;
this.$emit('update:checkedKeys', checkNodes.map(function (item) {
return item[nodeKey];
}));
},
/**
* 选中指定节点
* @param {array} keys - 选中的节点的 key 所组成的数组
* @public
*/
updateCheckedKeys: function updateCheckedKeys(keys) {
//设置checkedKeys的时候，设置父节点，子节点全部也被选中了
//解决方案：过滤掉有孩子节点的key，不设置checked状态
var flattenTree = function flattenTree(array, children) {
return array.reduce(function (sum, node) {
return sum.concat(node[children] ? flattenTree(node[children], children) : node);
}, []);
};
var treeAttrs = this.treeAttributes;
var checkedKeys = flattenTree(this.treeData, treeAttrs.props.children).filter(function (node) {
return keys.indexOf(node[treeAttrs.nodeKey]) > -1;
}).map(function (node) {
return node[treeAttrs.nodeKey];
});
this.$refs.tree.setCheckedKeys(checkedKeys);
},
handleCommand: function handleCommand(command, data, node) {
var handler = {
"new": this.onDefaultNew,
edit: this.onDefaultEdit,
"delete": this.onDefaultDelete
};
if (handler[command]) {
handler[command](data, node);
return;
}
var btn = this.extraButtons.find(function (btn) {
return btn.text === command;
});
if (btn) {
typeof btn.atClick === 'function' && btn.atClick(data, node);
}
},
onDefaultNew: function onDefaultNew() {
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.row = data;
this.isNew = true;
this.isEdit = false;
this.dialogTitle = this.newText;
this.dialogVisible = true;
},
onDefaultEdit: function onDefaultEdit(data) {
var _this3 = this;
this.row = data;
this.isNew = false;
this.isEdit = true;
this.dialogTitle = this.editText;
this.dialogVisible = true; // 给表单填充值
this.$nextTick(function () {
_this3.$refs[dialogForm].updateForm(data);
});
},
onDefaultDelete: function onDefaultDelete(data, node) {
var _this4 = this;
this.$confirm('确认删除吗', '提示', {
type: 'warning',
beforeClose: function beforeClose(action, instance, done) {
if (action !== 'confirm') {
done();
return;
}
instance.confirmButtonLoading = true;
var request = _this4.onDelete && _this4.onDelete(data, node) || _this4.$axios["delete"](_this4.url + '/' + data[_this4.treeAttributes.nodeKey]);
request.then(function () {
done();
_this4.showMessage();
_this4.fetchData();
})["catch"](function (err) {
_this4.$emit('error', err);
})["finally"](function () {
instance.confirmButtonLoading = false;
});
}
})["catch"](function (err) {
_this4.$emit('error', err);
});
},
// 组件可以绑定多个相同的事件，不需要emit node-expand/node-collapse 来兼容el-tree
handleNodeExpand: function handleNodeExpand(data) {
var nodeKey = this.treeAttributes.nodeKey;
this.cacheExpandedKeys.add(data[nodeKey]);
},
handleNodeCollapse: function handleNodeCollapse(data) {
var nodeKey = this.treeAttributes.nodeKey;
this.cacheExpandedKeys["delete"](data[nodeKey]);
},
cancel: function cancel() {
this.dialogVisible = false;
},
confirm: function confirm() {
var _this5 = this;
this.$refs[dialogForm].validate(function (valid) {
if (!valid) return false; // 新增 parentKey 为当前节点 id，修改为当前节点 parentKey
var parentKey = _this5.isNew ? _this5.treeAttributes.nodeKey : _this5.parentKey;
var data = Object.assign({
parentId: _this5.row[parentKey]
}, _this5.$refs[dialogForm].getFormValue(), _this5.extraParams);
_this5.beforeConfirm(data, _this5.isNew).then(function () {
var condiction = 'isNew';
var customMethod = 'onNew';
if (_this5.isEdit) {
condiction = 'isEdit';
customMethod = 'onEdit';
}
if (_this5[condiction] && _this5[customMethod]) {
_this5.confirmLoading = true;
_this5[customMethod](data, _this5.row).then(function () {
_this5.fetchData();
_this5.showMessage(true);
_this5.cancel();
})["catch"](function (err) {
_this5.$emit('error', err);
})["finally"](function () {
_this5.confirmLoading = false;
});
return;
} // 默认新增/修改逻辑
var method = 'post';
var url = _this5.url;
if (_this5.isEdit) {
method = 'put';
url += "/".concat(_this5.row[_this5.treeAttributes.nodeKey]);
}
_this5.confirmLoading = true;
_this5.$axios[method](url, data, {
params: _this5.customQuery
}).then(function () {
_this5.showMessage();
_this5.fetchData();
_this5.cancel();
})["catch"](function (err) {
/**
* CRUD失败
* @event error
* @property {error} err
*/
_this5.$emit('error', err);
})["finally"](function () {
_this5.confirmLoading = false;
});
})["catch"](function () {});
});
},
closeDialog: function closeDialog() {
this.isNew = false;
this.isEdit = false;
this.confirmLoading = false;
this.$refs[dialogForm].resetFields();
},
showMessage: function showMessage() {
var isSuccess = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
if (isSuccess) {
this.$message({
type: 'success',
message: '操作成功'
});
} else {
this.$message({
type: 'error',
message: '操作失败'
});
}
}
}
};
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) {
return addStyle(id, style);
};
}
var HEAD = document.head || document.getElementsByTagName('head')[0];
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = {
ids: new Set(),
styles: []
});
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media) style.element.setAttribute('media', css.media);
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
} else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) style.element.removeChild(nodes[index]);
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
}
}
}
var browser = createInjector;
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__$1 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
staticClass: "el-data-tree",
class: { "has-border": _vm.hasBorder, "is-collapsed": _vm.isCollapsed },
on: {
click: function($event) {
_vm.isCollapsed = false;
}
}
},
[
_vm.collapsable
? _c("div", { staticClass: "collapse-icon-wrapper" }, [
_c(
"span",
{
staticClass: "collapse-icon",
on: {
click: function($event) {
$event.preventDefault();
$event.stopPropagation();
_vm.isCollapsed = !_vm.isCollapsed;
}
}
},
[_c("chevron-left-icon")],
1
)
])
: _vm._e(),
_vm._v(" "),
_c("div", { staticClass: "el-data-tree-main" }, [
_vm.hasTitle || _vm.hasHeader
? _c("header", { staticClass: "header" }, [
_c(
"div",
{ staticClass: "header-left" },
[
_vm._t("title", [
_c("p", { staticClass: "header-title" }, [
_vm._v(_vm._s(_vm.title))
])
])
],
2
),
_vm._v(" "),
_c("div", { staticClass: "header-right" }, [
_c(
"span",
{
staticClass: "header-new-btn",
on: { click: _vm.onDefaultNew }
},
[
_vm._t("header-new-btn", [
_c(
"el-button",
{ attrs: { type: "text", size: "mini" } },
[_c("i", { staticClass: "el-icon-plus" })]
)
])
],
2
),
_vm._v(" "),
_c(
"span",
{ staticClass: "header-extra-block" },
[_vm._t("header-extra-block")],
2
)
])
])
: _vm._e(),
_vm._v(" "),
_c(
"section",
{ staticClass: "body" },
[
_vm.showFilter
? _c("el-input", {
attrs: {
placeholder: "查询",
"suffix-icon": "el-icon-search",
clearable: ""
},
model: {
value: _vm.filterText,
callback: function($$v) {
_vm.filterText = $$v;
},
expression: "filterText"
}
})
: _vm._e(),
_vm._v(" "),
_c(
"el-tree",
_vm._g(
_vm._b(
{
directives: [
{
name: "loading",
rawName: "v-loading",
value: _vm.loading,
expression: "loading"
}
],
ref: "tree",
staticClass: "data-tree",
attrs: {
data: _vm.treeData,
"filter-node-method": _vm.filterNode,
"default-expanded-keys": _vm.defaultExpandedKeys
},
on: {
"node-expand": _vm.handleNodeExpand,
"node-collapse": _vm.handleNodeCollapse,
"check-change": _vm.handleCheckChange
},
scopedSlots: _vm._u(
[
{
key: "default",
fn: function(ref) {
var node = ref.node;
var data = ref.data;
return _c(
"span",
{ staticClass: "custom-tree-node" },
[
_c(
"span",
{ staticClass: "custom-tree-node-label" },
[
_vm._t(
"node-label",
[_vm._v(_vm._s(node.label))],
{ data: data }
)
],
2
),
_vm._v(" "),
_vm.hasOperation
? _c(
"span",
{
staticClass: "custom-tree-node-btns",
on: {
click: function(e) {
return e.stopPropagation()
}
}
},
[
_vm.extraButtonsType === "text"
? [
_vm.hasNew
? _c(
"el-button",
{
attrs: { type: "text" },
on: {
click: function(
$event
) {
return _vm.handleCommand(
"new",
node,
data
)
}
}
},
[
_vm._v(
_vm._s(_vm.newText)
)
]
)
: _vm._e(),
_vm._v(" "),
_vm.hasEdit
? _c(
"el-button",
{
attrs: { type: "text" },
on: {
click: function(
$event
) {
return _vm.handleCommand(
"edit",
node,
data
)
}
}
},
[
_vm._v(
_vm._s(_vm.editText)
)
]
)
: _vm._e(),
_vm._v(" "),
_vm._l(
_vm.extraButtons.filter(
function(btn) {
return (
!btn.show ||
btn.show(data, node)
)
}
),
function(btn, i) {
return _c(
"el-button",
_vm._b(
{
key: i,
attrs: { type: "text" },
on: {
click: function(
$event
) {
return _vm.handleCommand(
btn.text,
node,
data
)
}
}
},
"el-button",
btn,
false
),
[_vm._v(_vm._s(btn.text))]
)
}
),
_vm._v(" "),
_vm.hasDelete
? _c(
"el-button",
{
staticClass:
"delete-button",
attrs: { type: "text" },
on: {
click: function(
$event
) {
return _vm.handleCommand(
"delete",
node,
data
)
}
}
},
[
_vm._v(
_vm._s(_vm.deleteText)
)
]
)
: _vm._e()
]
: _c(
"el-dropdown",
{
attrs: { trigger: "click" },
on: {
command: function(command) {
return _vm.handleCommand(
command,
data,
node
)
}
}
},
[
_c(
"span",
{
staticClass:
"el-dropdown-link"
},
[
_c("i", {
staticClass:
"el-icon-more"
})
]
),
_vm._v(" "),
_c(
"el-dropdown-menu",
{
attrs: { slot: "dropdown" },
slot: "dropdown"
},
[
_vm.hasNew
? _c(
"el-dropdown-item",
{
attrs: {
command: "new"
}
},
[
_vm._v(
_vm._s(
_vm.newText
)
)
]
)
: _vm._e(),
_vm._v(" "),
_vm.hasEdit
? _c(
"el-dropdown-item",
{
attrs: {
command: "edit"
}
},
[
_vm._v(
_vm._s(
_vm.editText
)
)
]
)
: _vm._e(),
_vm._v(" "),
_vm._l(
_vm.extraButtons.filter(
function(btn) {
return (
!btn.show ||
btn.show(data, node)
)
}
),
function(btn, i) {
return _c(
"el-dropdown-item",
_vm._b(
{
key: i,
attrs: {
command:
btn.text
}
},
"el-dropdown-item",
btn,
false
),
[
_vm._v(
_vm._s(btn.text)
)
]
)
}
),
_vm._v(" "),
_vm.hasDelete
? _c(
"el-dropdown-item",
{
attrs: {
command: "delete"
}
},
[
_vm._v(
_vm._s(
_vm.deleteText
)
)
]
)
: _vm._e()
],
2
)
],
1
)
],
2
)
: _vm._e()
]
)
}
}
],
null,
true
)
},
"el-tree",
_vm.treeAttributes,
false
),
_vm.$listeners
)
)
],
1
)
]),
_vm._v(" "),
_c(
"el-dialog",
{
attrs: { title: _vm.dialogTitle, visible: _vm.dialogVisible },
on: {
"update:visible": function($event) {
_vm.dialogVisible = $event;
},
close: _vm.closeDialog
}
},
[
_c(
"el-form-renderer",
_vm._b(
{ ref: "dialogForm", attrs: { content: _vm.form } },
"el-form-renderer",
_vm.formAttrs,
false
),
[_vm._t("form")],
2
),
_vm._v(" "),
_c(
"div",
{ attrs: { slot: "footer" }, slot: "footer" },
[
_c(
"el-button",
{ attrs: { size: "small" }, on: { click: _vm.cancel } },
[_vm._v("取 消")]
),
_vm._v(" "),
_c(
"el-button",
{
attrs: {
type: "primary",
loading: _vm.confirmLoading,
size: "small"
},
on: { click: _vm.confirm }
},
[_vm._v("确 定")]
)
],
1
)
],
1
)
],
1
)
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;
/* style */
const __vue_inject_styles__$1 = function (inject) {
if (!inject) return
inject("data-v-71ccb27d_0", { source: ".el-data-tree {\n transition: 0.3s;\n}\n.el-data-tree .el-data-tree-main {\n overflow: hidden;\n}\n.el-data-tree.has-border {\n border-radius: 4px;\n background-color: #fff;\n border: 1px solid #ebeef5;\n}\n.el-data-tree.has-border:hover,\n.el-data-tree.has-border:focus {\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.el-data-tree .header {\n display: flex;\n align-items: center;\n padding: 18px 20px;\n border-bottom: 1px solid #ebeef5;\n}\n.el-data-tree .header .header-left,\n.el-data-tree .header .header-right {\n flex: 1;\n display: flex;\n align-items: center;\n}\n.el-data-tree .header .header-right {\n justify-content: flex-end;\n}\n.el-data-tree .header .header-title {\n margin: 0;\n color: #303133;\n display: inline-block;\n padding-right: 10px;\n}\n.el-data-tree .header .header-new-btn,\n.el-data-tree .header .header-extra-block {\n margin-left: 10px;\n}\n.el-data-tree .body {\n padding: 20px;\n}\n.el-data-tree .data-tree-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 20px;\n margin: 0;\n border-bottom: 1px solid #ebeef5;\n box-sizing: border-box;\n}\n.el-data-tree .data-tree-title .el-icon-plus {\n cursor: pointer;\n}\n.el-data-tree .data-tree {\n padding-top: 8px;\n}\n.el-data-tree .custom-tree-node {\n overflow: hidden;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-label {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-btns .el-button {\n font-family: inherit;\n}\n.el-data-tree .delete-button {\n color: #e24156;\n}\n.el-data-tree .delete-button:hover,\n.el-data-tree .delete-button:focus {\n color: #e24156;\n}\n", map: {"version":3,"sources":["el-data-tree.vue"],"names":[],"mappings":"AAAA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,sBAAsB;EACtB,yBAAyB;AAC3B;AACA;;EAEE,2CAA2C;AAC7C;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,kBAAkB;EAClB,gCAAgC;AAClC;AACA;;EAEE,OAAO;EACP,aAAa;EACb,mBAAmB;AACrB;AACA;EACE,yBAAyB;AAC3B;AACA;EACE,SAAS;EACT,cAAc;EACd,qBAAqB;EACrB,mBAAmB;AACrB;AACA;;EAEE,iBAAiB;AACnB;AACA;EACE,aAAa;AACf;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,kBAAkB;EAClB,SAAS;EACT,gCAAgC;EAChC,sBAAsB;AACxB;AACA;EACE,eAAe;AACjB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,gBAAgB;EAChB,OAAO;EACP,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,eAAe;EACf,kBAAkB;AACpB;AACA;EACE,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,oBAAoB;AACtB;AACA;EACE,cAAc;AAChB;AACA;;EAEE,cAAc;AAChB","file":"el-data-tree.vue","sourcesContent":[".el-data-tree {\n transition: 0.3s;\n}\n.el-data-tree .el-data-tree-main {\n overflow: hidden;\n}\n.el-data-tree.has-border {\n border-radius: 4px;\n background-color: #fff;\n border: 1px solid #ebeef5;\n}\n.el-data-tree.has-border:hover,\n.el-data-tree.has-border:focus {\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.el-data-tree .header {\n display: flex;\n align-items: center;\n padding: 18px 20px;\n border-bottom: 1px solid #ebeef5;\n}\n.el-data-tree .header .header-left,\n.el-data-tree .header .header-right {\n flex: 1;\n display: flex;\n align-items: center;\n}\n.el-data-tree .header .header-right {\n justify-content: flex-end;\n}\n.el-data-tree .header .header-title {\n margin: 0;\n color: #303133;\n display: inline-block;\n padding-right: 10px;\n}\n.el-data-tree .header .header-new-btn,\n.el-data-tree .header .header-extra-block {\n margin-left: 10px;\n}\n.el-data-tree .body {\n padding: 20px;\n}\n.el-data-tree .data-tree-title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 18px 20px;\n margin: 0;\n border-bottom: 1px solid #ebeef5;\n box-sizing: border-box;\n}\n.el-data-tree .data-tree-title .el-icon-plus {\n cursor: pointer;\n}\n.el-data-tree .data-tree {\n padding-top: 8px;\n}\n.el-data-tree .custom-tree-node {\n overflow: hidden;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 14px;\n padding-right: 8px;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-label {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.el-data-tree .custom-tree-node .custom-tree-node-btns .el-button {\n font-family: inherit;\n}\n.el-data-tree .delete-button {\n color: #e24156;\n}\n.el-data-tree .delete-button:hover,\n.el-data-tree .delete-button:focus {\n color: #e24156;\n}\n"]}, media: undefined })
,inject("data-v-71ccb27d_1", { source: ".el-data-tree {\n position: relative;\n width: 100%;\n}\n.el-data-tree .el-tree {\n background-color: transparent;\n}\n.el-data-tree .el-data-tree-main {\n transition: 0.3s;\n}\n.el-data-tree.is-collapsed {\n min-width: 20px;\n width: 20px;\n background-color: #ebeef5;\n cursor: pointer;\n}\n.el-data-tree.is-collapsed .collapse-icon {\n transform: rotate(180deg);\n}\n.el-data-tree.is-collapsed .el-data-tree-main .body {\n opacity: 0;\n}\n.el-data-tree:hover .collapse-icon-wrapper .collapse-icon {\n opacity: 1;\n}\n.el-data-tree .collapse-icon-wrapper {\n position: absolute;\n width: 26px;\n height: 26px;\n top: 26px;\n right: -13px;\n}\n.el-data-tree .collapse-icon-wrapper .collapse-icon {\n transition: 0.3s;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: 0 0 4px #999;\n background-color: #fff;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.el-data-tree .collapse-icon-wrapper .collapse-icon svg {\n width: 1rem;\n height: 1rem;\n}\n.el-data-tree .collapse-icon-wrapper .collapse-icon:hover svg {\n opacity: 0.7;\n}\n", map: undefined, media: undefined });
};
/* scoped */
const __vue_scope_id__$1 = undefined;
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* style inject SSR */
var Component = normalizeComponent_1(
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
__vue_inject_styles__$1,
__vue_script__,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
browser,
undefined
);
// Import vue component
// the same plugin more than once,
// so calling it multiple times on the same plugin
// will install the plugin only once
Component.install = function (Vue) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
Vue.prototype.$elDataTreeOptions = options;
Vue.component(Component.name, Component);
}; // To auto-install when vue is found
var GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(Component);
} // To allow use as module (npm/webpack/etc.) export