tianheng-ui 0.0.73 → 0.0.75

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "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"
@@ -385,28 +383,26 @@ export default {
     WidgetConfig,
     FormConfig,
     WidgetForm,
-    GenerateForm,
+    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,
@@ -447,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",
@@ -517,8 +510,12 @@ export default {
     widgetFormData: {
       deep: true,
       handler: function(val) {
-        // console.log(this.$refs.widgetForm);
+        this.$emit("update:data", val);
       }
+    },
+    data(val) {
+      this.setJSON(val);
+      // this.widgetFormData = val;
     }
   },
   mounted() {},
@@ -618,9 +615,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/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;

package/packages/TableMaking/widgetConfig.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="widgetConfig">
+    <div class="tabs">
+      <div
+        v-for="(item, index) in tabsMenus"
+        :key="index"
+        class="tabs-item"
+        :class="{ 'tabs-item__active': activeTab.value === item.value }"
+        @click="handleTabsSelect(item)"
+      >
+        {{ item.title }}
+      </div>
+    </div>
+    <div v-if="activeTab.value === 0" class="fields">
+      <el-checkbox
+        :indeterminate="search.isIndeterminate"
+        v-model="search.isCheckAll"
+        @change="handleSearchCheckAllChange"
+        >全选</el-checkbox
+      >
+      <el-checkbox-group v-model="search.fields" @change="handleChange">
+        <el-checkbox
+          v-for="(item, index) in fields"
+          :label="index"
+          :key="index"
+          >{{ item.label }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div v-if="activeTab.value === 1" class="fields">
+      <el-checkbox
+        :indeterminate="table.isIndeterminate"
+        v-model="table.isCheckAll"
+        @change="handleTableCheckAllChange"
+        >全选</el-checkbox
+      >
+      <el-checkbox-group v-model="table.fields" @change="handleChange">
+        <el-checkbox
+          v-for="(item, index) in fields"
+          :label="index"
+          :key="index"
+          >{{ item.label }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div v-if="activeTab.value === 2" class="tableConfig">
+      <el-form
+        :model="tableConfig"
+        label-position="left"
+        label-width="80px"
+        size="mini"
+      >
+        <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-form-item>
+            <el-form-item label="排序类型">
+              <el-radio-group v-model="tableConfig.sortType">
+                <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-option
+                  v-for="item in []"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="分页设置">
+              <el-switch v-model="tableConfig.openPaging"> </el-switch>
+            </el-form-item>
+            <el-form-item label="分页条数">
+              <el-radio-group v-model="tableConfig.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>
+                <el-radio-button :label="500">500条</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-collapse-item>
+          <el-collapse-item title="子表配置" name="2">
+            <el-form-item label="子表样式">
+              <el-select v-model="tableConfig.sortField" placeholder="请选择">
+                <el-option
+                  v-for="item in []"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-collapse-item>
+          <el-collapse-item title="按钮配置" name="3">
+            <div>
+              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="权限设置" name="4">
+            <div>
+              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fields: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      tabsMenus: [
+        { title: "查询字段", value: 0 },
+        { title: "列表字段", value: 1 },
+        { title: "列表属性", value: 2 }
+      ],
+      activeTab: { title: "查询字段", value: 0 },
+      search: {
+        fields: [],
+        isCheckAll: false,
+        isIndeterminate: false
+      },
+      table: {
+        fields: [],
+        isCheckAll: false,
+        isIndeterminate: false
+      },
+      tableCollapse: ["1"],
+      tableConfig: {
+        search: true,
+        sortType: "1",
+        sortField: "",
+        openPaging: true,
+        pageSize: 20
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    handleTabsSelect(val) {
+      this.activeTab = val;
+    },
+    handleChange() {
+      if (this.activeTab.value === 0) {
+        const count = this.search.fields.length;
+        this.search.isCheckAll = count === this.fields.length;
+        this.search.isIndeterminate = count > 0 && count < this.fields.length;
+        this.$emit("fields-change", {
+          type: this.activeTab.value,
+          data: this.search.fields
+        });
+      } else {
+        const count = this.table.fields.length;
+        this.table.isCheckAll = count === this.fields.length;
+        this.table.isIndeterminate = count > 0 && count < this.fields.length;
+        this.$emit("fields-change", {
+          type: this.activeTab.value,
+          data: this.table.fields
+        });
+      }
+    },
+    handleSearchCheckAllChange(val) {
+      const list = [];
+      if (val) {
+        for (let i = 0; i < this.fields.length; i++) {
+          list.push(i);
+        }
+      }
+      this.search.fields = list;
+      this.search.isIndeterminate = false;
+      this.handleChange();
+    },
+    handleTableCheckAllChange(val) {
+      const list = [];
+      if (val) {
+        for (let i = 0; i < this.fields.length; i++) {
+          list.push(i);
+        }
+      }
+      this.table.fields = list;
+      this.table.isIndeterminate = false;
+      this.handleChange();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetConfig {
+  height: 100%;
+  background-color: white;
+  .tabs {
+    display: flex;
+    align-items: center;
+    height: 45px;
+    border-bottom: 1px solid #dcdfe6;
+    box-sizing: border-box;
+
+    .tabs-item {
+      flex: 1;
+      text-align: center;
+      line-height: 44px;
+      cursor: pointer;
+    }
+    .tabs-item__active {
+      border-bottom: 2px solid #409eff;
+    }
+  }
+
+  .fields {
+    height: calc(100% - 45px);
+    .fields-item {
+      padding: 0 10px;
+      height: 30px;
+      line-height: 30px;
+    }
+
+    .el-checkbox {
+      padding: 0 10px;
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+
+  .tableConfig {
+    height: calc(100% - 45px);
+  }
+}
+</style>
+
+<style lang="scss">
+.tableConfig {
+  .el-collapse-item__header {
+    padding: 0 10px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #f5f7f9;
+  }
+  .el-collapse-item__wrap {
+    padding: 10px;
+  }
+  .el-radio-button__inner {
+    padding: 7px;
+  }
+}
+</style>