tianheng-ui 0.0.56 → 0.0.57

package/packages/FormMaking/WidgetConfig.vue

@@ -0,0 +1,473 @@
+<template>
+  <div 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"
+      @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>
+.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;
+  }
+}
+
+/deep/ .el-form-item__label {
+  width: 100%;
+}
+
+.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 → FormMaking}/WidgetForm.vue

@@ -1,15 +1,26 @@
 <template>
-  <div class="widget-form-container">
-    <div v-if="data.list.length == 0" class="form-empty">
+  <div class="widget-form-container" ref="formContainer">
+    <!-- <div v-if="data.list.length == 0" class="form-empty">
       从左侧拖拽来添加字段
-    </div>
+    </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=":"
+      :label-suffix="data.config.labelSuffix"
       :label-position="data.config.labelPosition"
-      :label-width="data.config.labelWidth + 'px'"
+      :label-width="`${data.config.labelWidth}px`"
+      :disabled="data.config.disabled"
     >
       <draggable
+        style="height:100%"
         v-model="data.list"
         v-bind="{
           group: 'people',
@@ -21,16 +32,17 @@
         @add="handleWidgetAdd"
       >
         <transition-group name="fade" tag="div" class="widget-form-list">
-          <template v-for="(element, index) in data.list">
-            <widget-form-item
-              v-if="element && element.key"
-              :key="element.key"
-              :element="element"
-              :select.sync="selectWidget"
-              :index="index"
-              :data="data"
-            ></widget-form-item>
-          </template>
+          <widget-form-item
+            v-for="(element, elementIndex) in data.list.filter(item => {
+              return item.key;
+            })"
+            :key="elementIndex"
+            :widget="element"
+            :widgetIndex="elementIndex"
+            :widgetArray="data"
+            :config="data.config"
+            :select.sync="selectWidget"
+          ></widget-form-item>
         </transition-group>
       </draggable>
     </el-form>
@@ -40,19 +52,36 @@
 <script>
 import Draggable from "vuedraggable";
 import WidgetFormItem from "./WidgetFormItem";
+import ThEmpty from "ui/empty/index.vue";
 
 export default {
-  components: {
-    Draggable,
-    WidgetFormItem
-  },
-  props: ["data", "select"],
+  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: {
+    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 isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
@@ -118,17 +147,6 @@ export default {
 
       this.selectWidget = this.data.list[newIndex];
     }
-  },
-  watch: {
-    select(val) {
-      this.selectWidget = val;
-    },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
-    }
   }
 };
 </script>