tianheng-ui 0.0.47 → 0.0.50

package/packages/formMaking/WidgetFormItem.vue

@@ -1,14 +1,27 @@
 <template>
   <el-form-item
-    class="widget-view "
+    class="widget-view"
     v-if="element && element.key"
     :class="{
       active: selectWidget.key == element.key,
-      is_req: element.options.required
+      is_req: element.options.required,
+      'widget-col': ['grid','tabs','table'].includes(element.type),
+      [element.model]: true
     }"
-    :label="element.name"
+    :label="
+      data.type == 'table' || element.options.hideLabel ? '' : element.name
+    "
+    :label-width="
+      element.options.hideLabel
+        ? '0'
+        : element.options.isLabelWidth
+        ? `${element.options.labelWidth}px`
+        : ''
+    "
     @click.native.stop="handleSelectWidget(index)"
   >
+    <div v-if="data.type == 'table'">{{ element.name || "-" }}</div>
+
     <template v-if="element.type == 'input'">
       <el-input
         v-model="element.options.defaultValue"
@@ -41,7 +54,10 @@
         :maxlength="element.options.maxlength"
         :show-word-limit="element.options.showWordLimit"
         :clearable="element.options.clearable"
-        :autosize="{ minRows: element.options.minRows, maxRows: element.options.maxRows }"
+        :autosize="{
+          minRows: element.options.minRows,
+          maxRows: element.options.maxRows
+        }"
       ></el-input>
     </template>
 
@@ -49,7 +65,7 @@
       <el-input-number
         v-model="element.options.defaultValue"
         :disabled="element.options.disabled"
-        :controls-position="element.options.controlsPosition?'right':''"
+        :controls-position="element.options.controlsPosition ? 'right' : ''"
         :style="{ width: element.options.width }"
         :min="element.options.min"
         :max="element.options.max"
@@ -150,7 +166,11 @@
         <el-time-select
           v-model="element.options.selectStartTime"
           :is-range="element.options.isRange"
-          :placeholder="element.options.selectRange?element.options.startPlaceholder:element.options.placeholder"
+          :placeholder="
+            element.options.selectRange
+              ? element.options.startPlaceholder
+              : element.options.placeholder
+          "
           :readonly="element.options.readonly"
           :disabled="element.options.disabled"
           :editable="element.options.editable"
@@ -223,7 +243,9 @@
         :clearable="element.options.clearable"
         :placeholder="element.options.placeholder"
         :style="{ width: element.options.width }"
-        :filterable="element.options.allowCreate?true:element.options.filterable"
+        :filterable="
+          element.options.allowCreate ? true : element.options.filterable
+        "
       >
         <el-option
           v-for="item in element.options.options"
@@ -255,9 +277,14 @@
         :step="element.options.step"
         :show-input="element.options.showInput"
         :range="element.options.range"
-        :style="{ width: element.options.width, height: element.options.height }"
+        :style="{
+          width: element.options.width,
+          height: element.options.height
+        }"
         :show-tooltip="element.options.showTooltip"
-        :format-tooltip="(val) => formatTooltip(val,element.options.formatTooltip)"
+        :format-tooltip="
+          val => formatTooltip(val, element.options.formatTooltip)
+        "
         :show-stops="element.options.showStops"
         :vertical="element.options.vertical"
       ></el-slider>
@@ -278,7 +305,9 @@
       <el-upload
         class="upload-demo"
         :action="element.options.remoteFunc"
-        :on-preview="(file) => handlePictureCardPreview(file, element.options.listType)"
+        :on-preview="
+          file => handlePictureCardPreview(file, element.options.listType)
+        "
         :on-remove="handleRemove"
         :multiple="element.options.multiple"
         :limit="element.options.length"
@@ -289,12 +318,34 @@
         :drag="element.options.drag"
         :on-change="handleAvatar"
         :on-error="handleAvatarError"
-        :disabled="element.options.disabled">
-        <el-button size="small" type="primary" :disabled="element.options.disabled" v-if="['default', 'picture'].includes(element.options.listType) && !element.options.drag">点击上传</el-button>
-        <i slot="default" class="el-icon-plus" v-if="element.options.listType === 'picture-card' && !element.options.drag"></i>
+        :disabled="element.options.disabled"
+      >
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="element.options.disabled"
+          v-if="
+            ['default', 'picture'].includes(element.options.listType) &&
+              !element.options.drag
+          "
+          >点击上传</el-button
+        >
+        <i
+          slot="default"
+          class="el-icon-plus"
+          v-if="
+            element.options.listType === 'picture-card' && !element.options.drag
+          "
+        ></i>
         <i class="el-icon-upload" v-if="element.options.drag"></i>
-        <div class="el-upload__text" v-if="element.options.drag">将文件拖到此处，或<em>点击上传</em></div>
-        <div slot="tip" class="el-upload__tip" v-html="element.options.elUploadTip"></div>
+        <div class="el-upload__text" v-if="element.options.drag">
+          将文件拖到此处，或<em>点击上传</em>
+        </div>
+        <div
+          slot="tip"
+          class="el-upload__tip"
+          v-html="element.options.elUploadTip"
+        ></div>
       </el-upload>
     </template>
 
