368 lines
9.0 KiB
JavaScript
368 lines
9.0 KiB
JavaScript
/*
|
||
* XmlDigitalTeaching v0.0.1
|
||
* Copyright ©Tue May 27 2025 20:10:29 GMT+0800 (中国标准时间) smile
|
||
* Released under the ISC License.
|
||
*/
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
//
|
||
|
||
// import '../block.scss'
|
||
var script = {
|
||
name: 'XmlCatalogRender',
|
||
components: {},
|
||
inject: ['getCatalogList'],
|
||
props: {
|
||
//模式：preview 预览 (默认)，editor 编辑
|
||
mode: {
|
||
type: String,
|
||
default: function () {
|
||
return 'preview';
|
||
}
|
||
},
|
||
//属性中传递过来的块儿数据
|
||
pBlockData: {},
|
||
//块儿数据名
|
||
blockDataName: String,
|
||
//页面类型，取值h5、pc、pad
|
||
pageType: {
|
||
type: String,
|
||
default: 'h5'
|
||
},
|
||
//当前所处组的规则
|
||
currentRule: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
},
|
||
ruleIndex: Number,
|
||
extendParams: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
blockId: `blockId${Math.random()}`,
|
||
//当前块儿数据，一般用不到，因为一般的块儿中不会在块儿内更改数据
|
||
blockData: {},
|
||
//属性组件名
|
||
propertyComponentsName: 'xml-catalog-property',
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'label'
|
||
},
|
||
filteredTree: []
|
||
};
|
||
},
|
||
computed: {
|
||
catalogList() {
|
||
return this.getCatalogList().data;
|
||
}
|
||
},
|
||
watch: {
|
||
pBlockData: {
|
||
handler(newValue) {
|
||
this.$nextTick(() => {
|
||
this.blockData = Object.assign({}, this.blockData, newValue);
|
||
this.$forceUpdate();
|
||
// this.ebookSetList=Object.assign({},this.blockData.ebookSetList);
|
||
});
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
},
|
||
catalogList: {
|
||
handler(newValue) {
|
||
// this.$nextTick(() => {
|
||
// this.$refs.tree.filter('unexpected')
|
||
// })
|
||
let origin = newValue || [];
|
||
const filterMenu = menuList => {
|
||
return menuList.filter(item => {
|
||
return item.hiddenFlag !== '1';
|
||
}).map(item => {
|
||
item = Object.assign({}, item);
|
||
if (item.children) {
|
||
item.children = filterMenu(item.children);
|
||
}
|
||
return item;
|
||
});
|
||
};
|
||
this.filteredTree = filterMenu(origin);
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
created() {
|
||
// this.blockData = Object.assign( this.blockData,this.pBlockData)
|
||
},
|
||
methods: {
|
||
// 此方法必须要，用户注册块儿点击事件
|
||
blockClick() {
|
||
this.$emit('blockclick', {
|
||
blockData: this.blockData,
|
||
dataName: this.blockDataName,
|
||
propertyComponentsName: this.propertyComponentsName,
|
||
blockId: this.blockId,
|
||
ruleIndex: this.ruleIndex
|
||
});
|
||
},
|
||
nodeClick(data, node) {
|
||
this.$EventBus.$emit('treeNodeClick', {
|
||
data,
|
||
node
|
||
});
|
||
},
|
||
filterNode(value, data) {
|
||
// if (!value) return true;
|
||
return data.hiddenFlag !== '1';
|
||
}
|
||
}
|
||
};
|
||
|
||
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.
|
||
const 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;
|
||
}
|
||
let hook;
|
||
if (moduleIdentifier) {
|
||
// server build
|
||
hook = function (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 (context) {
|
||
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
||
} : function (context) {
|
||
style.call(this, createInjector(context));
|
||
};
|
||
}
|
||
if (hook) {
|
||
if (options.functional) {
|
||
// register for functional component in vue file
|
||
const originalRender = options.render;
|
||
options.render = function renderWithStyleInjection(h, context) {
|
||
hook.call(context);
|
||
return originalRender(h, context);
|
||
};
|
||
} else {
|
||
// inject component registration as beforeCreate hook
|
||
const existing = options.beforeCreate;
|
||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||
}
|
||
}
|
||
return script;
|
||
}
|
||
|
||
/* script */
|
||
const __vue_script__ = script;
|
||
/* template */
|
||
var __vue_render__ = function () {
|
||
var _vm = this;
|
||
var _h = _vm.$createElement;
|
||
var _c = _vm._self._c || _h;
|
||
return _c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-show-catalog xml-group-item",
|
||
class: "xml-catalog-container-" + _vm.pageType,
|
||
attrs: { id: _vm.blockId },
|
||
on: { click: _vm.blockClick },
|
||
},
|
||
[
|
||
_c("el-tree", {
|
||
ref: "tree",
|
||
class: "preview-tree-box-" + _vm.pageType,
|
||
staticStyle: { "margin-top": "0px" },
|
||
attrs: {
|
||
id: "built-in-tree",
|
||
draggable: _vm.blockData.draggable,
|
||
"default-expand-all": true,
|
||
"highlight-current": "",
|
||
data: _vm.filteredTree,
|
||
"node-key": "id",
|
||
props: _vm.defaultProps,
|
||
"filter-node-method": _vm.filterNode,
|
||
"expand-on-click-node": false,
|
||
},
|
||
on: { "node-click": _vm.nodeClick },
|
||
scopedSlots: _vm._u([
|
||
{
|
||
key: "default",
|
||
fn: function (ref) {
|
||
var node = ref.node;
|
||
var data = ref.data;
|
||
return _c("div", { staticClass: "catalog-node-label" }, [
|
||
data.uploadFileUrl
|
||
? _c("img", {
|
||
staticStyle: { width: "15px", height: "15px" },
|
||
attrs: { src: data.uploadFileUrl, alt: "" },
|
||
})
|
||
: _vm._e(),
|
||
_vm._v(" "),
|
||
_c(
|
||
"div",
|
||
{
|
||
class: ["node-label", node.expanded ? "expanded-node" : ""],
|
||
},
|
||
[_vm._v(_vm._s(node.label))]
|
||
),
|
||
])
|
||
},
|
||
},
|
||
]),
|
||
}),
|
||
],
|
||
1
|
||
)
|
||
};
|
||
var __vue_staticRenderFns__ = [];
|
||
__vue_render__._withStripped = true;
|
||
|
||
/* style */
|
||
const __vue_inject_styles__ = undefined;
|
||
/* scoped */
|
||
const __vue_scope_id__ = "data-v-d8778466";
|
||
/* module identifier */
|
||
const __vue_module_identifier__ = undefined;
|
||
/* functional template */
|
||
const __vue_is_functional_template__ = false;
|
||
/* style inject */
|
||
|
||
/* style inject SSR */
|
||
|
||
/* style inject shadow dom */
|
||
|
||
|
||
|
||
const __vue_component__ = /*#__PURE__*/normalizeComponent(
|
||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||
__vue_inject_styles__,
|
||
__vue_script__,
|
||
__vue_scope_id__,
|
||
__vue_is_functional_template__,
|
||
__vue_module_identifier__,
|
||
false,
|
||
undefined,
|
||
undefined,
|
||
undefined
|
||
);
|
||
|
||
let componentNamespace = 'xml';
|
||
// 组件前缀命名只能更新一次，防止重复执行修改组件注册出错
|
||
let isUpdated = false;
|
||
function createNamespace(name, {
|
||
prefix,
|
||
isUnPrefix
|
||
}) {
|
||
let useNamespace;
|
||
if (!isUpdated) {
|
||
isUpdated = true;
|
||
useNamespace = prefix || componentNamespace; // 更改前缀
|
||
}
|
||
if (prefix) {
|
||
if (name.indexOf(componentNamespace) === 0) {
|
||
return name.replace(componentNamespace, prefix);
|
||
}
|
||
return useNamespace.charAt(0).toUpperCase() + useNamespace.substr(1) + name;
|
||
}
|
||
if (name.indexOf(componentNamespace) === 0 || name.indexOf(componentNamespace.charAt(0).toUpperCase()) === 0) {
|
||
return name.charAt(0).toUpperCase() + name.substr(1);
|
||
}
|
||
return isUnPrefix ? name.charAt(0).toLowerCase() + name.substr(1) : componentNamespace + name.charAt(0).toUpperCase() + name.substr(1);
|
||
}
|
||
|
||
// 提交
|
||
__vue_component__.install = (Vue, options = {}) => {
|
||
Vue.component(createNamespace('catalog-render', {
|
||
prefix: options.prefix
|
||
}), __vue_component__);
|
||
};
|
||
|
||
export { __vue_component__ as default };
|