tianheng-ui 0.1.10 → 0.1.12

package/packages/FormMaking/custom/items/table_pro.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-table
+    style="width:100%"
+    :data="dataModel"
+    :stripe="widget.options.stripe"
+    :show-header="widget.options.showHeader"
+    :highlight-current-row="widget.options.highlightCurrentRow"
+    :border="widget.options.border"
+  >
+    <el-table-column
+      v-if="widget.options.isSerial"
+      label="序号"
+      type="index"
+      width="50"
+      align="center"
+    >
+    </el-table-column>
+    <el-table-column
+      v-for="element in widget.options.columns"
+      :key="`table_${element.key}`"
+      :label="element.name"
+      :prop="element.model"
+      :width="element.options.width"
+    >
+      <template slot-scope="scope">
+        <generate-form-item
+          :models.sync="dataModel[scope.$index]"
+          :widget="element"
+          :remote="remote"
+          :config="config"
+          :prop="`${prop}.${scope.$index}.${element.model}`"
+          :slotKeys="slotKeys"
+          :componentsData="componentsData"
+        >
+          <template v-for="name in slotKeys" :slot="name">
+            <slot :name="name" />
+          </template>
+        </generate-form-item>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-if="widget.options.isDelete"
+      fixed="right"
+      label="操作"
+      width="60"
+      align="center"
+    >
+      <template slot-scope="scope">
+        <el-button
+          style="color:#F56C6C"
+          type="text"
+          @click.native.prevent="handleTableDelete(scope.$index)"
+        >
+          移除
+        </el-button>
+      </template>
+    </el-table-column>
+    <template v-if="widget.options.isAdd" slot="append">
+      <div
+        style="text-align: center;"
+        :style="{
+          borderTop:
+            dataModel && dataModel.length != 0 ? '' : '1px solid #EBEEF5'
+        }"
+      >
+        <el-button
+          type="text"
+          :disabled="widget.options.disabled"
+          @click="handleTableAdd"
+          >新增</el-button
+        >
+      </div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import GenerateFormItem from "../../GenerateFormItem.vue";
+export default {
+  components: { GenerateFormItem },
+  mixins: [itemsComponent],
+  props: ["models", "remote", "prop", "slotKeys", "componentsData"],
+  data() {
+    return {};
+  },
+
+  methods: {
+    handleTableAdd() {
+      let dic = {};
+      this.widget.options.columns.forEach(item => {
+        if (item.type === "grid") {
+          for (let i = 0; i < item.options.columns.length; i++) {
+            const element = item.options.columns[i];
+            for (let j = 0; j < element.options.columns.length; j++) {
+              const element2 = element.options.columns[j];
+              dic[element2.model] = element2.options.defaultValue;
+            }
+          }
+        } else {
+          dic[item.model] = item.options.defaultValue;
+        }
+      });
+
+      this.dataModel.push(dic);
+    },
+    handleTableDelete(index) {
+      this.dataModel.splice(index, 1);
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/tabs_dev.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-tabs
+    v-model="widget.options.defaultValue"
+    :type="widget.options.type"
+    :tab-position="widget.options.tabPosition"
+  >
+    <el-tab-pane
+      v-for="(column, columnIndex) in widget.options.columns"
+      :key="`tabs_${columnIndex}`"
+      :label="column.label"
+      :name="column.value"
+    >
+      <draggable
+        v-model="column.list"
+        :no-transition-on-drag="true"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @add="handleWidgetAdd($event, widget, columnIndex)"
+      >
+        <transition-group name="fade" tag="div" class="widget-col-list">
+          <widget-form-item
+            v-for="(element, elementIndex) in column.list.filter(item => {
+              return item.key;
+            })"
+            :key="element.key"
+            :widget="element"
+            :widgetIndex="elementIndex"
+            :widgetArray="column.list"
+            :select.sync="selectWidget"
+            :config="config"
+          ></widget-form-item>
+        </transition-group>
+      </draggable>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+export default {
+  components: { Draggable, WidgetFormItem },
+  mixins: [itemsComponent],
+  data() {
+    return {
+      selectWidget: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleWidgetAdd($event, row, colIndex) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+      const newComponent = JSON.parse(
+        JSON.stringify(row.options.columns[colIndex].list[newIndex])
+      );
+
+      // 防止布局元素的嵌套拖拽
+      if (
+        item.className.indexOf("tabs") !== -1 ||
+        item.className.indexOf("alliance") !== -1
+      ) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.widgetArray.splice(oldIndex, 0, newComponent);
+
+        row.options.columns[colIndex].list.splice(newIndex, 1);
+        return false;
+      }
+
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+      if (!newComponent.model) {
+        newComponent.key = key;
+        newComponent.model = `${newComponent.type}_${key}`;
+      }
+      this.$set(row.options.columns[colIndex].list, newIndex, newComponent);
+
+      this.selectWidget = newComponent;
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/tabs_pro.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-tabs
+    v-model="widget.options.defaultValue"
+    :type="widget.options.type"
+    :tab-position="widget.options.tabPosition"
+  >
+    <el-tab-pane
+      v-for="(column, columnIndex) in widget.options.columns"
+      :key="`tabs_${columnIndex}`"
+      :label="column.label"
+      :name="column.value"
+    >
+      <generate-form-item
+        v-for="element in column.list"
+        :key="`tabs_${columnIndex}_${element.key}`"
+        :widget="element"
+        :models.sync="dataModel[column.value]"
+        :config="config"
+        :remote="remote"
+        :prop="
+          element.type === 'grid'
+            ? `${prop}.${column.value}`
+            : `${prop}.${column.value}.${element.model}`
+        "
+        :slotKeys="slotKeys"
+        :componentsData="componentsData"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </generate-form-item>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import GenerateFormItem from "../../GenerateFormItem.vue";
+export default {
+  components: { GenerateFormItem },
+  mixins: [itemsComponent],
+  props: ["models", "remote", "prop", "slotKeys", "componentsData"],
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>
+
+<style></style>

package/packages/FormMaking/custom/items/text.vue

@@ -4,7 +4,7 @@
       height: widget.options.height,
       textAlign: widget.options.textAlign
     }"
-    v-html="widget.options.defaultValue"
+    v-html="dataModel"
   ></div>
 </template>
 

package/packages/FormMaking/custom/items/textarea.vue

@@ -1,15 +1,13 @@
 <template>
   <el-input
     type="textarea"
-    v-model="widget.options.defaultValue"
-    :style="{ width: widget.options.width }"
+    v-model="dataModel"
     :disabled="widget.options.disabled"
     :placeholder="widget.options.placeholder"
+    :style="{ width: widget.options.width }"
     :maxlength="widget.options.maxlength"
-    :show-word-limit="widget.options.showWordLimit"
     :clearable="widget.options.clearable"
-    :suffix-icon="widget.options.suffixIcon"
-    :prefix-icon="widget.options.prefixIcon"
+    :show-word-limit="widget.options.showWordLimit"
     :autosize="{
       minRows: widget.options.minRows,
       maxRows: widget.options.maxRows
@@ -17,14 +15,7 @@
     @input="handleEventAction(widget.events.onChange)"
     @focus="handleEventAction(widget.events.onFocus)"
     @blur="handleEventAction(widget.events.onBlur)"
-  >
-    <template v-if="widget.options.prepend" slot="prepend">
-      <span v-html="widget.options.prepend"></span>
-    </template>
-    <template v-if="widget.options.append" slot="append">
-      <span v-html="widget.options.append"></span>
-    </template>
-  </el-input>
+  ></el-input>
 </template>
 
 <script>

package/packages/FormMaking/custom/items/time.vue

@@ -1,6 +1,6 @@
 <template>
   <el-time-picker
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :style="{ width: widget.options.width }"
     :is-range="widget.options.isRange"
     :placeholder="widget.options.placeholder"
@@ -10,11 +10,11 @@
     :disabled="widget.options.disabled"
     :editable="widget.options.editable"
     :clearable="widget.options.clearable"
-    :arrow-control="widget.options.arrowControl"
+    :arrowControl="widget.options.arrowControl"
+    :value-format="widget.options.format"
     :picker-options="{
       selectableRange: `${widget.options.pickerOptions.selectableRange[0]} - ${widget.options.pickerOptions.selectableRange[1]}`
     }"
-    :value-format="widget.options.format"
     @change="handleEventAction(widget.events.onChange)"
     @focus="handleEventAction(widget.events.onFocus)"
     @blur="handleEventAction(widget.events.onBlur)"

package/packages/FormMaking/custom/items/upload.vue

@@ -1,17 +1,19 @@
 <template>
   <div>
     <el-upload
+      class="upload-demo"
       :action="uploadUrl"
       :headers="widget.options.remote ? widget.options.remoteFunc.headers : {}"
       :data="widget.options.remote ? widget.options.remoteFunc.params : {}"
       :multiple="widget.options.multiple"
       :limit="widget.options.length"
+      :width="widget.options.size.width"
+      :height="widget.options.size.height"
       :list-type="widget.options.listType"
-      :file-list="widget.options.defaultValue"
       :drag="widget.options.drag"
       :disabled="widget.options.disabled"
+      :auto-upload="true"
       :on-change="handleAvatar"
-      :on-success="handleSuccess"
       :on-error="handleAvatarError"
       :on-preview="
         file => handlePictureCardPreview(file, widget.options.listType)
@@ -19,27 +21,26 @@
       :on-remove="handleRemove"
     >
       <el-button
+        size="small"
+        type="primary"
+        :disabled="widget.options.disabled"
         v-if="
           ['default', 'picture'].includes(widget.options.listType) &&
             !widget.options.drag
         "
-        size="small"
-        type="primary"
-        :disabled="widget.options.disabled"
         >点击上传</el-button
       >
       <i
+        slot="default"
+        class="el-icon-plus"
         v-if="
           widget.options.listType === 'picture-card' && !widget.options.drag
         "
-        slot="default"
-        class="el-icon-plus"
       ></i>
-      <template v-if="widget.options.drag">
-        <i class="el-icon-upload"></i>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      </template>
-
+      <i class="el-icon-upload" v-if="widget.options.drag"></i>
+      <div class="el-upload__text" v-if="widget.options.drag">
+        将文件拖到此处，或<em>点击上传</em>
+      </div>
       <div
         slot="tip"
         class="el-upload__tip"
@@ -87,10 +88,10 @@ export default {
       }
     },
     handleRemove(file, fileList) {
-      this.widgetArray.options.defaultValue = fileList;
+      this.widget.options.defaultValue = fileList;
     },
     handleAvatar(res, file) {
-      this.widgetArray.options.defaultValue = file;
+      this.widget.options.defaultValue = file;
     },
     handleAvatarError() {
       console.log("上传失败！");

package/packages/FormMaking/custom/mixins/index.js

@@ -33,17 +33,39 @@ export const configComponent = {
 };
 
 export const itemsComponent = {
-  props: ["widget", "widgetArray", "select", "config"],
+  props: ["value", "widget", "widgetArray", "models", "select", "config"],
+  data() {
+    return {
+      dataModel: this.value
+    };
+  },
+  watch: {
+    value(val) {
+      this.dataModel = val;
+    },
+    dataModel: {
+      handler(val) {
+        this.$emit("update:value", val);
+      },
+      deep: true
+    }
+  },
   methods: {
     handleEventAction(key) {
       const eventScript = this.config.eventScript;
-      for (let i = 0; i < eventScript.length; i++) {
-        const element = eventScript[i];
-        if (element.key === key) {
-          const func = `(item,value)=>{${element.func}}`;
-          eval(func)(this.widget, this.widget.options.defaultValue);
+      if (key) {
+        for (let i = 0; i < eventScript.length; i++) {
+          const element = eventScript[i];
+          if (element.key === key) {
+            const func = `(item,value)=>{${element.func}}`;
+            eval(func)(this.widget, this.widget.options.defaultValue);
+          }
         }
       }
+      if (this.widget.type === "button") {
+        this.hendleRemoteData();
+        return;
+      }
     },
     display(keys) {
       console.log("请在 预览 模式下使用 display 方法");

package/packages/FormMaking/custom/register.js

@@ -1,18 +1,29 @@
 //在此注册组件
-import { basicComponents, advanceComponents, layoutComponents } from "./index";
-
-const allComponents = [
-  ...basicComponents,
-  ...advanceComponents,
-  ...layoutComponents
-];
+import { basicComponents, advanceComponents, layoutComponents } from "./config";
 
 let compsData = {};
-for (let i in allComponents) {
-  const comp = {
-    name: allComponents[i],
+for (const config of basicComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of advanceComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of layoutComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
     content: null
   };
-  compsData[allComponents[i]] = comp;
 }
 export default compsData;