tianheng-ui 0.1.68 → 0.1.70

package/packages/FormMaking/custom/configs/list.vue

@@ -1,18 +1,99 @@
 <template>
-  <div>
-     
+  <div class="component-config">
+    <el-collapse-item title="组件配置" name="group-element">
+      <el-form-item label="标题">
+        <el-input v-model="widget.name" clearable></el-input>
+      </el-form-item>
+
+      <el-form-item label="标签宽度">
+        <div style="display: flex;">
+          <el-checkbox v-model="widget.options.isLabelWidth"
+            >自定义</el-checkbox
+          >
+          <el-input-number
+            style="margin-left:5px;"
+            v-model="widget.options.labelWidth"
+            controls-position="right"
+            :min="0"
+            :max="200"
+            :disabled="!widget.options.isLabelWidth"
+          >
+          </el-input-number>
+        </div>
+      </el-form-item>
+
+      <el-form-item label-width="0">
+        <div class="config-header">
+          <span class="title">默认值</span>
+          <div class="value">
+            <el-button type="text" @click="handleAddData">添加数据</el-button>
+            <el-button type="text" @click="widget.options.defaultValue = []"
+              >重置</el-button
+            >
+          </div>
+        </div>
+        <th-code-editor
+          v-model="widget.options.defaultValue"
+          language="json"
+        ></th-code-editor>
+      </el-form-item>
+
+      <el-form-item label="新增按钮">
+        <el-input v-model.number="widget.options.addButtonText"></el-input>
+      </el-form-item>
+
+      <el-form-item label="删除按钮">
+        <el-input v-model.number="widget.options.deleteButtonText"></el-input>
+      </el-form-item>
+
+      <el-form-item label="可删除的最小索引">
+        <el-input-number v-model="widget.options.deleteIndex" :min="0">
+        </el-input-number>
+      </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.disabled">禁用 </el-checkbox>
+        <el-checkbox v-model="widget.options.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+        <el-checkbox v-model="widget.options.isAdd">可新增 </el-checkbox>
+        <el-checkbox v-model="widget.options.isDelete">可删除 </el-checkbox>
+      </el-form-item>
+
+      <el-form-item label="校验">
+        <el-checkbox v-model="widget.options.required">必填</el-checkbox>
+      </el-form-item>
+    </el-collapse-item>
   </div>
 </template>
 
 <script>
+import Draggable from "vuedraggable";
+import { configComponent } from "../mixins";
 export default {
-  data() {
-    return {};
+  components: {
+    Draggable
   },
-  created() {},
+  mixins: [configComponent],
+  props: {},
   mounted() {},
-  methods: {},
+  methods: {
+    handleAddData() {
+      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.list.length; j++) {
+              const element2 = element.list[j];
+              dic[element2.model] = element2.options.defaultValue;
+            }
+          }
+        } else {
+          dic[item.model] = item.options.defaultValue;
+        }
+      });
+      this.widget.options.defaultValue.push(dic);
+    }
+  }
 };
 </script>
-
-<style lang="scss" scoped></style>

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

@@ -76,15 +76,12 @@
           >
             <div slot="prepend">标签</div>
           </el-input>
-          <el-input
-            style="margin-bottom:5px;"
-            v-model="widget.options.remote.props.children"
-          >
+          <el-input v-model="widget.options.remote.props.children">
             <div slot="prepend">子选项</div>
           </el-input>
         </template>
         <template v-else>
-          <el-radio-group style="width: 100%;" v-model="widget.options.defaultValue">
+          <el-radio-group v-model="widget.options.defaultValue">
             <draggable
               :list="widget.options.options"
               v-bind="{

package/packages/FormMaking/custom/configs/table.vue

@@ -20,15 +20,20 @@
         </div>
       </el-form-item>
 
-      <el-form-item>
-        <div class="config-header" slot="label">
+      <el-form-item label-width="0">
+        <div class="config-header">
           <span class="title">默认值</span>
-          <span class="value" @click="handleAddData">新增一组</span>
+          <div class="value">
+            <el-button type="text" @click="handleAddData">添加数据</el-button>
+            <el-button type="text" @click="widget.options.defaultValue = []"
+              >重置</el-button
+            >
+          </div>
         </div>
