tianheng-ui 0.1.9 → 0.1.11

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

@@ -1,32 +1,38 @@
 <template>
   <el-input
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
+    :type="inputTypeDict(widget.options.dataType)"
     :style="{ width: widget.options.width }"
     :placeholder="widget.options.placeholder"
     :disabled="widget.options.disabled"
+    :readonly="widget.options.readonly"
+    :clearable="widget.options.clearable"
     :maxlength="widget.options.maxlength"
     :show-word-limit="widget.options.showWordLimit"
     :show-password="widget.options.showPassword"
-    :clearable="widget.options.clearable"
     :suffix-icon="widget.options.suffixIcon"
     :prefix-icon="widget.options.prefixIcon"
     @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>
+    <template v-if="widget.options.prepend" slot="prepend">{{
+      widget.options.prepend
+    }}</template>
+    <template v-if="widget.options.append" slot="append">{{
+      widget.options.append
+    }}</template>
   </el-input>
 </template>
 
 <script>
+import { inputTypeDict } from "../../util/index";
 import { itemsComponent } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent],
+  methods: {
+    inputTypeDict
+  }
 };
 </script>
 

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

@@ -1,12 +1,12 @@
 <template>
   <el-input-number
-    v-model="widget.options.defaultValue"
-    :disabled="widget.options.disabled"
-    :controls-position="widget.options.controlsPosition ? 'right' : ''"
+    v-model="dataModel"
     :style="{ width: widget.options.width }"
+    :step="widget.options.step"
+    :controls-position="widget.options.controlsPosition ? 'right' : ''"
+    :disabled="widget.options.disabled"
     :min="widget.options.min"
     :max="widget.options.max"
-    :step="widget.options.step"
     :precision="widget.options.precision"
     @change="handleEventAction(widget.events.onChange)"
     @focus="handleEventAction(widget.events.onFocus)"

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

@@ -1,21 +1,26 @@
 <template>
   <el-radio-group
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :style="{ width: widget.options.width }"
     :disabled="widget.options.disabled"
     @change="handleEventAction(widget.events.onChange)"
   >
     <template v-if="widget.options.buttonType">
       <el-radio-button
-        v-for="(item, index) in widget.options.options"
-        :key="`radio_${index}_${item.value}`"
         :style="{
           display: widget.options.inline ? 'inline-block' : 'block'
         }"
+        v-for="(item, index) in widget.options.remote
+          ? widget.options.remoteOptions
+          : widget.options.options"
+        :key="index"
         :label="item.value"
         :border="widget.options.border"
       >
-        {{ widget.options.showLabel ? item.label : item.value }}
+        <template v-if="widget.options.remote">{{ item.label }}</template>
+        <template v-else>{{
+          widget.options.showLabel ? item.label : item.value
+        }}</template>
       </el-radio-button>
     </template>
     <template v-else>
@@ -25,10 +30,15 @@
         }"
         :label="item.value"
         :border="widget.options.border"
-        v-for="(item, index) in widget.options.options"
-        :key="`radio_${index}_${item.value}`"
+        v-for="(item, index) in widget.options.remote
+          ? widget.options.remoteOptions
+          : widget.options.options"
+        :key="index"
       >
-        {{ widget.options.showLabel ? item.label : item.value }}
+        <template v-if="widget.options.remote">{{ item.label }}</template>
+        <template v-else>{{
+          widget.options.showLabel ? item.label : item.value
+        }}</template>
       </el-radio>
     </template>
   </el-radio-group>

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

@@ -1,6 +1,6 @@
 <template>
   <el-rate
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :max="widget.options.max"
     :disabled="widget.options.disabled"
     :allow-half="widget.options.allowHalf"

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

@@ -1,23 +1,29 @@
 <template>
   <el-select
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :style="{ width: widget.options.width }"
     :disabled="widget.options.disabled"
     :multiple="widget.options.multiple"
-    :collapseTags="widget.options.collapseTags"
-    :allowCreate="widget.options.allowCreate"
     :clearable="widget.options.clearable"
     :placeholder="widget.options.placeholder"
+    :collapseTags="widget.options.collapseTags"
+    :allowCreate="widget.options.allowCreate"
     :filterable="widget.options.allowCreate ? true : widget.options.filterable"
     @change="handleEventAction(widget.events.onChange)"
     @focus="handleEventAction(widget.events.onFocus)"
     @blur="handleEventAction(widget.events.onBlur)"
   >
     <el-option
-      v-for="(item, index) in widget.options.options"
-      :key="`select_${index}_${item.value}`"
+      v-for="item in widget.options.remote
+        ? widget.options.remoteOptions
+        : widget.options.options"
+      :key="item.value"
       :value="item.value"
