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

package/packages/lowcode/src/attribute/dependency.vue

@@ -0,0 +1,325 @@
+<template>
+  <es-scrollbar class="es-lowcode__dependency">
+    <es-form label-width="auto" size="small" :model="models">
+      <es-collapse v-model="active">
+        <es-collapse-item name="inject">
+          <template slot="title">
+            <span>inject</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('inject')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in inject"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('inject')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="provide">
+          <template slot="title">
+            <span>provide</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('provide')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in provide"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('provide')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="component">
+          <template slot="title">
+            <span>components</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('component')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in component"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('component')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="utils">
+          <template slot="title">
+            <span>utils</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('utils')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in utils"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('utils')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="api">
+          <template slot="title">
+            <span>api</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('api')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in api"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('api')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="css">
+          <template slot="title">
+            <span>css</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('css')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in css"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('css')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="js">
+          <template slot="title">
+            <span>js</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('js')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in js"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('js')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+        <es-collapse-item name="image">
+          <template slot="title">
+            <span>image</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('image')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <es-form-item
+            v-for="item in image"
+            :label="item.label"
+            :key="item.name"
+          >
+            <es-input v-model="models[item.name]" clearable @change="handleChange('image')"></es-input>
+          </es-form-item>
+        </es-collapse-item>
+      </es-collapse>
+    </es-form>
+    <es-dialog
+      title="添加自定义属性"
+      :visible.sync="visible"
+      :showScale="false"
+      width="400px"
+      height="200px"
+      @close="handleClose"
+    >
+      <es-form :model="value" label-width="80px" size="small" ref="keyRef" :rules="rules">
+        <es-form-item label="属性名" prop="key">
+          <es-input v-model="value.key"></es-input>
+        </es-form-item>
+        <es-form-item label="属性值" prop="value">
+          <es-input v-model="value.value"></es-input>
+        </es-form-item>
+        <div class="es-lowcode__property--dialog-footer">
+          <es-button size="small" @click="visible = false">取消</es-button>
+          <es-button size="small" @click="handleSubmit" type="primary"
+            >确定</es-button
+          >
+        </div>
+      </es-form>
+    </es-dialog>
+  </es-scrollbar>
+</template>
+<script>
+export default {
+  name: 'Bind',
+
+  components: {},
+
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  data() {
+    return {
+      active: ['inject', 'provide', 'component', 'utils', 'api', 'css', 'js', 'image'],
+      inject: [],
+      provide: [],
+      component: [],
+      utils: [],
+      apis: [],
+      css: [],
+      js: [],
+      image: [],
+      visible: false,
+      injectValues: {},
+      provideValues: {},
+      componentValues: {},
+      utilsValues: {},
+      apisValues: {},
+      cssValues: {},
+      jsValues: {},
+      imageValues: {},
+      /**
+       * 新增属性值
+       */
+      value: {},
+      /**
+       * 新增属性值规则
+       */
+      rules: {
+        key: [{ required: true, message: '请输入属性名', trigger: 'blur' }]
+      },
+      /**
+       * 新增属性值类型
+       */
+      type: ''
+    };
+  },
+
+  computed: {
+    models() {
+      return {
+        ...this.injectValues,
+        ...this.provideValues,
+        ...this.componentValues,
+        ...this.utilsValues,
+        ...this.apisValues,
+        ...this.cssValues,
+        ...this.jsValues,
+        ...this.imageValues
+      };
+    }
+  },
+
+  watch: {
+    /**
+     * 监听 model prop 变化（仅用于切换组件时的初始化同步）
+     */
+    model: {
+      handler(val) {
+        this.injectValues = val.inject || {};
+        this.provideValues = val.provide || {};
+        this.componentValues = val.components || {};
+        this.utilsValues = val.util || {};
+        this.apisValues = val.api || {};
+        this.cssValues = val.css || {};
+        this.jsValues = val.js || {};
+        this.imageValues = val.image || {};
+      },
+      immediate: true
+    }
+  },
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    /**
+     * 处理输入框内容变更，根据分类通过 change 事件通知父组件
+     * @param {String} category - 变更字段所属分类
+     */
+    handleChange(category) {
+      const emitMap = {
+        inject: 'injectValues',
+        provide: 'provideValues',
+        component: 'componentValues',
+        utils: 'utilsValues',
+        api: 'apisValues',
+        css: 'cssValues',
+        js: 'jsValues',
+        image: 'imageValues'
+      };
+      // 分类名与 emit key 的映射（部分不同）
+      const emitKeyMap = {
+        inject: 'inject',
+        provide: 'provide',
+        component: 'components',
+        utils: 'util',
+        api: 'api',
+        css: 'css',
+        js: 'js',
+        image: 'image'
+      };
+      const dataKey = emitMap[category];
+      if (dataKey) {
+        this.$emit('change', { [emitKeyMap[category]]: { ...this[dataKey] } });
+      }
+    },
+    /**
+     * 处理添加事件
+     */
+    handleAdd(type) {
+      this.type = type;
+      this.visible = true;
+    },
+    handleClose() {
+      this.$refs.keyRef.resetFields();
+      this.value.key = '';
+    },
+    /**
+     * 处理提交事件
+     */
+    handleSubmit() {
+      this.$refs.keyRef.validate((valid) => {
+        if (valid) {
+          this[this.type].push({
+            name: this.value.key,
+            label: this.value.key,
+            type: 'text'
+          });
+          this.$set(this.models, this.value.key, '');
+          this.visible = false;
+        }
+      });
+    }
+  }
+};
+</script>