-        <code-editor
+        <th-code-editor
           v-model="widget.options.defaultValue"
           language="json"
-        ></code-editor>
+        ></th-code-editor>
       </el-form-item>
 
       <!-- <el-form-item label="高度">
@@ -76,9 +81,8 @@ export default {
   mounted() {},
   methods: {
     handleAddData() {
-      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
       let dic = {};
-      this.widget.list.forEach(item => {
+      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];
@@ -91,8 +95,7 @@ export default {
           dic[item.model] = item.options.defaultValue;
         }
       });
-      defaultValue.push(dic);
-      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+      this.widget.options.defaultValue.push(dic);
     }
   }
 };

package/packages/FormMaking/custom/configs/tabs.vue

@@ -55,77 +55,65 @@
       </el-form-item>
 
       <el-form-item label-width="0">
-        <div v-if="widget.options.remote">
+        <div v-if="widget.options.remote.open">
           <el-select
-          style="width:100%"
-          v-model="widget.options.remote.api"
-          placeholder="请选择"
-          no-data-text="暂无数据，请查阅相关文档说明"
-          clearable
-          filterable
-        >
-          <el-option
-            v-for="item in apiOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
+            style="width:100%;margin-bottom:5px;"
+            v-model="widget.options.remote.api"
+            placeholder="请选择"
+            no-data-text="暂无数据，请查阅相关文档说明"
+            clearable
+            filterable
           >
-          </el-option>
-        </el-select>
-
-          <!-- <el-input size="mini" style="" v-model="widget.options.props.value">
-            <template slot="prepend">
-              <div style="width:30px;">值</div>
-            </template>
+            <el-option
+              v-for="item in apiOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-input
+            style="margin-bottom:5px;"
+            v-model="widget.options.remote.props.value"
+          >
+            <div slot="prepend">内容</div>
+          </el-input>
+          <el-input v-model="widget.options.remote.props.label">
+            <div slot="prepend">标签</div>
           </el-input>
-          <el-input size="mini" style="" v-model="widget.options.props.label">
-            <template slot="prepend">
-              <div style="width:30px;">标签</div>
-            </template>
-          </el-input> -->
         </div>
         <template v-else>
           <el-radio-group v-model="widget.options.defaultValue">
             <draggable
-              tag="ul"
               :list="widget.options.columns"
               v-bind="{
-                group: { name: 'tabs' },
+                group: { name: 'options' },
                 ghostClass: 'ghost',
-                handle: '.drag-item'
+                handle: '.drag'
               }"
-              handle=".drag-item"
+              handle=".drag"
             >
-              <li v-for="(item, index) in widget.options.columns" :key="index">
-                <el-radio :label="item.value" style="margin-right: 5px;">
-                  <el-input
-                    v-model="item.value"
-                    style="width:90px;"
-                    size="mini"
-                    placeholder="value"
-                  ></el-input>
-                  <el-input
-                    v-model="item.label"
-                    style="width:90px;"
-                    size="mini"
-                    placeholder="label"
-                  ></el-input>
-                </el-radio>
-                <i
-                  class="drag-item"
-                  style="font-size: 16px;margin: 0 5px;cursor: move;"
-                  ><i class="iconfont icon-icon_bars"></i
-                ></i>
+              <div
+                v-for="(item, index) in widget.options.columns"
+                class="draggable-item"
+                :key="index"
+              >
+                <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
+                <el-radio :label="item.value"> <span></span> </el-radio>
+                <div class="content">
+                  <el-input v-model="item.value"></el-input>
+                  <el-input v-model="item.label"></el-input>
+                </div>
                 <el-button
-                  @click="handleOptionsRemove(index)"
-                  circle
-                  plain
+                  class="delete"
                   type="danger"
                   size="mini"
                   icon="el-icon-minus"
-                  style="padding: 4px;margin-left: 5px;"
+                  circle
+                  plain
+                  @click="handleOptionsRemove(index)"
                 ></el-button>