-      :label="widget.options.showLabel ? item.label : item.value"
+      :label="
+        widget.options.showLabel || widget.options.remote
+          ? item.label
+          : item.value
+      "
     ></el-option>
   </el-select>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <el-slider
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :min="widget.options.min"
     :max="widget.options.max"
     :disabled="widget.options.disabled"

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

@@ -1,6 +1,6 @@
 <template>
   <el-switch
-    v-model="widget.options.defaultValue"
+    v-model="dataModel"
     :width="widget.options.width - 20"
     :disabled="widget.options.disabled"
     :inactive-text="widget.options.switchInactiveText"

package/packages/FormMaking/custom/items/{table_h5.vue → tableH5_dev.vue}

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="tableH5">
     <draggable
-      v-model="widget.list"
+      v-model="widget.options.columns"
       :no-transition-on-drag="true"
       v-bind="{
         group: 'people',
@@ -9,29 +9,24 @@
         animation: 200,
         handle: '.drag-widget'
       }"
-      @add="handleWidgetTableAdd($event, widget)"
+      @add="handleWidgetAdd($event)"
     >
-      <transition-group name="fade" tag="div" class="tableH5">
+      <transition-group name="fade" tag="div" class="tableH5-list">
         <div
-          class="tableH5-item"
-          v-for="(element, elementIndex) in widget.list.filter(item => {
-            return item.key;
-          })"
+          v-for="(element, elementIndex) in widget.options.columns"
+          class="tableH5-list-item"
           :key="element.key"
+          @click.stop="selectWidget = element"
         >
           <widget-form-item
-            class="tableH5-item-widget"
             :widget="element"
+            :widgetArray="widget.options.columns"
             :widgetIndex="elementIndex"
-            :widgetArray="widget"
             :select.sync="selectWidget"
             :config="config"
           >
           </widget-form-item>
-          <div
-            v-if="widget.options.isDelete && elementIndex === 0"
-            class="actions"
-          >
+          <div v-if="widget.options.isDelete && elementIndex === 0">
             <el-button type="danger">{{
               widget.options.deleteButtonText
             }}</el-button>
@@ -39,7 +34,7 @@
         </div>
       </transition-group>
     </draggable>
-    <div v-if="widget.options.isAdd" style="text-align: center;">
+    <div v-if="widget.options.isAdd" class="footer">
       <el-button type="text" :disabled="widget.options.disabled">{{
         widget.options.addButtonText
       }}</el-button>
