@lx-frontend/wrap-element-ui 1.0.26 → 1.0.27

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/src/components/PopoverForm/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-popover :placement="placement" :disabled="isDisabled" :width="width || 300" v-model="show" trigger="click" :visible-arrow="true">
+    <div class="el-popover__header">
+      {{title}}
+      <slot name="title"></slot>
+      <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button>
+    </div>
+    <slot name="form"></slot>
+
+    <div v-if="withSubmitBtn" class="el-popover__footer">
+      <slot name="footer"></slot>
+      <el-button type="primary" class="wp100" @click="handleSubmit">{{ okText }}</el-button>
+    </div>
+    <span slot='reference'>
+      <slot name='reference'></slot>
+    </span>
+  </el-popover>
+</template>
+<script>
+export default {
+  name: 'PopoverForm',
+  props: {
+    title: String,
+    width: Number,
+    placement: {
+      type: String,
+      default: 'left',
+    },
+    withSubmitBtn: {
+      type: Boolean,
+      default: true,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    okText: {
+      type: String,
+      default: '确认',
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    handleClose() {
+      this.show = false;
+    },
+    handleSubmit() {
+      this.$emit('on-sure');
+    },
+  },
+  watch: {
+    show(val) {
+      this.$emit('on-change', val);
+    },
+  },
+};
+</script>
+<style type="scss" scoped>
+  .wp100{
+    width: 100%;
+  }
+</style>

package/src/components/SearchForm/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <el-form
+    class="search-form"
+    :inline="isInline"
+    :label-width="width"
+    :label-position="labelPosition"
+  >
+    <el-form-item
+      v-for="({
+        isEmpty = true, key, type, prop, label, labelWidth, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
+        clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date', rangeSeparator,
+        doubleIsInline = true, maxlength = 255, pickerOptions, limit, required = false
+      }) in config"
+      :required="required"
+      :key="label"
+      :label="showLabel ? label : ''"
+      :label-width="labelWidth || width"
+      style="margin-right: 10px"
+    >
+      <el-input
+        v-if="type === 'input'"
+        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
+        :value="formData[prop]"
+        :maxlength="maxlength"
+        @input="val => handleInput(val, prop, inputLimitCallback)"
+      />
+      <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
+          :placeholder="(placeholder || [])[1] || '请输入'"
+          :value="formData[prop[1]]"
+          @input="val => handleInput(val, prop[1], inputLimitCallback)"
+        />
+      </div>
+      <el-select
+        v-if="type === 'select'"
+        :value="formData[prop]"
+        :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
+        :clearable="clearable"
+        @input="val => handleInput(val, prop)"
+        @change="(...args) => changeCb && changeCb(...args)"
+        :filterable="filterable"
+        :multiple="multiple"
+        :multiple-limit="multipleLimit"
+        :collapse-tags="collapseTags"
+      >
+        <el-option
+          v-if="!withoutAll"
+          value=""
+          :label="showLabel ? '全部' : label"
+        />
+        <el-option
+          v-for="({name, value, code, id}) in candidate"
+          :key="value || code || id"
+          :value="value || code || id"
+          :label="name"
+        />
+      </el-select>
+      <el-date-picker
+        v-if="type === 'datePicker'"
+        @input="val => handleInput(val, prop)"
+        @change="(...args) => changeCb && changeCb(...args)"
+        :value="formData[prop]"
+        format="yyyy-MM-dd"
+        value-format="yyyy-MM-dd"
+        :type="dateType"
+        :range-separator="rangeSeparator || '到'"
+        :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :picker-options="pickerOptions"
+      />
+      <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)"
+          :value="formData[prop[0]]"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          type="date"
+          :editable="false"
+          :placeholder="(placeholder || [])[0] || '开始日期'"
+          :picker-options="pickerOptions?.start || genStartDateDisabledOptions(formData[prop[1]], limit)"
+        />
+        <el-date-picker
+          @input="val => handleInput(val, prop[1], '', key)"
+          @change="(...args) => changeCb && changeCb(...args)"
+          :value="formData[prop[1]]"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          type="date"
+          :editable="false"
+          :placeholder="(placeholder || [])[1] || '结束日期'"
+          :picker-options="pickerOptions?.end || genEndDateDisabledOptions(formData[prop[0]], limit)"
+        />
+        <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>
+    <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>
+    </span>
+  </el-form>
+</template>
+
+<script>
+import { genStartDateDisabledOptions, genEndDateDisabledOptions } from '../helper';
+
+export default {
+  name: 'SearchForm',
+  props: {
+    labelPosition: {
+      default: 'right',
+      type: String
+    },
+    isShowSearchBtn: {
+      default: true,
+      type: Boolean
+    },
+    isInline: {
+      default: false,
+      type: Boolean
+    },
+    config: {
+      required: true,
+      type: Array
+    },
+    width: {
+      default: '100px',
+      type: String
+    },
+    formData: {
+      required: true
+    },
+    showClear: {
+      default: true,
+      type: Boolean
+    },
+    showLabel: {
+      default: true,
+      type: Boolean
+    },
+    ownerClear: {
+      type: Function
+    },
+    resetCheckedIds: {
+      type: Boolean
+    },
+    searchText: {
+      default: '搜索',
+      type: String
+    },
+    clearText: {
+      default: '清除',
+      type: String
+    }
+  },
+  data () {
+    return {
+      visible: true,
+      initialData: {},
+      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 })
+  },
+  methods: {
+    genStartDateDisabledOptions,
+    genEndDateDisabledOptions,
+    handleInput (val, prop, inputLimitCallback, key) {
+      if (inputLimitCallback && !inputLimitCallback(val)) return false
+      if (val) {
+        this.$set(this.checkedIds, key, false)
+      }
+      this.$emit('update:formData', { ...this.formData, [prop]: val })
+      this.$emit('isPickerEmpty', this.checkedIds)
+    },
+
+    handleSearch () {
+      this.$emit('search', this.formData)
+    },
+
+    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)
+      this.$emit('isPickerEmpty', this.checkedIds)
+    },
+
+    handleClearParams () { // 父组件可以通过调用 `this.$refs[xx].handleClearParams()` 来清空表单数据
+      if (this.ownerClear && typeof this.ownerClear === 'function') {
+        this.ownerClear()
+        return
+      }
+      Object.keys(this.checkedIds).forEach((k) => {
+        this.checkedIds[k] = false
+      })
+      this.$emit('update:formData', { ...this.formData, ...this.initialData })
+      this.$emit('clear')
+    },
+
+    handleFormClose () {
+      this.visible = false;
+    },
+  }
+}
+</script>
+<style scoped lang="less">
+.form-double-inline {
+  display: flex;
+  & .el-input {
+    &:not(:first-child) {
+      margin-left: 4px;
+    }
+  }
+  & .el-date-editor{
+    &:not(:first-child){
+      margin-left: 4px;
+    }
+  }
+}
+</style>

