ylwl-cpscoms 1.0.0 → 1.2.0

package/src/SlDialog/README.md

@@ -1,114 +0,0 @@
-# createCommandDialog 组件使用说明
-
-`createCommandDialog` 是一个基于 Vue 2 和 Element UI 封装的函数式/编程式弹窗工具。它允许你通过函数调用的方式，在任意地方动态创建一个包含自定义内容的弹窗，无需在模板中预先声明 `<el-dialog>`。
-
-## 1. 快速开始
-
-### 引入方法
-
-```javascript
-import { createCommandDialog } from './path/to/createCommandDialog' // 替换为实际路径
-import MyCustomForm from './MyCustomForm.vue'
-
-// 调用弹窗
-createCommandDialog({
-  title: '编辑数据',
-  contentComponent: MyCustomForm,
-  contentProps: { id: 123 }, // 传递给 MyCustomForm 的 props
-  onConfirm: () => {
-    console.log('用户点击了确定且内部验证通过')
-  },
-  onCancel: () => {
-    console.log('用户点击了取消')
-  }
-})
-```
-
-## 2. 配置参数 (Options)
-
-| 参数名               | 类型         | 默认值   | 说明                                                         |
-| -------------------- | ------------ | -------- | ------------------------------------------------------------ |
-| `title`              | String       | `'提示'` | 弹窗标题                                                     |
-| `width`              | String       | `'50%'`  | 弹窗宽度 (移动端自动适应为 '90%')                            |
-| `specialWidth`       | String       | `''`     | 特殊宽度，若设置则优先使用此宽度                             |
-| `closeOnClickModal`  | Boolean      | `false`  | 是否可以通过点击 modal 遮罩层关闭 Dialog                     |
-| `contentComponent`   | VueComponent | `null`   | **必填**。弹窗主体区域要渲染的 Vue 自定义组件                |
-| `contentProps`       | Object       | `{}`     | 传递给 `contentComponent` 的属性 (props)                     |
-| `footerBtns`         | Array        | `[]`     | 自定义底部按钮。格式: `[{ type: 'primary', label: '按钮名', value: 'methodName' }]` |
-| `cancelButtonText`   | String       | `'取消'` | 默认取消按钮的文本                                           |
-| `confirmButtonText`  | String       | `'确定'` | 默认确定按钮的文本                                           |
-| `isShowBtn`          | Boolean      | `true`   | 是否显示底部按钮区域                                         |
-| `showClose`          | Boolean      | `true`   | 是否显示右上角的关闭图标                                     |
-| `closeOnPressEscape` | Boolean      | `false`  | 是否可以通过按下 ESC 关闭 Dialog                             |
-| `customClass`        | String       | `''`     | Dialog 的自定义类名                                          |
-| `onConfirm`          | Function     | -        | 点击确定按钮且验证通过后的回调函数                           |
-| `onCancel`           | Function     | -        | 点击取消按钮后的回调函数                                     |
-| `onClose`            | Function     | -        | 弹窗关闭后的回调函数                                         |
-
-## 3. 子组件 (`contentComponent`) 编写规范
-
-为了让弹窗的底部按钮与你的自定义组件产生交互，你的自定义组件（例如 `MyCustomForm.vue`）需要遵循以下约定：
-
-### 3.1 拦截“确定”按钮操作
-
-如果使用的是默认底部按钮，当用户点击“确定”时，组件会尝试调用你子组件内的 `confirm` 方法：
-
-```javascript
-export default {
-  props: ['id'], // 接收 contentProps 传入的数据
-  methods: {
-    // 方法名必须为 confirm
-    async confirm() {
-      // 1. 进行表单校验
-      const valid = await this.$refs.form.validate().catch(() => false)
-      if (!valid) {
-        // 返回 false，弹窗【不会】关闭
-        return false 
-      }
-      
-      // 2. 提交数据或执行业务逻辑
-      await submitData({ id: this.id, ...this.formData })
-      
-      // 不返回 false 或者返回 true，弹窗将会关闭，并触发外部的 onConfirm 回调
-      return true 
-    }
-  }
-}
-```
-
-### 3.2 自定义底部按钮 (`footerBtns`)
-
-如果你通过 `footerBtns` 传入了自定义按钮，例如：
-`[{ label: '暂存', value: 'handleSaveDraft', type: 'warning' }]`
-
-当点击该按钮时，工具会尝试调用子组件的 `handleSaveDraft` 方法（即 `value` 对应的值）：
-
-```javascript
-export default {
-  methods: {
-    async handleSaveDraft() {
-      // 执行暂存逻辑
-      // 同样，如果 return false，则弹窗不会关闭；否则自动关闭
-    }
-  }
-}
-```
-
-### 3.3 主动控制弹窗
-
-你的组件内部可以通过触发特定事件来主动控制外层弹窗：
-
-- 主动触发确定并关闭：`this.$emit('onConfirm')`
-- 主动触发关闭：`this.$emit('onClose')`
-
-
-
-## 优化建议：
-
-### 1. 缺乏按钮 Loading 状态交互体验
-
-问题描述 ：由于 confirm() 是异步的（可能包含网络请求），点击“确定”后如果接口响应慢，按钮没有 loading 动画。 优化建议 ：可以在 data() 中增加一个 confirmLoading: false 状态。在 handleConfirm 执行前将其设为 true ，执行完毕后 false 。并在 render 函数中把这个状态绑定给确定按钮的 loading 属性，防止用户重复点击提交。
-
-**总结：不处理，统一由页面组件级做处理**
-
-

