tianheng-ui 0.1.68 → 0.1.70

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

@@ -27,11 +27,7 @@
           :widget="element"
           :model.sync="dataModel[scope.$index][element.model]"
           :models="models"
-          :pModel="
-            pModel
-              ? `${pModel}.${scope.$index}`
-              : `${widget.model}.${scope.$index}`
-          "
+          :pModel="getPModel(scope.$index)"
           :config="config"
           :slotKeys="slotKeys"
           :componentsData="componentsData"
@@ -110,6 +106,10 @@ export default {
     },
     handleTableDelete(index) {
       this.dataModel.splice(index, 1);
+    },
+    getPModel(val) {
+      if (this.pModel) return `${this.pModel}.${this.widget.model}.${val}`;
+      else return `${this.widget.model}.${val}`;
     }
   }
 };

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

@@ -13,13 +13,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">
@@ -49,18 +49,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: {

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

@@ -20,11 +20,7 @@
             : dataModel[column.value][element.model]
         "
         :models="models"
-        :pModel="
-          pModel
-            ? `${pModel}.${scope.$index}`
-            : `${widget.model}.${column.value}`
-        "
+        :pModel="getPModel(column.value)"
         :config="config"
         :slotKeys="slotKeys"
         :componentsData="componentsData"
@@ -44,10 +40,12 @@ export default {
   components: { GenerateFormItem },
   mixins: [itemsComponent, eventMixin],
   props: ["slotKeys", "componentsData"],
-  data() {
-    return {};
-  },
-  methods: {}
+  methods: {
+    getPModel(val) {
+      if (this.pModel) return `${this.pModel}.${this.widget.model}.${val}`;
+      else return `${this.widget.model}.${val}`;
+    }
+  }
 };
 </script>
 

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

@@ -54,6 +54,8 @@
 
 <script>
 import { itemsComponent, eventMixin } from "../mixins/index";
+import appConfig from "../../config/index";
+
 export default {
   mixins: [itemsComponent, eventMixin],
   data() {
@@ -65,7 +67,7 @@ export default {
   computed: {
     uploadUrl() {
       if (this.widget.options.remote.open) {
-        const info = sessionStorage.getItem("th_oauth_info");
+        const info = sessionStorage.getItem(appConfig.storageKeys.oauthConfig);
         let baseUrl = "";
         if (info) baseUrl = JSON.parse(info).baseUrl;
         const func = this.config.network[this.widget.options.remote.api];

package/packages/FormMaking/index.vue

@@ -13,24 +13,20 @@
           name="group-basic"
         >
           <draggable
-            tag="ul"
             :list="getBasicComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getBasicComponents"
-              class="fields-label"
-              :class="[[item.type]]"
+              :class="`fields-label ${item.type}`"
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
         <el-collapse-item
@@ -39,24 +35,20 @@
           name="group-advance"
         >
           <draggable
-            tag="ul"
             :list="getAdvanceComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getAdvanceComponents"
-              class="fields-label no-put"
-              :class="[[item.type]]"
+              :class="`fields-label ${item.type} no-put`"
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
         <el-collapse-item
@@ -65,27 +57,23 @@
           name="group-layout"
         >
           <draggable
-            tag="ul"
             :list="getLayoutComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getLayoutComponents"
-              class="fields-label"
-              :class="{
-                'no-put': ['alliance'].includes(item.type),
-                [item.type]: true
-              }"
+              :class="
+                `fields-label ${item.type} 
+                ${['alliance'].includes(item.type) ? 'no-put' : ''}`
+              "
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
         <el-collapse-item
@@ -94,31 +82,27 @@
           name="group-business"
         >
           <draggable
-            tag="ul"
             :list="getBusinessComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getBusinessComponents"
-              class="fields-label"
-              :class="[[item.type]]"
+              :class="`fields-label ${item.type}`"
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
       </el-collapse>
     </div>
 
     <!-- 中间视图区 -->
-    <div class="formMaking-drawing th-fiex_content">
+    <div class="th-fiex_content">
       <!-- 操作区 -->
       <widget-tools
         :baseConfig="baseConfig"
@@ -154,6 +138,10 @@
       >
       </widget-config>
     </div>
+
+    <!-- <th-dialog v-model="showGuide" title="配置" :showFooter="false">
+      <widget-guide></widget-guide>
+    </th-dialog> -->
   </div>
 </template>
 
@@ -163,6 +151,7 @@ import WidgetConfig from "./WidgetConfig";
 import WidgetTools from "./WidgetTools";
 import WidgetForm from "./WidgetForm";
 import GenerateForm from "./GenerateForm";
+import WidgetGuide from "./WidgetGuide.vue";
 import {
   basicComponents,
   advanceComponents,
@@ -171,6 +160,7 @@ import {
   baseConfig
 } from "./custom/config";
 import generateCode from "./util/generateCode.js";
+import appConfig from "./config/index";
 import { deepClone } from "./util/index";
 
 export default {
@@ -180,7 +170,8 @@ export default {
     WidgetConfig,
     WidgetTools,
     WidgetForm,
-    GenerateForm
+    GenerateForm,
+    WidgetGuide
   },
   props: {
     config: Object,
@@ -228,7 +219,7 @@ export default {
     },
     advanceFields: {
       type: Array,
-      default: () => ["table", "tableH5", "list", "tabs"]
+      default: () => ["table", "list", "tabs"]
     },
     layoutFields: {
       type: Array,
@@ -237,7 +228,8 @@ export default {
     businessFields: {
       type: Array,
       default: () => ["blank", "descriptions", "workflow"]
-    }
+    },
+    guide: Boolean
   },
   data() {
     this.basicComponents = basicComponents;
@@ -255,7 +247,8 @@ export default {
         "group-advance",
         "group-layout",
         "group-business"
-      ]
+      ],
+      showGuide: this.guide
     };
   },
   computed: {
@@ -291,6 +284,12 @@ export default {
     },
     apiOptions(val) {
       this.handleNetworkConfig(true);
+    },
+    guide(val) {
+      this.showGuide = val;
+    },
+    showGuide(val) {
+      this.$emit("update:guide", val);
     }
   },
   created() {
@@ -314,7 +313,10 @@ export default {
           token: this.oauthConfig.token,
           baseUrl: this.oauthConfig.baseUrl
         };
-        sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
+        sessionStorage.setItem(
+          appConfig.storageKeys.oauthConfig,
+          JSON.stringify(oauthInfo)
+        );
       } else if (this.oauthConfig.oauth) {
         // 模拟授权认证流程
         this.axios({
@@ -327,7 +329,10 @@ export default {
             token: res.data,
             baseUrl: this.oauthConfig.baseUrl
           };
-          sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
+          sessionStorage.setItem(
+            appConfig.storageKeys.oauthConfig,
+            JSON.stringify(oauthInfo)
+          );
         });
       }
     },
@@ -346,7 +351,7 @@ export default {
             item.options.columns.forEach(e => {
               initList(e.list);
             });
-          } else if (item.type === "table" || item.type === "tableH5") {
+          } else if (item.type === "table" || item.type === "list") {
             initList(item.options.columns);
           } else if (item.type === "workflow") {
             initList(item.options.buttons);
@@ -488,15 +493,10 @@ export default {
       align-items: center;
       height: 45px;
       padding: 0 15px;
-    }
-    ul {
-      position: relative;
-      overflow: hidden;
-      padding: 5px;
-      margin: 0;
+      z-index: 99;
     }
     .fields-label {
-      margin: 0 3px;
+      margin: 2px 3px;
       width: calc(50% - 6px);
       line-height: 26px;
       font-size: 12px;
@@ -505,9 +505,23 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      background: #f4f6fc;
       border: 1px solid #f4f6fc;
       box-sizing: border-box;
       transition: 0.25s;
+      cursor: move;
+
+      i {
+        margin-right: 6px;
+        margin-left: 8px;
+        font-size: 14px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      span {
+        display: inline-block;
+        vertical-align: middle;
+      }
 
       &:hover {
         color: $color-parimary-active !important;
@@ -517,32 +531,8 @@ export default {
           color: $color-parimary-active !important;
         }
       }
-
-      & > a {
-        color: #333;
-        display: block;
-        cursor: move;
-        background: #f4f6fc;
-        border: 1px solid #f4f6fc;
-        transition: 0.25s;
-
-        .icon {
-          margin-right: 6px;
-          margin-left: 8px;
-          font-size: 14px;
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        span {
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
     }
   }
-  .formMaking-drawing {
-  }
 }
 </style>
 
@@ -554,5 +544,9 @@ export default {
     line-height: 40px;
     background-color: #f5f7f9;
   }
+  .el-collapse-item__content {
+    padding: 2px 3px;
+    line-height: normal;
+  }
 }
 </style>

package/packages/FormMaking/lang/zh-CN.js

@@ -11,7 +11,7 @@ export default {
         date: '日期选择器',
         rate: '评分',
         color: '颜色选择器',
-        select: '下拉选择框',
+        select: '下拉选择器',
         switch: '开关',
         slider: '滑块',
         text: '文字',
@@ -20,7 +20,7 @@ export default {
         upload: '图片',
         editor: '编辑器',
         cascader: '级联选择器',
-        table: '子表单',
+        table: '子表格',
         grid: '栅格布局',
         tabs: '标签页',
         divider: '分割线'

package/packages/FormMaking/network/axios.js

@@ -0,0 +1,88 @@
+import axios from "axios";
+import Log from "../util/Log";
+import appConfig from "../config/index";
+import { Notification } from "element-ui";
+
+export const init = baseConfig => {
+  // 创建axios实例
+  const Axios = axios.create({
+    baseURL: baseConfig.baseUrl,
+    timeout: 60000 // 请求超时时间
+    // withCredentials: true, //允许携带cookie
+  });
+
+  // 添加请求拦截器
+  Axios.interceptors.request.use(
+    config => {
+      const info = sessionStorage.getItem(appConfig.storageKeys.oauthConfig);
+      if (info) {
+        const oauthInfo = JSON.parse(info);
+        config.baseURL = oauthInfo.baseUrl;
+        config.headers["Authorization"] = oauthInfo.token;
+      }
+      if (baseConfig.headers) {
+        config.headers = Object.assign(config.headers, baseConfig.headers);
+      }
+      return config;
+    },
+    error => {
+      Promise.reject(error);
+    }
+  );
+
+  // 添加响应拦截器
+  Axios.interceptors.response.use(
+    response => {
+      const code = response.status;
+      if (code < 200 || code > 300) {
+        Notification.error({
+          title: response.message
+        });
+        return Promise.reject("error");
+      }
+
+      const dataCode = response.data.code;
+      if (dataCode && dataCode !== 200) {
+        Notification.error({
+          title: response.data.message
+        });
+        return Promise.reject("error");
+      }
+
+      if (baseConfig.debug) {
+        Log.prettyPrimary("Request Url:", response.request.responseURL);
+        Log.prettySuccess("Request Res:", response);
+      }
+
+      return response.data;
+    },
+    error => {
+      let code = 0;
+      try {
+        code = error.response.data.status;
+      } catch (e) {
+        if (error.toString().indexOf("Error: timeout") !== -1) {
+          Notification.error({
+            title: "网络请求超时",
+            duration: 5000
+          });
+          return Promise.reject(error);
+        }
+      }
+      if (code) {
+        const errorMsg = error.response.data.message;
+        Notification.error({
+          title: errorMsg || "未知错误",
+          duration: 5000
+        });
+      } else {
+        Notification.error({
+          title: "接口请求失败",
+          duration: 5000
+        });
+      }
+      return Promise.reject(error);
+    }
+  );
+  return Axios;
+};

package/packages/FormMaking/styles/index.scss

@@ -66,7 +66,7 @@
     overflow: hidden;
     content: "";
     // 隐藏内容
-    a {
+    i {
       display: none;
     }
   }
@@ -75,7 +75,7 @@
   .draggable-list {
     min-height: 52px;
     background-color: #fff;
-    // border: 1px dashed rgba(170, 170, 170, 0.7);
+    border: 1px dashed rgba(170, 170, 170, 0.7);
   }
 
   .widgetForm {
@@ -150,7 +150,7 @@
       }
 
       .value {
-        color: var(--th-blue);
+        color: $color-parimary;
         cursor: pointer;
       }
     }

package/packages/FormMaking/util/Log.js

@@ -0,0 +1,99 @@
+function Log() {}
+
+Log.prototype.type = ["primary", "success", "warn", "error", "info"];
+
+Log.prototype.typeColor = function(type) {
+  let color = "";
+  switch (type) {
+    case "primary":
+      color = "#2d8cf0";
+      break;
+    case "success":
+      color = "#19be6b";
+      break;
+    case "info":
+      color = "#909399";
+      break;
+    case "warn":
+      color = "#ff9900";
+      break;
+    case "error":
+      color = "#f03f14";
+      break;
+    default:
+      color = "#35495E";
+      break;
+  }
+  return color;
+};
+
+Log.prototype.isArray = function(obj) {
+  return Object.prototype.toString.call(obj) === "[object Array]";
+};
+
+Log.prototype.print = function(text, type = "default", back = false) {
+  if (typeof text === "object") {
+    // 如果是對象則調用打印對象方式
+    this.isArray(text) ? console.table(text) : console.dir(text);
+    return;
+  }
+  if (back) {
+    // 如果是打印帶背景圖的
+    console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px; color: #fff;`);
+  } else {
+    console.log(
+      `%c ${text} `,
+      `border: 1px solid ${this.typeColor(type)};
+        padding: 2px; border-radius: 4px;
+        color: ${this.typeColor(type)};`
+    );
+  }
+};
+
+Log.prototype.printBack = function(type = "primary", title) {
+  this.print(type, title, true);
+};
+
+Log.prototype.pretty = function(type = "primary", title, text) {
+  if (typeof text === "object") {
+    // console.group("Console Group", title);
+    console.log(
+      `%c ${title}`,
+      `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
+        padding: 1px; border-radius: 4px; color: #fff;`
+    );
+    this.isArray(text) ? console.table(text) : console.dir(text);
+    console.groupEnd();
+    return;
+  }
+  console.log(
+    `%c ${title} %c ${text} %c`,
+    `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)};
+      padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
+    `border:1px solid ${this.typeColor(type)};
+      padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
+    "background:transparent"
+  );
+};
+
+Log.prototype.prettyPrimary = function(title, ...text) {
+  text.forEach(t => this.pretty("primary", title, t));
+};
+
+Log.prototype.prettySuccess = function(title, ...text) {
+  text.forEach(t => this.pretty("success", title, t));
+};
+
+Log.prototype.prettyWarn = function(title, ...text) {
+  text.forEach(t => this.pretty("warn", title, t));
+};
+
+Log.prototype.prettyError = function(title, ...text) {
+  text.forEach(t => this.pretty("error", title, t));
+};
+
+Log.prototype.prettyInfo = function(title, ...text) {
+  text.forEach(t => this.pretty("info", title, t));
+};
+
+export default new Log();

package/packages/FormMaking/util/generateCode.js

@@ -112,7 +112,7 @@ export default function(config, type = "making") {
     },
     methods: {
       handleSubmit () {
-        this.$refs.makingForm.getConfig().then(res => {
+        this.$refs.makingForm.getData().then(res => {
           console.log(res);
         });
       }
@@ -146,7 +146,7 @@ export default function(config, type = "making") {
         console.log(val);
       },
       handleSubmit () {
-        this.$refs.generateForm.getConfig().then(res => {
+        this.$refs.generateForm.getData().then(res => {
           console.log(res);
         });
       }

package/packages/TableMaking/config/index.js

@@ -0,0 +1,8 @@
+export default {
+  title: "TableMaking",
+  logo: "",
+  version: "1.0.0",
+  storageKeys: {
+    oauthConfig: "_TH_OauthConfig"
+  }
+};