@lx-frontend/wrap-element-ui 0.4.6-beta.1 → 1.0.0-beta

package/src/components/LxTable/index.vue

@@ -0,0 +1,296 @@
+
+<!--
+  @row-click="handleRowClick" 当某一行被点击时会触发该事件
+  @cell-click="handleCellClick" 当某个单元格被点击时会触发该事件
+  @sort-change="sortChange" 排序触发事件
+  sortable 配置排序
+  default-sort: prop默认字段 order排序方式
+  slot='key_header' scopeHeader 支持表头可自定义
+  highlightCurrentRow 单行选中状态
+-->
+<template>
+  <div class="table-content">
+    <FElTable
+      ref="lxTableRef"
+      v-loading="loading"
+      v-bind="$attrs"
+      :data="tableData"
+      :empty-text="(customConfig || {}).emptyText || ''"
+      :highlight-current-row="highlightCurrentRow"
+      :row-class-name="tableRowClassName"
+      :default-sort="(customConfig || {}).sortValue || defaultSort"
+      @selection-change="handleSelectionChange"
+      @row-click="handleRowClick"
+      @cell-click="handleCellClick"
+      @sort-change="sortChange"
+    >
+      <ElTableColumn
+        v-if="customConfig.selection && customConfig.selection.isOpenSelection"
+        type="selection"
+        :width="customConfig.selection.width"
+      />
+      <ElTableColumn
+        v-for="(item, index) in cloumns"
+        :key="`${item}_${index}`"
+        :label="item"
+        :prop="keys[index]"
+        :sortable="getFieldFromConfig(keys[index], 'sortable')"
+        :width="getFieldFromConfig(keys[index], 'width')"
+        :min-width="getFieldFromConfig(keys[index], 'minWidth')"
+        :fixed="getFieldFromConfig(keys[index], 'fixed')"
+      >
+        <template
+          slot="header"
+          slot-scope="scope"
+        >
+          <slot
+            v-if="getFieldFromConfig(keys[index], 'scopeHeader')"
+            template
+            :name="`${keys[index]}_header`"
+            :keys="keys[index]"
+            :row="scope.row"
+            :lable="scope.column"
+            :column="scope.$index"
+          />
+          <span v-else>
+            {{ item }}
+          </span>
+        </template>
+        <template slot-scope="scope">
+          <!-- 支持keys字段为'car.id'或者'id' -->
+          <div v-if="keys[index].indexOf('.') != -1">
+            <!-- 一个td需要展示多个字段名 -->
+            <div v-if="Array.isArray(keys[index])">
+              <div
+                v-for="(array, i) in keys[index]"
+                :key="i"
+              >
+                {{ scope.row[array] }}
+              </div>
+            </div>
+            <!-- 字段formatters存在,数据过滤-->
+            <span
+              v-else-if="getFieldFromConfig(keys[index], 'formatters')"
+            >
+              {{ formatterMethods(scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]], (customConfig[keys[index]].formatters)) }}
+            </span>
+            <!-- 复杂情况需要自定义---当前keys存在于customConfig.template数据定义中，传入slot的name作为唯一标识符 -->
+            <slot
+              v-else-if="getFieldFromConfig(keys[index], 'template')"
+              template
+              :name="keys[index]"
+              :keys="keys[index]"
+              :row="scope.row"
+              :lable="scope.column"
+              :column="scope.$index"
+            />
+            <div v-else>
+              <!-- 传入不需要截取的列 -->
+              <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
+                {{ scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]] | formateValue }}
+              </span>
+              <Ellipsis
+                v-else
+                :popover-name="popoverName"
+                :line-count="getFieldFromConfig(keys[index], 'lineCount')"
+                :content="[`${scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]]}`] | formateValue"
+              >
+                <div slot="popover">
+                  <div>{{ scope.row[keys[index].split('.')[0]][keys[index].split('.')[1]] | formateValue }}</div>
+                </div>
+              </Ellipsis>
+            </div>
+          </div>
+          <div v-else>
+            <!-- 一个td需要展示多个字段名 -->
+            <div v-if="Array.isArray(keys[index])">
+              <div
+                v-for="(array, i) in keys[index]"
+                :key="i"
+              >
+                {{ scope.row[array] }}
+              </div>
+            </div>
+            <!-- 字段formatters存在,数据过滤-->
+            <span
+              v-else-if="getFieldFromConfig(keys[index], 'formatters')"
+            >
+              {{ formatterMethods(scope.row[keys[index]], (customConfig[keys[index]].formatters)) }}
+            </span>
+            <!-- 复杂情况需要自定义---当前keys存在于customConfig.template数据定义中，传入slot的name作为唯一标识符 -->
+            <slot
+              v-else-if="getFieldFromConfig(keys[index], 'template')"
+              template
+              :name="keys[index]"
+              :keys="keys[index]"
+              :row="scope.row"
+              :lable="scope.column"
+              :column="scope.$index"
+            />
+            <div v-else>
+              <!-- 传入不需要截取的列 -->
+              <span v-if="getFieldFromConfig(keys[index], 'templateCutOut')">
+                {{ scope.row[keys[index]] | formateValue }}
+              </span>
+              <Ellipsis
+                v-else
+                :popover-name="popoverName"
+                :line-count="getFieldFromConfig(keys[index], 'lineCount')"
+                :content="[`${scope.row[keys[index]]}`] | formateValue"
+              >
+                <div slot="popover">
+                  <div>{{ scope.row[keys[index]] | formateValue }}</div>
+                </div>
+              </Ellipsis>
+            </div>
+          </div>
+        </template>
+      </ElTableColumn>
+    </FElTable>
+    <ElPagination
+      :background="background"
+      v-if="currentPage"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :total="totals"
+      layout="total, prev, pager, next, jumper, slot"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+<script>
+  import Ellipsis from '../Ellipsis';
+  import { Table } from 'element-ui'
+  const FElTable = {
+    extends: Table,
+    methods: {
+      doLayout (...args) {
+        Table.methods.doLayout.call(this, ...args)
+        this.fixLayout() // Looks like we can do it once?
+      },
+      fixLayout () {
+        // Safari header/content misalign fix (possible other browsers?)
+        this.columns.forEach(c => {
+          // element-ui/packages/table/src/layout-observer.js:49
+          const width = c.realWidth || c.width
+          const th = this.$el.querySelector(`table.el-table__header th.${c.id}`)
+          if (th) {
+            if (th.offsetWidth !== width) {
+              th.style = `min-width: ${width}px; max-width: ${width}px;`
+            }
+            let td
+            for (td of this.$el.querySelectorAll(`table.el-table__body td.${c.id}`)) {
+              if (td.offsetWidth === width) break
+              td.style = `min-width: ${width}px; max-width: ${width}px;`
+            }
+          }
+        })
+      }
+    }
+  }
+
+  export default {
+    name: 'LxTable',
+    components: {
+      Ellipsis,
+      FElTable
+    },
+    filters: {
+      formateValue (val) {
+        if (Array.isArray(val) && (val[0] === 'null' || val[0] === '')) {
+          val = '';
+        }
+        return (val || val === 0) ? val : '--';
+      },
+    },
+    props: {
+      tableData: {
+        type : Array,
+        default: () => [],
+      },
+      cloumns: {
+        type : Array,
+        default: () => [],
+      },
+      customConfig: Object,
+      keys: {
+        type : Array,
+        default: () => [],
+      },
+      defaultSort: {
+        prop: '',
+        order: null,
+      },
+      stripe: {
+        type: Boolean,
+        default: true,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      background: {
+        type: Boolean,
+        default: true,
+      },
+      totals: Number,
+      pageSize: Number,
+      currentPage: Number,
+      popoverName: String,
+      parentFn: {
+        type : String,
+        default: '',
+      },
+      highlightCurrentRow: {
+        type: Boolean,
+        default: true,
+      },
+      tableRowClassName: {},
+    },
+    data() {
+      return {
+        scope: 'scope',
+      };
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.$emit('handleCurrentChange', val);
+      },
+      handleSelectionChange(val) {
+        this.$emit('handleSelectionChange', val);
+      },
+      handleRowClick(row, column, cell, event) {
+        this.$emit('handleRowClick', row, column, cell, event);
+      },
+      handleCellClick(row, column, cell, event){
+        this.$emit('handleCellClick', row, column, cell, event);
+      },
+      sortChange(column, prop, order) {
+        this.$emit('sortChange', column, prop, order);
+      },
+      formatterMethods(key, keyData) {
+        // 返回数据，可类型转换; 可添加单位;
+        let value = '--';
+        if (key || key === 0) {
+          const keyValue = keyData[key] || key;
+          const unit = keyData.unit || '';
+          value = `${keyValue}${unit}`;
+        }
+        return value;
+      },
+      formateValue (val) {
+        return val || val === 0 ? val : '--';
+      },
+      getFieldFromConfig(index, name) {
+        return this.customConfig && this.customConfig[index] && this.customConfig[index][name];
+      },
+    }
+  }
+</script>
+<style type="scss">
+  .table-content .el-pagination {
+    text-align: right;
+    padding: 14px 0;
+  }
+</style>
+