-              </li>
+              </div>
             </draggable>
           </el-radio-group>
 
@@ -168,4 +156,30 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.draggable-item {
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  .el-radio {
+    margin-right: 0;
+    padding-left: 10px;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    margin-right: 5px;
+    > div {
+      margin: 0 2px;
+    }
+  }
+  .drag {
+    font-size: 16px;
+    cursor: move;
+  }
+  .delete {
+    padding: 4px;
+  }
+}
+</style>

package/packages/FormMaking/custom/index.js

@@ -20,7 +20,7 @@ const basicComponents = [
   "editor",
   "cascader"
 ];
-const advanceComponents = ["table", "tableH5", "list", "tabs"];
+const advanceComponents = ["table", "list", "tabs"];
 const layoutComponents = ["grid", "alliance", "filler", "divider"];
 const businessComponents = ["blank", "descriptions"];
 

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

@@ -12,13 +12,13 @@
     >
       <draggable
         v-model="column.list"
-        :no-transition-on-drag="true"
         v-bind="{
           group: 'people',
           ghostClass: 'draggable-ghost',
           animation: 200,
           handle: '.drag-widget'
         }"
+        :no-transition-on-drag="true"
         @add="handleWidgetAdd($event, widget, columnIndex)"
       >
         <transition-group name="fade" tag="div" class="draggable-list">
