tianheng-ui 0.1.11 → 0.1.14

package/packages/FormMaking/util/index.js

@@ -41,3 +41,27 @@ export const inputTypeDict = val => {
   };
   return dict[val] || "text";
 };
+
+export const deepClone = (obj, clone) => {
+  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
+  const toString = Object.prototype.toString;
+  toString.call(obj) === "[object Array]"
+    ? (clone = clone || [])
+    : (clone = clone || {});
+  for (const i in obj) {
+    if (typeof obj[i] === "object" && obj[i] !== null) {
+      // 要考虑深复制问题了
+      if (Array.isArray(obj[i])) {
+        // 这是数组
+        clone[i] = [];
+      } else {
+        // 这是对象
+        clone[i] = {};
+      }
+      deepClone(obj[i], clone[i]);
+    } else {
+      clone[i] = obj[i];
+    }
+  }
+  return clone;
+};

package/packages/FormMaking/util/request.js

@@ -1,28 +1,25 @@
-import axios from 'axios'
+import axios from "axios";
 
 const request = axios.create({
   withCredentials: false
-})
+});
 
 request.interceptors.request.use(
   config => {
-    return config
+    return config;
   },
   error => {
-    console.log('error', error)
-    return Promise.reject(new Error(error).message)
+    return Promise.reject(new Error(error).message);
   }
-)
+);
 
 request.interceptors.response.use(
   response => {
-    console.log('.....', response)
-    return response.data
+    return response.data;
   },
   error => {
-    console.log('error', error)
-    return Promise.reject(new Error(error).message)
+    return Promise.reject(new Error(error).message);
   }
-)
+);
 
-export default request
+export default request;

