|
@@ -5,61 +5,69 @@ import CompleteButton from '@ER/formEditor/components/CompleteButton.vue'
|
|
|
import hooks from '@ER/hooks'
|
|
|
import _ from 'lodash-es'
|
|
|
export default defineComponent({
|
|
|
- name: 'Canves',
|
|
|
- inheritAttrs: false,
|
|
|
- customOptions: {},
|
|
|
- setup () {
|
|
|
- const ER = inject('Everright')
|
|
|
- const ns = hooks.useNamespace('Canves')
|
|
|
- const {
|
|
|
- state,
|
|
|
- setSelection,
|
|
|
- isEditModel,
|
|
|
- isPc
|
|
|
- } = hooks.useTarget()
|
|
|
- const form = ref('')
|
|
|
- const handleClick = (e) => {
|
|
|
- setSelection('root')
|
|
|
- }
|
|
|
- const renderContent = () => {
|
|
|
- const TagComponent = resolveComponent(unref(isPc) ? 'el-form' : 'van-form')
|
|
|
- const typeProps = hooks.useProps(state, state, unref(isPc), true)
|
|
|
- const Layout = (<LayoutDragGable data-layout-type={'root'} class={[unref(isEditModel) && ns.e('wrap')]} data={state.store} parent={state.store} isRoot></LayoutDragGable>)
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <TagComponent ref={form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
|
|
|
- {
|
|
|
- unref(isEditModel) ? Layout : Layout
|
|
|
- }
|
|
|
- </TagComponent>
|
|
|
- {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={form}/>}
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- return () => {
|
|
|
- return (
|
|
|
- <ElMain
|
|
|
- class={
|
|
|
- [
|
|
|
- ns.b(),
|
|
|
- isEditModel.value && ns.e('editModel'),
|
|
|
- !unref(isPc) && ns.e('mobile'),
|
|
|
- !unref(isPc) && ns.e(`mobile_layoutType${ER.props.layoutType}`)
|
|
|
- // ER.props.layoutType === 1 && ns.e('layoutType1')
|
|
|
- ]}>
|
|
|
- {unref(isEditModel)
|
|
|
- ? (
|
|
|
- <div class={[ns.e('container')]}>
|
|
|
- <el-scrollbar ref={ER.canvesScrollRef}>
|
|
|
- <div class={[ns.e('subject')]}>
|
|
|
- {renderContent()}
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
- )
|
|
|
- : renderContent()}
|
|
|
- </ElMain>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
+ name: 'Canves',
|
|
|
+ inheritAttrs: false,
|
|
|
+ customOptions: {},
|
|
|
+ setup(props, { expose }) {
|
|
|
+ const ER = inject('Everright')
|
|
|
+ const ns = hooks.useNamespace('Canves')
|
|
|
+ const { state, setSelection, isEditModel, isPc } = hooks.useTarget()
|
|
|
+ const form = ref('')
|
|
|
+ const handleClick = e => {
|
|
|
+ setSelection('root')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 拿到子组件的表单实例
|
|
|
+ const getFormValidateRef = () => {
|
|
|
+ return form.value
|
|
|
+ }
|
|
|
+
|
|
|
+ expose({
|
|
|
+ getFormValidateRef
|
|
|
+ })
|
|
|
+ const renderContent = () => {
|
|
|
+ const TagComponent = resolveComponent(unref(isPc) ? 'el-form' : 'van-form')
|
|
|
+ const typeProps = hooks.useProps(state, state, unref(isPc), true)
|
|
|
+ const Layout = (
|
|
|
+ <LayoutDragGable
|
|
|
+ data-layout-type={'root'}
|
|
|
+ class={[unref(isEditModel) && ns.e('wrap')]}
|
|
|
+ data={state.store}
|
|
|
+ parent={state.store}
|
|
|
+ isRoot
|
|
|
+ ></LayoutDragGable>
|
|
|
+ )
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <TagComponent ref={form} onClick={unref(isEditModel) && handleClick} {...typeProps.value}>
|
|
|
+ {unref(isEditModel) ? Layout : Layout}
|
|
|
+ </TagComponent>
|
|
|
+ {!unref(isEditModel) && !_.isEmpty(state.config) && ER.props.isShowCompleteButton && <CompleteButton handle={form} />}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return () => {
|
|
|
+ return (
|
|
|
+ <ElMain
|
|
|
+ class={[
|
|
|
+ ns.b(),
|
|
|
+ isEditModel.value && ns.e('editModel'),
|
|
|
+ !unref(isPc) && ns.e('mobile'),
|
|
|
+ !unref(isPc) && ns.e(`mobile_layoutType${ER.props.layoutType}`)
|
|
|
+ // ER.props.layoutType === 1 && ns.e('layoutType1')
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {unref(isEditModel) ? (
|
|
|
+ <div class={[ns.e('container')]}>
|
|
|
+ <el-scrollbar ref={ER.canvesScrollRef}>
|
|
|
+ <div class={[ns.e('subject')]}>{renderContent()}</div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ renderContent()
|
|
|
+ )}
|
|
|
+ </ElMain>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|