package/{packages/SearchForm/src/SearchForm.vue → src/components/SearchForm/index.vue}

@@ -1,11 +1,15 @@
 <template>
-  <el-form class='search-form' :inline="isInline" :label-width="width">
+  <el-form
+    class="search-form"
+    :inline="isInline"
+    :label-width="width"
+  >
     <el-form-item
       v-for="({
         isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
         clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
         doubleIsInline = true,
-       }) in config"
+      }) in config"
       :key="label"
       :label="showLabel ? label : ''"
       style="margin-right: 10px"
@@ -15,18 +19,21 @@
         :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
         :value="formData[prop]"
         @input="val => handleInput(val, prop, inputLimitCallback)"
-      ></el-input>
-      <div v-if="type === 'doubleInput'" :class="doubleIsInline ? 'form-double-inline': ''">
+      />
+      <div
+        v-if="type === 'doubleInput'"
+        :class="doubleIsInline ? 'form-double-inline': ''"
+      >
         <el-input
           @input="val => handleInput(val, prop[0], inputLimitCallback)"
           :value="formData[prop[0]]"
           :placeholder="(placeholder || [])[0] || '请输入'"
-        ></el-input>
+        />
         <el-input
           :placeholder="(placeholder || [])[1] || '请输入'"
           :value="formData[prop[1]]"
           @input="val => handleInput(val, prop[1], inputLimitCallback)"