package/packages/TableMaking/WidgetTools.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="widgetTools">
+    <div class="left">
+      <el-button
+        :class="{ active: client === 'monitor' }"
+        type="text"
+        size="medium"
+        icon="el-icon-monitor"
+        @click="handleClick('monitor')"
+      >
+      </el-button>
+      <!-- <el-button
+              :class="{ active: client === 'mobile' }"
+              type="text"
+              size="medium"
+              icon="el-icon-mobile"
+              @click="client = 'mobile'"
+            >
+            </el-button> -->
+    </div>
+    <div class="right">
+      <slot> </slot>
+      <el-button
+        v-if="permissions.includes('clearable')"
+        style="margin-left:10px;"
+        type="text"
+        size="medium"
+        icon="el-icon-delete"
+        disabled
+        @click="handleClick('clear')"
+        >重置
+      </el-button>
+      <el-button
+        v-if="permissions.includes('preview')"
+        type="text"
+        size="medium"
+        icon="el-icon-view"
+        disabled
+        @click="handleDialogOpen('preview')"
+        >预览
+      </el-button>
+      <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
+        <el-button
+          v-if="permissions.includes('upload')"
+          type="text"
+          size="medium"
+          icon="el-icon-upload2"
+          slot="reference"
+          >导入</el-button
+        >
+        <div>
+          <div>
+            <el-button
+              type="text"
+              size="medium"
+              @click="handleDialogOpen('importJson')"
+              >导入JSON
+            </el-button>
+          </div>
+          <div>
+            <el-upload
+              action
+              accept=".xlsx, .xls"
+              :auto-upload="false"
+              :show-file-list="false"
+              disabled
+              :on-change="handleExcelFileChange"
+            >
+              <el-button type="text" size="medium" disabled
+                >导入EXCEL</el-button
+              >
+            </el-upload>
+          </div>
+          <div>
+            <el-button
+              type="text"
+              size="medium"
+              disabled
+              @click="handleDialogOpen('importTemplate')"
+              >导入模板
+            </el-button>
+          </div>
+        </div>
+      </el-popover>
+      <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
+        <el-button
+          v-if="
+            permissions.includes('generateJson') ||
+              permissions.includes('generateCode')
+          "
+          type="text"
+          size="medium"
+          icon="el-icon-document"
+          slot="reference"
+          >生成</el-button
+        >
+        <div>
+          <div>
+            <el-button
+              v-if="permissions.includes('generateJson')"
+              type="text"
+              size="medium"
+              @click="handleDialogOpen('generateJson')"
+            >
+              生成JSON
+            </el-button>
+          </div>
+          <div>
+            <el-button
+              v-if="permissions.includes('generateCode')"
+              type="text"
+              size="medium"
+              disabled
+              @click="handleDialogOpen('generateCode')"
+            >
+              生成代码
+            </el-button>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+
+    <th-dialog
+      v-model="dialog.show"
+      :title="dialogTitles[dialog.action]"
+      :modal-append-to-body="false"
+      :showFooter="['importJson', 'importTemplate'].includes(dialog.action)"
+      @on-fullscreen="handleDialogFullscreen"
+      @on-close="handleDialogClose"
+      @on-affirm="handleDialogAffirm"
+    >
+      <template v-if="dialog.action === 'preview'"></template>
+      <template v-else-if="dialog.action === 'importJson'">
+        <el-alert
+          type="info"
+          title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
+        ></el-alert>
+        <th-code-editor
+          v-model="dialog.data.config"
+          ref="codeEditor"
+        ></th-code-editor>
+      </template>
+      <template v-else-if="dialog.action === 'importTemplate'"></template>
+      <template v-else-if="dialog.action === 'generateJson'">
+        <th-code-editor
+          v-model="dialog.data.config"
+          ref="codeEditor"
+        ></th-code-editor>
+      </template>
+      <template v-else-if="dialog.action === 'generateCode'"></template>
+    </th-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    config: Object,
+    client: String,
+    permissions: Array
+  },
+  data() {
+    return {
+      dialog: {
+        show: false,
+        action: "",
+        data: {}
+      },
+      dialogTitles: {
+        preview: "预览",
+        importJson: "导入JSON",
+        importTemplate: "导入模板",
+        generateJson: "生成JSON",
+        generateCode: "生成代码"
+      }
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleClick(val, data) {
+      this.$emit("click", val, data);
+    },
+    handleDialogOpen(action, data = {}) {
+      switch (action) {
+        case "generateJson":
+          const configText = JSON.stringify(this.config, null, 2);
+          data.config = configText;
+          break;
+
+        default:
+          break;
+      }
+      this.dialog = { show: true, action, data };
+    },
+    handleDialogFullscreen() {
+      this.$refs.codeEditor.resize();
+    },
+    handleDialogAffirm() {
+      const action = this.dialog.action;
+      switch (action) {
+        case "importJson":
+          this.handleClick("import-json", JSON.parse(this.dialog.data.config));
+          break;
+
+        default:
+          break;
+      }
+      this.handleDialogClose();
+    },
+    handleDialogClose() {
+      this.dialog.show = false;
+    },
+    handleExcelFileChange() {},
+    handleGenerateJson() {},
+    handleGenerateCode() {}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetTools {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  padding: 0 15px;
+  border-bottom: solid 2px #e4e7ed;
+
+  .left {
+    min-width: 60px;
+    .el-button {
+      color: #333;
+    }
+    .active {
+      color: #409eff;
+    }
+  }
+  .right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+  }
+}
+</style>

package/packages/TableMaking/custom/config.js

@@ -0,0 +1,110 @@
+// 查询配置
+export const search = {
+  show: true,
+  options: []
+};
+
+// 列表配置
+export const table = {
+  options: [],
+  pageInfo: {
+    show: true,
+    options: {
+      pageCount: 0,
+      pageSize: 20,
+      currentPage: 1,
+      total: 0,
+      sizes: [10, 20, 30, 50, 100]
+    }
+  },
+  sort: {
+    type: "1",
+    key: ""
+  },
+  loading: {
+    show: false,
+    text: "加载中",
+    image: ""
+  },
+  empty: {
+    show: true,
+    text: "暂无数据",
+    image: ""
+  },
+  sequence: true
+};
+
+// 按钮配置
+export const tools = {
+  add: {
+    show: true,
+    name: "新增",
+    text: "新增",
+    position: "header",
+    form: "",
+    api: ""
+  },
+  edit: {
+    show: true,
+    name: "编辑",
+    text: "编辑",
+    position: "row",
+    form: "",
+    api: ""
+  },
+  detail: {
+    show: false,
+    name: "查看",
+    text: "查看",
+    position: "row",
+    form: "",
+    api: ""
+  },
+  delete: {
+    show: true,
+    name: "删除",
+    text: "删除",
+    position: "row",
+    form: "",
+    api: ""
+  },
+  batchDelete: {
+    show: false,
+    name: "批量删除",
+    text: "批量删除",
+    position: "header",
+    form: "",
+    api: ""
+  },
+  export: {
+    show: false,
+    name: "导出",
+    text: "导出",
+    position: "header",
+    form: "",
+    api: ""
+  },
+  import: {
+    show: false,
+    name: "导入",
+    text: "导入",
+    position: "header",
+    form: "",
+    api: ""
+  }
+};
+
+// 接口配置
+export const network = {
+  mounted: {
+    method: "get",
+    api: "/list"
+  }
+};
+
+export const tableConfig = {
+  search,
+  table,
+  tools,
+  network
+};

package/packages/TableMaking/generateTable.vue

@@ -248,10 +248,10 @@ export default {
               }
               const dic = toolsItemConfig(key, element);
               dic.form = element.form;
-              if (element.position === 1) {
+              if (element.position === 1 || element.position === 'header') {
                 this.toolsConfig.show = true;
                 this.toolsConfig.options.push(dic);
-              } else if (element.position === 2) {
+              } else if (element.position === 2 || element.position === 'row') {
                 action.hide = false;
                 action.actions.push(dic);
               }

package/packages/TableMaking/index.vue

@@ -1,189 +1,94 @@
 <template>
-  <div class="th-table-making">
-    <el-container>
-      <el-container>
-        <el-header>
-          <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
-            :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 class="th-table-making th-flex_box">
+    <div class="th-fiex_content">
+      <widget-tools
+        :config="config"
+        :client="client"
+        :permissions="permissions"
+        @click="handleToolsClick"
+      >
+        <slot name="action"></slot>
+      </widget-tools>
+      <widget-table
+        style="height:calc(100% - 45px)"
+        :config="config"
+      ></widget-table>
+    </div>
+    <div class="th-flex_aside th-is_border_left" style="width:300px">
+      <widget-config
+        :config="config"
+        :fields.sync="fields"
+        :formOptions="formOptions"
+        :apiOptions="apiOptions"
+        ref="configRef"
+      ></widget-config>
+    </div>
   </div>
 </template>
 
 <script>
+import WidgetTools from "./WidgetTools.vue";
 import WidgetTable from "./widgetTable.vue";
 import WidgetConfig from "./widgetConfig.vue";
+import { deepClone, deepMerge } from "./util/index";
+import { tableConfig } from "./custom/config";
 export default {
   name: "ThTableMaking",
-  components: { WidgetTable, WidgetConfig },
+  components: { WidgetTools, WidgetTable, WidgetConfig },
   props: {
-    fields: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    config: {
+    data: {
       type: Object,
       default: () => {
-        return {};
+        return deepClone(tableConfig);
       }
+    },
+    fields: Array,
+    formOptions: Array,
+    apiOptions: Array,
+    permissions: {
+      type: Array,
+      default: () => [
+        "monitor",
+        "mobile",
+        "upload",
+        "clearable",
+        "preview",
+        "generateCode",
+        "generateJson"
+      ]
     }
   },
   data() {
     return {
-      searchFields: [],
-      tableFields: [],
+      config: this.data,
       client: "monitor"
     };
   },
   watch: {
-    fields: {
-      handler(val, oldVal) {
-        if (oldVal.length === 0) {
-          this.initConfig();
-        }
-      },
-      deep: true
+    config: {
+      deep: true,
+      handler: function(val) {
+        this.$emit("update:data", val);
+      }
     },
-    config(val) {
-      this.initConfig();
+    data(val) {
+      this.config = val;
     }
   },
-  mounted() {
-    this.initConfig();
-  },
+  mounted() {},
   methods: {
-    initConfig() {
-      if (!this.config || Object.keys(this.config).length === 0) return;
+    handleToolsClick(action, data) {
+      switch (action) {
+        case "import-json":
+          this.config = data;
+          break;
 
-      this.$refs.configRef.tableConfig = this.config;
-
-      const searchFields = [];
-      const searchFieldsIndexs = [];
-      if (this.config.search) {
-        const searchOptions = this.config.search.options;
-        for (const item of searchOptions) {
-          for (let i = 0; i < this.fields.length; i++) {
-            const element = this.fields[i];
-            if (element.prop === item.prop) {
-              searchFields.push(item);
-              searchFieldsIndexs.push(i);
-            }
-          }
-        }
-        this.searchFields = searchFields;
-        this.$refs.configRef.search = {
-          fields: searchFieldsIndexs,
-          isCheckAll: searchFieldsIndexs.length === this.fields.length,
-          isIndeterminate:
-            searchFieldsIndexs.length > 0 &&
-            searchFieldsIndexs.length < this.fields.length
-        };
-      }
-
-      const tableFields = [];
-      const tableFieldsIndexs = [];
-      if (this.config.table) {
-        const tableOptions = this.config.table.options;
-        for (const item of tableOptions) {
-          for (let i = 0; i < this.fields.length; i++) {
-            const element = this.fields[i];
-            if (element.prop === item.prop) {
-              tableFields.push(item);
-              tableFieldsIndexs.push(i);
-            }
-          }
-        }
-        this.tableFields = tableFields;
-        this.$refs.configRef.table = {
-          fields: tableFieldsIndexs,
-          isCheckAll: tableFieldsIndexs.length === this.fields.length,
-          isIndeterminate:
-            tableFieldsIndexs.length > 0 &&
-            tableFieldsIndexs.length < this.fields.length
-        };
-      }
-    },
-    handleFieldsChange(val) {
-      const type = val.type;
-      const data = val.data;
-      const list = [];
-      data.forEach(i => {
-        list.push(this.fields[i]);
-      });
-      if (type === 0) {
-        this.searchFields = list;
-      } else {
-        this.tableFields = list;
-      }
-    },
-    handleMoveChange(val) {
-      const newIndex = val.data.newIndex;
-      const oldIndex = val.data.oldIndex;
-      if (val.type === "search") {
-        let list = this.$refs.configRef.search.fields;
-        list = this.handleMobile(list, oldIndex, newIndex);
-        this.$refs.configRef.search.fields = list;
-        this.searchFields = this.handleMobile(this.searchFields, oldIndex, newIndex);
-      } else {
-        let list = this.$refs.configRef.table.fields;
-        list = this.handleMobile(list, oldIndex, newIndex);
-        this.$refs.configRef.table.fields = list;
-        this.tableFields = this.handleMobile(this.tableFields, oldIndex, newIndex);
-      }
-    },
-    handleMobile(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);
+        default:
+          break;
       }
-      return list;
     },
     getJson() {
-      const tableConfig = this.$refs.configRef.getJson();
-      tableConfig.search.options = this.searchFields;
-      tableConfig.table.options = this.tableFields;
-      return tableConfig;
+      return this.config;
     }
   }
 };