tianheng-ui 0.1.68 → 0.1.70

package/packages/TableMaking/generateTable.vue

@@ -84,7 +84,8 @@ import Search from "./custom/items/search/index-pc.vue";
 import Tools from "./custom/items/tools/index-pc.vue";
 import STable from "./custom/items/table/index-pc.vue";
 import Actions from "./custom/items/actions/index-pc.vue";
-import * as Axios from "lib/theme-chalk/js/axios";
+import * as Axios from "./network/axios";
+import appConfig from "./config/index";
 import { deepClone } from "../FormMaking/util";
 export default {
   name: "thTableGenerate",
@@ -169,7 +170,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({
@@ -182,7 +186,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)
+          );
           // this.axios.defaults.baseURL = this.oauthConfig.baseUrl;
         });
       }

package/packages/TableMaking/index.vue

@@ -22,7 +22,14 @@
         ref="configRef"
       ></widget-config>
     </div>
-    <!-- <widget-guide :visible="true"></widget-guide> -->
+
+    <th-dialog v-model="showGuide" title="引导配置" :showFooter="false">
+      <widget-guide
+        :config="tableConfig"
+        :apiOptions="apiOptions"
+        @save="showGuide = false"
+      ></widget-guide>
+    </th-dialog>
   </div>
 </template>
 
@@ -79,12 +86,14 @@ export default {
         "generateCode",
         "generateJson"
       ]
