1.0.8 • Published 8 months ago

iot-element v1.0.8

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

SWElement

省外技术支持部通用组件收集。

安装&使用

安装

yarn add sw-element

使用

import SWElement from 'sw-element';

Vue.use(SWElement);

设置全局配置

import { sw_setGlobalConfig, SWBasicTableValues } from 'sw-element';

sw_setGlobalConfig({
  // 此处全局配置筛选表单的属性
  filterFormConfig: {
    // titleMarginLeft: 5,
    // titleMarginRight: 5,
    // titleFontSize: 14,
    // titleTextColor: '#424242',
    // itemWidth: 200
  },
  // 此处全局配置基础表格列宽自适应方式
  basicTableConfig: {
    // columnAdaptiveType: SWBasicTableValues.columnAdaptiveType.titleAdaptive
  },
  // 此处全局配置基础表格的属性
  basicTableAttributes: {
    // 请参考：https://element.eleme.io/#/zh-CN/component/table#table-attributes
    // ...
  },
  // 此处全局配置基础表格列的属性
  basicTableColumnAttributes: {
    // 请参考：https://element.eleme.io/#/zh-CN/component/table#table-column-attributes
    // 'show-overflow-tooltip': true, // 内置当内容过长被隐藏时显示tooltip，如需自行配置请在此处进行覆盖
    // ...
  },
  // 此处全局配置基础对话框的配置
  basicDialogConfig: {
    // center: true,
    // reverseBtn: false
    // cancelBtnTitle: '取消',
    // confirmBtnTitle: '确认',
    // cancelBtnVisible: true,
    // confirmBtnVisible: true,
  },
  // 此处全局配置基础对话框的属性
  basicDialogAttributes: {
    // 'modal-append-to-body': false,
    // 'destroy-on-close': true,
    // 'close-on-click-modal': false
  },
  // 此处全局配置数据表单的配置
  dataFormConfig: {
    // dynamicListIsOpen: false,
    // numberOfColumn: 2
  },
  // 此处全局配置数据表单的属性
  dataFormAttributes: {
    // 请参考：https://element.eleme.io/#/zh-CN/component/form#form-attributes
    // ...
  }
});

配置优先级：标签属性 > 全局属性 > 默认属性；

组件清单

FilterForm

筛选表单，通过配置快速生成筛选菜单。

使用示例

  • template
<sw-filter-form :items="filterItems" :initial-form-data.sync="filterData">
  <template v-slot:slot-demo>
    <el-input v-model="filterData.slotValue" />
  </template>
</sw-filter-form>
  • js
import { SWFilterFormValues } from 'sw-element';

export default {
  name: 'Index',
  data() {
    return {
      filterItems: [
        {
          visible: false,
          type: SWFilterFormValues.itemType.input,
          title: '输入框示例',
          prop: 'inputValue',
          contentSpan: 3,
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请输入'
          }
        },
        {
          type: SWFilterFormValues.itemType.selector,
          title: '选择器配置方法示例',
          prop: 'funSelectorValue',
          options: this.getOptions,
          labelKey: 'displayName',
          valueKey: 'id',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.selector,
          title: '选择器配置值示例',
          prop: 'valSelectorValue',
          options: [
            {
              id: '1',
              displayName: '选项1'
            },
            {
              id: '2',
              displayName: '选项2'
            }
          ],
          labelKey: 'displayName',
          valueKey: 'id',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.timePicker,
          title: '时间选择器',
          prop: 'timePickerValue',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.timeSelector,
          title: '任意时间选择器',
          prop: 'timeSelectorValue',
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.datePicker,
          title: '日期选择器',
          prop: 'datePickerValue',
          contentSpan: 1,
          on: {
            change: this.onChange
          },
          bind: {
            placeholder: '请选择'
          }
        },
        {
          type: SWFilterFormValues.itemType.slot,
          title: '插槽示例',
          contentSpan: 1,
          slotName: 'slot-demo'
        }
      ],
      filterData: {
        inputValue: '',
        funSelectorValue: '',
        valSelectorValue: '',
        datePickerValue: '',
        timePickerValue: '',
        timeSelectorValue: '',
        slotValue: ''
      }
    };
  },
  methods: {
    getOptions() {
      return [
        {
          id: '1',
          displayName: '选项1'
        },
        {
          id: '2',
          displayName: '选项2'
        }
      ];
    },
    onInput(val) {
      console.log(val);
    },
    onChange(val) {
      console.log(val);
    }
  }
};

属性