package/src/SlDialog/dialogPlus.js

@@ -1,160 +0,0 @@
-import Vue from 'vue'
-import { isMobileDevice } from '../utils'
-
-// 🌟 核心魔法：注册一个全局的辅助组件，充当“传送门”（Portal）
-if (!Vue.component('dialog-footer')) {
-  Vue.component('dialog-footer', {
-    inject: {
-      dialogCtx: { default: null }
-    },
-
-    mounted() {
-      if (this.dialogCtx) {
-        this.dialogCtx.setFooterVNodes(this.$slots.default)
-      }
-    },
-    updated() {
-      if (this.dialogCtx) {
-        this.dialogCtx.setFooterVNodes(this.$slots.default)
-      }
-    },
-    destroyed() {
-      if (this.dialogCtx) {
-        this.dialogCtx.setFooterVNodes(null)
-      }
-    },
-    render(h) {
-      return h('div', { style: { display: 'none' }, class: 'dialog-footer-portal' })
-    }
-  })
-}
-
-export function createCommandDialogPlus(options) {
-  const defaultOptions = {
-    title: '提示',
-    width: '50%',
-    specialWidth: '',
-    closeOnClickModal: false,
-    contentComponent: null,
-    contentProps: {},
-    showClose: true,
-    closeOnPressEscape: false,
-    customClass: ''
-  }
-
-  const mergedOptions = { ...defaultOptions, ...options }
-
-  const Constructor = Vue.extend({
-    provide() {
-      return {
-        dialogCtx: this
-      }
-    },
-    data() {
-      return {
-        visible: false,
-        footerVNodes: null
-      }
-    },
-    created() {
-      Object.assign(this, mergedOptions)
-    },
-    mounted() {
-      Vue.nextTick(() => {
-        this.visible = true
-      })
-    },
-    methods: {
-      handleBeforeClose(done) {
-        if (typeof done === 'function') {
-          done() // 允许 el-dialog 执行关闭动画
-        } else {
-          this.visible = false
-        }
-      },
-      handleClose() {
-        if (this._hasClosed) return
-        this._hasClosed = true
-        console.log('你肯定会执行吗啊')
-        if (typeof this.onClose === 'function') {
-          this.onClose(this)
-        }
-        this.$once('closed', () => {
-          this.$destroy()
-          if (this.$el && this.$el.parentNode) {
-            this.$el.parentNode.removeChild(this.$el)
-          }
-        })
-      },
-      // 暴露给业务组件的关闭方法
-      closeDialog() {
-        this.visible = false
-      },
-
-      // 兼容以前的 confirm 逻辑（可选保留，为了向后兼容外层传入 onConfirm）
-      confirmDialog() {
-        if (typeof this.onConfirm === 'function') {
-          this.onConfirm()
-        }
-        this.visible = false // 同样只修改 visible
-      },
-
-      // 供 <dialog-footer> 调用的方法
-      setFooterVNodes(vnodes) {
-        this.footerVNodes = vnodes
-      }
-    },
-
-    render(h) {
-      // 渲染主体业务组件
-      const dialogChildren = [
-        h(this.contentComponent, {
-          props: this.contentProps,
-          ref: 'contentComponent',
-          on: {
-            // 业务组件可以通过 this.$emit('close') 主动关闭弹窗
-            close: this.closeDialog,
-            // 业务组件可以通过 this.$emit('confirm') 触发外层回调并关闭弹窗
-            confirm: this.confirmDialog
-            // 【新增】：允许业务组件透传任意自定义事件到外层
-            // 如果你的业务组件需要向外抛出自定义事件（如 'save-draft'），
-            // 可以在调用 createCommandDialog 时通过 on 属性传入监听器。
-          }
-        })
-      ]
-
-      if (this.footerVNodes) {
-        dialogChildren.push(h('template', { slot: 'footer' }, this.footerVNodes))
-      }
-
-      return h(
-        'el-dialog',
-        {
-          props: {
-            title: this.title,
-            visible: this.visible,
-            width: isMobileDevice() ? '90%' : this.specialWidth ? this.specialWidth : this.width === '30%' ? '30%' : '50%',
-            'close-on-click-modal': this.closeOnClickModal,
-            showClose: this.showClose,
-            'close-on-press-escape': this.closeOnPressEscape,
-            customClass: this.customClass
-          },
-          on: {
-            'update:visible': (val) => {
-              this.visible = val
-            },
-            'before-close': this.handleBeforeClose,
-            close: this.handleClose,
-            closed: () => {
-              this.$emit('closed')
-            }
-          }
-        },
-        dialogChildren
-      )
-    }
-  })
-
-  const instance = new Constructor().$mount()
-  document.body.appendChild(instance.$el)
-}