package/src/components/SearchForm/types/index.ts

@@ -0,0 +1,81 @@
+import { DatePicker } from "element-ui/types/element-ui"
+
+type BaseOption = {
+  label: string
+  prop: string
+  labelWidth?: string
+  clearable?: boolean
+  placeholder?: string
+  key?: string
+  changeCb?: (value: any) => any
+}
+
+type SlotOption = Omit<BaseOption, 'prop'> & {
+  prop?: string
+  type: 'slot'
+  slotName: string
+}
+
+type InputOption = BaseOption & {
+  type: 'input'
+  inputLimitCallback?: (value: string) => boolean
+  maxlength?: number
+}
+
+type SelectOption = BaseOption & {
+  type: 'select'
+  multiple?: boolean
+  filterable?: boolean
+  multipleLimit?: number
+  collapseTags?: boolean
+  withoutAll?: boolean
+  candidate: {
+    name: string
+    value?: string | number
+    id?: string | number
+    code?: string | number
+  }[]
+}
+
+type DatePickerOption = BaseOption & {
+  type: 'datePicker'
+  dateType?: string
+  rangeSeparator?: string
+  datePickerOptions?: DatePicker['pickerOptions']
+}
+
+type BaseDoubleOption = Omit<BaseOption, 'prop'> & {
+  doubleIsInline?: boolean
+  prop: [string, string]
+}
+
+type DoubleInputOption = BaseDoubleOption & {
+  type: 'doubleInput'
+  inputLimitCallback?: (value: string) => boolean
+}
+
+type DoubleDatePickerOptionBase = BaseDoubleOption & {
+  type: 'doubleDatePicker'
+  isEmpty?: boolean
+  placeholder?: [string, string]
+}
+
+type DoubleDatePickerOption = DoubleDatePickerOptionBase & {
+  pickerOptions?: {
+    start?: DatePicker['pickerOptions']
+    end?: DatePicker['pickerOptions']
+  }
+}
+
+type DoubleDatePickerOptionLimit = DoubleDatePickerOptionBase & {
+  limit?: number
+}
+
+export type SearchFormConfigOption =
+  | InputOption
+  | SelectOption
+  | DatePickerOption
+  | DoubleInputOption
+  | DoubleDatePickerOption
+  | DoubleDatePickerOptionLimit
+  | SlotOption