ylwl-cpscoms 1.0.0

package/src/SlAlert/index.vue

@@ -0,0 +1,54 @@
+<template>
+
+  <div class="slMessage">
+    <div class="message-box">
+      <div class="message-title">
+        <div><i class="el-icon-warning"></i>
+          温馨提示
+          <el-button size="mini" type="text" class="toggle-button" @click="toggleMessage">
+            {{ isMessageVisible ? '收起' : '展开' }}
+            <i :class="isMessageVisible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+          </el-button>
+        </div>
+        <slot name="operate"></slot>
+      </div>
+      <div v-if="isMessageVisible" class="message-row" >
+        <slot name="message"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { isMobileDevice } from '../utils'
+export default {
+  data() {
+    return {
+      isMessageVisible: !isMobileDevice()
+    }
+  },
+  methods: {
+    toggleMessage() {
+      this.isMessageVisible = !this.isMessageVisible
+    }
+  }
+}
+</script>
+<style scoped>
+/* .slMessage { */
+  /* padding: 10px 20px 0px 20px; */
+/* } */
+.message-box {
+  background: #fdf6ec;
+  padding: 5px 10px 10px;
+}
+.message-title {
+  color: #f59a23d8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.message-row {
+  font-size: 12px;
+}
+
+</style>

package/src/SlAlert/remark.md

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <sl-alert>
+      <template slot="message">
+      1、删除后，该账号自动销号，此操作无法恢复'
+      </template>
+    </sl-alert>
+  </div>
+</template>
+<script>
+import SlAlert from '@/components/global/SlAlert'
+export default {
+  components: {
+    SlAlert,
+  },
+  }

package/src/SlDescriptions/SlDescriptions.stories.js

@@ -0,0 +1,119 @@
+import SlDescriptions from './index.vue'
+
+export default {
+  title: 'Components/SlDescriptions',
+  component: SlDescriptions,
+  parameters: {
+    docs: {
+      description: {
+        component: '描述列表组件，基于 el-descriptions 封装。通过 renderData 传入模型和数据，自动渲染描述项。支持 format 格式化、template 自定义插槽、isShow 条件显示。'
+      }
+    }
+  }
+}
+
+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 defaultCode = `<!-- 使用方式 -->
+<sl-descriptions :render-data="renderData" />
+
+<!-- renderData 结构 -->
+renderData: {
+  data: { name: '张三', age: 25, status: 1 },
+  model: [
+    { prop: 'name', label: '姓名' },
+    { prop: 'age', label: '年龄' },
+    { prop: 'status', label: '状态' }
+  ]
+}`
+
+export const Default = () => ({
+  components: { SlDescriptions },
+  data() {
+    return {
+      renderData: {
+        data: { name: '张三', age: 25, status: '启用', createTime: '2024-01-15' },
+        model: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'age', label: '年龄' },
+          { prop: 'status', label: '状态' },
+          { prop: 'createTime', label: '创建时间' }
+        ]
+      }
+    }
+  },
+  template: `
+    <div>
+      <sl-descriptions :render-data="renderData" />
+      ${codeBlock(defaultCode)}
+    </div>`
+})
+
+Default.storyName = '基础用法'
+
+// ---- 自定义列数 ----
+const columnCode = `<!-- 自定义列数和尺寸 -->
+<sl-descriptions :render-data="renderData" :el-table-props="{ column: 3, size: 'small' }" />`
+
+export const CustomColumn = () => ({
+  components: { SlDescriptions },
+  data() {
+    return {
+      renderData: {
+        data: { name: '张三', age: 25, status: '启用', dept: '研发部', role: '前端开发', email: 'zhangsan@example.com' },
+        model: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'age', label: '年龄' },
+          { prop: 'status', label: '状态' },
+          { prop: 'dept', label: '部门' },
+          { prop: 'role', label: '角色' },
+          { prop: 'email', label: '邮箱' }
+        ]
+      }
+    }
+  },
+  template: `
+    <div>
+      <sl-descriptions :render-data="renderData" :el-table-props="{ column: 3, size: 'small' }" />
+      ${codeBlock(columnCode)}
+    </div>`
+})
+
+CustomColumn.storyName = '自定义列数'
+
+// ---- 空值处理 ----
+const emptyCode = `<!-- 空值自动显示为 "-" -->
+<sl-descriptions :render-data="renderData" />`
+
+export const EmptyValue = () => ({
+  components: { SlDescriptions },
+  data() {
+    return {
+      renderData: {
+        data: { name: '李四', age: 0, status: '', phone: null },
+        model: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'age', label: '年龄（0 正常显示）' },
+          { prop: 'status', label: '状态（空值显示 -）' },
+          { prop: 'phone', label: '电话（null 显示 -）' }
+        ]
+      }
+    }
+  },
+  template: `
+    <div>
+      <sl-descriptions :render-data="renderData" :el-table-props="{ size: 'small' }" />
+      ${codeBlock(emptyCode)}
+    </div>`
+})
+
+EmptyValue.storyName = '空值处理'

