element-ui-pro-components-test 1.5.0

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

@@ -0,0 +1,404 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    v-bind="normalizedDialogProps"
+    v-on="normalizedDialogEvents"
+  >
+    <!-- 自定义 dialog title -->
+    <!-- start -->
+    <template v-if="renderTitle" #title>
+      <CustomRender :render="() => renderTitle(form)" />
+    </template>
+    <!-- end -->
+    <el-form
+      ref="dialogFormRef"
+      :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>
+    </el-form>
+    <!-- end -->
+    <!-- submitter -->
+    <!-- start -->
+    <template v-if="submitter" #footer>
+      <Submitter
+        :submitter="submitterProps" 
+        :actions="{ submit, close, reset, resetAllFields }"
+        :render="submitter.customRender
+          ? (actions, doms) => submitter.customRender(form, actions, doms)
+          : null
+        " 
+      />
+    </template>
+    <!-- end -->
+  </el-dialog>
+</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: 'DialogForm',
+    model: {
+      prop: 'visible',
+      event: 'close'
+    },
+    components: {
+      CustomRender,
+      ProFormItem,
+      Submitter
+    },
+    props: {
+      // 是否打开弹框
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      // 弹框的标题
+      title: {
+        type: String
+      },
+      // 自定义弹框标题
+      renderTitle: {
+        type: Function,
+      },
+      // 弹框的宽度
+      width: {
+        type: String
+      },
+      // el-dialog attributes 的配置
+      dialogProps: {
+        type: Object,
+        default: () => ({})
+      },
+      // el-dialog events 的配置
+      dialogEvents: {
+        type: Object,
+        default: () => ({})
+      },
+      // 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: {
+      // 标准化 dialog props
+      normalizedDialogProps() {
+        const { title, width, dialogProps = {} } = this
+        const customClass = dialogProps['custom-class']
+        return {
+          ...dialogProps,
+          'custom-class': customClass ? `${customClass} dialog-form` : 'dialog-form',
+          visible: undefined, // 阻止绑定
+          title,
+          width,
+        }
+      },
+      // 标准化 dialog events
+      normalizedDialogEvents() {
+        const { dialogEvents, close } = this
+        
+        const originalClose = dialogEvents.close
+        // 包装以下 close 方法，确保执行 close 方法
+        if (originalClose) {
+          dialogEvents.close = () => {
+            originalClose()
+            close()
+          }
+
+          return {
+            ...dialogEvents
+          }
+        } 
+        
+        return { close }
+      },
+      // 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 = {
+            cancelText: t('elProComponents.dialogForm.cancel'), 
+            confirmText: t('elProComponents.dialogForm.confirm')
+          }
+
+          // 对象类型
+          if (typeof this.submitter === 'object') {
+            return {
+              ...defaultTextConfig,
+              ...this.submitter
+            }
+          }
+
+          // 返回默认配置
+          return {
+            ...defaultTextConfig
+          }
+        }
+
+        return false
+      }
+    },
+    data() {
+      return {
+        dialogVisible: false, // 是否打开弹框
+        cachedOptions: {}, // 下拉数据 { [prop]: res }
+        form: this.initForm(), // 表单数据
+      }
+    },
+    watch: {
+      // 监听 visible
+      visible: {
+        handler(newValue) {
+          this.dialogVisible = newValue
+        },
+        immediate: true
+      }
+    },
+    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.dialogFormRef
+      },
+      /**
+       * @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 Dialog 关闭的回调
+       */
+      close() {
+        this.$emit('close', false)
+      },
+      /**
+       * @desc 提交
+       */
+      submit() {
+        this.$refs.dialogFormRef?.validate((valid, object) => {
+          if (valid) {
+            // 回传给父组件
+            this.$emit('onFinish', this.form)
+            return
+          }
+
+          // 回传给父组件
+          this.$emit('onError', object)
+        })
+      },
+      /**
+       * @desc 重置
+       */
+      async reset() {
+        try {
+          await this.$refs.dialogFormRef?.resetFields()
+          // 回传给父组件
+          this.$emit('onReset')
+        } catch (err) {
+          console.error('err', err)
+        }
+      },
+      /**
+       * @desc 重置表单的拓展方法，过滤了非表单项的字段
+       */
+      resetAllFields() {
+        // 清除校验
+        this.$refs.dialogFormRef?.clearValidate()
+        // 重置数据
+        this.form = this.initForm()
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

package/packages/editable-pro-table/index.js

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

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

@@ -0,0 +1,203 @@
+<script>
+  import { t } from 'element-ui-pro-components/src/locale'
+  
+  export default {
+    name: 'Editable',
+    props: {
+      // 可编辑配置
+      editable: {
+        type: Object,
+        required: true
+      },
+      actions: {
+        type: Object,
+        required: true
+      },
+      validateRow: {
+        type: Function
+      },
+      recordKey: {
+        type: [String, Number],
+      },
+      render: {
+        type: Function,
+        required: true
+      },
+      scope: {
+        type: Object
+      },
+      newLineRecordCache: {
+        type: Object
+      },
+      name: {
+        type: String
+      },
+      preEditRows: {
+        type: Map
+      },
+      defaultSize: {
+        type: String
+      }
+    },
+    computed: {
+      isEditable() {
+        const { editable: { editableKeys }, recordKey } = this
+        return editableKeys?.some(key => recordKey === key)
+      },
+      isNewLineRecordCache() {
+        return this.newLineRecordCache?.options.recordKey === this.recordKey
+      }
+    },
+    data() {
+      return {
+        saveLoading: false,
+        deleteLoading: false,
+        visible: false
+      }
+    },
+    methods: {
+      /**
+       * @desc 保存
+       */
+      async save() {
+        // 手动销毁
+        this.visible = false
+        const { validateRow, scope: { row, $index }, recordKey } = this
+        const res = await validateRow($index)
+        if (!res) {
+          return
+        }
+        try {
+          this.saveLoading = true
+          const res = await this.editable.onSave?.(recordKey, row, this.preEditRows.get(recordKey))
+          this.saveLoading = false
+          if (res === false) {
+            return
+          }
+          this.actions.cancelEditable(recordKey, row)
+        } catch (err) {
+          this.saveLoading = false
+          console.error('err', err)
+        }
+      },
+      /**
+       * @desc 删除
+       */
+      async delete() {
+        try {
+          this.deleteLoading = true
+          const { scope: { row }, recordKey } = this
+          const res = await this.editable.onDelete?.(recordKey, row)
+          this.deleteLoading = false
+          if (res === false) {
+            return
+          }
+          this.visible = false
+          await this.actions.cancelEditable(recordKey, row)
+          this.$emit('delete', recordKey)
+        } catch (err) {
+          this.deleteLoading = false
+          console.error('err', err)
+        }
+      },
+      /**
+       * @desc 取消
+       */
+      async cancel() {
+        try {
+          // 手动销毁
+          this.visible = false
+          const { recordKey, scope: { row, $index } } = this
+          await this.actions.cancelEditable(recordKey, row)
+          this.$emit('cancel', recordKey, $index)
+        } catch (err) {
+          console.error('err', err)
+        }
+      }
+    },
+    render: function(h) {
+      const { saveText, deleteText, cancelText, deletePopconfirmMessage } = this.editable
+      const { defaultSize } = this
+      const doms = {
+        save: <el-button class="btn-save" type="text" size={defaultSize} loading={this.saveLoading} onClick={this.save} key="save">{ saveText }</el-button>,
+        delete: <el-popover
+          placement="top"
+          popper-class="editable-pro-table__popover--delete"
+          trigger="click"
+          value={this.visible}
+          onInput={val => this.visible = val}
+          key="delete"
+        >
+          <i class="el-icon-info"></i>
+          <span>{deletePopconfirmMessage}</span>
+          <div>
+            <el-button size="mini" type="text" onClick={() => this.visible = false}>{ t('elProComponents.editableProTable.cancelButtonText') }</el-button>
+            <el-button type="primary" size="mini" loading={this.deleteLoading} onClick={this.delete}>{ t('elProComponents.editableProTable.confirmButtonText') }</el-button>
+          </div>
+          <el-button slot="reference" type="text" size={defaultSize}>{ deleteText }</el-button>
+        </el-popover>,
+        cancel: <el-button class="btn-cancel" type="text" size={defaultSize} onClick={this.cancel} key="cancel">{ cancelText }</el-button>,
+      }
+
+      const {
+        editable: 
+          { editableKeys, onChange, onSave, onDelete, onCancel, actionRender },
+        scope: { row },
+        isNewLineRecordCache
+      } = this
+
+      const { recordKey, scope: { $index }, actions: { cancelEditable, addEditRecord }, name, newLineRecordCache } = this
+      const config = {
+        editableKeys,
+        setEditableRowKeys: (keys) => onChange?.(keys),
+        recordKey,
+        preEditRow: this.preEditRows.get(recordKey),
+        index: $index,
+        onSave,
+        onDelete,
+        onCancel,
+        cancelEditable,
+        newLineConfig: newLineRecordCache,
+        saveText,
+        deleteText,
+        cancelText,
+        deletePopconfirmMessage,
+        addEditRecord,
+        tableName: name
+      }
+
+      const defaultDoms = [doms.save, !isNewLineRecordCache && doms.delete, doms.cancel].filter(Boolean)
+      const actionDoms = typeof actionRender === 'function' ? actionRender(row, config, doms) : defaultDoms
+
+      return <Fragment>
+        {this.isEditable ? actionDoms : this.render(this.actions)}
+      </Fragment>
+    }
+  }
+</script>
+
+<style scoped>
+.btn-save + span {
+  margin-left: 10px;
+}
+
+span + :deep(.btn-cancel) {
+  margin-left: 10px;
+}
+</style>
+
+<style lang="less">
+.editable-pro-table__popover--delete.el-popover {
+  min-width: unset;
+  
+  > i {
+    color: rgb(255, 153, 0);
+    margin-right: 5px;
+  }
+
+  > div {
+    margin-top: 10px;
+    margin-left: 8px;
+  }
+}
+</style>