@@ -50,18 +50,15 @@ export default {
   mixins: [itemsComponent, eventMixin],
   data() {
     return {
-      selectWidget: {}
+      selectWidget: this.select
     };
   },
   watch: {
     select(val) {
       this.selectWidget = val;
     },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
+    selectWidget(val) {
+      this.$emit("update:select", val);
     }
   },
   methods: {
@@ -74,7 +71,7 @@ export default {
       );
 
       // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf("data-grid") >= 0) {
+      if (item.className.indexOf("grid") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
         item.tagName === "DIV" &&
           this.widgetArray.splice(oldIndex, 0, newComponent);

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

@@ -2,34 +2,30 @@
   <div class="component-list">
     <draggable
       v-model="widget.options.columns"
-      :no-transition-on-drag="true"
       v-bind="{
         group: 'people',
         ghostClass: 'draggable-ghost',
         animation: 200,
         handle: '.drag-widget'
       }"
+      :no-transition-on-drag="true"
       @add="handleWidgetAdd($event)"
     >
       <transition-group name="fade" tag="div" class="draggable-list">
-        <div
+        <widget-form-item
           v-for="(element, elementIndex) in widget.options.columns.filter(
             item => {
               return item.key;
             }
           )"
           :key="element.key"
-          @click.stop="selectWidget = element"
+          :widget="element"
+          :widgetArray="widget.options.columns"
+          :widgetIndex="elementIndex"
+          :select.sync="selectWidget"
+          :config="config"
         >
-          <widget-form-item
-            :widget="element"
-            :widgetArray="widget.options.columns"
-            :widgetIndex="elementIndex"
-            :select.sync="selectWidget"
-            :config="config"
-          >
-          </widget-form-item>
-        </div>
+        </widget-form-item>
       </transition-group>
     </draggable>
     <div v-if="widget.options.isDelete" class="tools">
@@ -52,35 +48,34 @@ export default {
   mixins: [itemsComponent, eventMixin],
   data() {
     return {
-      selectWidget: {}
+      selectWidget: this.select
     };
   },
   watch: {
     select(val) {
       this.selectWidget = val;
     },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
+    selectWidget(val) {
+      this.$emit("update:select", val);
+    },
+    // 子组建变动后重置初始值
+    "widget.options.columns.length"(val) {
+      this.widget.options.defaultValue = [];
     }
   },
   methods: {
     handleWidgetAdd($event) {
-      console.log("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) {
+      if ($event.item.className.indexOf("no-put") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === "DIV" &&
+        $event.item.tagName === "DIV" &&
           this.widgetArray.splice(oldIndex, 0, newComponent);
-
         this.widget.options.columns.splice(newIndex, 1);
         return false;
       }
@@ -92,6 +87,7 @@ export default {
         newComponent.model = `${newComponent.type}_${key}`;
       }
       this.$set(this.widget.options.columns, newIndex, newComponent);
+      this.widget.options.defaultValue = [];
       this.selectWidget = newComponent;
     }
   }

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

@@ -1,18 +1,121 @@
 <template>
-  <div>
-     
+  <div class="component-list">
+    <div
+      v-for="(column, columnIndex) in dataModel"
+      class="list-group"
+      :key="`group_${columnIndex}`"
+    >
+      <div
+        v-for="(element, elementIndex) in widget.options.columns"
+        class="list-group-item"
+        :key="elementIndex"
+      >
+        <generate-form-item
+          :widget="element"
+          :model.sync="
+            element.type === 'grid' && !element.options.isEntity
+              ? column
+              : column[element.model]
+          "
+          :models="models"
+          :pModel="getPModel(columnIndex)"
+          :config="config"
+          :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, eventMixin } from "../mixins/index";
+import GenerateFormItem from "../../GenerateFormItem.vue";
 export default {
+  components: { GenerateFormItem },
+  mixins: [itemsComponent, eventMixin],
+  props: ["slotKeys", "componentsData"],
   data() {
     return {};
   },
-  created() {},
-  mounted() {},
-  methods: {},
+  mounted() {
+    console.log("mounted pModel =>", this.pModel);
+  },
+  methods: {
+    handleTableAdd() {
+      let dic = {};
+      const initData = (list, data) => {
+        for (const item of list) {
+          if (item.type === "grid") {
+            if (item.options.isEntity) data[item.model] = {};
+            for (const column of item.options.columns) {
+              initData(
+                column.list,
+                item.options.isEntity ? data[item.model] : data
+              );
+            }
+          } else {
+            data[item.model] = item.options.defaultValue;
+          }
+        }
+      };
+      initData(this.widget.options.columns, dic);
+      this.dataModel.push(dic);
+    },
+    getPModel(val) {
+      if (this.pModel) return `${this.pModel}.${this.widget.model}.${val}`;
+      else return `${this.widget.model}.${val}`;
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.component-list {
+  background: #fff;
+
+  .list-group {
+    .list-group-item {
+      width: 100%;
+    }
+    .list-group-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_dev.vue

@@ -2,14 +2,14 @@
   <draggable
     class="component-table"
     v-model="widget.options.columns"
-    :no-transition-on-drag="true"
     v-bind="{
       group: 'people',
       ghostClass: 'draggable-ghost',
       animation: 200,
       handle: '.drag-widget'
     }"
-    @add="handleWidgetAdd($event, widget)"
+    :no-transition-on-drag="true"
+    @add="handleWidgetAdd($event)"
   >
     <transition-group name="fade" tag="div" class="draggable-list">
       <widget-form-item
@@ -39,18 +39,19 @@ export default {
   mixins: [itemsComponent, eventMixin],
   data() {
     return {
-      selectWidget: {}
+      selectWidget: this.select
     };
   },
   watch: {
     select(val) {
       this.selectWidget = val;
     },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
+    selectWidget(val) {
+      this.$emit("update:select", val);
+    },
+    // 子组建变动后重置初始值
+    "widget.options.columns.length"(val) {
+      this.widget.options.defaultValue = [];
     }
   },
   methods: {
@@ -60,13 +61,12 @@ export default {
       const newComponent = JSON.parse(
         JSON.stringify(this.widget.options.columns[newIndex])
       );
-      const item = $event.item;
+
       // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf("no-put") >= 0) {
+      if ($event.item.className.indexOf("no-put") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === "DIV" &&
+        $event.item.tagName === "DIV" &&
           this.widgetArray.splice(oldIndex, 0, newComponent);
-
         this.widget.options.columns.splice(newIndex, 1);
         return false;
       }
@@ -78,6 +78,7 @@ export default {
         newComponent.model = `${newComponent.type}_${key}`;
       }
       this.$set(this.widget.options.columns, newIndex, newComponent);
+      this.widget.options.defaultValue = [];
       this.selectWidget = newComponent;
     }
   }