package/src/SlDialog/index.js

@@ -1,170 +0,0 @@
-import Vue from 'vue'
-import { Button } from 'element-ui'
-import { isMobileDevice } from '../utils'
-export function createCommandDialog(options) {
-  const defaultOptions = {
-    title: '提示',
-    width: '50%',
-    specialWidth: '',
-    closeOnClickModal: false,
-    contentComponent: null,
-    contentProps: {},
-    footerBtns: [],
-    cancelButtonText: '取消',
-    confirmButtonText: '确定',
-    isShowBtn: true,
-    showClose: true,
-    closeOnPressEscape: false,
-    customClass: ''
-  }
-
-  const mergedOptions = { ...defaultOptions, ...options }
-
-  const Constructor = Vue.extend({
-    data() {
-      return {
-        visible: false // 初始状态为 false
-      }
-    },
-    created() {
-      // 在 created 钩子中，将配置项直接浅拷贝到 this 实例上
-      Object.assign(this, mergedOptions)
-    },
-    mounted() {
-      Vue.nextTick(() => {
-        this.visible = true
-      })
-    },
-    methods: {
-      handleBeforeClose() {
-        this.visible = false
-      },
-      handleClose(done) {
-        this.handleBeforeClose()
-        if (typeof this.onClose === 'function') {
-          this.onClose(this)
-        }
-        this.$once('closed', () => {
-          this.$destroy()
-          document.body.removeChild(this.$el)
-        })
-      },
-
-      handleCancel() {
-        this.handleBeforeClose()
-        if (typeof this.onCancel === 'function') {
-          this.onCancel()
-        }
-        this.handleClose()
-      },
-      async handleConfirm() {
-        // body组件中统一confirm方法（不能用在别的地方）
-        let shouldClose = true
-        if (this.$refs.contentComponent.confirm) {
-          try {
-            const result = await this.$refs.contentComponent.confirm()
-            if (result === false) shouldClose = false
-          } catch (error) {
-            console.error('弹窗确认时发生错误:', error)
-            shouldClose = false
-          }
-        }
-        if (typeof this.onConfirm === 'function' && shouldClose) {
-          this.onConfirm()
-        }
-        if (shouldClose) {
-          this.handleClose()
-        }
-      },
-      // 函数 return false 弹窗不消失； 不返回或者true 弹窗消失
-      async footerBtnsClick(type) {
-        if (this.$refs.contentComponent && this.$refs.contentComponent[type]) {
-          const result = await this.$refs.contentComponent[type]()
-          if (result !== false) {
-            this.handleClose()
-          }
-        } else {
-          this.handleClose()
-        }
-      }
-    },
-
-    render(h) {
-      const footerContent = this.footerBtns.length
-        ? h('div',
-          this.footerBtns.map(item => h(Button, {
-            props: {
-              type: item.type || 'default',
-              size: 'small'
-            },
-            on: {
-              click: () => this.footerBtnsClick(item.value)
-            }
-          }, item.label)
-          )
-        ) : h('div', [
-          h(Button, {
-            props: {
-              type: 'default',
-              size: 'small'
-            },
-            on: {
-              click: this.handleCancel
-            }
-          }, this.cancelButtonText),
-          h(Button, {
-            props: {
-              type: 'primary',
-              size: 'small'
-            },
-            on: {
-              click: this.handleConfirm
-            }
-          }, this.confirmButtonText)
-        ])
-
-      return h(
-        'el-dialog',
-        {
-          props: {
-            title: this.title,
-            visible: this.visible,
-            width: isMobileDevice() ? '90%' : this.specialWidth ? this.specialWidth : this.width === '30%' ? '30%' : '50%',
-            'close-on-click-modal': this.closeOnClickModal,
-            showClose: this.showClose,
-            'close-on-press-escape': this.closeOnPressEscape,
-            customClass: this.customClass
-          },
-          on: {
-            'update:visible': (val) => {
-              this.visible = val
-            },
-            'before-close': this.handleBeforeClose,
-            'close': this.handleClose,
-            'closed': () => { this.$emit('closed') }
-          }
-        },
-        [
-          h(this.contentComponent, {
-            props: this.contentProps,
-            ref: 'contentComponent',
-            scopedSlots: this.$scopedSlots,
-            on: {
-              onClose: () => {
-                this.handleClose()
-              },
-              onConfirm: () => {
-                this.handleConfirm()
-              }
-            }
-          }),
-          !this.isShowBtn ? '' : h('template', { slot: 'footer' }, [footerContent])
-        ]
-      )
-    }
-  })
-
-  const instance = new Constructor().$mount()
-
-  document.body.appendChild(instance.$el)
-}

