tianheng-ui 0.0.95 → 0.0.98

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.95",
+  "version": "0.0.98",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateFormItem.vue

@@ -372,14 +372,28 @@
     </template>
 
     <template v-if="widget.type == 'image'">
-      <el-image
+      <!-- <el-image
         :style="{
           width: widget.options.width,
           height: widget.options.height
         }"
         :src="widget.options.defaultValue"
         :fit="widget.options.fit"
-        lazy
+        :preview-src-list="[widget.options.defaultValue]"
+        :lazy="widget.options.isLazy"
+      ></el-image> -->
+      <el-image
+        v-for="(item, index) in widget.options.defaultValue"
+        :key="index"
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height,
+          borderRadius: widget.options.borderRadius
+        }"
+        :src="item.url"
+        :fit="widget.options.fit"
+        :preview-src-list="imagePreviewList"
+        :lazy="widget.options.isLazy"
       ></el-image>
     </template>
 
@@ -743,6 +757,13 @@ export default {
       } else {
         return this.widget.options.action;
       }
+    },
+    imagePreviewList() {
+      const list = [];
+      this.widget.options.defaultValue.forEach(item => {
+        list.push(item.url);
+      });
+      return list;
     }
   },
   created() {},

package/packages/FormMaking/WidgetFormItem.vue

@@ -2,7 +2,7 @@
   <el-form-item
     class="widget-view"
     :class="{
