@lx-frontend/wrap-element-ui 1.0.25 → 2.0.0

package/src/components/LxTable/index.vue

@@ -1,296 +0,0 @@
-
-<!--
-  @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

@@ -1,66 +0,0 @@
-<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

@@ -1,262 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-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