element-ui-pro-components-test 1.5.0

package/packages/pro-form/index.js

@@ -0,0 +1,9 @@
+import ProForm from './src'
+
+// 为组件提供 install 方法
+ProForm.install = function(Vue) {
+  Vue.component(ProForm.name, ProForm)
+}
+
+// 默认导出组件
+export default ProForm

package/packages/pro-form/src/components/Submitter.vue

@@ -0,0 +1,47 @@
+<script>
+  export default {
+    name: 'Submitter',
+    props: {
+      render: {
+        validator: (value) => {
+          return value === null || typeof value === 'function'
+        },
+        required: true
+      },
+      submitter: {
+        type: Object,
+        required: true
+      },
+      actions: {
+        type: Object,
+        required: true
+      }
+    },
+    render: function(h) {
+      const { 
+        submitter: { resetText, submitText, resetButtonProps, submitButtonProps },
+        actions: { reset, submit },
+        render
+      } = this
+      // { ...props } 传递组件属性时 需要 props 包裹 
+      const resetProps = { props: resetButtonProps, resetButtonProps }
+      const submitProps = { props: submitButtonProps, submitButtonProps }
+      const doms = [
+        <el-button { ...resetProps } onClick={reset} key='reset'>{ resetText }</el-button>,
+        <el-button type="primary" { ...submitProps } onClick={submit} key='submit'>{ submitText }</el-button>
+      ]
+
+      return (
+        render 
+          ? <Fragment>{render(this.actions, doms)}</Fragment>
+          : <el-form-item class="pro-form__submitter">
+            {doms}
+          </el-form-item>
+      )
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/packages/pro-form/src/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <el-form
+    ref="proFormRef"
+    :model="form"
+    class="pro-form"
+    :class="className"
+    v-bind="formProps"  
+  >
+    <!-- 栅格布局 -->
+    <!-- start -->
+    <template v-if="grid">
+      <el-row v-bind="rowProps">
+        <el-col 
+          v-for="formItem in normalizedFormItems" 
+          v-bind="formItem.colProps"
+          :key="formItem.prop || formItem.key"
+        >
+          <!-- 自定义 el-form-item -->
+          <!-- start -->
+          <slot 
+            v-if="formItem.customSlot"
+            :name="formItem.customSlot === true ? formItem.prop : formItem.customSlot"
+            v-bind="{ form }"
+          ></slot>
+          <CustomRender
+            v-else-if="formItem.renderFormItem"
+            :render="() => formItem.renderFormItem(form)"
+          />
+          <!-- end -->
+          <!-- ProFormItem -->
+          <!-- start -->
+          <ProFormItem
+            v-else
+            :form="form" 
+            :formItem="formItem"
+          >
+            <template #[formItem.prop]>
+              <slot :name="formItem.prop" v-bind="{ form, formItem }"></slot>
+            </template>
+          </ProFormItem>
+          <!-- end -->
+        </el-col>
+      </el-row>
+    </template>
+    <!-- end -->
+    <!-- 非栅格布局 -->
+    <!-- start -->
+    <template v-else>
+      <template v-for="formItem in normalizedFormItems">
+        <!-- 自定义 el-form-item -->
+        <!-- start -->
+        <slot 
+          v-if="formItem.customSlot"
+          :name="formItem.customSlot === true ? formItem.prop : formItem.customSlot"
+          v-bind="{ form }"
+        ></slot>
+        <CustomRender
+          v-else-if="formItem.renderFormItem"
+          :render="() => formItem.renderFormItem(form)"
+          :key="formItem.prop || formItem.key"
+        />
+        <!-- end -->
+        <!-- ProFormItem -->
+        <!-- start -->
+        <ProFormItem
+          v-else
+          :form="form" 
+          :formItem="formItem"
+          :key="formItem.prop || formItem.key"
+        >
+          <template #[formItem.prop]>
+            <slot :name="formItem.prop" v-bind="{ form, formItem }"></slot>
+          </template>
+        </ProFormItem>
+        <!-- end -->
+      </template>
+    </template>
+    <!-- end -->
+    <!-- submitter -->
+    <!-- start -->
+    <template v-if="submitter">
+      <Submitter
+        :submitter="submitterProps"
+        :actions="{ submit, reset, resetAllFields }"
+        :render="submitter.customRender
+          ? (actions, doms) => submitter.customRender(form, actions, doms)
+          : null"
+      />
+    </template>
+    <!-- end -->
+  </el-form>
+</template>
+
+<script>
+  import CustomRender from '@/components/custom-render'
+  import ProFormItem from '@/components/pro-form-item'
+  import Submitter from './components/Submitter'  
+  import { setPlaceholder, setSelectOptions, setCascaderOptions } from 'element-ui-pro-components/src/utils/form'
+  import { t } from 'element-ui-pro-components/src/locale'
+  
+  export default {
+    name: 'ProForm',
+    components: {
+      CustomRender,
+      ProFormItem,
+      Submitter
+    },
+    props: {
+      // el-form attributes 的配置
+      formProps: {
+        type: Object,
+        default: () => ({})
+      },
+      // el-form 的类名
+      className: {
+        type: String
+      },
+      // 列定义
+      formItems: {
+        type: Array,
+        required: true,
+        default: () => []
+      },
+      // 提交按钮相关配置
+      submitter: {
+        type: [Boolean, Object],
+        default: true
+      },
+      // 开启栅格化模式
+      grid: {
+        type: Boolean,
+      },
+      // 开启 grid 模式时传递给 el-row
+      rowProps: {
+        type: Object,
+        default: () => ({ gutter: 8 })
+      },
+      // 表单默认值
+      initialValues: {
+        type: Object,
+        default: () => ({})
+      },
+    },
+    computed: {
+      // formItems 标准化处理
+      normalizedFormItems() {
+        return this.formItems
+          // 过滤隐藏项
+          .filter(item => !item.hideInForm)
+          .map(item => {
+            const { valueType, fieldProps = {} } = item
+            // 设置 placeholder
+            setPlaceholder(fieldProps, valueType)
+
+            // 设置 select options
+            setSelectOptions(item, this.cachedOptions)
+
+            // 设置 cascader options
+            setCascaderOptions(fieldProps, item, this.cachedOptions)
+
+            return {
+              ...item,
+              fieldProps
+            }
+          })
+      },
+      // submitter 标准化处理
+      submitterProps() {
+        if (this.submitter) {
+          // 配置按钮文本
+          const defaultTextConfig = {
+            resetText: t('elProComponents.proForm.reset'),
+            submitText: t('elProComponents.proForm.submit')
+          }
+
+          // 对象类型
+          if (typeof this.submitter === 'object') {
+            return {
+              ...defaultTextConfig,
+              ...this.submitter
+            }
+          }
+
+          // 返回默认配置
+          return {
+            ...defaultTextConfig
+          }
+        }
+
+        return false
+      }
+    },
+    data() {
+      return {
+        cachedOptions: {}, // 下拉数据 { [prop]: res }
+        form: this.initForm(), // 表单数据
+      }
+    },
+    created () {
+      // 获取异步数据
+      this.getOptions()
+    },
+    methods: {
+      /**
+       * @desc 获取异步下拉数据
+       */
+      getOptions() {
+        for (const item of this.formItems) {
+          const { prop, optionLoader } = item
+          if (typeof optionLoader === 'function') {
+            optionLoader().then(res => {
+              this.cachedOptions = {
+                ...this.cachedOptions,
+                [prop]: res
+              }
+            })
+          }
+        }
+      },
+      /**
+       * @desc 初始化表单数据
+       */
+      initForm() {
+        const { formItems, initialValues } = this
+        const data = formItems.reduce((accu, cur) => {
+          const { prop, initialValue } = cur
+          if (!prop) {
+            return accu
+          }
+
+          return {
+            ...accu,
+            [prop]: initialValue
+          }
+        }, {})
+
+        return { ...initialValues, ...data }
+      },
+      /**
+       * @desc 获取 el-form ref
+       * @returns {Object}
+       */
+      getFormRef() {
+        return this.$refs.proFormRef
+      },
+      /**
+       * @desc 获取表单数据
+       * @returns {Object}
+       */
+      getForm() {
+        return this.form
+      },
+      /**
+       * @desc 手动更新表单数据
+       * @param {Object} data 数据
+       */
+      setFieldsValue(data) {
+        this.form = {
+          ...this.form,
+          ...data
+        }
+      },
+      /**
+       * @desc 手动更新单个字段数据
+       * @param {String} key 键
+       * @param {any} value 值
+       */
+      setFieldValue(key, value) {
+        this.form[key] = value
+      },
+      /**
+       * @desc 提交
+       */
+      submit() {
+        this.$refs.proFormRef?.validate((valid, object) => {
+          if (valid) {
+            // 回传给父组件
+            this.$emit('onFinish', this.form)
+            return
+          }
+
+          // 回传给父组件
+          this.$emit('onError', object)
+        })
+      },
+      /**
+       * @desc 重置
+       */
+      async reset() {
+        try {
+          await this.$refs.proFormRef?.resetFields()
+          // 回传给父组件
+          this.$emit('onReset')
+        } catch (err) {
+          console.error('err', err)
+        }
+      },
+      /**
+       * @desc 重置表单的拓展方法，过滤了非表单项的字段
+       */
+      resetAllFields() {
+        // 清除校验
+        this.$refs.proFormRef?.clearValidate()
+        // 重置数据
+        this.form = this.initForm()
+      }
+    }
+  }
+</script>

package/packages/pro-table/index.js

@@ -0,0 +1,9 @@
+import ProTable from './src'
+
+// 为组件提供 install 方法
+ProTable.install = function(Vue) {
+  Vue.component(ProTable.name, ProTable)
+}
+
+// 默认导出组件
+export default ProTable

package/packages/pro-table/src/components/ColumnAlignSettings.vue

@@ -0,0 +1,77 @@
+<template>
+  <span class="icon-algin-group">
+    <template v-if="column.fixed !== 'left'">
+      <el-tooltip :content="t('elProComponents.tableToolBar.leftPin')" placement="top">
+        <VerticalAlignTopIcon @click.native.stop.prevent="handleAlgin('left')" />
+      </el-tooltip>
+    </template>
+    <template v-if="column.fixed === 'left' || column.fixed === 'right'">
+      <el-tooltip :content="t('elProComponents.tableToolBar.noPin')" placement="top">
+        <VerticalAlginMiddleIcon @click.native.stop.prevent="handleAlgin()" />
+      </el-tooltip>
+    </template>
+    <template v-if="column.fixed !== 'right'">
+      <el-tooltip :content="t('elProComponents.tableToolBar.rightPin')" placement="top">
+        <VerticalAlginBottomIcon @click.native.stop.prevent="handleAlgin('right')" />
+      </el-tooltip>
+    </template>
+  </span>
+</template>
+
+<script>
+import VerticalAlignTopIcon from "./svg/VerticalAlignTopIcon"
+import VerticalAlginBottomIcon from "./svg/VerticalAlginBottomIcon"
+import VerticalAlginMiddleIcon from "./svg/VerticalAlginMiddleIcon"
+import { t } from 'element-ui-pro-components/src/locale'
+
+export default {
+  name: "ColumnAlginSettings",
+  inject: ["onColumnSettingsChange"],
+  components: {
+    VerticalAlignTopIcon,
+    VerticalAlginMiddleIcon,
+    VerticalAlginBottomIcon,
+  },
+  props: {
+    // 单个列表项
+    column: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    /**
+     * @desc 支持国际化
+     * @param key 
+     */
+    t(key) {
+      return t(key)
+    },
+    /**
+     * @desc 监听修改
+     * @param {string | undefined} fixed 固定位置
+     */
+    handleAlgin(fixed) {
+      const { prop } = this.column
+      // ProTable provide 提供
+      this.onColumnSettingsChange({ event: "align", prop, fixed })
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-algin-group {
+  margin-left: auto;
+  align-items: center;
+  gap: 8px;
+  color: #1677ff;
+  cursor: pointer;
+  display: none;
+  transition: display 0.2s;
+}
+
+.icon-algin-group svg {
+  outline: none;
+}
+</style>

package/packages/pro-table/src/components/ColumnSettings.vue

@@ -0,0 +1,172 @@
+<template>
+  <el-popover
+    popper-class="column-settings-popover"
+    placement="bottom-end"
+    trigger="click"
+  >
+    <div class="pro-table__toolbar-item" slot="reference">
+      <el-tooltip :content="columnSettings.columnSetting" placement="top">
+        <SettingIcon />
+      </el-tooltip>
+    </div>
+    <div class="popover-header">
+      <el-checkbox
+        v-if="columnSettings.checkable"
+        :value="checkAll" 
+        :indeterminate="isIndeterminate"
+        @change="handleChange"
+      >
+        {{ columnSettings.columnDisplay }}
+      </el-checkbox>
+      <span class="column-display" v-else>{{ columnSettings.columnDisplay }}</span>
+      <a type="text" class="btn-reset" @click="handleReset">{{ columnSettings.resetText }}</a>
+    </div>
+    <div class="popover-content">
+      <!-- 固定在列首 -->
+      <!-- start -->
+      <ColumnSettingsItem
+        :columns="leftFixedColumns"
+        :columnSettings="columnSettings"
+      />
+      <!-- end -->
+      <!-- 不固定 -->
+      <!-- start -->
+      <ColumnSettingsItem
+        :columns="noFixedColumns"
+        :columnSettings="columnSettings"
+      />
+      <!-- end -->
+      <!-- 固定在列尾 -->
+      <!-- start -->
+      <ColumnSettingsItem
+        :columns="rightFixedColumns"
+        :columnSettings="columnSettings"
+      />
+      <!-- end -->
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import SettingIcon from './svg/SettingIcon'
+import ColumnSettingsItem from './ColumnSettingsItem'
+
+export default {
+  name: 'ColumnSettings',
+  components: {
+    SettingIcon,
+    ColumnSettingsItem
+  },
+  inject: ["onColumnSettingsChange"],
+  props: {
+    // 列表项
+    columns: {
+      type: Array,
+      required: true,
+    },
+    // 列设置
+    columnSettings: {
+      type: Object,
+    },
+  },
+  computed: {
+    // 固定在左侧列
+    leftFixedColumns() {
+      return this.columns.filter((item) => item.fixed === "left")
+    },
+    // 不固定列
+    noFixedColumns() {
+      return this.columns.filter(
+        (item) => item.fixed !== "left" && item.fixed !== "right"
+      )
+    },
+    // 固定在右侧列
+    rightFixedColumns() {
+      return this.columns.filter((item) => item.fixed === "right")
+    },
+    // 列展示勾选状态
+    checkAll() {
+      return this.columns.length === this.columns.filter(item => item.checkable).length
+    },
+    // 表示 checkbox 的不确定状态
+    isIndeterminate() {
+      return !this.checkAll && this.columns.filter(item => !item.disabled && item.checkable).length > 0
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+    /**
+     * @desc 监听修改
+     * @param {Boolean} checked 状态
+     */
+    handleChange(checked) {
+      // ProTable provide 提供
+      this.onColumnSettingsChange({ event: "checkAll", checked });
+    },
+    /**
+     * @desc 重置
+     */
+    handleReset() {
+      // ProTable provide 提供
+      this.onColumnSettingsChange({ event: "reset" })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.pro-table__toolbar-item {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 4px;
+  color: rgba(42, 46, 54, 0.88);
+  font-size: 16px;
+  cursor: pointer;
+
+  svg {
+    outline: none;
+  }
+
+  &:hover {
+    color: #409eff;
+  }
+}
+
+.column-settings-popover {
+  .popover-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 0;
+
+    ::v-deep .el-checkbox__label {
+      padding-inline-start: 8px;
+    }
+
+    .btn-reset {
+      color: #409EFF;
+      font-weight: 500;
+      cursor: pointer;
+
+      &:hover {
+        color: #66b1ff;
+      }
+    }
+    
+    ::v-deep .el-checkbox__label,
+    .column-display,
+    .btn-reset {
+      line-height: 22px;
+    }
+  }
+
+  .popover-content {
+    width: 200px;
+    padding-block: 0;
+    padding-inline: 0;
+    padding-block-end: 8px;
+  }
+}
+</style>