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

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

@@ -0,0 +1,441 @@
+<template>
+  <es-scrollbar class="es-lowcode__bind">
+    <es-form label-width="auto" size="small" :model="models">
+      <es-collapse v-model="active">
+        <es-collapse-item name="attribute">
+          <template slot="title">
+            <span>属性</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('attributes')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <div v-if="!isAttributesEmpty">
+            <es-form-item
+              v-for="item in attributes"
+              :label="item.label"
+              :key="item.name"
+            >
+              <es-input v-model="attributeValues[item.name]" clearable @change="handleChange('attrs')">
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('attributes', item.name)"
+                ></i>
+              </es-input>
+            </es-form-item>
+          </div>
+          <es-empty v-else :image-size="60" description="暂无属性"></es-empty>
+        </es-collapse-item>
+        <es-collapse-item name="directive">
+          <template slot="title">
+            <span>指令</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('directives')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <div v-if="!isDirectivesEmpty">
+            <es-form-item
+              v-for="item in directives"
+              :label="item.label"
+              :key="item.name"
+            >
+              <es-input v-model="directiveValues[item.name]" clearable @change="handleChange('directives')">
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('directives', item.name)"
+                ></i>
+              </es-input>
+            </es-form-item>
+          </div>
+          <es-empty v-else :image-size="60" description="暂无指令"></es-empty>
+        </es-collapse-item>
+        <es-collapse-item name="event">
+          <template slot="title">
+            <span>事件</span>
+            <es-button
+              size="small"
+              type="text"
+              @click.stop="handleAdd('events')"
+              icon="es-icon-jia"
+            ></es-button>
+          </template>
+          <div v-if="!isEventsEmpty">
+            <es-form-item
+              v-for="item in events"
+              :label="item.label"
+              :key="item.name"
+            >
+              <es-input v-model="eventValues[item.name]" clearable @change="handleChange('events')">
+                <i
+                  v-if="item.custom"
+                  slot="append"
+                  class="es-icon-shanchu"
+                  @click.stop="handleDelete('events', item.name)"
+                ></i>
+              </es-input>
+            </es-form-item>
+          </div>
+          <es-empty v-else :image-size="60" description="暂无事件"></es-empty>
+        </es-collapse-item>
+      </es-collapse>
+    </es-form>
+    <es-dialog
+      :title="dialogTitle"
+      :visible.sync="visible"
+      :showScale="false"
+      width="400px"
+      height="200px"
+      @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>
+        <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: () => ({})
+    },
+    attribute: {
+      type: Array,
+      default: () => [
+        {
+          name: 'id',
+          label: 'id',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'ref',
+          label: 'ref',
+          type: 'text',
+          clearable: true
+        },
+        // {
+        //   name: 'key',
+        //   label: 'key',
+        //   type: 'text',
+        //   clearable: true
+        // },
+        {
+          name: 'slot',
+          label: 'slot',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'class',
+          label: 'class',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'style',
+          label: 'style',
+          type: 'text',
+          clearable: true
+        }
+      ]
+    },
+    directive: {
+      type: Array,
+      default: () => [
+        {
+          name: 'v-model',
+          label: 'v-model',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'v-show',
+          label: 'v-show',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'v-text',
+          label: 'v-text',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'v-for',
+          label: 'v-for',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'v-if',
+          label: 'v-if',
+          type: 'text',
+          clearable: true
+        }
+      ]
+    },
+    event: {
+      type: Array,
+      default: () => [
+        {
+          name: 'change',
+          label: 'change',
+          type: 'text',
+          clearable: true
+        },
+        {
+          name: 'click',
+          label: 'click',
+          type: 'text',
+          clearable: true
+        }
+      ]
+    }
+  },
+
+  data() {
+    return {
+      /**
+       * 属性
+       */
+      attributes: this.attribute,
+      /**
+       * 指令
+       */
+      directives: this.directive,
+      /**
+       * 事件
+       */
+      events: this.event,
+      /**
+       * 属性值
+       */
+      attributeValues: {},
+      /**
+       * 指令值
+       */
+      directiveValues: {},
+      /**
+       * 事件值
+       */
+      eventValues: {},
+      /**
+       * 活动项
+       */
+      active: ['attribute', 'directive', 'event'],
+      visible: false,
+      /**
+       * 新增属性值
+       */
+      value: {
+        key: '',
+        value: ''
+      },
+      /**
+       * 新增属性值规则
+       */
+      rules: { required: true, message: '请输入属性名', trigger: 'blur' },
+      /**
+       * 新增属性值类型
+       */
+      type: ''
+    };
+  },
+
+  computed: {
+    /**
+     * 模型数据
+     */
+    models() {
+      return {
+        ...this.attributeValues,
+        ...this.directiveValues,
+        ...this.eventValues
+      };
+    },
+    /**
+     * 对话框标题
+     */
+    dialogTitle() {
+      const titleMap = {
+        attributes: '添加自定义属性',
+        directives: '添加自定义指令',
+        events: '添加自定义事件'
+      };
+      return titleMap[this.type] || '添加';
+    },
+    /**
+     * 属性是否为空
+     */
+    isAttributesEmpty() {
+      return this.attributes.length === 0;
+    },
+    /**
+     * 指令是否为空
+     */
+    isDirectivesEmpty() {
+      return this.directives.length === 0;
+    },
+    /**
+     * 事件是否为空
+     */
+    isEventsEmpty() {
+      return this.events.length === 0;
+    }
+  },
+
+  watch: {
+    /**
+     * 监听 model prop 变化（仅用于切换组件时的初始化同步）
+     */
+    model: {
+      handler(val) {
+        this.attributeValues = val.attrs || {};
+        this.directiveValues = val.directives || {};
+        this.eventValues = val.events || {};
+      },
+      immediate: true
+    },
+    attribute: {
+      handler(val) {
+        this.attributes = val;
+      },
+      deep: true
+    },
+    directive: {
+      handler(val) {
+        this.directives = val;
+      },
+      deep: true
+    },
+    event: {
+      handler(val) {
+        this.events = val;
+      },
+      deep: true
+    }
+  },
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    /**
+     * 处理输入框内容变更，根据分类通过 change 事件通知父组件
+     * @param {String} category - 变更字段所属分类（attrs/directives/events）
+     */
+    handleChange(category) {
+      const emitMap = {
+        attrs: 'attributeValues',
+        directives: 'directiveValues',
+        events: 'eventValues'
+      };
+      const dataKey = emitMap[category];
+      if (dataKey) {
+        this.$emit('change', { [category]: { ...this[dataKey] } });
+      }
+    },
+    /**
+     * 处理添加事件
+     */
+    handleAdd(type) {
+      this.type = type;
+      this.value = { key: '', value: '' };
+      this.visible = true;
+    },
+    /**
+     * 处理关闭对话框
+     */
+    handleClose() {
+      this.$refs.keyRef.resetFields();
+      this.value.key = '';
+      this.value.value = '';
+    },
+    /**
+     * 处理删除自定义字段
+     */
+    handleDelete(type, name) {
+      this.$confirm('确认删除该字段?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          // 删除字段定义
+          const index = this[type].findIndex((item) => item.name === name);
+          if (index > -1) {
+            this[type].splice(index, 1);
+          }
+          // 删除对应的值
+          const targetKey =
+            type === 'attributes'
+              ? 'attributeValues'
+              : type === 'directives'
+              ? 'directiveValues'
+              : 'eventValues';
+          this.$delete(this[targetKey], name);
+        })
+        .catch(() => {});
+    },
+    /**
+     * 处理提交事件
+     */
+    handleSubmit() {
+      this.$refs.keyRef.validate((valid) => {
+        if (valid) {
+          const { key, value } = this.value;
+          // 添加字段定义
+          this[this.type].push({
+            name: key,
+            label: key,
+            type: 'text',
+            custom: true
+          });
+          // 根据类型存储到对应的值对象
+          const targetKey =
+            this.type === 'attributes'
+              ? 'attributeValues'
+              : this.type === 'directives'
+              ? 'directiveValues'
+              : 'eventValues';
+          this.$set(this[targetKey], key, value);
+          // 触发值变化事件
+          this.$emit('change', {
+            type: this.type.replace('s', ''),
+            name: key,
+            value: value
+          });
+          this.visible = false;
+        }
+      });
+    }
+  }
+};
+</script>