-        ></el-input>
+        />
       </div>
       <el-select
         v-if="type === 'select'"
@@ -37,8 +44,8 @@
         @change="(...args) => changeCb && changeCb(...args)"
         :filterable="filterable"
         :multiple="multiple"
-        :multipleLimit="multipleLimit"
-        :collapseTags="collapseTags"
+        :multiple-limit="multipleLimit"
+        :collapse-tags="collapseTags"
       >
         <el-option
           v-if="!withoutAll"
@@ -64,7 +71,10 @@
         start-placeholder="开始日期"
         end-placeholder="结束日期"
       />
-      <div v-if="type === 'doubleDatePicker'" :class="doubleIsInline ? 'form-double-inline': ''">
+      <div
+        v-if="type === 'doubleDatePicker'"
+        :class="doubleIsInline ? 'form-double-inline': ''"
+      >
         <el-date-picker
           @input="val => handleInput(val, prop[0], '', key)"
           @change="(...args) => changeCb && changeCb(...args)"
@@ -83,16 +93,30 @@
           type="date"
           :placeholder="(placeholder || [])[1] || '结束日期'"
         />
-        <el-checkbox :value="checkedIds[key]" v-if="isEmpty" @change="(value) => handelIsEmpty(prop, value, key)" class="is-empty">空白</el-checkbox> 
+        <el-checkbox
+          :value="checkedIds[key]"
+          v-if="isEmpty"
+          @change="(value) => handelIsEmpty(prop, value, key)"
+          class="is-empty"
+        >
+          空白
+        </el-checkbox> 
       </div>
       <slot
         v-if="type === 'slot'"
         :name="slotName"
       />
-    </el-form-item >
+    </el-form-item>
     <span v-if="isShowSearchBtn">
-      <el-button class="search" @click="handleSearch" type="primary">{{searchText}}</el-button>
-      <el-button v-if="showClear" @click="handleClearParams">{{clearText}}</el-button>
+      <el-button
+        class="search"
+        @click="handleSearch"
+        type="primary"
+      >{{ searchText }}</el-button>
+      <el-button
+        v-if="showClear"
+        @click="handleClearParams"
+      >{{ clearText }}</el-button>
     </span>
   </el-form>
 </template>
@@ -150,6 +174,13 @@ export default {
       checkedIds: {}
     }
   },
+  watch: {
+    resetCheckedIds () {
+      this.config.filter(c => c.type === 'doubleDatePicker').map(t => t.key).forEach(k => {
+        this.$set(this.checkedIds, k, false)
+      })
+    }
+  },
   mounted () {
     this.initialData = Object.freeze({ ...this.formData })
   },