参数说明类型是否必须
items配置项Array是
initialFormData数据模型Object是
config筛选表单配置Object否
items[] Options
参数说明类型是否必须默认值
visible当前项是否显示Boolean否true
type类型，请引用SWFilterFormValues.itemType中的枚举值Array是-
title标题String是-
prop属性名称String是-
contentSpan当前项占据的跨度，将自动计算为单元宽度的倍数Number否1
options选择器选项配置Function/Array否，当type为selector时必填[]
labelKey选择器显示文本对应数据源中的keyString否，当type为selector时必填-
valueKey选择器选中值对应数据源中的keyString否，当type为selector时必填-
slotName插槽名称String否，当type为slot时必填-
on各组件的事件扩展，请参考Element-UI组件库Object否-
bind各组件的属性扩展，请参考Element-UI组件库Object否-
SWFilterFormValues.itemType
keyvalue描述
inputinput输入框
selectorselector选择器
datePickerdate-picker日期选择器
timePickertime-picker任意时间选择器
timeSelectortime-selector固定实现选择器
slotslot插槽，自定义筛选项
config Options
参数说明类型默认值
titleMarginLeft标题左边距Number5
titleMarginRight标题右边距Number5
titleFontSize标题字体大小Number14
titleTextColor标题字体颜色String'#424242'
itemWidth每一项的单元宽度Number200

BasicTable

基础表格组件，通过配置快速生成基础表格。

使用示例

  • template
<sw-basic-table ref="table" :items="tableColumnItems" :data="tableDataSource">
    <template #index="{row}">
      {{ row + 1 }}
    </template>
    <template #date="{data}">
      {{ data.date }}
    </template>
    <template #name="{data}">
      {{ data.name }}
    </template>
    <template #province="{data}">
      {{ data.province }}
    </template>
    <template #city="{data}">
      {{ data.city }}
    </template>
    <template #address="{data}">
      {{ data.address }}
    </template>
    <template #zip="{data}">
      {{ data.zip }}
    </template>
    <template #operate="{data}">
      {{ data.name }}
    </template>
    <template #custom-header="{column}">
      这是自定义表头的使用示例，第{{ column }}列
    </template>
    <template #expand="{data}">
      这是展开表格每一行的插槽使用示例，当前行的原始数据：{{ data }}
    </template>
    <template #append>
      这是append插槽的使用示例
    </template>
</sw-basic-table>
  • js
export default {
  name: 'Index',
  data() {
    return {
      tableColumnItems: [
        {
          bind: {
            type: 'expand'
          }
        },
        {
          bind: {
            type: 'selection'
          }
        },
        {
          title: '排序',
          slotName: 'index'
        },
        {
          title: '日期',
          slotName: 'date'
        },
        {
          title: '姓名',
          slotName: 'name'
        },
        {
          title: '省份',
          slotName: 'province'
        },
        {
          title: '市区',
          slotName: 'city'
        },
        {
          title: '地址',
          slotName: 'address'
        },
        {
          title: '邮编',
          slotName: 'zip'
        },
        {
          title: '操作',
          slotName: 'operate',
          headerSlotName: 'custom-header'
        }
      ],
      tableDataSource: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    };
  },
  mounted() {
    this.$refs.table.toggleAllSelection();
  }
};

属性

参数说明类型是否必须默认值描述
items表格列的配置项Array是--
config配置Object否--

其他扩展配置项请参考：https://element.eleme.io/#/zh-CN/component/table#table-attributes

items[] Options
参数说明类型是否必须默认值
title当前列的标题String是-
slotName当前列的具名插槽名称String是-
headerSlotName当前列自定义表头的插槽名称String否-
bind列的扩展属性，请参考https://element.eleme.io/#/zh-CN/component/table#table-column-attributesObject否-
config Options
参数说明类型默认值
columnAdaptiveType列的自适应类型，请引用SWBasicTableValues.columnAdaptiveType中的枚举值String设置该属性为none时，浏览器缩放时会导致标题换行，因此提供了根据标题自适应title-adaptive和最长标题自适应longest-title-adaptive两种方式，处理标题自动换行的问题。可根据表格实际展示内容自行调整自适应方式。如果需要自定义表头，请自行设置min-width属性进行覆盖。
SWBasicTableValues.columnAdaptiveType
keyvalue描述
nonenone输入框
titleAdaptivetitle-adaptive标题自适应
longestTitleAdaptivelongest-title-adaptive最长标题自适应

其他说明

BasicDialog

基础对话框组件。

使用示例

  • template
