perf(@0.9.2-10): 移除popover属性,优化查询区域布局,composition-api重构searchForm

BoBoooooo · Apr 2, 2021 · 8bc815e · 8bc815e
1 parent b9f738d
commit 8bc815e
Show file tree

Hide file tree

Showing 14 changed files with 212 additions and 500 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,46 +9,49 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ["plugin:vue/essential", "@vue/airbnb", "@vue/typescript",
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+    '@vue/typescript',
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-],
+  ],
   // 修改airbnb部分变态规则
   rules: {
-    "max-len": ["error", { code: 200 }],
+    'max-len': ['error', { code: 200 }],
     // 允许修改形参
-    "no-param-reassign": 0,
+    'no-param-reassign': 0,
     // 允许使用 for-of，https://github.com/airbnb/javascript#iterators--nope
-    "no-restricted-syntax": 0,
+    'no-restricted-syntax': 0,
     // 允许v-if和v-for同时使用，https://vuejs.github.io/eslint-plugin-vue/rules/no-use-v-if-with-v-for.html
-    "vue/no-use-v-if-with-v-for": [
-      "error",
+    'vue/no-use-v-if-with-v-for': [
+      'error',
       {
         allowUsingIterationVar: true,
       },
     ],
     // 允许循环引入
-    "import/no-cycle": 0,
+    'import/no-cycle': 0,
     // fix unresolved bug
-    "import/no-unresolved": 0,
+    'import/no-unresolved': 0,
     // file extension
-    "import/extensions": 0,
-    "no-unused-vars": 0,
+    'import/extensions': 0,
+    'no-unused-vars': 0,
     // import named
-    "import/named": 0,
-    "no-console":
-      process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger":
-      process.env.NODE_ENV === "production" ? "error" : "off",
+    'import/named': 0,
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     // 允许class中方法不使用this
-    "class-methods-use-this": "off",
+    'class-methods-use-this': 'off',
     // 允许下划线变量命名
-    "no-underscore-dangle": "off",
-    "import/no-extraneous-dependencies": "off",
-    "global-require": "off",
-    "no-undef": "off",
+    'no-underscore-dangle': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'global-require': 'off',
+    'no-undef': 'off',
+    'no-use-before-define': 0,
+    'no-shadow': 0,
   },
   parserOptions: {
-    parser: "@typescript-eslint/parser",
+    parser: '@typescript-eslint/parser',
     ecmaFeatures: {
       legacyDecorators: true,
     },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.9.2-10",
+  "version": "0.9.2-11",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
@@ -28,14 +28,14 @@
         </template>
         <template #btnBarPrevBtn>
           <!-- 批量删除按钮 -->
-          <el-button v-if="view.btnDel" @click="btnDeletesOnClick" type="danger" size="mini" icon="el-icon-delete">{{ text.multiDel }}</el-button>
+          <el-button v-if="view.btnDel" @click="btnDeletesOnClick" type="danger" size="small" icon="el-icon-delete">{{ text.multiDel }}</el-button>
           <!-- 添加按钮 -->
-          <el-button v-if="view.btnAdd" type="primary" icon="el-icon-plus" size="mini" @click.stop="btnAdd()">{{ text.add }}</el-button>
+          <el-button v-if="view.btnAdd" type="primary" icon="el-icon-plus" size="small" @click.stop="btnAdd()">{{ text.add }}</el-button>
           <slot name="btnBarPrevBtn" />
         </template>
         <!-- 列表头添加按钮 -->
         <template #_action_header v-if="view.btnAddOnColumnHeader">
-          <el-button icon="el-icon-plus" size="mini" type="primary" style="color: white" @click.stop="btnAdd"></el-button>
+          <el-button icon="el-icon-plus" size="small" type="primary" style="color: white" @click.stop="btnAdd"></el-button>
         </template>
         <!-- 表格自定义列/表头插槽,动态传入 -->
         <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys(slots).filter((key) => !['btnCustom', 'append', 'btnBarPrevBtn', 'dialogFooter'].includes(key))">
@@ -311,7 +311,6 @@ export default defineComponent({
       proTableRef.value.tableReload();
     };
     const { columns: propsColumns } = props;
-    console.log(propsColumns);
     // 如果外侧传入了columns则不发起请求
     if (propsColumns) {
       tableConfig.columns = propsColumns.columns;

diff --git a/src/component/crud-table/types/CrudTable.types.ts b/src/component/crud-table/types/CrudTable.types.ts
@@ -7,7 +7,6 @@
 import { columns, DataSource, Params, fn, AnyObject } from '@/types/common';
 
 interface CrudTableProps {
-  searchMode: 'popover' | 'cover';
   visibleList: any;
   tableTitle: string;
   showPagination: boolean;

diff --git a/src/component/form-designer/src/components/Tinymce/index.vue b/src/component/form-designer/src/components/Tinymce/index.vue
@@ -131,38 +131,9 @@ export default {
             _this.fullscreen = e.state;
           });
         },
-        // 整合七牛上传
-        // images_dataimg_filter(img) {
-        //   setTimeout(() => {
-        //     const $image = $(img);
-        //     $image.removeAttr('width');
-        //     $image.removeAttr('height');
-        //     if ($image[0].height && $image[0].width) {
-        //       $image.attr('data-wscntype', 'image');
-        //       $image.attr('data-wscnh', $image[0].height);
-        //       $image.attr('data-wscnw', $image[0].width);
-        //       $image.addClass('wscnph');
-        //     }
-        //   }, 0);
-        //   return img;
-        // },
         images_upload_handler(blobInfo, success, failure, progress) {
           // progress(0);
           const { token } = _this.$store.getters;
-          // getToken(token).then(response => {
-          //   const url = response.data.qiniu_url;
-          //   const formData = new FormData();
-          //   formData.append('token', response.data.qiniu_token);
-          //   formData.append('key', response.data.qiniu_key);
-          //   formData.append('file', blobInfo.blob(), url);
-          //   upload(formData).then(() => {
-          //     success(url);
-          //     progress(100);
-          //   })
-          // }).catch(err => {
-          //   failure('出现未知问题，刷新页面，或者联系程序员')
-          //   console.log(err);
-          // });
         },
       });
     },