-      active: selectWidget.key == widget.key,
+      active: selectWidget.model == widget.model,
       is_req: widget.options.required,
       hideLabel: widget.options.hideLabel,
       'widget-col': ['grid', 'tabs', 'table', 'table_h5', 'alliance'].includes(
@@ -25,7 +25,7 @@
     ></component>
 
     <div
-      v-if="selectWidget.key == widget.key"
+      v-if="selectWidget.model == widget.model"
       class="widget-actions"
       :class="{
         'widget-actions-col': [
@@ -117,36 +117,66 @@ export default {
     },
 
     handleWidgetClone(index) {
-      const key =
-        Date.parse(new Date().toString()) +
-        "_" +
-        Math.ceil(Math.random() * 99999);
-      let cloneData = {
-        ...this.widgetArray.list[index],
-        options: {
-          ...this.widgetArray.list[index].options,
-          remoteFunc: "func_" + key
-        },
-        key,
-        model: this.widgetArray.list[index].type + "_" + key,
-        rules: this.widgetArray.list[index].rules || []
+      const data = JSON.parse(JSON.stringify(this.widgetArray.list[index]));
+
+      const initKey = item => {
+        const key =
+          Date.parse(new Date().toString()) +
+          "_" +
+          Math.ceil(Math.random() * 99999);
+
+        item.options.remoteFunc = `func__${key}`;
+        item.key = key;
+        item.model = item.type + "_" + key;
+
+        if (["table", "table_h5"].includes(item.type)) {
+          item.list.forEach(element => {
+            initKey(element);
+          });
+        }
+        if (["tabs"].includes(item.type)) {
+          item.tabs.forEach(tab => {
+            tab.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+        if (["grid"].includes(item.type)) {
+          item.columns.forEach(column => {
+            column.list.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
       };
+      initKey(data);
 
-      if (
-        this.widgetArray.list[index].type === "radio" ||
-        this.widgetArray.list[index].type === "checkbox" ||
-        this.widgetArray.list[index].type === "select"
-      ) {
-        cloneData = {
-          ...cloneData,
-          options: {
-            ...cloneData.options,
-            options: cloneData.options.options.map(item => ({ ...item }))
-          }
-        };
-      }
+      // let cloneData = {
+      //   ...JSON.parse(JSON.stringify(this.widgetArray.list[index])),
+      //   options: {
+      //     ...this.widgetArray.list[index].options,
+      //     remoteFunc: "func_" + key
+      //   },
+      //   key,
+      //   model: this.widgetArray.list[index].type + "_" + key,
+      //   rules: this.widgetArray.list[index].rules || []
+      // };
+
+      // if (
+      //   this.widgetArray.list[index].type === "radio" ||
+      //   this.widgetArray.list[index].type === "checkbox" ||
+      //   this.widgetArray.list[index].type === "select"
+      // ) {
+      //   cloneData = {
+      //     ...cloneData,
+      //     options: {
+      //       ...cloneData.options,
+      //       options: cloneData.options.options.map(item => ({ ...item }))
+      //     }
+      //   };
+      // }
 
-      this.widgetArray.list.splice(index, 0, cloneData);
+      this.widgetArray.list.splice(index, 0, data);
 
       this.$nextTick(() => {
         this.selectWidget = this.widgetArray.list[index + 1];

package/packages/FormMaking/custom/config.js

@@ -442,24 +442,12 @@ export const basicComponents = [
       onChange: ""
     }
   },
-  {
-    name: "填充物",
-    type: "filler",
-    icon: "icon-ic",
-    options: {
-      defaultValue: "",
-      width: "100%",
-      height: "20px"
-    }
-  },
   {
     name: "图片",
     type: "image",
     icon: "icon-ic",
     options: {
-      defaultValue:
-        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
-      defaultValueArr: [
+      defaultValue: [
         {
           url:
             "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
@@ -473,7 +461,6 @@ export const basicComponents = [
             "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
         }
       ],
-      remote: false,
       width: "",
       height: "200px",
       fit: "fill",
@@ -482,7 +469,8 @@ export const basicComponents = [
       errorSrc: "",
       isLoding: false,
       hidden: false,
-      hideLabel: false
+      hideLabel: false,
+      isLazy: true
     }
   },
   {
@@ -717,7 +705,20 @@ export const layoutComponents = [
       hideLabel: true
     }
   },
-
+  {
+    name: "填充物",
+    type: "filler",
+    icon: "icon-ic",
+    options: {
+      defaultValue: "",
+      width: "100%",
+      height: "20px",
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      hidden: false,
+    }
+  },
   {
     name: "分割线",
     type: "divider",

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

@@ -31,6 +31,11 @@
       <el-form-item label="高度">
         <el-input v-model="widget.options.height"></el-input>
       </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+      </el-form-item>
     </el-form>
   </div>
 </template>

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

@@ -25,39 +25,26 @@
       </el-form-item>
 
       <el-form-item label="图片路径">
-        <div style="marginBottom:10px">
-          <el-radio-group v-model="widget.options.remote" size="mini">
-            <el-radio-button :label="false">图片路径</el-radio-button>
-            <el-radio-button :label="true">大图预览</el-radio-button>
-          </el-radio-group>
+        <div
+          style="display: flex;"
+          v-for="(item, index) in widget.options.defaultValue"
+          :key="item.url"
+        >
+          <div style="width:80px;">地址{{ index + 1 }}：</div>
+          <el-input v-model="item.url"></el-input>
+          <el-button
+            style="padding: 8px;margin-left: 5px;"
+            type="danger"
+            icon="el-icon-minus"
+            size="mini"
+            circle
+            plain
+            @click="handleImageRemove(index)"
+          ></el-button>
         </div>
-        <div style="display: flex;" v-if="!widget.options.remote">
-          <div style="width:80px;">地址：</div>
-          <el-input v-model="widget.options.defaultValue"></el-input>
-        </div>
-
-        <div v-if="widget.options.remote">
-          <div
-            style="display: flex;"
-            v-for="(item, index) in widget.options.defaultValueArr"
-            :key="item.url"
-          >
-            <div style="width:80px;">地址：{{ index + 1 }}</div>
-            <el-input v-model="item.url"></el-input>
-
-            <el-button
-              style="padding: 8px;margin-left: 5px;"
-              type="danger"
-              icon="el-icon-minus"
-              circle
-              plain
-              @click="handleImageRemove(index)"
-            ></el-button>
-          </div>
 
-          <div style="margin-left: 22px;">
-            <el-button type="text" @click="handleAddImage">添加选项</el-button>
-          </div>
+        <div style="margin-left: 22px;">
+          <el-button type="text" @click="handleAddImage">添加选项</el-button>
         </div>
       </el-form-item>
 
@@ -111,7 +98,10 @@
       <el-form-item label="操作属性">
         <el-checkbox v-model="widget.options.hidden">隐藏组件</el-checkbox>
         <el-checkbox v-model="widget.options.hideLabel">隐藏标签</el-checkbox>
-        <el-checkbox v-model="widget.options.isLoding">加载中</el-checkbox>
+        <el-checkbox v-model="widget.options.isLoding"
+          >开启加载动画</el-checkbox
+        >
+        <el-checkbox v-model="widget.options.isLazy">开启懒加载</el-checkbox>
       </el-form-item>
     </el-form>
   </div>
@@ -136,10 +126,10 @@ export default {
       const obj = {
         url: ""
       };
-      this.widget.options.defaultValueArr.push(obj);
+      this.widget.options.defaultValue.push(obj);
     },
     handleImageRemove(index) {
-      this.widget.options.defaultValueArr.splice(index, 1);
+      this.widget.options.defaultValue.splice(index, 1);
     }
   }
 };

package/packages/FormMaking/custom/index.js

@@ -15,7 +15,6 @@ const basicComponents = [
   "slider",
   "number",
   "rate",
-  "filler",
   "image",
   "upload",
   "editor",
@@ -24,7 +23,7 @@ const basicComponents = [
 
 const advanceComponents = ["table", "table_h5", "tabs", "blank"];
 
-const layoutComponents = ["grid", "alliance", "divider"];
+const layoutComponents = ["grid", "alliance", "filler", "divider"];
 
 module.exports = {
   basicComponents,

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

@@ -1,6 +1,7 @@
 <template>
+  <!-- widget.key -->
   <th-row
-    :class="{ active: selectWidget.key == widget.key }"
+    :class="{ active: selectWidget.model == widget.model }"
     :gutter="widget.options.gutter ? widget.options.gutter : 0"
     :justify="widget.options.justify"
     :align="widget.options.align"

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <!-- <div>
     <th-image
       v-if="!widget.options.remote"
       :src="widget.options.defaultValue"
@@ -26,6 +26,17 @@
         :is-loding="widget.options.isLoding"
       ></th-image>
     </div>
+  </div> -->
+  <div>
+    <el-image
+      v-for="(item, index) in widget.options.defaultValue"
+      :key="index"
+      :style="selfStyle"
+      :src="item.url"
+      :fit="widget.options.fit"
+      :preview-src-list="widget.options.defaultValue"
+      :lazy="widget.options.isLazy"
+    ></el-image>
   </div>
 </template>
 
@@ -35,7 +46,16 @@ import ThImage from "ui/Image/index.vue";
 
 export default {
   components: { ThImage },
-  mixins: [itemsComponent]
+  mixins: [itemsComponent],
+  computed: {
+    selfStyle() {
+      const style = { display: "inline-block" };
+      style.width = this.widget.options.width;
+      style.height = this.widget.options.height;
+      style.borderRadius = `${this.widget.options.borderRadius || 0}`;
+      return style;
+    }
+  }
 };
 </script>
 

package/packages/FormMaking/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="fm-container">
-    <el-container v-if="Object.keys(widgetFormData.config).length" class="container-box">
+    <el-container
+      v-if="Object.keys(widgetFormData.config).length"
+      class="container-box"
+    >
       <el-main>
         <el-container>
           <!-- 左侧字段区 -->
@@ -441,7 +444,6 @@ export default {
         "slider",
         "text",
         "button",
-        "filler",
         "image",
         "upload",
         "editor",
@@ -454,7 +456,7 @@ export default {
     },
     layoutFields: {
       type: Array,
-      default: () => ["grid", "alliance", "divider"]
+      default: () => ["grid", "filler", "divider"]
     },
     remoteApis: {
       type: Array,
@@ -463,8 +465,8 @@ export default {
   },
   data() {
     this.basicComponents = basicComponents;
-    this.layoutComponents = layoutComponents;
     this.advanceComponents = advanceComponents;
+    this.layoutComponents = layoutComponents;
     this.baseConfig = JSON.parse(JSON.stringify(baseConfig));
     return {
       widgetFormData: this.data,
@@ -523,6 +525,7 @@ export default {
       const list = this.layoutComponents.filter(e => {
         return this.layoutFields.includes(e.type);
       });
+      console.log(this.layoutComponents)
       return list;
     }
   },
@@ -547,13 +550,10 @@ export default {
       this.baseConfig,
       this.widgetFormData.config
     );
-    if (
-      this.widgetFormData.list &&
-      this.widgetFormData.list.length
-    ) {
+    if (this.widgetFormData.list && this.widgetFormData.list.length) {
       this.widgetFormSelect = this.widgetFormData.list[0];
-    }else {
-      this.widgetFormData.list = []
+    } else {
+      this.widgetFormData.list = [];
     }
   },
   mounted() {},

package/packages/TableMaking/generateTable.vue

@@ -113,7 +113,7 @@ export default {
       default: () => {
         return {
           page: {
-            url: "/viewManage/getViewManageDetailById",
+            url: "/preview/getViewManageDetailById",
             method: "POST",
             params: {}
           },
@@ -218,15 +218,17 @@ export default {
     // 初始化组件配置
     initConfig() {
       this.initData();
-      const info = sessionStorage.getItem("th_oauth_info");
-      if (info) {
-        this.requestConfigData();
-      } else if (this.oauthConfig.token) {
+
+      if (this.oauthConfig.token) {
         const oauthInfo = {
           token: this.oauthConfig.token,
           baseUrl: this.oauthConfig.baseUrl
         };
         sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
+      }
+
+      const info = sessionStorage.getItem("th_oauth_info");
+      if (info) {
         this.requestConfigData();
       } else if (this.oauthConfig.oauth) {
         // 模拟授权认证流程
@@ -261,7 +263,7 @@ export default {
         data: { ...this.network.page.params, moduleId: this.id }
       })
         .then(res => {
-          const resultData = res.data.viewManage;
+          const resultData = res.data;
           if (!resultData) {
             this.tableJson = null;
             return;