-    }
+    },
+    guide: Boolean
   },
   data() {
     this.baseConfig = deepClone(baseConfig);
     return {
-      tableConfig: this.baseConfig
+      tableConfig: this.baseConfig,
+      showGuide: this.guide
     };
   },
   watch: {
@@ -94,6 +103,12 @@ export default {
     config(val) {
       this.tableConfig = Object.assign(this.baseConfig, val);
       this.handleNetworkConfig();
+    },
+    guide(val) {
+      this.showGuide = val;
+    },
+    showGuide(val) {
+      this.$emit("update:guide", val);
     }
   },
   mounted() {

package/packages/TableMaking/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/TableMaking/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/TableMaking/widgetGuide.vue

@@ -1,26 +1,107 @@
 <template>
-  <div v-show="show" class="widgetGuide">
-    <div class="box">
-      <div class="header"></div>
-      <div class="content">
-        <div>你好</div>
-        <div>让我们来了解一些基本信息</div>
-      </div>
-      <div class="footer th-is_border_top">
-        <div></div>
-        <div class="stepView">
-          <el-button
-            :disabled="step === 0"
-            type="primary"
-            icon="el-icon-back"
-            size="small"
-            @click="handleBack"
-            >上一步</el-button
-          >
-          <el-button type="primary" size="small" @click="handleNext"
-            >下一步<i class="el-icon-right el-icon--right"></i
-          ></el-button>
+  <div class="widgetGuide">
+    <el-steps :active="step" finish-status="success" simple>
+      <el-step title="列表配置" icon="el-icon-s-operation" description="">
+      </el-step>
+      <!-- <el-step
+        title="字段配置"
+        icon="el-icon-c-scale-to-original"
+        description=""
+      ></el-step> -->
+      <el-step title="按钮配置" icon="el-icon-set-up" description=""></el-step>
+    </el-steps>
+    <div class="content">
+      <el-form :model="config" label-width="80px" size="small">
+        <div v-show="step === 0">
+          <el-form-item size="small">
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="字段的配置方式"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段类型</span>
+            </el-tooltip>
+            <el-radio-group v-model="config.table.fields.type">
+              <el-radio-button label="custom" disabled>自定义</el-radio-button>
+              <el-radio-button label="api">接口导入</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="开启后，选择数据接口会触发 remote-params 回调，用于从服务器查询字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">远程字段</span>
+            </el-tooltip>
+            <el-switch v-model="config.table.fields.remote"> </el-switch>
+          </el-form-item>
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="列表初始化完成后，调用该接口获取列表数据"
+              placement="top"
+            >
+              <span style="color: #409EFF;">列表接口</span>
+            </el-tooltip>
+            <el-select
+              v-model="config.table.mounted.api"
+              style="width:100%"
+              clearable
+              placeholder="请选择"
+              no-data-text="暂无接口，请前往【接口模块】创建"
+              filterable
+            >
+              <el-option
+                v-for="item in apiOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="列表名称">
+            <el-input
+              v-model="config.table.title"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+        </div>
+        <div v-show="step === 1">
+          <el-form-item label="">
+            <div v-for="item in Object.values(config.tools)" :key="item.type">
+              <el-checkbox v-model="item.show" :label="item.name"></el-checkbox>
+            </div>
+          </el-form-item>
         </div>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div></div>
+      <div class="stepView">
+        <el-button
+          type="primary"
+          icon="el-icon-back"
+          size="small"
+          :disabled="step === 0"
+          @click="handleBack"
+          >上一步</el-button
+        >
+        <el-button
+          v-if="step !== 1"
+          type="primary"
+          size="small"
+          @click="handleNext"
+        >
+          下一步<i class="el-icon-right el-icon--right"></i>
+        </el-button>
+        <el-button v-else type="success" size="small" @click="handleSave">
+          完&nbsp;&nbsp;&nbsp;成<i class="el-icon-finished el-icon--right"></i>
+        </el-button>
       </div>
     </div>
   </div>
@@ -28,19 +109,16 @@
 
 <script>
 export default {
-  props: { visible: { type: Boolean, default: true } },
+  props: { config: Object, apiOptions: Array },
   data() {
     return {
-      show: this.visible,
-      step: 0
+      step: 0,
+      formData: {}
     };
   },
-  watch: {
-    visible(val) {
-      this.show = val;
-    },
-    show(val) {
-      this.$emit("update:visible", val);
+  computed: {
+    getFields() {
+      return [];
     }
   },
   created() {},
@@ -51,6 +129,9 @@ export default {
     },
     handleNext() {
       this.step++;
+    },
+    handleSave() {
+      this.$emit("save");
     }
   }
 };
@@ -58,38 +139,21 @@ export default {
 
 <style lang="scss" scoped>
 .widgetGuide {
-  position: absolute;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba($color: #000000, $alpha: 0.6);
-  z-index: 999;
 
-  .box {
-    position: relative;
-    width: calc(100% - 200px);
-    height: calc(100% - 200px);
-    background-color: white;
-    border-radius: 4px;
-
-    .header {
-      height: 50px;
-    }
-    .content {
-      height: calc(100% - 100px);
-    }
-    .footer {
-      padding: 10px 20px;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
+  .content {
+    height: calc(100% - 96px);
+    padding-top: 10px;
+  }
+  .footer {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
 
-      .stepView {
-      }
+    .stepView {
     }
   }
 }

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

@@ -1,98 +0,0 @@
-<template>
-  <div class="component-config">
-    <el-collapse-item title="组件配置" name="group-element">
-      <el-form-item label="标题">
-        <el-input v-model="widget.name"></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
-            v-model="widget.options.labelWidth"
-            :min="0"
-            :max="200"
-            :disabled="!widget.options.isLabelWidth"
-          >
-          </el-input-number>
-        </div>
-      </el-form-item>
-
-      <el-form-item>
-        <div class="config-header" slot="label">
-          <span class="title">默认值</span>
-          <span class="value" @click="handleAddData">添加数据</span>
-        </div>
-        <code-editor
-          v-model="widget.options.defaultValue"
-          language="json"
-        ></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";
-import CodeEditor from "ui/CodeEditor/index.vue";
-export default {
-  components: {
-    Draggable,
-    CodeEditor
-  },
-  props: {},
-  mixins: [configComponent],
-  mounted() {},
-  methods: {
-    handleAddData() {
-      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
-      let dic = {};
-      this.widget.list.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;
-        }
-      });
-      defaultValue.push(dic);
-      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
-    }
-  }
-};
-</script>
-
-<style></style>

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

@@ -1,112 +0,0 @@
-<template>
-  <div class="component-tableH5">
-    <draggable
-      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)"
-    >
-      <transition-group name="fade" tag="div" class="draggable-list">
-        <div
-          v-for="(element, elementIndex) in widget.options.columns"
-          class="draggable-list-item"
-          :key="element.key"
-          @click.stop="selectWidget = element"
-        >
-          <widget-form-item
-            :widget="element"
-            :widgetArray="widget.options.columns"
-            :widgetIndex="elementIndex"
-            :select.sync="selectWidget"
-            :config="config"
-          >
-          </widget-form-item>
-          <div v-if="widget.options.isDelete && elementIndex === 0">
-            <el-button type="danger">{{
-              widget.options.deleteButtonText
-            }}</el-button>
-          </div>
-        </div>
-      </transition-group>
-    </draggable>
-    <div v-if="widget.options.isAdd" class="footer">
-      <el-button type="text" :disabled="widget.options.disabled">{{
-        widget.options.addButtonText
-      }}</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { itemsComponent, eventMixin } from "../mixins/index";
-import Draggable from "vuedraggable";
-import WidgetFormItem from "../../WidgetFormItem.vue";
-export default {
-  components: { Draggable, WidgetFormItem },
-  mixins: [itemsComponent, eventMixin],
-  data() {
-    return {
-      selectWidget: {}
-    };
-  },
-  watch: {
-    select(val) {
-      this.selectWidget = val;
-    },
-    selectWidget: {
-      handler(val) {
-        this.$emit("update:select", val);
-      },
-      deep: true
-    }
-  },
-  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.splice(oldIndex, 0, newComponent);
-
-        this.widget.options.columns.splice(newIndex, 1);
-        return false;
-      }
-
-      if (!newComponent.key) {
-        const key =
-          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
-        newComponent.key = key;
-        newComponent.model = `${newComponent.type}_${key}`;
-      }
-      this.$set(this.widget.options.columns, newIndex, newComponent);
-      this.selectWidget = newComponent;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.component-tableH5 {
-  .draggable-list-item:nth-child(1) {
-    display: flex;
-    > div:first-child {
-      flex: 1;
-    }
-  }
-
-  .footer {
-    text-align: center;
-  }
-}
-</style>