package/packages/lowcode/src/attribute/function.vue

@@ -0,0 +1,112 @@
+<template>
+  <es-scrollbar class="es-lowcode__events">
+    <es-form label-width="auto" size="small" :model="models">
+      <es-form-item
+        v-for="item in contents"
+        :label="item.label"
+        :key="item.name"
+      >
+        <es-input v-model="models[item.name]" clearable @change="handleChange"></es-input>
+      </es-form-item>
+
+      <es-button size="small" @click.stop="visible = true"
+        >添加事件</es-button
+      >
+    </es-form>
+    <es-dialog
+      title="添加自定义事件"
+      :visible.sync="visible"
+      :showScale="false"
+      width="400px"
+      height="156px"
+      @close="handleClose"
+    >
+      <es-form :model="value" label-width="80px" size="small" ref="keyRef">
+        <es-form-item label="事件名" :rules="rules" prop="key">
+          <es-input v-model="value.key"></es-input>
+        </es-form-item>
+        <div class="es-lowcode__property--dialog-footer">
+          <es-button size="small" @click="visible = false">取消</es-button>
+          <es-button size="small" @click="handleSubmit" type="primary"
+            >确定</es-button
+          >
+        </div>
+      </es-form>
+    </es-dialog>
+  </es-scrollbar>
+</template>
+
+<script>
+export default {
+  name: 'Functions',
+
+  components: {},
+
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  data() {
+    return {
+      models: {},
+      contents: [],
+      visible: false,
+      value: {},
+      rules: {
+        key: [{ required: true, message: '请输入事件名', trigger: 'blur' }]
+      }
+    };
+  },
+
+  computed: {},
+
+  watch: {
+    /**
+     * 监听 model prop 变化（仅用于切换组件时的初始化同步）
+     */
+    model: {
+      handler(val) {
+        this.models = val.function || {};
+      },
+      immediate: true
+    }
+  },
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    /**
+     * 处理输入框内容变更，通过 change 事件通知父组件
+     */
+    handleChange() {
+      this.$emit('change', { function: this.models });
+    },
+    handleClose() {
+      this.$refs.keyRef.resetFields();
+      this.value.key = '';
+    },
+    /**
+     * 处理提交事件
+     */
+    handleSubmit() {
+      this.$refs.keyRef.validate((valid) => {
+        if (valid) {
+          this.contents.push({
+            name: this.value.key,
+            label: this.value.key,
+            type: 'text'
+          });
+          this.$set(this.models, this.value.key, '');
+          this.visible = false;
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped></style>