tianheng-ui 0.1.0 → 0.1.2

package/packages/FormMaking/WidgetConfig.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="widgetConfig" v-if="show">
+    <component
+      :widget="data"
+      :config="config"
+      :remoteApis="remoteApis"
+      :is="compsData[data.type].content"
+      @events-show="handleEventDialogShow"
+      @events-edit="handleEventsCollapseClick"
+    ></component>
+
+    <th-dialog
+      title="动作设置"
+      v-model="eventsDialog.visible"
+      :modal-append-to-body="false"
+      @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
+    >
+      <div class="eventsSetting">
+        <div class="list">
+          <div class="list-header" @click="handleAddEvent">
+            <div>动作库</div>
+            <el-button type="text" icon="el-icon-plus" size="mini"
+              >添加</el-button
+            >
+          </div>
+          <div
+            class="list-item"
+            v-for="(item, index) in eventsDialog.eventScript"
+            :key="item.key"
+            @click="eventsDialog.active = item"
+          >
+            <div class="list-item-title">Function</div>
+            <div class="list-item-value">{{ item.name }}</div>
+            <i
+              class="el-icon-delete"
+              @click.stop="handleEventDialogDelete(item, index)"
+            ></i>
+          </div>
+        </div>
+        <div class="detail" v-if="eventsDialog.active">
+          <div>
+            <span>Function Name</span>
+            <el-input
+              v-model="eventsDialog.active.name"
+              placeholder="请输入动作名称"
+              size="small"
+              :disabled="
+                eventsDialog.active.name === 'mounted' ||
+                  eventsDialog.active.name === 'refresh'
+              "
+            ></el-input>
+          </div>
+          <div>
+            <div>
+              function(
+              {{
+                eventsDialog.active.name !== "mounted" &&
+                eventsDialog.active.name !== "refresh"
+                  ? "item,value"
+                  : ""
+              }}
+              ) {
+
+              <el-popover
+                placement="top-start"
+                title="可用Api"
+                width="200"
+                trigger="hover"
+              >
+                <i
+                  style="float: right;"
+                  slot="reference"
+                  class="el-icon-question"
+                ></i>
+                <div class="functions">
+                  <div>setData</div>
+                  <div>getData</div>
+                  <div>display</div>
+                  <div>hide</div>
+                </div>
+              </el-popover>
+            </div>
+            <th-code-editor
+              style="height:calc(100% - 48px)"
+              v-model="eventsDialog.active.func"
+              :completions="aceCompletions"
+              ref="codeEditor"
+            ></th-code-editor>
+            <div>}</div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="eventsDialog.visible = false"
+          >取 消</el-button
+        >
+        <el-button type="primary" size="small" @click="handleEventDialogAffirm"
+          >保 存</el-button
+        >
+      </span>
+    </th-dialog>
+  </div>
+</template>
+
+<script>
+import compsData from "./custom/register";
+import ThDialog from "ui/Dialog/index.vue";
+import ThCodeEditor from "ui/CodeEditor/index.vue";
+export default {
+  components: { ThDialog, ThCodeEditor },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    remoteApis: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      compsData: JSON.parse(JSON.stringify(compsData)),
+      validator: {
+        type: null,
+        required: null,
+        pattern: null,
+        range: null,
+        length: null
+      },
+      eventsDialog: {
+        visible: false,
+        eventScript: [],
+        active: null
+      },
+      aceCompletions: [
+        {
+          meta: "设置数据",
+          caption: "setData",
+          value: "setData({ })",
+          score: 1
+        },
+        {
+          meta: "获取数据",
+          caption: "getData",
+          value: "getData()",
+          score: 1
+        },
+        {
+          meta: "显示组件",
+          caption: "display",
+          value: "display([ ])",
+          score: 1
+        },
+        {
+          meta: "隐藏组件",
+          caption: "hide",
+          value: "hide([ ])",
+          score: 1
+        }
+      ]
+    };
+  },
+  computed: {
+    show() {
+      if (this.data && Object.keys(this.data).length > 0) {
+        return true;
+      }
+      return false;
+    }
+  },
+  created() {
+    const keys = Object.keys(this.compsData);
+    for (const key of keys) {
+      this.compsData[key].content = require(`./custom/configs/${key}`).default;
+    }
+  },
+  methods: {
+    generateRule() {
+      this.data.rules = [];
+      Object.keys(this.validator).forEach(key => {
+        if (this.validator[key]) {
+          this.data.rules.push(this.validator[key]);
+        }
+      });
+    },
+
+    validateRequired(val) {
+      if (val) {
+        this.validator.required = {
+          required: true,
+          message: `${this.data.name}必须填写`
+        };
+      } else {
+        this.validator.required = null;
+      }
+
+      this.$nextTick(() => {
+        this.generateRule();
+      });
+    },
+
+    validateDataType(val) {
+      if (!this.show) {
+        return false;
+      }
+
+      if (val) {
+        this.validator.type = {
+          type: val,
+          message: this.data.name + "格式不正确"
+        };
+      } else {
+        this.validator.type = null;
+      }
+
+      this.generateRule();
+    },
+    valiatePattern(val) {
+      if (!this.show) {
+        return false;
+      }
+
+      if (val) {
+        this.validator.pattern = {
+          pattern: val,
+          message: this.data.name + "格式不匹配"
+        };
+      } else {
+        this.validator.pattern = null;
+      }
+
+      this.generateRule();
+    },
+    handleInputNumberChange() {
+      if (this.data.options.minRows > this.data.options.maxRows) {
+        this.data.options.maxRows = this.data.options.minRows;
+      }
+    },
+    handleImguploadType(val) {
+      if (val == "picture-card") {
+        this.data.options.drag = false;
+      }
+    },
+    handleImguploadDrag(val) {
+      if (val) {
+        this.data.options.listType = "default";
+      }
+    },
+    handleEventDialogShow() {
+      this.eventsDialog = {
+        visible: true,
+        eventScript: JSON.parse(JSON.stringify(this.config.eventScript)),
+        active: null
+      };
+    },
+    handleAddEvent() {
+      const key = new Date().getTime();
+      const dic = {
+        key: key,
+        name: key,
+        func: ""
+      };
+      this.eventsDialog.eventScript.push(dic);
+      this.eventsDialog.active = dic;
+    },
+    handleEventDialogAffirm() {
+      this.config.eventScript = this.eventsDialog.eventScript;
+      this.eventsDialog = {
+        visible: false,
+        eventScript: [],
+        active: null
+      };
+    },
+    handleEventDialogDelete(item, index) {
+      this.$confirm(`确定要删除该方法 ${item.name} ?`, "", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          if (
+            this.eventsDialog.active &&
+            item.key === this.eventsDialog.active.key
+          ) {
+            this.eventsDialog.active = null;
+          }
+          this.eventsDialog.eventScript.splice(index, 1);
+        })
+        .catch();
+    },
+    handleEventsCollapseClick(eventKey) {
+      for (let i = 0; i < this.config.eventScript.length; i++) {
+        const event = this.config.eventScript[i];
+        if (event.key === eventKey) {
+          const eventScript = JSON.parse(
+            JSON.stringify(this.config.eventScript)
+          );
+          this.eventsDialog = {
+            visible: true,
+            eventScript: eventScript,
+            active: eventScript[i]
+          };
+          break;
+        }
+      }
+    }
+  },
+  watch: {
+    "data.options.isRange": function(val) {
+      if (typeof val !== "undefined") {
+        if (val) {
+          this.data.options.defaultValue = null;
+        } else {
+          if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
+            this.data.options.defaultValue = "";
+        }
+      }
+    },
+    "data.options.required": function(val) {
+      this.validateRequired(val);
+    },
+    "data.options.dataType": function(val) {
+      this.validateDataType(val);
+    },
+    "data.options.pattern": function(val) {
+      this.valiatePattern(val);
+    },
+    "data.name": function(val) {
+      if (this.data.options) {
+        this.validateRequired(this.data.options.required);
+        this.validateDataType(this.data.options.dataType);
+        this.valiatePattern(this.data.options.pattern);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.widgetConfig {
+  .remoteApis {
+    width: 100%;
+    margin-bottom: 6px;
+
+    /deep/ .el-input--prefix .el-input__inner {
+      padding-left: 85px;
+    }
+
+    /deep/ .el-input__prefix {
+      left: 0;
+      width: 75px;
+      color: #999;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  .eventsSetting {
+    height: 100%;
+    display: flex;
+    border: 1px solid #eee;
+
+    .list {
+      width: 270px;
+      min-height: 430px;
+      overflow-y: overlay;
+      border-right: 1px solid #eee;
+
+      .list-header {
+        position: sticky;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px;
+        line-height: 30px;
+        border-bottom: 1px solid #eee;
+        background: #f2f6fc;
+      }
+
+      .list-item {
+        display: flex;
+        // align-items: center;
+        margin: 5px;
+        padding: 10px;
+        border-radius: 3px;
+        border: 1px solid #dcdfe6;
+        transition: 0.25s;
+
+        .list-item-title {
+          color: var(--th-green);
+        }
+        .list-item-value {
+          flex: 1;
+          padding: 0 5px;
+        }
+        i {
+          cursor: pointer;
+        }
+      }
+
+      .list-item:hover {
+        background-color: #f2f6fc;
+      }
+    }
+
+    .detail {
+      flex: 1;
+      padding: 10px;
+
+      > div:nth-child(1) {
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-left: 10px;
+
+        /deep/ .el-input {
+          flex: 1;
+          margin-left: 10px;
+        }
+      }
+
+      > div:nth-child(1)::after {
+        content: "*";
+        position: absolute;
+        left: 0;
+        color: red;
+      }
+
+      > div:nth-child(2) {
+        height: calc(100% - 48px);
+        > div:nth-child(1) {
+          margin-bottom: 10px;
+          color: var(--th-blue);
+        }
+
+        > div:nth-child(3) {
+          margin-top: 10px;
+          color: var(--th-blue);
+        }
+      }
+    }
+  }
+  .selectableRange {
+    width: 100%;
+
+    /deep/ .el-range-separator {
+      width: 20px;
+    }
+  }
+
+  .functions {
+    span {
+      margin: 0 5px;
+    }
+  }
+}
+</style>

package/packages/FormMaking/WidgetForm.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="widget-form-container" ref="formContainer">
+    <!-- <div v-if="data.list.length == 0" class="form-empty">
+      从左侧拖拽来添加字段
+    </div> -->
+    <th-empty
+      class="form-empty"
+      v-if="data.list.length == 0"
+      :image="require('@/assets/images/notData.png')"
+      description="从左侧拖拽来添加字段"
+    ></th-empty>
+    <el-form
+      :class="{ 'form-hideLabel': data.config.hideLabel }"
+      style="margin: 0 auto;padding:5px;height:100%;"
+      :style="{ width: formWidth }"
+      :size="data.config.size"
+      :label-suffix="data.config.labelSuffix"
+      :label-position="data.config.labelPosition"
+      :label-width="`${data.config.labelWidth}px`"
+      :disabled="data.config.disabled"
+    >
+      <draggable
+        style="height:100%"
+        v-model="data.list"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @end="handleMoveEnd"
+        @add="handleWidgetAdd"
+      >
+        <transition-group name="fade" tag="div" class="widget-form-list">
+          <widget-form-item
+            v-for="(element, elementIndex) in widgetList"
+            :key="element.key"
+            :widget="element"
+            :widgetIndex="elementIndex"
+            :widgetArray="data"
+            :config="data.config"
+            :select.sync="selectWidget"
+          ></widget-form-item>
+        </transition-group>
+      </draggable>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import WidgetFormItem from "./WidgetFormItem";
+import ThEmpty from "ui/Empty/index.vue";
+
+export default {
+  components: { Draggable, WidgetFormItem, ThEmpty },
+  props: ["data", "select", "client"],
+  data() {
+    return {
+      selectWidget: this.select,
+      config: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    widgetList() {
+      return this.data.list.filter(item => {
+        return item.key;
+      });
+    },
+    formWidth() {
+      if (this.data.config.width) return this.data.config.width;
+      if (this.client === "mobile") return "375px";
+
+      return "";
+    }
+  },
+  mounted() {
+    document.body.ondrop = function(event) {
+      let s = navigator.userAgent;
+      let isFirefox =
+        typeof s === "string"
+          ? s.toLowerCase().indexOf("firefox") > -1
+          : s.indexOf("firefox") > -1;
+      if (isFirefox) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+  },
+  methods: {
+    handleMoveEnd({ newIndex, oldIndex }) {},
+    handleSelectWidget(index) {
+      this.selectWidget = this.data.list[index];
+    },
+    handleWidgetAdd(evt) {
+      const newIndex = evt.newIndex;
+      const to = evt.to;
+
+      //为拖拽到容器的元素添加唯一 key
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      let dic = JSON.parse(JSON.stringify(this.data.list[newIndex]));
+      dic.key = key;
+      dic.model = dic.type + "_" + key;
+      dic.rules = [];
+
+      this.$set(this.data.list, newIndex, dic);
+
+      // if (
+      //   this.data.list[newIndex].type === "radio" ||
+      //   this.data.list[newIndex].type === "checkbox" ||
+      //   this.data.list[newIndex].type === "select"
+      // ) {
+      //   this.$set(this.data.list, newIndex, {
+      //     ...this.data.list[newIndex],
+      //     options: {
+      //       ...this.data.list[newIndex].options,
+      //       options: this.data.list[newIndex].options.options.map(item => ({
+      //         ...item
+      //       }))
+      //     }
+      //   });
+      // }
+
+      // if (this.data.list[newIndex].type === "grid") {
+      // this.$set(
+      //   this.data.list,
+      //   newIndex,
+      //   JSON.parse(JSON.stringify(this.data.list[newIndex]))
+      // );
+      // }
+
+      // if (this.data.list[newIndex].type === "tabs") {
+      //   this.$set(this.data.list, newIndex, JSON.parse(JSON.stringify(this.data.list[newIndex])));
+      // }
+
+      // if (this.data.list[newIndex].type === "table") {
+      //   this.$set(this.data.list, newIndex, {
+      //     ...this.data.list[newIndex],
+      //     list: this.data.list[newIndex].list.map(item => ({ ...item }))
+      //   });
+      // }
+
+      this.selectWidget = this.data.list[newIndex];
+    }
+  }
+};
+</script>