ylwl-cpscoms 1.0.0

package/src/SlDialog/index.js

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

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

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

package/src/SlForm/SlForm.stories.js

@@ -0,0 +1,120 @@
+import SlForm from './index.vue'
+
+export default {
+  title: 'Components/SlForm',
+  component: SlForm,
+  parameters: {
+    docs: {
+      description: {
+        component: '动态表单组件，通过 data 配置数组驱动渲染。支持 input、select、datePicker、radio、switch、rangeInput、title、slot 等控件类型。支持表单校验、联动、重置等功能。'
+      }
+    }
+  }
+}
+
+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 searchCode = `<!-- 搜索表单（inline 模式） -->
+<sl-form v-model="form" :data="options"
+  :showlabel="false"
+  :form-props="{ inline: true, size: 'small' }" />`
+
+export const SearchForm = () => ({
+  components: { SlForm },
+  data() {
+    return {
+      form: {},
+      options: [
+        { label: '用户名', type: 'input', model: 'userName', privateAttrs: { placeholder: '请输入用户名' } },
+        { label: '状态', type: 'select', model: 'status', options: [
+          { label: '启用', value: 1 }, { label: '禁用', value: 0 }
+        ], props: { placeholder: '请选择状态' } },
+        { label: '创建时间', type: 'datePicker', model: 'createTime', privateProps: { type: 'daterange', valueFormat: 'yyyy-MM-dd' } }
+      ]
+    }
+  },
+  template: `
+    <div>
+      <sl-form ref="form" v-model="form" :data="options" :showlabel="false" :form-props="{ inline: true, size: 'small' }" />
+      <div style="margin-top:12px;color:#666;font-size:13px">表单值：{{ form }}</div>
+      ${codeBlock(searchCode)}
+    </div>`
+})
+
+SearchForm.storyName = '搜索表单（inline）'
+
+// ---- 编辑表单 ----
+const editCode = `<!-- 编辑表单（非 inline） -->
+<sl-form v-model="form" :data="options" item-width="100%"
+  :form-props="{ inline: false, size: 'small', labelWidth: '120px' }" />`
+
+export const EditForm = () => ({
+  components: { SlForm },
+  data() {
+    return {
+      form: { userName: '张三', status: 1 },
+      options: [
+        { label: '用户名', type: 'input', model: 'userName', rules: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ]},
+        { label: '状态', type: 'radio', model: 'status', options: [
+          { label: '启用', value: 1 }, { label: '禁用', value: 0 }
+        ], rules: [
+          { required: true, message: '请选择状态', trigger: 'change' }
+        ]},
+        { label: '备注', type: 'input', model: 'remark', privateAttrs: { type: 'textarea', rows: 3 }, remark: '选填，最多200字' },
+        { label: '开关', type: 'switch', model: 'enable', value: true }
+      ]
+    }
+  },
+  template: `
+    <div style="max-width:600px">
+      <sl-form ref="form" v-model="form" :data="options" item-width="100%" :form-props="{ inline: false, size: 'small', labelWidth: '120px' }" />
+      <div style="margin-top:12px;color:#666;font-size:13px">表单值：{{ form }}</div>
+      ${codeBlock(editCode)}
+    </div>`
+})
+
+EditForm.storyName = '编辑表单'
+
+// ---- 带标题分组 ----
+const titleCode = `<!-- 使用 title 类型分组 -->
+<sl-form v-model="form" :data="options" item-width="100%"
+  :form-props="{ inline: false, size: 'small', labelWidth: '120px' }">
+  <el-button type="primary" size="small">保存</el-button>
+</sl-form>`
+
+export const WithTitle = () => ({
+  components: { SlForm },
+  data() {
+    return {
+      form: {},
+      options: [
+        { type: 'title', label: '基本信息', model: 'title1' },
+        { label: '姓名', type: 'input', model: 'name' },
+        { label: '年龄', type: 'input', model: 'age' },
+        { type: 'title', label: '联系方式', model: 'title2' },
+        { label: '手机号', type: 'input', model: 'phone' },
+        { label: '邮箱', type: 'input', model: 'email' }
+      ]
+    }
+  },
+  template: `
+    <div style="max-width:600px">
+      <sl-form ref="form" v-model="form" :data="options" item-width="100%" :form-props="{ inline: false, size: 'small', labelWidth: '120px' }">
+        <el-button type="primary" size="small">保存</el-button>
+      </sl-form>
+      ${codeBlock(titleCode)}
+    </div>`
+})
+
+WithTitle.storyName = '带标题分组'