@@ -169,7 +200,9 @@ export default {
 
     handelIsEmpty (prop, value, key) {
       if (value) {
+        // eslint-disable-next-line
         this.formData[prop[0]] = '';
+        // eslint-disable-next-line
         this.formData[prop[1]] = '';
       }
       this.$set(this.checkedIds, key, value)
@@ -190,17 +223,10 @@ export default {
     handleFormClose () {
       this.visible = false;
     },
-  },
-  watch: {
-    resetCheckedIds () {
-      this.config.filter(c => c.type === 'doubleDatePicker').map(t => t.key).forEach(k => {
-        this.$set(this.checkedIds, k, false)
-      })
-    }
   }
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .form-double-inline {
   display: flex;
   & .el-input {

package/{packages/SearchSelect/src/SearchSelect.vue → src/components/SearchSelect/index.vue}

@@ -6,15 +6,18 @@
     @keyup.enter.prevent="selectOption"
   >
     <el-input
-      class="search-select__input"
       ref="input"
       v-model="content"
+      class="search-select__input"
       :placeholder="placeholder"
       @input="handleInputChange"
       @focus="handleFocus"
       @blur="handleBlur"
-    ></el-input>
-    <div v-if="visible && value !== ''" class="select-down" >
+    />
+    <div
+      v-if="visible && value !== ''"
+      class="select-down"
+    >
       <div
         v-for="(item, index) in list"
         :key="getKey(item, index)"
@@ -103,7 +106,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="less">
 .search-select{
   position: relative;
   width: 100%;

package/src/components/index.ts

@@ -0,0 +1,22 @@
+
+import DemoComponent from './DemoComponent/index.vue'
+import AuditSteps from './AuditSteps/index.vue'
+import Ellipsis from './Ellipsis/index.vue'
+import SearchForm from './SearchForm/index.vue'
+import LxTable from './LxTable/index.vue'
+import SearchSelect from './SearchSelect/index.vue'
+import AddMembers from './AddMembers/index.vue'
+import PopoverForm from './PopoverForm/index.vue'
+import EditableTable from './EditableTable/index.vue'
+
+export {
+  DemoComponent,
+  AuditSteps,
+  Ellipsis,
+  SearchForm,
+  LxTable,
+  SearchSelect,
+  AddMembers,
+  PopoverForm,
+  EditableTable
+}

package/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

package/global.d.ts

@@ -1,23 +0,0 @@
-import Vue from 'vue';
-import { VueRouter } from 'vue-router/types/router.d';
-import { Route } from 'vue-router';
-
-declare module 'vue/types/options' {
-  // Vue 构造函数接收的额外选项
-  interface ComponentOptions<V extends Vue> {
-    router?: VueRouter
-  }
-}
-
-declare module 'vue/types/vue' {
-  // Vue 的全局属性
-  interface Vue {
-    $route: Route
-  }
-}
-
-// declare module 'element-ui'
-declare module '*.json' {
-  const value: any;
-  export default value;
-}

package/packages/AddMembers/index.js

@@ -1,11 +0,0 @@
-/**
- * @author Liuxuan
- * Date: 2021/08/31
- */
-import AddMembers from './src/AddMembers.vue'
-
-AddMembers.install = function (Vue) {
-  Vue.component(AddMembers.name, AddMembers)
-}
-
-export default AddMembers

package/packages/AuditSteps/index.js

@@ -1,7 +0,0 @@
-import AuditSteps from './src/AuditSteps.vue'
-
-AuditSteps.install = function (Vue) {
-  Vue.component(AuditSteps.name, AuditSteps)
-}
-
-export default AuditSteps

package/packages/DemoComponent/index.js

@@ -1,7 +0,0 @@
-import DemoComponent from './src/DemoComponent.vue';
-
-DemoComponent.install = function (Vue) {
-  Vue.component(DemoComponent.name, DemoComponent)
-}
-
-export default DemoComponent

package/packages/Ellipsis/index.js

@@ -1,7 +0,0 @@
-import Ellipsis from './src/Ellipsis.vue'
-
-Ellipsis.install = function (Vue) {
-  Vue.component(Ellipsis.name, Ellipsis)
-}
-
-export default Ellipsis

package/packages/LxTable/index.js

@@ -1,11 +0,0 @@
-/**
- * @author monkeywang
- * Date: 17/11/9
- */
-import LxTable from './src/LxTable.vue';
-
-LxTable.install = function (Vue) {
-  Vue.component(LxTable.name, LxTable)
-}
-
-export default LxTable