tianheng-ui 0.0.72 → 0.0.74

package/package.json

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

package/packages/Dialog/index.vue

@@ -41,7 +41,7 @@
       <el-button
         v-if="showAffirm"
         type="primary"
-        :loading="loading"
+        :loading="affirmLoading"
         @click="handleAffirm"
         >{{ affirmText }}</el-button
       >
@@ -61,7 +61,6 @@ export default {
   },
   props: {
     visible: Boolean,
-    loading: Boolean,
     title: { type: String, default: "" },
     width: { type: String, default: "800px" },
     fullscreen: { type: Boolean, default: false },
@@ -76,6 +75,7 @@ export default {
     destroyOnClose: { type: Boolean, default: false },
 
     showAffirm: { type: Boolean, default: true },
+    affirmLoading: Boolean,
     affirmText: { type: String, default: "确 认" },
 
     showCancel: { type: Boolean, default: true },

package/packages/FormMaking/Container.vue

@@ -117,6 +117,7 @@
                 style="margin:0 10px;"
               >
                 <el-button
+                  v-if="tools.includes('upload')"
                   type="text"
                   size="medium"
                   icon="el-icon-upload2"
@@ -131,12 +132,9 @@
                     :show-file-list="false"
                     :on-change="onExcelFileChange"
                   >
-                    <el-button v-if="upload" type="text" size="medium"
-                      >导入EXCEL
-                    </el-button>
+                    <el-button type="text" size="medium">导入EXCEL </el-button>
                   </el-upload>
                   <el-button
-                    v-if="upload"
                     type="text"
                     size="medium"
                     @click="dialog.import.visible = true"
@@ -146,7 +144,7 @@
               </el-popover>
 
               <el-button
-                v-if="clearable"
+                v-if="tools.includes('clearable')"
                 type="text"
                 size="medium"
                 icon="el-icon-delete"
@@ -154,7 +152,7 @@
                 >清空
               </el-button>
               <el-button
-                v-if="preview"
+                v-if="tools.includes('preview')"
                 type="text"
                 size="medium"
                 icon="el-icon-view"
@@ -162,7 +160,7 @@
                 >预览
               </el-button>
               <el-button
-                v-if="generateJson"
+                v-if="tools.includes('generateJson')"
                 type="text"
                 size="medium"
                 icon="el-icon-tickets"
@@ -170,7 +168,7 @@
                 >生成JSON</el-button
               >
               <el-button
-                v-if="generateCode"
+                v-if="tools.includes('generateCode')"
                 type="text"
                 size="medium"
                 icon="el-icon-document"
@@ -368,8 +366,6 @@ import WidgetConfig from "./WidgetConfig";
 import FormConfig from "./FormConfig";
 import WidgetForm from "./WidgetForm";
 import GenerateForm from "./GenerateForm";
-import ThDialog from "ui/Dialog/index.vue";
-import ThCodeEditor from "ui/CodeEditor/index.vue";
 import {
   basicComponents,
   advanceComponents,
@@ -387,30 +383,26 @@ export default {
     WidgetConfig,
     FormConfig,
     WidgetForm,
-    GenerateForm,
-    ThDialog,
-    ThCodeEditor
+    GenerateForm
   },
   props: {
-    preview: {
-      type: Boolean,
-      default: false
-    },
-    generateCode: {
-      type: Boolean,
-      default: false
-    },
-    generateJson: {
-      type: Boolean,
-      default: false
-    },
-    upload: {
-      type: Boolean,
-      default: false
+    data: {
+      type: Object,
+      default: () => {
+        return { list: [], config: baseConfig };
+      }
     },
-    clearable: {
-      type: Boolean,
-      default: false
+    tools: {
+      type: Array,
+      default: () => {
+        return [
+          "upload",
+          "clearable",
+          "preview",
+          "generateCode",
+          "generateJson"
+        ];
+      }
     },
     basicFields: {
       type: Array,
@@ -451,15 +443,12 @@ export default {
     }
   },
   data() {
+    this.basicComponents = basicComponents;
+    this.layoutComponents = layoutComponents;
+    this.advanceComponents = advanceComponents;
     return {
-      basicComponents,
-      layoutComponents,
-      advanceComponents,
-      widgetFormSelect: null,
-      widgetFormData: {
-        list: [],
-        config: baseConfig
-      },
+      widgetFormData: this.data,
+      widgetFormSelect: this.data.list[0],
       widgetValue: {},
       configTab: "widget",
       client: "monitor",
@@ -521,8 +510,14 @@ export default {
     widgetFormData: {
       deep: true,
       handler: function(val) {
-        // console.log(this.$refs.widgetForm);
+        console.log("widgetFormData =>", val);
+        this.$emit("update:data", val);
       }
+    },
+    data(val) {
+      console.log("data =>", val);
+      this.setJSON(val);
+      // this.widgetFormData = val;
     }
   },
   mounted() {},
@@ -622,9 +617,9 @@ export default {
               const data = this.getComponentsConfig("input");
               let name = titleDom.innerText;
               if (name.charAt(0) === "*") {
-                name = name.slice(1)
+                name = name.slice(1);
                 data.options.required = true;
-                data.rules = data.rules || []
+                data.rules = data.rules || [];
                 data.rules.push({
                   required: true,
                   message: "单行文本必须填写"

package/packages/FormMaking/WidgetConfig.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show">
+  <div class="widgetConfig" v-if="show">
     <component
       :widget="data"
       :config="config"
@@ -12,6 +12,7 @@
     <th-dialog
       title="动作设置"
       v-model="eventsDialog.visible"
+      :modal-append-to-body="false"
       @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
     >
       <div class="eventsSetting">
@@ -347,127 +348,125 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.remoteApis {
-  width: 100%;
-  margin-bottom: 6px;
+.widgetConfig {
+  .remoteApis {
+    width: 100%;
+    margin-bottom: 6px;
 
-  /deep/ .el-input--prefix .el-input__inner {
-    padding-left: 85px;
-  }
+    /deep/ .el-input--prefix .el-input__inner {
+      padding-left: 85px;
+    }
 
-  /deep/ .el-input__prefix {
-    left: 0;
-    width: 75px;
-    color: #999;
+    /deep/ .el-input__prefix {
+      left: 0;
+      width: 75px;
+      color: #999;
+    }
   }
-}
 
-/deep/ .el-form-item__label {
-  width: 100%;
-}
-
-.el-dialog__body {
-  padding: 20px;
-}
+  .el-dialog__body {
+    padding: 20px;
+  }
 
-.eventsSetting {
-  height: 100%;
-  display: flex;
-  border: 1px solid #eee;
+  .eventsSetting {
+    height: 100%;
+    display: flex;
+    border: 1px solid #eee;
 
-  .list {
-    width: 270px;
-    min-height: 430px;
-    overflow-y: overlay;
-    border-right: 1px solid #eee;
+    .list {
+      width: 270px;
+      min-height: 430px;
+      overflow-y: overlay;
+      border-right: 1px solid #eee;
 
-    .list-header {
-      position: sticky;
-      top: 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 5px;
-      line-height: 30px;
-      border-bottom: 1px solid #eee;
-      background: #f2f6fc;
-    }
+      .list-header {
+        position: sticky;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px;
+        line-height: 30px;
+        border-bottom: 1px solid #eee;
+        background: #f2f6fc;
+      }
 
-    .list-item {
-      display: flex;
-      // align-items: center;
-      margin: 5px;
-      padding: 10px;
-      border-radius: 3px;
-      border: 1px solid #dcdfe6;
-      transition: 0.25s;
+      .list-item {
+        display: flex;
+        // align-items: center;
+        margin: 5px;
+        padding: 10px;
+        border-radius: 3px;
+        border: 1px solid #dcdfe6;
+        transition: 0.25s;
 
-      .list-item-title {
-        color: var(--th-green);
-      }
-      .list-item-value {
-        flex: 1;
-        padding: 0 5px;
-      }
-      i {
-        cursor: pointer;
+        .list-item-title {
+          color: var(--th-green);
+        }
+        .list-item-value {
+          flex: 1;
+          padding: 0 5px;
+        }
+        i {
+          cursor: pointer;
+        }
       }
-    }
 
-    .list-item:hover {
-      background-color: #f2f6fc;
+      .list-item:hover {
+        background-color: #f2f6fc;
+      }
     }
-  }
 
-  .detail {
-    flex: 1;
-    padding: 10px;
+    .detail {
+      flex: 1;
+      padding: 10px;
 
-    > div:nth-child(1) {
-      position: relative;
-      display: flex;
-      align-items: center;
-      margin-bottom: 20px;
-      padding-left: 10px;
+      > div:nth-child(1) {
+        position: relative;
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-left: 10px;
 
-      /deep/ .el-input {
-        flex: 1;
-        margin-left: 10px;
+        /deep/ .el-input {
+          flex: 1;
+          margin-left: 10px;
+        }
       }
-    }
-
-    > div:nth-child(1)::after {
-      content: "*";
-      position: absolute;
-      left: 0;
-      color: red;
-    }
 
-    > div:nth-child(2) {
-      height: calc(100% - 48px);
-      > div:nth-child(1) {
-        margin-bottom: 10px;
-        color: var(--th-blue);
+      > div:nth-child(1)::after {
+        content: "*";
+        position: absolute;
+        left: 0;
+        color: red;
       }
 
-      > div:nth-child(3) {
-        margin-top: 10px;
-        color: var(--th-blue);
+      > div:nth-child(2) {
+        height: calc(100% - 48px);
+        > div:nth-child(1) {
+          margin-bottom: 10px;
+          color: var(--th-blue);
+        }
+
+        > div:nth-child(3) {
+          margin-top: 10px;
+          color: var(--th-blue);
+        }
       }
     }
   }
-}
-.selectableRange {
-  width: 100%;
+  .selectableRange {
+    width: 100%;
 
-  /deep/ .el-range-separator {
-    width: 20px;
+    /deep/ .el-range-separator {
+      width: 20px;
+    }
   }
-}
 
-.functions {
-  span {
-    margin: 0 5px;
+  .functions {
+    span {
+      margin: 0 5px;
+    }
   }
 }
 </style>

package/packages/FormMaking/index.js

@@ -1,6 +1,6 @@
 import "normalize.css/normalize.css";
 import "./iconfont/iconfont.css";
-import "./styles/cover.scss";
+// import "./styles/cover.scss";
 import "./styles/index.scss";
 
 import FormMaking from "./Container.vue";

package/packages/FormMaking/making.js

@@ -1,6 +1,6 @@
 import "normalize.css/normalize.css";
 import "./iconfont/iconfont.css";
-import "./styles/cover.scss";
+// import "./styles/cover.scss";
 import "./styles/index.scss";
 import FormMaking from "./Container.vue";
 FormMaking.install = function(Vue) {

package/packages/FormMaking/styles/index.scss

@@ -733,6 +733,10 @@ $primary-background-color: #ecf5ff;
       padding: 5px;
     }
   }
+
+  .el-form-item__label {
+    width: 100%;
+  }
 }
 
 .widget-actions {

package/packages/TableMaking/custom/configs/fieldSearch.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+     
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/TableMaking/custom/configs/fieldTable.vue

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/TableMaking/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="th-table-making">
+    <el-container>
+      <el-container>
+        <el-header>
+          <el-button type="text" size="medium" icon="el-icon-delete">
+            桌面端
+          </el-button>
+          <el-button type="text" size="medium" icon="el-icon-delete">
+            移动端
+          </el-button>
+        </el-header>
+        <el-main>
+          <widget-table
+            :searchFields="searchFields"
+            :tableFields="tableFields"
+            @move="handleMoveChange"
+          ></widget-table>
+        </el-main>
+      </el-container>
+      <el-aside width="300px">
+        <widget-config
+          :fields="fields"
+          ref="configRef"
+          @fields-change="handleFieldsChange"
+        ></widget-config>
+      </el-aside>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import WidgetTable from "./widgetTable.vue";
+import WidgetConfig from "./widgetConfig.vue";
+export default {
+  name: "ThTableMaking",
+  components: { WidgetTable, WidgetConfig },
+  props: {
+    fields: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      searchFields: [],
+      tableFields: []
+    };
+  },
+  mounted() {},
+  methods: {
+    handleFieldsChange(val) {
+      console.log("handleFieldsChange =>", val);
+      const type = val.type;
+      const data = val.data;
+      const list = [];
+      data.forEach(i => {
+        list.push(JSON.parse(JSON.stringify(this.fields[i])));
+      });
+      if (type === 0) {
+        this.searchFields = list;
+      } else {
+        this.tableFields = list;
+      }
+    },
+    handleMoveChange(val) {
+      console.log("handleMoveChange =>", val);
+      const type = val.type;
+      const data = val.data;
+      const newIndex = data.newIndex;
+      const oldIndex = data.oldIndex;
+      if (type === "search") {
+        let list = this.$refs.configRef.search.fields;
+        list = this.mobile(list, oldIndex, newIndex);
+        this.$refs.configRef.search.fields = list;
+        this.searchFields = this.mobile(this.searchFields, oldIndex, newIndex)
+      } else {
+        let list = this.$refs.configRef.table.fields;
+        list = this.mobile(list, oldIndex, newIndex);
+        this.$refs.configRef.table.fields = list;
+        this.tableFields = this.mobile(this.tableFields, oldIndex, newIndex)
+      }
+    },
+    mobile(list, oldIndex, newIndex) {
+      const item = JSON.parse(JSON.stringify(list[oldIndex]));
+      if (oldIndex < newIndex) {
+        list.splice(newIndex + 1, 0, item);
+        list.splice(oldIndex, 1);
+      }
+      if (oldIndex > newIndex) {
+        list.splice(newIndex, 0, item);
+        list.splice(oldIndex + 1, 1);
+      }
+      return list;
+    },
+    getJson(){}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.th-table-making {
+  height: 100%;
+  background-color: white;
+  border: 1px solid #dcdfe6;
+
+  .el-container {
+    height: 100%;
+  }
+  .el-header {
+    height: 45px !important;
+    line-height: 45px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  .el-main {
+    padding: 5px;
+    background-color: #fafafa;
+  }
+  .el-aside {
+    border-left: 1px solid #dcdfe6;
+    box-sizing: border-box;
+  }
+}
+</style>

package/packages/TableMaking/making.js

@@ -0,0 +1,5 @@
+import TableMaking from "./index.vue";
+TableMaking.install = function(Vue) {
+  Vue.component(TableMaking.name, TableMaking);
+};
+export default TableMaking;