@@ -71,56 +66,56 @@ export default {
     }
   },
   methods: {
-    handleWidgetTableAdd($event, row) {
+    handleWidgetAdd($event) {
       const newIndex = $event.newIndex;
       const oldIndex = $event.oldIndex;
+      const newComponent = JSON.parse(
+        JSON.stringify(this.widget.options.columns[newIndex])
+      );
       const item = $event.item;
       // 防止布局元素的嵌套拖拽
       if (item.className.indexOf("no-put") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
         item.tagName === "DIV" &&
-          this.widgetArray.list.splice(oldIndex, 0, row.list[newIndex]);
-
-        row.list.splice(newIndex, 1);
+          this.widgetArray.splice(oldIndex, 0, newComponent);
 
+        this.widget.options.columns.splice(newIndex, 1);
         return false;
       }
 
       const key =
         Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.list, newIndex, {
-        ...row.list[newIndex],
-        options: {
-          ...row.list[newIndex].options
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.list[newIndex].type === "radio" ||
-        row.list[newIndex].type === "checkbox" ||
-        row.list[newIndex].type === "select"
-      ) {
-        this.$set(row.list, newIndex, {
-          ...row.list[newIndex],
-          options: {
-            ...row.list[newIndex].options,
-            options: row.list[newIndex].options.options.map(item => ({
-              ...item
-            }))
-          }
-        });
+      if (!newComponent.model) {
+        newComponent.key = key;
+        newComponent.model = `${newComponent.type}_${key}`;
       }
-
-      this.selectWidget = row.list[newIndex];
+      this.$set(this.widget.options.columns, newIndex, newComponent);
+      this.selectWidget = newComponent;
     }
   }
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.tableH5 {
+  background: #fff;
+
+  .tableH5-list {
+    min-height: 50px;
+    border: 1px dashed #ccc;
+    .tableH5-list-item {
+      width: 100%;
+    }
+    .tableH5-list-item:nth-child(1) {
+      display: flex;
+      > div:first-child {
+        flex: 1;
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div class="tableH5">
+    <div
+      v-for="(column, columnIndex) in dataModel"
+      class="tableH5-list"
+      :key="`tableH5_${columnIndex}`"
+    >
+      <div
+        v-for="(element, elementIndex) in widget.options.columns"
+        class="tableH5-list-item"
+        :key="`tableH5_${columnIndex}_${element.key}`"
+      >
+        <generate-form-item
+          style="flex:1;"
+          :models.sync="column"
+          :widget="element"
+          :remote="remote"
+          :config="config"
+          :prop="
+            element.type === 'grid'
+              ? `${prop}.${columnIndex}`
+              : `${prop}.${columnIndex}.${element.model}`
+          "
+          :slotKeys="slotKeys"
+          :componentsData="componentsData"
+        >
+          <template v-for="name in slotKeys" :slot="name">
+            <slot :name="name" />
+          </template>
+        </generate-form-item>
+        <div
+          v-if="
+            widget.options.isDelete &&
+              elementIndex === 0 &&
+              columnIndex >= widget.options.deleteIndex
+          "
+          class="actions"
+        >
+          <el-button
+            type="danger"
+            @click.native.prevent="dataModel.splice(columnIndex, 1)"
+            >{{ widget.options.deleteButtonText }}</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <div v-if="widget.options.isAdd" style="text-align: center;">
+      <el-button
+        type="text"
+        :disabled="widget.options.disabled"
+        @click="handleTableAdd"
+        >{{ widget.options.addButtonText }}</el-button
+      >
+    </div>
+  </div>
+</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);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tableH5 {
+  background: #fff;
+
+  .tableH5-list {
+    .tableH5-list-item {
+      width: 100%;
+    }
+    .tableH5-list-item:nth-child(1) {
+      display: flex;
+      > div:first-child {
+        flex: 1;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+  }
+}
+</style>

package/packages/FormMaking/custom/items/{table.vue → table_dev.vue}

@@ -1,6 +1,6 @@
 <template>
   <draggable
-    v-model="widget.list"
+    v-model="widget.options.columns"
     :no-transition-on-drag="true"
     v-bind="{
       group: 'people',
@@ -8,17 +8,19 @@
       animation: 200,
       handle: '.drag-widget'
     }"
-    @add="handleWidgetTableAdd($event, widget)"
+    @add="handleWidgetAdd($event, widget)"
   >
     <transition-group name="fade" tag="div" class="widget-table-list">
       <widget-form-item
-        v-for="(element, elementIndex) in widget.list.filter(item => {
-          return item.key;
-        })"
+        v-for="(element, elementIndex) in widget.options.columns.filter(
+          item => {
+            return item.key;
+          }
+        )"
         :key="element.key"
         :widget="element"
         :widgetIndex="elementIndex"
-        :widgetArray="widget"
+        :widgetArray="widget.options.columns"
         :select.sync="selectWidget"
         :config="config"
       >
@@ -50,55 +52,33 @@ export default {
       deep: true
     }
   },
-  methods:{
-    handleWidgetTableAdd($event, row) {
+  methods: {
+    handleWidgetAdd($event) {
       const newIndex = $event.newIndex;
       const oldIndex = $event.oldIndex;
+      const newComponent = JSON.parse(
+        JSON.stringify(this.widget.options.columns[newIndex])
+      );
       const item = $event.item;
       // 防止布局元素的嵌套拖拽
       if (item.className.indexOf("no-put") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
         item.tagName === "DIV" &&
-          this.widgetArray.list.splice(oldIndex, 0, row.list[newIndex]);
-
-        row.list.splice(newIndex, 1);
+          this.widgetArray.splice(oldIndex, 0, newComponent);
 
+        this.widget.options.columns.splice(newIndex, 1);
         return false;
       }
 
       const key =
         Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-
-      this.$set(row.list, newIndex, {
-        ...row.list[newIndex],
-        options: {
-          ...row.list[newIndex].options
-          // remoteFunc: "func_" + key
-        },
-        key,
-        // 绑定键值
-        model: row.list[newIndex].type + "_" + key,
-        rules: []
-      });
-
-      if (
-        row.list[newIndex].type === "radio" ||
-        row.list[newIndex].type === "checkbox" ||
-        row.list[newIndex].type === "select"
-      ) {
-        this.$set(row.list, newIndex, {
-          ...row.list[newIndex],
-          options: {
-            ...row.list[newIndex].options,
-            options: row.list[newIndex].options.options.map(item => ({
-              ...item
-            }))
-          }
-        });
+      if (!newComponent.model) {
+        newComponent.key = key;
+        newComponent.model = `${newComponent.type}_${key}`;
       }
-
-      this.selectWidget = row.list[newIndex];
-    },
+      this.$set(this.widget.options.columns, newIndex, newComponent);
+      this.selectWidget = newComponent;
+    }
   }
 };
 </script>

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>