package/src/SlDrawer/SlDrawer.stories.js

@@ -1,154 +0,0 @@
-import { createCommandDrawer } from './index.js'
-
-export default {
-  title: 'Components/SlDrawer',
-  parameters: {
-    docs: {
-      description: {
-        component: '命令式抽屉组件，通过 `createCommandDrawer(options)` 函数调用打开。基于 el-drawer 封装，支持传入自定义内容组件、Props 和事件监听。'
-      }
-    }
-  }
-}
-
-const codeBlock = (code) => `
-  <div style="margin-top:24px;border-top:1px solid #eee;padding-top:16px">
-    <p style="font-size:14px;font-weight:600;color:#666;margin-bottom:8px;">使用代码：</p>
-    <pre style="background:#f5f5f5;padding:16px;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all"><code>${escapeHtml(code.trim())}</code></pre>
-  </div>`
-
-function escapeHtml(str) {
-  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-// 演示用的简单内容组件
-const DemoContent = {
-  props: { message: { type: String, default: '' } },
-  template: `
-    <div style="padding:20px">
-      <p>{{ message }}</p>
-      <p style="color:#999;font-size:13px;margin-top:12px">这是通过 createCommandDrawer 打开的内容区域。</p>
-    </div>`
-}
-
-// ---- 基础用法 ----
-const defaultCode = `<!-- 使用方式 -->
-<script>
-import { createCommandDrawer } from '@/components/global/SlDrawer'
-
-createCommandDrawer({
-  title: '抽屉标题',
-  size: '30%',
-  direction: 'rtl',
-  contentComponent: YourComponent,
-  closeDrawer: () => {
-    console.log('抽屉已关闭')
-  },
-  contentProps: {
-    message: 'Hello'
-  }
-})
-</script>`
-
-export const Default = () => ({
-  methods: {
-    openDrawer() {
-      createCommandDrawer({
-        title: '用户详情',
-        size: '30%',
-        direction: 'rtl',
-        contentComponent: DemoContent,
-        closeDrawer: () => {
-          console.log('抽屉已关闭')
-        },
-        contentProps: {
-          message: '这是通过命令式 API 打开的抽屉'
-        }
-      })
-    }
-  },
-  template: `
-    <div>
-      <el-button type="primary" @click="openDrawer">打开抽屉</el-button>
-      ${codeBlock(defaultCode)}
-    </div>`
-})
-
-Default.storyName = '基础用法'
-
-// ---- 左侧弹出 ----
-const leftCode = `<!-- 左侧弹出 -->
-createCommandDrawer({
-  title: '筛选条件',
-  size: '25%',
-  direction: 'ltr',
-  contentComponent: FilterPanel,
-  closeDrawer: () => {},
-  contentProps: { ... }
-})`
-
-export const LeftDirection = () => ({
-  methods: {
-    openDrawer() {
-      createCommandDrawer({
-        title: '筛选条件',
-        size: '25%',
-        direction: 'ltr',
-        contentComponent: DemoContent,
-        closeDrawer: () => {
-          console.log('左侧抽屉已关闭')
-        },
-        contentProps: {
-          message: '从左侧弹出的抽屉'
-        }
-      })
-    }
-  },
-  template: `
-    <div>
-      <el-button type="success" @click="openDrawer">左侧弹出</el-button>
-      ${codeBlock(leftCode)}
-    </div>`
-})
-
-LeftDirection.storyName = '左侧弹出'
-
-// ---- 大尺寸 ----
-const largeCode = `<!-- 大尺寸抽屉 -->
-createCommandDrawer({
-  title: '编辑信息',
-  size: '50%',
-  direction: 'rtl',
-  contentComponent: EditForm,
-  closeDrawer: () => { this.loadData() },
-  contentProps: { data: rowData },
-  contentListeners: {
-    'save-success': () => { this.refresh() }
-  }
-})`
-
-export const LargeSize = () => ({
-  methods: {
-    openDrawer() {
-      createCommandDrawer({
-        title: '编辑信息',
-        size: '50%',
-        direction: 'rtl',
-        contentComponent: DemoContent,
-        closeDrawer: () => {
-          console.log('大尺寸抽屉已关闭')
-        },
-        contentProps: {
-          message: '大尺寸抽屉，适合表单编辑场景'
-        }
-      })
-    }
-  },
-  template: `
-    <div>
-      <el-button type="warning" @click="openDrawer">大尺寸抽屉（50%）</el-button>
-      ${codeBlock(largeCode)}
-    </div>`
-})
-
-LargeSize.storyName = '大尺寸抽屉'

package/src/SlDrawer/index.js

@@ -1,62 +0,0 @@
-
-import Vue from 'vue'
-
-export function createCommandDrawer(options) {
-  const Constructor = Vue.extend({
-    data() {
-      return {
-        visible: true,
-        ...options
-      }
-    },
-    methods: {
-      handleClose(done) {
-        this.visible = false
-        this.closeDrawer()
-        done()
-      }
-    },
-    render(h) {
-      const componentListeners = this.contentListeners || {}
-      return h(
-        'el-drawer',
-        {
-          props: {
-            title: this.title,
-            size: this.size,
-            direction: this.direction,
-            beforeClose: this.handleClose,
-            visible: this.visible
-
-          },
-          on: {
-            input: (val) => {
-              this.visible = val
-            }
-          }
-        },
-        [
-          h(this.contentComponent, {
-            props: this.contentProps,
-            on: componentListeners
-          })
-        ]
-      )
-    }
-  })
-
-  const instance = new Constructor().$mount()
-
-  document.body.appendChild(instance.$el)
-
-  instance.visible = true
-  window.addEventListener('keydown', (event) => {
-    if (event.code === 'Space' || event.key === ' ') {
-      event.preventDefault()
-    }
-  })
-  instance.$once('close', () => {
-    instance.$destroy()
-    document.body.removeChild(instance.$el)
-  })
-}