tianheng-ui 0.0.75 → 0.0.77

package/package.json

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

package/packages/FormMaking/Container.vue

@@ -99,16 +99,26 @@
             <!-- 操作区 -->
             <el-header>
               <div class="client">
-                <i
-                  class="el-icon-monitor"
+                <el-button
+                  v-if="tools.includes('monitor')"
                   :class="{ active: client === 'monitor' }"
+                  type="text"
+                  size="medium"
+                  icon="el-icon-monitor"
                   @click="client = 'monitor'"
-                ></i>
-                <i
-                  class="el-icon-mobile"
+                >
+                  桌面端
+                </el-button>
+                <el-button
+                  v-if="tools.includes('mobile')"
                   :class="{ active: client === 'mobile' }"
+                  type="text"
+                  size="medium"
+                  icon="el-icon-mobile"
                   @click="client = 'mobile'"
-                ></i>
+                >
+                  移动端
+                </el-button>
               </div>
               <slot name="action"> </slot>
               <el-popover
@@ -389,13 +399,15 @@ export default {
     data: {
       type: Object,
       default: () => {
-        return { list: [], config: baseConfig };
+        return {};
       }
     },
     tools: {
       type: Array,
       default: () => {
         return [
+          "monitor",
+          "mobile",
           "upload",
           "clearable",
           "preview",
@@ -447,8 +459,11 @@ export default {
     this.layoutComponents = layoutComponents;
     this.advanceComponents = advanceComponents;
     return {
-      widgetFormData: this.data,
-      widgetFormSelect: this.data.list[0],
+      widgetFormData: {
+        list: [],
+        config: baseConfig
+      },
+      widgetFormSelect: {},
       widgetValue: {},
       configTab: "widget",
       client: "monitor",
@@ -515,10 +530,17 @@ export default {
     },
     data(val) {
       this.setJSON(val);
-      // this.widgetFormData = val;
     }
   },
-  mounted() {},
+  mounted() {
+    if (this.data && this.data.list) {
+      this.widgetFormData.list = this.data.list;
+      this.widgetFormSelect = this.data.list[0];
+    }
+    if (this.data && this.data.config) {
+      this.widgetFormData.config = this.data.config;
+    }
+  },
   methods: {
     // 读取excel file
     readExcelFile(file) {

package/packages/FormMaking/styles/index.scss

@@ -119,14 +119,11 @@ $primary-background-color: #ecf5ff;
     .client {
       flex: 1;
       text-align: left;
-      i {
-        padding: 8px 5px;
-        border-radius: 4px;
-        cursor: pointer;
+      .el-button {
+        color: #333;
       }
       .active {
         color: #409eff;
-        background-color: #f2f2f2;
       }
     }
   }
@@ -239,9 +236,9 @@ $primary-background-color: #ecf5ff;
           margin-left: 0 !important;
         }
       }
-      .widget-table-list:hover::-webkit-scrollbar-thumb {
-        background-color: rgba(69, 90, 100, 0.2);
-      }
+      // .widget-table-list:hover::-webkit-scrollbar-thumb {
+      //   background-color: rgba(69, 90, 100, 0.2);
+      // }
 
       .tableH5 {
         min-height: 50px;

package/packages/TableMaking/index.vue

@@ -3,12 +3,27 @@
     <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>
+          <div class="client">
+            <el-button
+              :class="{ active: client === 'monitor' }"
+              type="text"
+              size="medium"
+              icon="el-icon-monitor"
+              @click="client = 'monitor'"
+            >
+              桌面端
+            </el-button>
+            <el-button
+              :class="{ active: client === 'mobile' }"
+              type="text"
+              size="medium"
+              icon="el-icon-mobile"
+              @click="client = 'mobile'"
+            >
+              移动端
+            </el-button>
+          </div>
+          <slot name="action"></slot>
         </el-header>
         <el-main>
           <widget-table
@@ -46,13 +61,13 @@ export default {
   data() {
     return {
       searchFields: [],
-      tableFields: []
+      tableFields: [],
+      client: "monitor"
     };
   },
   mounted() {},
   methods: {
     handleFieldsChange(val) {
-      console.log("handleFieldsChange =>", val);
       const type = val.type;
       const data = val.data;
       const list = [];
@@ -66,7 +81,6 @@ export default {
       }
     },
     handleMoveChange(val) {
-      console.log("handleMoveChange =>", val);
       const type = val.type;
       const data = val.data;
       const newIndex = data.newIndex;
@@ -75,12 +89,12 @@ export default {
         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)
+        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)
+        this.tableFields = this.mobile(this.tableFields, oldIndex, newIndex);
       }
     },
     mobile(list, oldIndex, newIndex) {
@@ -95,7 +109,12 @@ export default {
       }
       return list;
     },
-    getJson(){}
+    getJson() {
+      const tableConfig = this.$refs.configRef.getJson();
+      tableConfig.search.options = this.searchFields;
+      tableConfig.table.options = this.tableFields;
+      return tableConfig
+    }
   }
 };
 </script>
@@ -106,10 +125,22 @@ export default {
   background-color: white;
   border: 1px solid #dcdfe6;
 
+  .client {
+    flex: 1;
+    .el-button {
+      color: #333;
+    }
+    .active {
+      color: #409eff;
+    }
+  }
+
   .el-container {
     height: 100%;
   }
   .el-header {
+    display: flex;
+    align-items: center;
     height: 45px !important;
     line-height: 45px;
     border-bottom: 1px solid #dcdfe6;

package/packages/TableMaking/widgetConfig.vue

@@ -53,16 +53,19 @@
         <el-collapse v-model="tableCollapse" @change="handleChange">
           <el-collapse-item title="表格配置" name="1">
             <el-form-item label="高级查询">
-              <el-switch v-model="tableConfig.search"> </el-switch>
+              <el-switch v-model="tableConfig.search.show"> </el-switch>
             </el-form-item>
             <el-form-item label="排序类型">
-              <el-radio-group v-model="tableConfig.sortType">
+              <el-radio-group v-model="tableConfig.table.sort.type">
                 <el-radio-button label="1">降序</el-radio-button>
                 <el-radio-button label="2">升序</el-radio-button>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="排序字段">
-              <el-select v-model="tableConfig.sortField" placeholder="请选择">
+              <el-select
+                v-model="tableConfig.table.sort.key"
+                placeholder="请选择"
+              >
                 <el-option
                   v-for="item in []"
                   :key="item.value"
@@ -73,10 +76,10 @@
               </el-select>
             </el-form-item>
             <el-form-item label="分页设置">
-              <el-switch v-model="tableConfig.openPaging"> </el-switch>
+              <el-switch v-model="tableConfig.table.pageInfo.show"> </el-switch>
             </el-form-item>
             <el-form-item label="分页条数">
-              <el-radio-group v-model="tableConfig.pageSize">
+              <el-radio-group v-model="tableConfig.table.pageInfo.pageSize">
                 <el-radio-button :label="20">20条</el-radio-button>
                 <el-radio-button :label="50">50条</el-radio-button>
                 <el-radio-button :label="100">100条</el-radio-button>
@@ -84,7 +87,7 @@
               </el-radio-group>
             </el-form-item>
           </el-collapse-item>
-          <el-collapse-item title="子表配置" name="2">
+          <!-- <el-collapse-item title="子表配置" name="2">
             <el-form-item label="子表样式">
               <el-select v-model="tableConfig.sortField" placeholder="请选择">
                 <el-option
@@ -96,17 +99,87 @@
                 </el-option>
               </el-select>
             </el-form-item>
-          </el-collapse-item>
+          </el-collapse-item> -->
           <el-collapse-item title="按钮配置" name="3">
-            <div>
-              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
-            </div>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.add.show" slot="label"
+                >新增</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.add.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.edit.show" slot="label"
+                >编辑</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.edit.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox
+                v-model="tableConfig.tools.detail.show"
+                slot="label"
+                >详情</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.detail.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox
+                v-model="tableConfig.tools.delete.show"
+                slot="label"
+                >删除</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.delete.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox
+                v-model="tableConfig.tools.batchDelete.show"
+                slot="label"
+                >批量删除</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.batchDelete.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox
+                v-model="tableConfig.tools.export.show"
+                slot="label"
+                >导出</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.export.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox
+                v-model="tableConfig.tools.import.show"
+                slot="label"
+                >导入</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.import.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
           </el-collapse-item>
-          <el-collapse-item title="权限设置" name="4">
+          <!-- <el-collapse-item title="权限设置" name="4">
             <div>
               与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
             </div>
-          </el-collapse-item>
+          </el-collapse-item> -->
         </el-collapse>
       </el-form>
     </div>
@@ -141,13 +214,32 @@ export default {
         isCheckAll: false,
         isIndeterminate: false
       },
-      tableCollapse: ["1"],
+      tableCollapse: ["1", "3"],
       tableConfig: {
-        search: true,
-        sortType: "1",
-        sortField: "",
-        openPaging: true,
-        pageSize: 20
+        search: {
+          show: true,
+          options: []
+        },
+        table: {
+          options: [],
+          sort: {
+            type: "1",
+            key: ""
+          },
+          pageInfo: {
+            show: true,
+            pageSize: 20
+          }
+        },
+        tools: {
+          add: { show: true, name: "新增" },
+          edit: { show: true, name: "编辑" },
+          detail: { show: false, name: "查看" },
+          delete: { show: true, name: "删除" },
+          batchDelete: { show: false, name: "批量删除" },
+          export: { show: false, name: "导出" },
+          import: { show: false, name: "导入" }
+        }
       }
     };
   },
@@ -196,6 +288,9 @@ export default {
       this.table.fields = list;
       this.table.isIndeterminate = false;
       this.handleChange();
+    },
+    getJson() {
+      return JSON.parse(JSON.stringify(this.tableConfig));
     }
   }
 };
@@ -228,11 +323,13 @@ export default {
     .fields-item {
       padding: 0 10px;
       height: 30px;
+      margin-right: 0;
       line-height: 30px;
     }
 
     .el-checkbox {
       padding: 0 10px;
+      margin-right: 0;
       width: 100%;
       height: 30px;
       line-height: 30px;

package/packages/TableMaking/widgetTable.vue

@@ -68,10 +68,10 @@
           <div>
             <el-select v-model="item.align" placeholder="请选择" size="mini">
               <el-option
-                v-for="item in ['left', 'center', 'right']"
-                :key="item"
-                :label="item"
-                :value="item"
+                v-for="item in alignOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               >
               </el-option>
             </el-select>
@@ -111,7 +111,12 @@ export default {
   data() {
     return {
       searchData: this.searchFields,
-      tableData: this.tableFields
+      tableData: this.tableFields,
+      alignOptions: [
+        { label: "左对齐", value: "left" },
+        { label: "居中对齐", value: "center" },
+        { label: "右对齐", value: "right" }
+      ]
     };
   },
   watch: {
@@ -167,13 +172,13 @@ export default {
   }
   .tableList {
     margin-top: 10px;
-    height: calc(100% - 280px);
+    height: calc(100% - 240px);
     border: 1px solid #dcdfe6;
 
     .table-header {
       div:nth-child(4) {
         flex: none;
-        width: 60px !important;
+        width: 70px !important;
       }
     }
     .table-content {
@@ -182,7 +187,7 @@ export default {
     }
     .table-content .table-content-item > div:nth-child(4) {
       flex: none;
-      width: 60px !important;
+      width: 70px !important;
     }
     .el-input-number--mini {
       width: 100%;
@@ -230,11 +235,11 @@ export default {
       }
     }
   }
-  .table-content:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(69, 90, 100, 0.2);
-  }
-  .table-content:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(69, 90, 100, 0.2);
-  }
+  // .table-content:hover::-webkit-scrollbar-thumb {
+  //   background-color: rgba(69, 90, 100, 0.2);
+  // }
+  // .table-content:hover::-webkit-scrollbar-thumb {
+  //   background-color: rgba(69, 90, 100, 0.2);
+  // }
 }
 </style>

package/packages/Workflow/index.vue

@@ -365,35 +365,35 @@ export default {
   color: #fafafa;
 }
 
-body,
-body * {
-  /* 滚动条 */
-  &::-webkit-scrollbar-track-piece {
-    background-color: #fff; /*滚动条的背景颜色*/
-    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
-  }
-  &::-webkit-scrollbar {
-    width: 10px; /*滚动条的宽度*/
-    height: 8px; /*滚动条的高度*/
-  }
-  &::-webkit-scrollbar-thumb:vertical {
-    /*垂直滚动条的样式*/
-    height: 50px;
-    background-color: rgba(153, 153, 153, 0.5);
-    -webkit-border-radius: 4px;
-    outline: 2px solid #fff;
-    outline-offset: -2px;
-    border: 2px solid #fff;
-  }
-  &::-webkit-scrollbar-thumb {
-    /*滚动条的hover样式*/
-    background-color: rgba(159, 159, 159, 0.3);
-    -webkit-border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    /*滚动条的hover样式*/
-    background-color: rgba(159, 159, 159, 0.5);
-    -webkit-border-radius: 4px;
-  }
-}
+// body,
+// body * {
+//   /* 滚动条 */
+//   &::-webkit-scrollbar-track-piece {
+//     background-color: #fff; /*滚动条的背景颜色*/
+//     -webkit-border-radius: 0; /*滚动条的圆角宽度*/
+//   }
+//   &::-webkit-scrollbar {
+//     width: 10px; /*滚动条的宽度*/
+//     height: 8px; /*滚动条的高度*/
+//   }
+//   &::-webkit-scrollbar-thumb:vertical {
+//     /*垂直滚动条的样式*/
+//     height: 50px;
+//     background-color: rgba(153, 153, 153, 0.5);
+//     -webkit-border-radius: 4px;
+//     outline: 2px solid #fff;
+//     outline-offset: -2px;
+//     border: 2px solid #fff;
+//   }
+//   &::-webkit-scrollbar-thumb {
+//     /*滚动条的hover样式*/
+//     background-color: rgba(159, 159, 159, 0.3);
+//     -webkit-border-radius: 4px;
+//   }
+//   &::-webkit-scrollbar-thumb:hover {
+//     /*滚动条的hover样式*/
+//     background-color: rgba(159, 159, 159, 0.5);
+//     -webkit-border-radius: 4px;
+//   }
+// }
 </style>