package/src/SlForm/index.css

@@ -0,0 +1,141 @@
+.yl-form-item {
+  display: flex;
+  align-items: center;
+
+}
+::v-deep .el-form-item__content {
+    display: flex;
+    flex: 1;
+    margin: 0 !important;
+  }
+
+.yl-form-fullitem .el-form-item__content {
+    flex: 1;
+  }
+
+.yl-form-item {
+    display: inline-flex !important;
+    /* margin-bottom: 20px; */
+  }
+.yl-form-item .yl-form-item-grid .el-form-item__content {
+  font-size: 0;
+}
+.content-box {
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 10px;
+  height: 100%;
+  box-shadow: 0 0 5px rgb(223, 222, 222);
+}
+.item-label {
+  display: inline-block;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.yl-form-box-shrink {
+  padding: 10px;
+  overflow: hidden;
+  /* border: 1px solid #c1c1c1; */
+  background-color: #f1f1f1;
+  /* box-shadow: inset 0 0 5px #c1c1c1; */
+}
+.yl-form-drawericon {
+  display: inline-block;
+  vertical-align: top;
+}
+.yl-form-drawericon-float {
+  position: absolute;
+  right: 0;
+  top: 0;
+  /* transform: translateY(-50%); */
+  padding: 10px;
+  z-index: 10;
+  background-image: linear-gradient(to left, #ffa140, rgba(255, 255, 255, 0));
+  opacity: 0.9;
+  padding-left: 80px;
+}
+.yl-i-lebel {
+  line-height: 12px;
+  font-size: 12px;
+  z-index: 5;
+  right: 0;
+  background-color: #979797;
+  /* background-image: linear-gradient(to right,#dcdfe6 ,#fff); */
+  padding: 2px 8px 4px 10px;
+  border-radius: 4px 4px 0 0;
+  color: #fff;
+  width: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  /* border: 1px solid #dcdfe6; */
+  /* transform: scale(0.7); */
+  border-radius: 0 4px 0px 10px;
+  transform-origin: 100% 0;
+  transform: scale(0.8);
+}
+.yl-r-icon {
+  color: red;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  z-index: 5;
+  padding: 5px;
+  line-height: 35px;
+  transform: translateY(-50%);
+}
+.yl-form-slider {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  padding: 0 20px 0 10px;
+  line-height: 35px;
+}
+.yl-form-slider-span {
+  padding-right: 15px;
+  color: #c0c4cc;
+}
+.yl-form-box {
+  white-space: normal;
+  position: relative;
+  transition: all 0.2s ease-out;
+  border-radius: 4px;
+}
+.yl-form-item {
+  white-space: nowrap;
+  position: relative;
+}
+.yl-form-range-input {
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  padding: 0 10px;
+  /* line-height: 38px; */
+}
+/* .yl-form-range-input input:nth-of-type(1){
+    margin-right: 10px;
+} */
+.yl-form-range-input input {
+  width: 70px;
+  border: none;
+  height: 100%;
+  outline: none;
+  /* background-color: #dcdfe6; */
+  padding: 7px;
+  text-align: center;
+  border-radius: 4px;
+}
+.yl-form-range-input input:focus {
+  /* box-shadow: inset 0 0 2px #5c85e6; */
+}
+.yl-form-range-input input::placeholder {
+  color: #c0c4cc;
+}
+
+.el-radio {
+  margin-bottom: 0px!important;
+}