@@ -307,7 +358,7 @@
         :style="{ width: element.options.width }"
         :options="element.options.remoteOptions"
         :props="element.options.props"
-        :show-all-levels="element.options.showAllLevels?false:true"
+        :show-all-levels="element.options.showAllLevels ? false : true"
         :collapse-tags="element.options.collapseTags"
       >
         <template slot-scope="{ data }">
@@ -321,7 +372,10 @@
     <template v-if="element.type == 'editor'">
       <vue-editor
         v-model="element.options.defaultValue"
-        :style="{ width: element.options.width, height: element.options.height }"
+        :style="{
+          width: element.options.width,
+          height: element.options.height
+        }"
         :disabled="element.options.disabled"
       >
       </vue-editor>
@@ -339,6 +393,127 @@
       <span>{{ element.options.defaultValue }}</span>
     </template>
 
+    <template v-if="element.type == 'grid'">
+      <el-row
+        type="flex"
+        :class="{ active: selectWidget.key == element.key }"
+        :gutter="element.options.gutter ? element.options.gutter : 0"
+        :justify="element.options.justify"
+        :align="element.options.align"
+        @click.native="handleSelectWidget(index)"
+      >
+        <el-col
+          v-for="(col, colIndex) in element.columns"
+          :key="colIndex"
+          :span="col.span ? col.span : 0"
+        >
+          <draggable
+            v-model="col.list"
+            :no-transition-on-drag="true"
+            v-bind="{
+              group: 'people',
+              ghostClass: 'ghost',
+              animation: 200,
+              handle: '.drag-widget'
+            }"
+            @end="handleMoveEnd"
+            @add="handleWidgetColAdd($event, element, colIndex)"
+          >
+            <transition-group name="fade" tag="div" class="widget-col-list">
+              <template v-for="(el, i) in col.list">
+                <widget-form-item
+                  :key="el.key"
+                  v-if="el.key"
+                  :element="el"
+                  :select.sync="selectWidget"
+                  :index="i"
+                  :data="col"
+                >
+                </widget-form-item>
+              </template>
+            </transition-group>
+          </draggable>
+        </el-col>
+      </el-row>
+    </template>
+
+    <template v-if="element.type == 'table'">
+      <draggable
+        v-model="element.list"
+        :no-transition-on-drag="true"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @end="handleMoveEnd"
+        @add="handleWidgetTableAdd($event, element)"
+      >
+        <transition-group name="fade" tag="div" class="widget-table-list">
+          <template v-for="(el, i) in element.list">
+            <widget-form-item
+              class="widget-table-list-item"
+              :key="el.key"
+              v-if="el.key"
+              :element="el"
+              :select.sync="selectWidget"
+              :index="i"
+              :data="element"
+            >
+            </widget-form-item>
+          </template>
+        </transition-group>
+      </draggable>
+    </template>
+
+    <template v-if="element.type == 'tabs'">
+      <el-tabs
+        v-model="element.options.defaultValue"
+        :type="element.options.type"
+        :tab-position="element.options.tabPosition"
+      >
+        <el-tab-pane
+          v-for="(tabItem, tabIndex) in element.tabs"
+          :key="tabItem.value"
+          :label="tabItem.label"
+          :name="tabItem.value"
+        >
+          <draggable
+            v-model="tabItem.list"
+            :no-transition-on-drag="true"
+            v-bind="{
+              group: 'people',
+              ghostClass: 'ghost',
+              animation: 200,
+              handle: '.drag-widget'
+            }"
+            @end="handleMoveEnd"
+            @add="handleWidgetTabAdd($event, element, tabIndex)"
+          >
+            <transition-group name="fade" tag="div" class="widget-col-list">
+              <template v-for="(el, i) in tabItem.list">
+                <widget-form-item
+                  v-if="el && el.key"
+                  :key="el.key"
+                  :element="el"
+                  :select.sync="selectWidget"
+                  :index="i"
+                  :data="tabItem"
+                ></widget-form-item>
+              </template>
+            </transition-group>
+          </draggable>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+
+    <template v-if="element.type == 'divider'">
+      <el-divider :content-position="element.options.contentPosition">
+        {{ element.name }}
+      </el-divider>
+    </template>
+
     <div class="widget-view-action" v-if="selectWidget.key == element.key">
       <i
         class="iconfont icon-icon_clone"
@@ -355,28 +530,32 @@
     </div>
 
     <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="">
+      <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
   </el-form-item>
 </template>
 
 <script>
+import Draggable from "vuedraggable";
 import FmUpload from "./Upload";