diff --git a/src/component/pro-table/src/ProTable.vue b/src/component/pro-table/src/ProTable.vue
@@ -6,39 +6,31 @@
 -->
 <template>
   <div class="ProTable">
-    <!-- 表格左侧标题 -->
-    <div
-      :class="{
-        'table-title-container': searchMode === 'popover',
-        'table-title-container-absolute': searchMode === 'cover',
-      }"
-      v-if="view.tableTitle && tableTitle"
-    >
-      <!-- 表格标题 -->
-      <h4 class="title">{{ tableTitle }}</h4>
+    <div class="pro-table-header">
+      <!-- 表格左侧标题 -->
+      <div class="table-title-container" v-if="view.tableTitle && tableTitle">
+        <!-- 表格标题 -->
+        <h4 class="title">{{ tableTitle }}</h4>
+      </div>
+      <!-- 查询区域 -->
+      <SearchForm
+        ref="searchForm"
+        v-if="view.searchForm"
+        :showSeniorSearchFormButton="view.seniorSearchBtn"
+        :columns="tableConfig.columns || []"
+        @click="fetchHandler(false, true)"
+        :searchFormCondition.sync="searchFormCondition"
+        :remoteFuncs="remoteFuncs"
+        :isLoading="loading"
+        @clear="fetchHandler(true)"
+      >
+      </SearchForm>
+      <!-- table右上角按钮 -->
+      <div class="btn-bar">
+        <slot name="btnBarPrevBtn" />
+      </div>
     </div>
-    <!-- table右上角按钮 -->
-    <div
-      class="btn-bar"
-      :class="{
-        'btn-bar-absolute': searchMode === 'cover',
-      }"
-    >
-      <slot name="btnBarPrevBtn" />
-    </div>
-    <SearchForm
-      ref="searchForm"
-      v-if="view.searchForm"
-      :searchMode="searchMode"
-      :showSeniorSearchFormButton="view.seniorSearchBtn"
-      :columns="tableConfig.columns || []"
-      @click="fetchHandler(false, true)"
-      :searchFormCondition.sync="searchFormCondition"
-      :remoteFuncs="remoteFuncs"
-      :isLoading="loading"
-      @clear="fetchHandler(true)"
-    >
-    </SearchForm>
+
     <!-- 表格主体 -->
     <el-table v-loading.lock="loading" v-bind="$attrs" v-on="tableListeners" :height="tableHeight" :max-height="maxHeight" ref="tableRefs" :row-key="rowKey" :data="tableData">
       <template slot="append">
@@ -105,11 +97,6 @@ export default defineComponent({
     Column,
   },
   props: {
-    // 查询模式
-    searchMode: {
-      type: String,
-      default: 'popover',
-    },
     visibleList: {
       default: () => ({}),
       type: Object,
@@ -145,7 +132,7 @@ export default defineComponent({
     // 高度minus
     maxHeightMinus: {
       type: Number,
-      default: 270,
+      default: 300,
     },
     // el-table height
     height: {
@@ -399,7 +386,6 @@ export default defineComponent({
       fetchHandler(true);
       // 自适应分页组件按钮;
       window.addEventListener('resize', resizeHandler);
-      console.log(slots);
     });
 
     onBeforeUnmount(() => {
@@ -447,6 +433,12 @@ export default defineComponent({
   background: white;
   padding: 10px;
   position: relative;
+  .pro-table-header {
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
   /deep/ {
     .el-table__empty-text {
       line-height: 10px;
@@ -484,7 +476,7 @@ export default defineComponent({
       text-align: right;
     }
     .btn-bar {
-      float: right;
+      align-self: flex-end;
       width: auto;
       text-align: right;
       & > div,