element-ui-pro-components-test 1.5.0

package/packages/editable-pro-table/src/components/FormItem.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-form-item
+    v-bind="normalizedFormItem"
+    :prop="formItemProp"
+    label="" 
+    class="editable-form-item is-editable"
+  >
+    <!-- 自定义渲染 -->
+    <!-- start -->
+    <CustomRender 
+      v-if="formItem.renderField"
+      :render="() => formItem.renderField({ form, formItem, recordKey, index })" 
+    />
+    <slot 
+      v-else-if="formItem.valueType === 'slot'" 
+      :name="formItem.prop"
+    ></slot>
+    <!-- end -->
+    <!-- 元素渲染 -->
+    <!-- start -->
+    <component
+      v-else
+      :is="`el-${formItem.valueType}`"
+      v-model="form[formItem.prop]"
+      v-bind="formItem.fieldProps"
+      v-on="normalizedFieldEvents"
+    >
+      <!-- Select -->
+      <!-- start -->
+      <template v-if="formItem.valueType === 'select'">
+        <!-- Option Group -->
+        <!-- start -->
+        <template v-if="isOptionGroup">
+          <el-option-group
+            v-for="group in formItem.options"
+            v-bind="group"
+            :key="group.label"
+          >
+            <el-option 
+              v-for="option in group.options"
+              v-bind="option"
+              :key="option.value"
+            ></el-option>
+          </el-option-group>
+        </template>
+        <!-- end -->
+        <!-- Option -->
+        <!-- start -->
+        <template v-else>
+          <el-option 
+            v-for="option in formItem.options"
+            v-bind="option"
+            :key="option.value"
+          ></el-option>
+        </template>
+        <!-- end -->
+      </template>
+      <!-- end -->
+      <template v-else-if="groups.includes(formItem.valueType)">
+        <component
+          :is="selection[formItem.valueType]"
+          v-for="option in formItem.options"
+          :label="option.value"
+          :key="option.value"
+        >
+          {{ option.label }}
+        </component>
+      </template>
+    </component>
+    <!-- end -->
+  </el-form-item>
+</template>
+
+<script>
+  import CustomRender from '@/components/custom-render'
+
+  export default {
+    name: 'FormItem',
+    components: {
+      CustomRender,
+    },
+    props: {
+      // formItem 项
+      formItem: {
+        type: Object,
+        required: true
+      },
+      // 表单数据
+      form: {
+        type: Object,
+        required: true
+      },
+      // 可编辑表格名称
+      name: {
+        type: String,
+      },
+      recordKey: {
+        type: [Number, String],
+      },
+      // 下标
+      index: {
+        type: Number
+      },
+      // el-form-item prop
+      formItemProp: {
+        type: String
+      }
+    },
+    computed: {
+      // 过滤 el-form-item 的属性
+      normalizedFormItem() {
+        const {
+          valueType,
+          renderField,
+          fieldProps, 
+          fieldEvents, 
+          options,
+          valueEnum, 
+          optionLoader, 
+          initialValue, 
+          colProps,
+          ...keys
+        } = this.formItem
+        return keys
+      },
+      // 表单事件
+      normalizedFieldEvents() {
+        const { formItem: { fieldEvents } } = this
+
+        if (!fieldEvents) {
+          return
+        }
+
+        const newEvents = {}
+        const { recordKey, form: row, index } = this
+        for (const eventName in fieldEvents) {
+          const handler = (...args) => fieldEvents[eventName]?.(...args, {
+            recordKey,
+            row,
+            index,
+          })
+
+          newEvents[eventName] = handler
+        }
+
+        return newEvents
+      },
+      isOptionGroup() {
+        return this.formItem.options?.[0]?.options
+      }
+    },
+    data() {
+      return {
+        groups: ['radio-group', 'checkbox-group'], // valueType
+        selection: { // 选项组对应的组件
+          'radio-group': 'el-radio',
+          'checkbox-group': 'el-checkbox'
+        }
+      }
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+.editable-form-item.el-form-item {
+  &.is-editable{
+    /* 防止 show-overflow-tooltip 触发 */
+    width: calc(100% - 1px);
+  }
+}
+
+.editable-form-item.is-required {
+  position: relative;
+
+  &::before {
+    content: '*';
+    color: #f56c6c;
+    position: absolute;
+    left: -8px;
+  }
+}
+
+.editable-form-item {
+  ::v-deep .el-form-item__content {
+    .el-select,
+    .el-input-number,
+    .el-date-editor,
+    .el-cascader {
+      width: 100%;
+    }
+  }
+}
+</style>

package/packages/editable-pro-table/src/components/RecordCreator.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-button
+    class="btn-add"
+    icon="el-icon-plus"
+    :style="recordCreatorProps.style"
+    v-bind="initializedButtonProps"
+  >
+    {{ recordCreatorProps.creatorButtonText }}
+  </el-button>
+</template>
+
+<script>
+  export default {
+    name: 'RecordCreator',
+    props: {
+      recordCreatorProps: {
+        type: [Boolean, Object],
+        required: true
+      },
+      size: {
+        type: String
+      }
+    },
+    computed: {
+      initializedButtonProps() {
+        const { size, recordCreatorProps: { buttonProps = {} } } = this
+        return {
+          plain: true,
+          ...buttonProps,
+          size,
+        }
+      }
+    },
+  }
+</script>
+
+<style scoped>
+.btn-add {
+  width: 100%;
+  margin: 10px 0;
+  border-style: dashed;
+}
+</style>

package/packages/editable-pro-table/src/components/RenderCell.vue

@@ -0,0 +1,181 @@
+<template>
+  <Fragment>
+    <!-- 编辑 -->
+    <!-- start -->
+    <FormItem
+      v-if="isEditable"
+      :formItem="formItem"
+      :formItemProp="formItemProp"
+      :form="row"
+      :name="name"
+      :recordKey="recordKey"
+      :index="index"
+    >
+      <template #[formItem.prop]>
+        <slot 
+          :name="formItem.prop" 
+          v-bind="{ form: row, formItem, recordKey, index }"
+        ></slot>
+      </template>
+    </FormItem>
+    <!-- end -->
+    <!-- 文本 -->
+    <!-- start -->
+    <template v-else>
+      <!-- 无 el-form-item 包裹会造成表单校验失败 -->
+      <!-- start -->
+      <el-form-item class="editable-form-item" :prop="formItemProp">
+        <CustomRender 
+          v-if="column.renderCell"
+          :render="() => column.renderCell(scope)"
+        />
+        <span v-else :class="{ 'text-ellipsis': column['show-overflow-tooltip'] }">{{ value }}</span>
+      </el-form-item>
+      <!-- end -->
+    </template>
+    <!-- end -->
+  </Fragment>
+</template>
+
+<script>
+  import FormItem from './FormItem'
+  import CustomRender from '@/components/custom-render'
+  import { setPlaceholder, setSelectOptions, setCascaderOptions } from 'element-ui-pro-components/src/utils/form'
+
+  export default {
+    name: 'RenderCell',
+    components: {
+      FormItem,
+      CustomRender
+    },
+    props: {
+      editable: {
+        type: Object,
+        required: true
+      },
+      // 列
+      column: {
+        type: Object,
+        required: true
+      },
+      // 数据
+      scope: {
+        type: Object
+      },
+      name: {
+        type: String,
+        required: true
+      },
+      recordKey: {
+        type: [String, Number]
+      },
+      cachedOptions: {
+        type: Object
+      },
+      preEditRows: {
+        type: Map
+      }
+    },
+    computed: {
+      // 表单项
+      formItem() {
+        const {
+          column,
+          column: {
+            prop,
+            formItemProps = {},
+            valueType,
+            renderField,
+            fieldProps = {},
+            fieldEvents,
+          }
+        } = this
+        // 设置 placeholder
+        setPlaceholder(fieldProps, valueType)
+
+        // 设置 select options
+        setSelectOptions(column, this.cachedOptions)
+
+        // 设置 cascader options
+        setCascaderOptions(fieldProps, column, this.cachedOptions)
+
+        return {
+          ...formItemProps,
+          prop,
+          valueType,
+          renderField,
+          fieldProps,
+          fieldEvents,
+          options: column.options,
+        }
+      },
+      // 行数据
+      row() {
+        return this.scope.row
+      },
+      // 下标
+      index() {
+        return this.scope.$index
+      },
+      // 可编辑表格 el-form-item prop
+      formItemProp() {
+        const { formItem: { prop }, name, index } = this
+        return `${name}.${index}.${prop}`
+      },
+      isEditable() {
+        const { 
+          editable: { editableKeys },
+          recordKey,
+          formItem: { prop },
+          column: { readonly, editable}
+        } = this
+        const preEditCellValue = this.preEditRows.get(this.recordKey)?.[prop]
+        return editableKeys?.some(key => recordKey === key)
+          && readonly !== true
+          && (editable ? editable?.(preEditCellValue, this.row, this.index) : true)
+      },
+      // 文本
+      value() {
+        const { column: { formatter }, formItem, scope, row, index } = this
+        const { prop, valueType, options, valueEnum } = formItem
+        const cellValue = row[prop]
+
+        if (formatter) { // formatter
+          return formatter(row, scope.column, cellValue, index)
+        } else if (valueType === 'select') { // 选择器
+          if (valueEnum) { // 枚举
+            if (valueEnum instanceof Map) {
+              return valueEnum.get(cellValue)
+            } else {
+              return valueEnum[cellValue]
+            }
+          } else { // options
+            const map = (options || []).reduce((accu, cur) => ({ ...accu, [cur.value]: cur.label }), {})
+            return map[cellValue]
+          }
+        }
+
+        return cellValue ?? '-'
+      }
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+.text-ellipsis {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: inherit;
+}
+
+.editable-form-item.el-form-item {
+  margin-bottom: 0;
+  
+  ::v-deep .el-form-item__content {
+    font-size: unset;
+  }
+}
+</style>