package/src/SlDescriptions/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <el-descriptions v-bind="elTableProps" size="small" border>
+      <el-descriptions-item v-for="item in renderData.model" v-if="isShow(item)" :key="item.name" >
+        <template slot="label">
+          {{ item.label }}
+        </template>
+        <span v-if="!item.format && !item.template"> {{ renderData.data[item.prop] || renderData.data[item.prop] === 0 ? renderData.data[item.prop] : '-' }}</span>
+        <renderOptions v-if="item.format && renderData.data" :render-options="item.format" :data="renderData.data" />
+        <slot v-if="item.template" :name="item.template" :data="renderData.data" />
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SlDescriptions',
+  components: {
+    renderOptions: () => import('./renderOptions.vue')
+  },
+  props: {
+    renderData: {
+      type: Object,
+      required: true
+    },
+    elTableProps: {
+      type: Object,
+      default: () => {
+        return {
+          size: 'small',
+          column: 2
+        }
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+
+  methods: {
+    isShow(item) {
+      if (item.isShow !== undefined) {
+        if (typeof item.isShow === 'function') {
+          return item.isShow(this.renderData.data)
+        } else {
+          return item.isShow
+        }
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+
+</style>

package/src/SlDescriptions/renderOptions.vue

@@ -0,0 +1,27 @@
+<script>
+export default {
+  name: 'EcSystemsRenderOptions',
+  props: {
+    renderOptions: {
+      type: Function,
+      default: () => ({})
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  render(h) {
+    if (this._props.renderOptions) {
+      const callback = this._props.renderOptions(h, this._props.data)
+      if (typeof callback === 'string') {
+        return h('span', callback)
+      } else {
+        return callback
+      }
+    } else {
+      return ''
+    }
+  }
+}
+</script>

package/src/SlDialog/README-PLUS.md

@@ -0,0 +1,74 @@
+# createCommandDialog_v5 使用说明（Portal 传送门版）
+
+这是彻底解决“业务组件内聚”与“复用 el-dialog 原生插槽”冲突的最优雅方案。
+
+我们在底层实现了一个类似于 Vue 3 `<Teleport>` (或 portal-vue) 的全局辅助组件 `<dialog-footer>`。你只需要在你的业务组件里用这个标签把按钮包起来，它就会自动“飞”到外层弹窗的右下角。
+
+## 1. 快速开始
+
+### 引入和调用
+
+
+```javascript
+import { createCommandDialog } from './createCommandDialog_v5' 
+import MyCustomForm from './MyCustomForm.vue'
+
+createCommandDialog({
+  title: '编辑用户信息',
+  contentComponent: MyCustomForm,
+  contentProps: { userId: 123 }
+})
+```
+
+## 2. 业务组件怎么写？ (`MyCustomForm.vue`)
+
+在你的组件模板中，正常编写主体内容。在你想写底部按钮的地方，使用 `<dialog-footer>` 标签包裹它们即可！
+
+```vue
+<template>
+  <div class="my-custom-form">
+    <!-- 这里是弹窗的主体内容 -->
+    <el-form label-width="80px">
+      <el-form-item label="用户名">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <!-- 🌟 只需要用这个标签包裹你的按钮 🌟 -->
+    <!-- 这些按钮会自动跑到 el-dialog 的原生 footer 区域 -->
+    <dialog-footer>
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="warning" @click="handleDraft">暂 存</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
+    </dialog-footer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      form: { name: '' }
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.$emit('close') // 关闭弹窗
+    },
+    handleDraft() {
+      // 执行暂存逻辑...
+    },
+    async handleSubmit() {
+      this.loading = true
+      // ... 发送请求 ...
+      setTimeout(() => {
+        this.loading = false
+        this.$emit('confirm') // 触发外层 onConfirm 并关闭
+      }, 1000)
+    }
+  }
+}
+</script>
+```
+

package/src/SlDialog/README.md

@@ -0,0 +1,114 @@
+# 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

@@ -0,0 +1,160 @@
+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)
+}