eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/lowcode/src/aside.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="es-lowcode__aside" :style="styles">
+    <div  class="es-lowcode__aside--handle" v-show="!hide" @click.self="handleClick" ></div>
+    <es-tabs
+      tab-position="left"
+      type="card"
+      class="es-lowcode__aside--tabs"
+      v-model="active"
+      @tab-click="handleTabClick"
+    >
+      <es-tab-pane name="page">
+        <template slot="label">
+          <es-tooltip
+            class="box-item"
+            effect="dark"
+            content="页面管理"
+            placement="right"
+          >
+            <i class="es-icon-page" />
+          </es-tooltip>
+        </template>
+        <div class="es-lowcode__aside--title">
+          页面管理
+          <es-button
+            class="es-lowcode__aside--add"
+            type="text"
+            @click="handleAddPage"
+            >+</es-button
+          >
+        </div>
+        <es-dialog
+          title="新增页面"
+          width="500px"
+          height="280px"
+          :visible.sync="visible"
+          :close-on-click-modal="false"
+          @close="handleClose"
+        >
+          <es-form
+            class="es-lowcode__add-page-form"
+            :model="form"
+            :rules="rules"
+            ref="formRef"
+            label-width="80px"
+          >
+            <es-form-item label="名称" prop="name">
+              <es-input v-model="form.name" placeholder="请输入名称" />
+            </es-form-item>
+            <es-form-item label="描述" prop="description">
+              <es-input
+                type="textarea"
+                v-model="form.description"
+                placeholder="请输入描述"
+              />
+            </es-form-item>
+            <div class="es-lowcode__aside--form-btn">
+              <es-button type="primary" @click="submitForm">确定</es-button>
+            </div>
+          </es-form>
+        </es-dialog>
+        <Pages :pages="pages" v-if="pages.length" />
+        <div class="es-lowcode__aside--empty" v-else>暂无数据</div>
+      </es-tab-pane>
+      <es-tab-pane name="component">
+        <template slot="label">
+          <es-tooltip
+            class="box-item"
+            effect="dark"
+            content="组件库"
+            placement="right"
+          >
+            <i class="es-icon-zujian" />
+          </es-tooltip>
+        </template>
+        <div class="es-lowcode__aside--title">组件库</div>
+        <Modules :contents="modules" />
+      </es-tab-pane>
+      <es-tab-pane name="ui">
+        <template slot="label">
+          <es-tooltip
+            class="box-item"
+            effect="dark"
+            content="UI库"
+            placement="right"
+          >
+            <i class="es-icon-component" />
+          </es-tooltip>
+        </template>
+        <div class="es-lowcode__aside--title">UI库</div>
+        <Modules :contents="library" />
+      </es-tab-pane>
+      <es-tab-pane name="template">
+        <template slot="label">
+          <es-tooltip
+            class="box-item"
+            effect="dark"
+            content="模板"
+            placement="right"
+          >
+            <i class="es-icon-template" />
+          </es-tooltip>
+        </template>
+        <div class="es-lowcode__aside--title">模板</div>
+      </es-tab-pane>
+      <es-tab-pane name="history">
+        <template slot="label">
+          <es-tooltip
+            class="box-item"
+            effect="dark"
+            content="历史记录"
+            placement="right"
+          >
+            <i class="es-icon-lishijilu" />
+          </es-tooltip>
+        </template>
+        <div class="es-lowcode__aside--title">历史记录</div>
+      </es-tab-pane>
+    </es-tabs>
+  </div>
+</template>
+
+<script>
+import Pages from './pages.vue';
+import Modules from './modules.vue';
+import { uuid } from 'eoss/src/utils/util.js';
+import bus from 'eoss/src/utils/bus.js';
+
+export default {
+  name: 'Aside',
+  components: {
+    Pages,
+    Modules
+  },
+  props: {
+    // 页面列表
+    pages: {
+      type: Array,
+      default: () => []
+    },
+    // 组件库数据
+    components: {
+      type: Array,
+      default: () => []
+    },
+    // 组件库数据
+    library: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    // 分页数据列表
+    modules() {
+      return [
+        { name: 'component', label: '组件', children: this.components },
+        {
+          name: 'dom',
+          label: '元素',
+          collapse: true,
+          children: [
+            {
+              name: 'html',
+              label: 'HTML',
+              children: [
+                { name: 'h1', label: 'h1', description: '大标题' },
+                { name: 'h2', label: 'h2', description: '中标题' },
+                { name: 'h3', label: 'h3', description: '小标题' },
+                { name: 'div', label: 'div', description: '容器' },
+                {
+                  name: 'span',
+                  label: 'span',
+                  component: 'span',
+                  description: '内联'
+                },
+                { name: 'a', label: 'a', description: '链接' },
+                { name: 'img', label: 'img', description: '图片' },
+                { name: 'p', label: 'p', description: '段落' }
+              ]
+            },
+            {
+              name: 'special',
+              label: '特殊元素',
+              children: [
+                {
+                  name: 'component',
+                  label: 'component',
+                  description: '动态组件'
+                },
+                {
+                  name: 'slot',
+                  label: 'slot',
+                  description: '插槽'
+                }
+              ]
+            },
+            {
+              name: 'vue',
+              label: 'Vue组件',
+              children: [
+                {
+                  name: 'Transition',
+                  label: 'Transition',
+                  description: '过渡动画'
+                },
+                {
+                  name: 'TransitionGroup',
+                  label: 'TransitionGroup',
+                  description: '过渡动画组'
+                },
+                {
+                  name: 'KeepAlive',
+                  label: 'KeepAlive',
+                  description: '缓存组件'
+                },
+                {
+                  name: 'RouterLink',
+                  label: 'RouterLink',
+                  description: '路由链接'
+                },
+                {
+                  name: 'RouterView',
+                  label: 'RouterView',
+                  description: '路由视图'
+                }
+              ]
+            }
+          ]
+        }
+      ];
+    }
+  },
+  watch: {
+    /**
+     * 监听hide变化，更新aside宽度
+     */
+    hide(val) {
+      this.styles.width = val ? '49px' : '400px';
+    }
+  },
+  data() {
+    return {
+      styles: {
+        width: '400px'
+      },
+      hide: false,
+      // 弹窗状态
+      visible: false,
+      // 当前激活标签
+      active: 'page',
+      // 表单数据
+      form: {
+        name: '',
+        description: ''
+      },
+      // 表单校验规则
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+        //description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
+      }
+    };
+  },
+  methods: {
+    /**
+     * 处理点击事件
+     */
+    handleClick() {
+      this.hide = true;
+    },
+    /**
+     * 处理标签点击事件
+     */
+    handleTabClick() {
+      this.hide = false;
+    },
+    /**
+     * 处理新增页面事件
+     */
+    /**
+     * 处理新增页面事件
+     */
+    handleAddPage() {
+      const page = localStorage.getItem('pageList');
+      if (page) {
+        this.$message.warning('请先保存当前页面!');
+        return;
+      }
+      this.visible = true;
+    },
+    /**
+     * 关闭弹窗
+     */
+    handleClose() {
+      this.$refs.formRef.resetFields();
+    },
+    /**
+     * 提交表单
+     */
+    submitForm() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.visible = false;
+          const id = `page_${uuid()}`;
+          bus.$emit('addPage', {
+            id: id, // id
+            title: '', // 页面标题
+            name: this.form.name, // 名称
+            description: this.form.description, // 描述
+            version: '1.0', // 版本
+            dependencies: [], // 依赖组件
+            import: [], // 引入组件
+            provide: {}, // 提供数据,
+            inject: {}, // 注入数据,
+            route: '', // 路由
+            props: {}, // props
+            methods: {}, // 方法
+            emits: [], // 事件
+            data: {}, // 数据
+            computed: {}, // 计算属性
+            created: {}, // 创建
+            watch: {}, // 监听
+            mounted: {}, // 挂载
+            unmounted: {}, //vue3
+            destroyed: {}, //vue2
+            components: [] // 子组件
+          });
+        }
+      });
+    }
+  }
+};
+</script>