tianheng-ui 0.1.68 → 0.1.69

package/package.json

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

package/packages/FormMaking/GenerateForm.vue

@@ -36,9 +36,10 @@
 </template>
 
 <script>
-import * as Axios from "lib/theme-chalk/js/axios";
-import { deepClone, getProperty, setProperty } from "./util/index";
 import GenetateFormItem from "./GenerateFormItem";
+import * as Axios from "./network/axios";
+import appConfig from "./config/index";
+import { deepClone, getProperty, setProperty } from "./util/index";
 
 export default {
   name: "thFormGenerate",
@@ -95,11 +96,14 @@ export default {
       console.log("watch models =>", this.models);
     }
   },
-  created() {
-    localStorage.setItem("_TH_OauthConfig", JSON.stringify(this.oauthConfig));
-    this.axios = Axios.init(this.oauthConfig);
-  },
+  created() {},
   mounted() {
+    sessionStorage.setItem(
+      appConfig.storageKeys.oauthConfig,
+      JSON.stringify(this.oauthConfig)
+    );
+    this.axios = Axios.init(this.oauthConfig);
+
     this.generateModle(this.formConfig.list, this.models);
     console.log("mounted models =>", this.models);
     this.handleMountedRemotData();
@@ -298,7 +302,9 @@ export default {
             initParams(item.children);
           } else {
             const value =
-            item.defaultValue || getProperty(this.models, item.pAlias) || null;
+              item.defaultValue ||
+              getProperty(this.models, item.pAlias) ||
+              null;
             setProperty(params, item.pAlias, value);
           }
         });

package/packages/FormMaking/WidgetTools.vue

@@ -224,7 +224,6 @@
 <script>
 import { deepClone } from "./util/index";
 import * as XLSX from "xlsx/xlsx.mjs";
-import request from "./util/request";
 import generateCode from "./util/generateCode.js";
 import GenerateForm from "./GenerateForm";
 export default {

package/packages/FormMaking/config/index.js

@@ -1,4 +1,6 @@
 export default {
+  title: "FormMaking",
+  logo: '',
   version: "1.0.0",
   storageKeys: {
     oauthConfig: "_TH_OauthConfig"

package/packages/FormMaking/custom/config.js

@@ -254,7 +254,7 @@ export const basicComponents = [
     rules: []
   },
   {
-    name: "下拉选择框",
+    name: "下拉选择器",
     type: "select",
     icon: "icon-select",
     options: {
@@ -597,7 +597,7 @@ export const basicComponents = [
 
 export const advanceComponents = [
   {
-    name: "子表单",
+    name: "子表格",
     type: "table",
     icon: "th-icon-insertrowabove",
     options: {
@@ -629,7 +629,7 @@ export const advanceComponents = [
     rules: []
   },
   {
-    name: "子表单H5",
+    name: "子表格H5",
     type: "tableH5",
     icon: "th-icon-insertrowleft",
     options: {
@@ -662,7 +662,7 @@ export const advanceComponents = [
     type: "list",
     icon: "th-icon-orderedlist",
     options: {
-      defaultValue: "",
+      defaultValue: [],
       columns: [],
       customClass: "",
       labelWidth: 100,
@@ -825,7 +825,7 @@ export const businessComponents = [
   {
     name: "描述列表",
     type: "descriptions",
-    icon: "th-icon-layout",
+    icon: "th-icon-detail",
     options: {
       border: false,
       column: 1,
@@ -925,7 +925,7 @@ export const businessComponents = [
   {
     name: "流程节点",
     type: "workflow",
-    icon: "th-icon-layout",
+    icon: "th-icon-apartment",
     options: {
       reverse: false,
       placement: "right",

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

@@ -6,10 +6,12 @@
       </el-form-item>
 
       <el-form-item label="栅格间隔">
-        <el-input
-          type="number"
-          v-model.number="widget.options.gutter"
-        ></el-input>
+        <el-input-number
+          style="width:100%"
+          v-model="widget.options.gutter"
+          controls-position="right"
+          :min="0"
+        ></el-input-number>
       </el-form-item>
 
       <el-form-item label="列配置项">
@@ -28,7 +30,13 @@
             :key="index"
           >
             <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
-            <el-input v-model.number="item.span" type="number"> </el-input>
+            <el-input-number
+              style="width:100%"
+              v-model="item.span"
+              controls-position="right"
+              :min="0"
+              :max="24"
+            ></el-input-number>
             <el-button
               class="delete"
               circle
@@ -39,12 +47,12 @@
             ></el-button>
           </div>
         </draggable>
-        <div style="margin-left: 22px;text-align: right;">
+        <div style="margin-left: 22px;">
           <el-button type="text" @click="handleAddOption">添加列</el-button>
         </div>
       </el-form-item>
 
-      <el-form-item label="水平排列方式">
+      <el-form-item label="水平排列">
         <el-select v-model="widget.options.justify">
           <el-option value="start" label="左对齐"></el-option>
           <el-option value="end" label="右对齐"></el-option>
@@ -54,7 +62,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="垂直排列方式">
+      <el-form-item label="垂直排列">
         <el-select v-model="widget.options.align">
           <el-option value="top" label="顶部对齐"></el-option>
           <el-option value="middle" label="居中"></el-option>
@@ -107,7 +115,7 @@ export default {
   display: flex;
   align-items: center;
 
-  .el-input {
+  .el-input-number {
     margin: 0 5px;
   }
 

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

@@ -1,18 +1,100 @@
 <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>
+          <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 {
-  data() {
-    return {};
+  components: {
+    Draggable,
+    CodeEditor
   },
-  created() {},
+  props: {},
+  mixins: [configComponent],
   mounted() {},
-  methods: {},
+  methods: {
+    handleAddData() {
+      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
+      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;
+        }
+      });
+      defaultValue.push(dic);
+      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

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

@@ -1,18 +1,119 @@
 <template>
-  <div>
-     
+  <div class="component-list">
+    <div
+      v-for="(column, columnIndex) in dataModel"
+      class="tableH5-list"
+      :key="`tableH5_${columnIndex}`"
+    >
+      <div
+        v-for="(element, elementIndex) in widget.options.columns"
+        class="tableH5-list-item"
+        :key="`tableH5_${columnIndex}_${element.key}`"
+      >
+        <generate-form-item
+          style="flex:1;"
+          :widget="element"
+          :model.sync="
+            element.type === 'grid' && !element.options.isEntity
+              ? column
+              : column[element.model]
+          "
+          :models="models"
+          :pModel="
+            pModel
+              ? `${pModel}.${columnIndex}`
+              : `${widget.model}.${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: ["models", "prop", "slotKeys", "componentsData"],
   data() {
     return {};
   },
-  created() {},
-  mounted() {},
-  methods: {},
+  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);
+    }
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.component-list {
+  background: #fff;
+
+  .tableH5-list {
+    .tableH5-list-item {
+      width: 100%;
+    }
+    .tableH5-list-item:nth-child(1) {
+      display: flex;
+      > div:first-child {
+        flex: 1;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .footer {
+    text-align: center;
+  }
+}
+</style>

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

@@ -171,6 +171,7 @@ import {
   baseConfig
 } from "./custom/config";
 import generateCode from "./util/generateCode.js";
+import appConfig from "./config/index";
 import { deepClone } from "./util/index";
 
 export default {
@@ -314,7 +315,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 +331,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)
+          );
         });
       }
     },
@@ -488,6 +495,7 @@ export default {
       align-items: center;
       height: 45px;
       padding: 0 15px;
+      z-index: 99;
     }
     ul {
       position: relative;

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

@@ -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;
       }
     }