<el-button @click="openDialog">打开对话框</el-button>
<sw-basic-dialog
  ref="dialog"
  :config="{
        center:isCenter
      }"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <span>对话框内容</span>
  <el-button @click="isCenter = !isCenter">切换</el-button>
</sw-basic-dialog>
  • js
export default {
  name: 'Index',
  data() {
    return {
      isCenter: true
    };
  },
  methods: {
    // 打开对话框
    openDialog() {
      this.$refs.dialog.openDialog({ title: '对话框' });
    },
    // 确认
    onConfirm(cb) {
      cb(true);
      setTimeout(() => {
        cb(false);
        this.$refs.dialog.closeDialog();
      }, 3000);
    },
    onCancel() {
      console.log('取消');
    }
  }
};

属性

参数说明类型是否必须默认值描述
config对话框的配置项Object否--
config Options
参数说明类型默认值
center是否居中显示内容Booleantrue
reverseBtn是否反转按钮排列Booleanfalse，确认在前，取消在后
cancelBtnTitle取消按钮的标题String取消
confirmBtnTitle确认按钮的标题String确认
cancelBtnVisible取消按钮是否显示Booleantrue
confirmBtnVisible确认按钮是否显示Booleantrue

事件

事件名称说明回调参数
confirm点击确认的回调函数callback，传入参数true，确认按钮进入loading状态，否则关闭loading状态
cancel点击取消的回调-

方法

方法名称说明参数
openDialog打开对话框Object.title，对话框标题
closeDialog关闭对话框-

DataForm

数据表单组件，通过配置快速生成数据表单。

使用示例

  • template
<sw-data-form ref="dataForm" :items="formDataItems" :initial-form-data="formData" :rules="rules">
<template #slot="{data,prop}">
  <el-input v-model="data[prop]" />
</template>
<template #dynamic-list-header>
  <div class="dynamic-list-header">这是动态表单的头部</div>
</template>
<template #dynamic-list-item="{data,prop,index}">
  <el-form-item
    :prop="`${prop}.${index}.name`"
    label-width="0"
    :rules="[{ required: true, message: '请输入插槽内容', trigger: ['blur', 'change'] }]"
  >
    <el-input v-model="data[prop][index].name" />
  </el-form-item>
</template>
</sw-data-form>
<el-button @click="validate">校验</el-button>
  • js
import { SWDataFormValues } from 'sw-element';

export default {
  name: 'Index',
  data() {
    return {
      formData: {
        inputValue: '',
        numberInputValue: undefined,
        textareaValue: '',
        selectorValue: [],
        datePickerValue: '',
        timePickerValue: '',
        timeSelectorValue: '',
        checkboxValue: [],
        radioValue: '',
        switchValue: '1',
        textValue: '这是文本内容',
        dynamicList: [],
        slotValue: ''
      },
      rules: {
        inputValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
        numberInputValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
        textareaValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
        selectorValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        datePickerValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        timePickerValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        timeSelectorValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        checkboxValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        radioValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
        slotValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }]
      },
      formDataItems: [
        {
          type: SWDataFormValues.itemType.input,
          title: '输入框',
          prop: 'inputValue',
          required: true,
          tooltip: '这是一个消息提示'
        },
        {
          type: SWDataFormValues.itemType.numberInput,
          title: '数字输入框',
          prop: 'numberInputValue',
          required: true,
          tooltip: '这是一个消息提示'
        },
        {
          type: SWDataFormValues.itemType.textarea,
          title: '文本域',
          prop: 'textareaValue',
          required: true,
          isSingleRow: true
        },
        {
          type: SWDataFormValues.itemType.selector,
          title: '选择器',
          prop: 'selectorValue',
          required: true,
          labelKey: 'displayName',
          valueKey: 'id',
          isSingleRow: true,
          bind: {
            multiple: true
          },
          options: [
            {
              id: 1,
              displayName: '选项1'
            },
            {
              id: 2,
              displayName: '选项2'
            },
            {
              id: 3,
              displayName: '选项3'
            }
          ]
        },
        {
          type: SWDataFormValues.itemType.datePicker,
          title: '时间选择器',
          prop: 'datePickerValue',
          required: true
        },
        {
          type: SWDataFormValues.itemType.timePicker,
          title: '任意时间选择器',
          prop: 'timePickerValue',
          tooltip: '这是一个消息提示'
        },
        {
          type: SWDataFormValues.itemType.timeSelector,
          title: '固定选择器',
          prop: 'timeSelectorValue',
          required: true
        },
        {
          type: SWDataFormValues.itemType.checkbox,
          title: '复选框',
          prop: 'checkboxValue',
          required: true,
          labelKey: 'displayName',
          valueKey: 'id',
          isSingleRow: true,
          bind: {
            min: 1,
            max: 2
          },
          options: [
            {
              id: 1,
              displayName: '选项1'
            },
            {
              id: 2,
              displayName: '选项2',
              bind: {
                disabled: true
              }
            },
            {
              id: 3,
              displayName: '选项3'
            },
            {
              id: 4,
              displayName: '选项4'
            }
          ]
        },
        {
          type: SWDataFormValues.itemType.radio,
          title: '单选框',
          prop: 'radioValue',
          required: true,
          labelKey: 'displayName',
          valueKey: 'id',
          isSingleRow: true,
          options: [
            {
              id: 1,
              displayName: '选项1'
            },
            {
              id: 2,
              displayName: '选项2'
            },
            {
              id: 3,
              displayName: '选项3'
            },
            {
              id: 4,
              displayName: '选项4'
            },
            {
              id: 5,
              displayName: '选项5'
            },
            {
              id: 6,
              displayName: '选项6'
            }
          ]
        },
        {
          type: SWDataFormValues.itemType.switch,
          title: '开关',
          prop: 'switchValue',
          required: true,
          bind: {
            'active-value': '1',
            'inactive-value': '2'
          }
        },
        {
          type: SWDataFormValues.itemType.text,
          title: '文本',
          prop: 'textValue',
          required: true,
          isSingleRow: true
        },
        {
          type: SWDataFormValues.itemType.dynamicList,
          title: '动态表单',
          prop: 'dynamicList',
          headerSlotName: 'dynamic-list-header',
          slotName: 'dynamic-list-item',
          isSingleRow: true,
          required: true
        },
        {
          type: SWDataFormValues.itemType.slot,
          title: '插槽',
          prop: 'slotValue',
          required: true,
          slotName: 'slot',
          isSingleRow: true
        }
      ]
    };
  },
  methods: {
    async validate() {
      await this.$refs.dataForm.validate();
    }
  }
};