-import { VueEditor} from "vue2-editor";
+import { VueEditor } from "vue2-editor";
 export default {
+  name: "widget-form-item",
   props: ["element", "select", "index", "data"],
-  components: {
-    FmUpload,
-    VueEditor
-  },
+  components: { Draggable, FmUpload, VueEditor },
   data() {
     return {
       selectWidget: this.select,
       dialogVisible: false,
-      dialogImageUrl: '',
+      dialogImageUrl: "",
+      config: {}
     };
   },
-  mounted() {},
+  mounted() {
+    if (this.element.type == "tabs") {
+      this.config[this.element.model] = this.element.options.defaultValue;
+    }
+  },
   methods: {
     handleSelectWidget(index) {
       this.selectWidget = this.data.list[index];
@@ -435,21 +614,194 @@ export default {
         this.selectWidget = this.data.list[index + 1];
       });
     },
-     handlePictureCardPreview(file, listType) {
-      if(listType === "picture-card"){
+    handlePictureCardPreview(file, listType) {
+      if (listType === "picture-card") {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
       }
     },
     handleRemove(file, fileList) {
-      this.data.options.defaultValue = fileList
+      this.data.options.defaultValue = fileList;
     },
     handleAvatar(res, file) {
-      this.data.options.defaultValue = file
+      this.data.options.defaultValue = file;
     },
     handleAvatarError() {
-      console.log("上传失败！")
+      console.log("上传失败！");
     },
+    handleMoveEnd({ newIndex, oldIndex }) {},
+    handleWidgetColAdd($event, row, colIndex) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("data-grid") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.data.list.splice(
+            oldIndex,
+            0,
+            row.columns[colIndex].list[newIndex]
+          );
+
+        row.columns[colIndex].list.splice(newIndex, 1);
+
+        return false;
+      }
+
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+
+      this.$set(row.columns[colIndex].list, newIndex, {
+        ...row.columns[colIndex].list[newIndex],
+        options: {
+          ...row.columns[colIndex].list[newIndex].options
+          // remoteFunc: "func_" + key
+        },
+        key,
+        // 绑定键值
+        model: row.columns[colIndex].list[newIndex].type + "_" + key,
+        rules: []
+      });
+
+      if (
+        row.columns[colIndex].list[newIndex].type === "radio" ||
+        row.columns[colIndex].list[newIndex].type === "checkbox" ||
+        row.columns[colIndex].list[newIndex].type === "select"
+      ) {
+        this.$set(row.columns[colIndex].list, newIndex, {
+          ...row.columns[colIndex].list[newIndex],
+          options: {
+            ...row.columns[colIndex].list[newIndex].options,
+            options: row.columns[colIndex].list[newIndex].options.options.map(
+              item => ({
+                ...item
+              })
+            )
+          }
+        });
+      }
+
+      this.selectWidget = row.columns[colIndex].list[newIndex];
+    },
+    handleWidgetTabAdd($event, row, colIndex) {
+      console.log(row, colIndex);
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("data-grid") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.data.list.splice(oldIndex, 0, row.tabs[colIndex].list[newIndex]);
+
+        row.tabs[colIndex].list.splice(newIndex, 1);
+
+        return false;
+      }
+
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+
+      this.$set(row.tabs[colIndex].list, newIndex, {
+        ...row.tabs[colIndex].list[newIndex],
+        options: {
+          ...row.tabs[colIndex].list[newIndex].options
+          // remoteFunc: "func_" + key
+        },
+        key,
+        // 绑定键值
+        model: row.tabs[colIndex].list[newIndex].type + "_" + key,
+        rules: []
+      });
+
+      if (
+        row.tabs[colIndex].list[newIndex].type === "radio" ||
+        row.tabs[colIndex].list[newIndex].type === "checkbox" ||
+        row.tabs[colIndex].list[newIndex].type === "select"
+      ) {
+        this.$set(row.tabs[colIndex].list, newIndex, {
+          ...row.tabs[colIndex].list[newIndex],
+          options: {
+            ...row.tabs[colIndex].list[newIndex].options,
+            options: row.tabs[colIndex].list[newIndex].options.options.map(
+              item => ({
+                ...item
+              })
+            )
+          }
+        });
+      }
+
+      if (row.tabs[colIndex].list[newIndex].type === "grid") {
+        this.$set(
+          row.tabs[colIndex].list,
+          newIndex,
+          JSON.parse(JSON.stringify(row.tabs[colIndex].list[newIndex]))
+        );
+      }
+
+      if (row.tabs[colIndex].list[newIndex].type === "table") {
+        this.$set(row.tabs[colIndex].list, newIndex, {
+          ...row.tabs[colIndex].list[newIndex],
+          list: row.tabs[colIndex].list[newIndex].list.map(item => ({
+            ...item
+          }))
+        });
+      }
+
+      this.selectWidget = row.tabs[colIndex].list[newIndex];
+    },
+    handleWidgetTableAdd($event, row) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("no-put") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.data.list.splice(oldIndex, 0, row.list[newIndex]);
+
+        row.list.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
+            }))
+          }
+        });
+      }
+
+      this.selectWidget = row.list[newIndex];
+    }
   },
   watch: {
     select(val) {