属性

参数说明类型是否必须
items配置项Array是
initialFormData数据模型Object是
config动态表单配置Object否

其他扩展配置项请参考：https://element.eleme.io/#/zh-CN/component/form#form-attributes

items[] Options
参数说明类型是否必须默认值
visible当前项是否显示Boolean否true
type类型，请引用SWDataFormValues.itemType中的枚举值Array是-
title标题String是-
prop属性名称String是-
tooltip提示文本String否-
required是否显示红色*号，注意，此属性不作必填的校验依据Boolean否false
isSingleRow当前配置项是否独占一行Boolean否false
options选择器选项配置Function/Array否，当type为selector或checkbox或radio时必填[]
labelKey选择器显示文本对应数据源中的keyString否，当type为selector或checkbox或radio时必填-
valueKey选择器选中值对应数据源中的keyString否，当type为selector或checkbox或radio时必填-
slotName插槽名称String否，当type为slot或dynamicList时必填-
headerSlotName动态列表表头插槽名称String否-
on各组件的事件扩展，请参考Element-UI组件库Object否-
bind各组件的属性扩展，请参考Element-UI组件库Object否-
SWDataFormValues.itemType
keyvalue描述
inputinput输入框
numberInputnumber-input计数器
textareatextarea输入框
selectorselector选择器
datePickerdate-picker日期选择器
timePickertime-picker任意时间选择器
timeSelectortime-selector固定实现选择器
checkboxcheckbox复选框
radioradio单选框
switchswitch开关
texttext文本
dynamicListdynamic-list动态列表
slotslot插槽，自定义表单项
config Options
参数说明类型默认值
dynamicListIsOpen动态列表是否默认展开Booleanfalse
numberOfColumn标题右边距Number2

方法

方法名称说明参数返回值
validate校验表单-返回一个Promise，成功resolve，校验失败自动提示异常消息并reject
resetValues重设指定属性的值和校验状态props，表单项对应的prop集合，会清空props中对应属性的值和校验状态-
clearValidate重设表单的校验状态--

其他说明

  • 当type为dynamicList时，如果required为true，则会为动态列表自动创建一条数据，且当动态列表只有一条数据时，该数据不可删除。
  • 当type为dynamicList时，绑定的数据模型会自动增加一个__key的属性用来做必要的业务处理，请在接收数据后根据业务需求自行过滤该属性。
element-uinode-sassshelljsvuevue-template-compiler
@everything-registry/sub-chunk-1928
1.0.8

8 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago