ylwl-cpscoms 1.0.0 → 1.2.0

package/es/DtTable/index.vue3.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".dt_table_header[data-v-2447cdc6]{align-items:center;display:inline-flex}.dt_required_dot[data-v-2447cdc6]{color:#f56c6c;margin-right:4px}.action-buttons[data-v-2447cdc6]{align-items:center;display:flex}.dt_table .el-form-item[data-v-2447cdc6],.dt_table[data-v-2447cdc6] .el-form-item__content{margin-bottom:0!important}.dt_table[data-v-2447cdc6] .el-input__inner{text-align:center!important}.dt_table[data-v-2447cdc6] .el-table__cell{padding:5px 0}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/SlAlert/index.vue.js

@@ -38,7 +38,7 @@ __vue_render__._withStripped = true;
 /* style */
 var __vue_inject_styles__ = undefined;
 /* scoped */
-var __vue_scope_id__ = "data-v-5d4ea765";
+var __vue_scope_id__ = "data-v-01bb5e39";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */

package/es/SlAlert/index.vue3.js

@@ -1,6 +1,6 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".message-box[data-v-5d4ea765]{background:#fdf6ec;padding:5px 10px 10px}.message-title[data-v-5d4ea765]{align-items:center;color:#f59a23d8;display:flex;justify-content:space-between}.message-row[data-v-5d4ea765]{font-size:12px}";
+var css_248z = ".message-box[data-v-01bb5e39]{background:#fdf6ec;padding:5px 10px 10px}.message-title[data-v-01bb5e39]{align-items:center;color:#f59a23d8;display:flex;justify-content:space-between}.message-row[data-v-01bb5e39]{color:#606266;font-size:14px}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/es/SlForm/index.vue.js

@@ -9,7 +9,7 @@ var __vue_script__ = script;
 /* style */
 var __vue_inject_styles__ = undefined;
 /* scoped */
-var __vue_scope_id__ = "data-v-b94e832a";
+var __vue_scope_id__ = "data-v-2d1ba62b";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */

package/es/SlForm/index.vue3.js

@@ -1,6 +1,6 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".yl-form-item{align-items:center;display:flex}::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}.yl-form-item .yl-form-item-grid .el-form-item__content{font-size:0}.content-box{background-color:hsla(0,0%,100%,.5);box-shadow:0 0 5px #dfdede;height:100%;padding:10px;position:absolute;right:0;top:0}.item-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;width:auto}.yl-form-box-shrink{background-color:#f1f1f1;overflow:hidden;padding:10px}.yl-form-drawericon{display:inline-block;vertical-align:top}.yl-form-drawericon-float{background-image:linear-gradient(270deg,#ffa140,hsla(0,0%,100%,0));opacity:.9;padding:10px 10px 10px 80px;position:absolute;right:0;top:0;z-index:10}.yl-i-lebel{background-color:#979797;border-radius:4px 4px 0 0;border-radius:0 4px 0 10px;color:#fff;font-size:12px;line-height:12px;padding:2px 8px 4px 10px;right:0;top:0;transform:scale(.8);transform-origin:100% 0;width:auto}.yl-i-lebel,.yl-r-icon{position:absolute;z-index:5}.yl-r-icon{color:red;left:0;line-height:35px;padding:5px;top:50%;transform:translateY(-50%)}.yl-form-slider{border:1px solid #dcdfe6;border-radius:4px;display:flex;line-height:35px;padding:0 20px 0 10px}.yl-form-slider-span{color:#c0c4cc;padding-right:15px}.yl-form-box{border-radius:4px;position:relative;transition:all .2s ease-out;white-space:normal}.yl-form-item{position:relative;white-space:nowrap}.yl-form-range-input{border:1px solid #dcdfe6;border-radius:4px;padding:0 10px}.yl-form-range-input input{border:none;border-radius:4px;height:100%;outline:none;padding:7px;text-align:center;width:70px}.yl-form-range-input input::placeholder{color:#c0c4cc}.el-radio{margin-bottom:0!important}";
+var css_248z = ".yl-form-item[data-v-2d1ba62b]{align-items:center;display:flex}[data-v-2d1ba62b] .el-form-item__content{display:flex;flex:1;margin:0!important}.yl-form-fullitem .el-form-item__content[data-v-2d1ba62b]{flex:1}.yl-form-item[data-v-2d1ba62b]{display:inline-flex!important}.yl-form-item .yl-form-item-grid .el-form-item__content[data-v-2d1ba62b]{font-size:0}.item-label[data-v-2d1ba62b]{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;width:auto}.yl-form-box-shrink[data-v-2d1ba62b]{background-color:#f1f1f1;overflow:hidden;padding:10px}.yl-form-drawericon[data-v-2d1ba62b]{display:inline-block;vertical-align:top}.yl-form-drawericon-float[data-v-2d1ba62b]{background-image:linear-gradient(270deg,#ffa140,hsla(0,0%,100%,0));opacity:.9;padding:10px 10px 10px 80px;position:absolute;right:0;top:0;z-index:10}.yl-i-lebel[data-v-2d1ba62b]{background-color:#979797;border-radius:4px 4px 0 0;border-radius:0 4px 0 10px;color:#fff;font-size:12px;line-height:12px;padding:2px 8px 4px 10px;position:absolute;right:0;top:0;transform:scale(.8);transform-origin:100% 0;width:auto;z-index:5}.yl-r-icon[data-v-2d1ba62b]{color:red;left:0;line-height:35px;padding:5px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}.yl-form-slider[data-v-2d1ba62b]{border:1px solid #dcdfe6;border-radius:4px;display:flex;line-height:35px;padding:0 20px 0 10px}.yl-form-slider-span[data-v-2d1ba62b]{color:#c0c4cc;padding-right:15px}.yl-form-box[data-v-2d1ba62b]{border-radius:4px;position:relative;transition:all .2s ease-out;white-space:normal}.yl-form-item[data-v-2d1ba62b]{position:relative;white-space:nowrap}.yl-form-range-input[data-v-2d1ba62b]{border:1px solid #dcdfe6;border-radius:4px;padding:0 10px}.yl-form-range-input input[data-v-2d1ba62b]{border:none;border-radius:4px;height:100%;outline:none;padding:7px;text-align:center;width:70px}.yl-form-range-input input[data-v-2d1ba62b]::placeholder{color:#c0c4cc}.el-radio[data-v-2d1ba62b]{margin-bottom:0!important}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/es/SlPage/index.vue.js

@@ -10,7 +10,7 @@ var __vue_render__ = function __vue_render__() {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("main", {
-    staticClass: "content-box",
+    staticClass: "main-box",
     style: {
       padding: _vm.notShowPadding ? "" : "20px"
     }
@@ -127,7 +127,7 @@ __vue_render__._withStripped = true;
 /* style */
 var __vue_inject_styles__ = undefined;
 /* scoped */
-var __vue_scope_id__ = "data-v-47c2a39b";
+var __vue_scope_id__ = "data-v-68db030e";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */

package/es/SlPage/index.vue3.js

@@ -1,6 +1,6 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".content-box{display:flex;flex-direction:column;height:100%;width:100%}.sl-form{flex:1 0 1;transition:all .3s ease-in-out}.yl-form-box{display:inline}.search-btn{float:right;margin-left:20px}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.sl-table-header{display:flex;justify-content:space-between;margin:10px 0}";
+var css_248z = ".main-box[data-v-68db030e]{display:flex;flex-direction:column;height:100%;width:100%}.sl-form[data-v-68db030e]{flex:1 0 1;transition:all .3s ease-in-out}.yl-form-box[data-v-68db030e]{display:inline}.search-btn[data-v-68db030e]{float:right;margin-left:20px}.fade-enter-active[data-v-68db030e],.fade-leave-active[data-v-68db030e]{transition:opacity .3s}.fade-enter[data-v-68db030e],.fade-leave-to[data-v-68db030e]{opacity:0}.sl-table-header[data-v-68db030e]{display:flex;justify-content:space-between;margin:10px 0}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/es/index.js

@@ -5,6 +5,7 @@ import SlGuide from './SlGuide/index.vue.js';
 import SlPage from './SlPage/index.vue.js';
 import SlTable from './SlTable/index.vue.js';
 import SlTitle from './SlTitle/index.vue.js';
+import DtTable from './DtTable/index.vue.js';
 export { createCommandDialog } from './SlDialog/index.js';
 export { createCommandDialogPlus } from './SlDialog/dialogPlus.js';
 export { createCommandDrawer } from './SlDrawer/index.js';
@@ -21,7 +22,8 @@ var components = {
   SlGuide: SlGuide,
   SlPage: SlPage,
   SlTable: SlTable,
-  SlTitle: SlTitle
+  SlTitle: SlTitle,
+  DtTable: DtTable
 };
 function install(Vue) {
   if (install.installed) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ylwl-cpscoms",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "CPSB业务组件库 - Vue2 + Element UI通用业务组件",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,8 +9,7 @@
   "files": [
     "es/",
     "lib/",
-    "dist/",
-    "src/"
+    "dist/"
   ],
   "sideEffects": [
     "**/*.css",

package/src/SlAlert/SlAlert.stories.js

@@ -1,108 +0,0 @@
-import SlAlert from './index.vue'
-
-export default {
-  title: 'Components/SlAlert',
-  component: SlAlert,
-  parameters: {
-    docs: {
-      description: {
-        component: '温馨提示组件，支持展开/收起消息内容，移动端默认收起。提供 message 和 operate 两个插槽。'
-      }
-    }
-  }
-}
-
-// 代码展示通用模板
-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-alert>
-  <template slot="message">
-    <p>1. 请确保填写的信息真实有效</p>
-    <p>2. 审核通过后将无法修改</p>
-  </template>
-</sl-alert>`
-
-export const Default = () => ({
-  components: { SlAlert },
-  template: `
-    <div>
-      <sl-alert>
-        <template slot="message">
-          <p>1. 请确保填写的信息真实有效</p>
-          <p>2. 审核通过后将无法修改</p>
-        </template>
-      </sl-alert>
-      ${codeBlock(defaultCode)}
-    </div>`
-})
-
-Default.storyName = '基础用法'
-
-// ---- 带操作按钮 ----
-const operateCode = `<!-- 带操作按钮 -->
-<sl-alert>
-  <template slot="message">
-    <p>操作提示信息</p>
-  </template>
-  <template slot="operate">
-    <el-button type="text" size="mini">查看帮助</el-button>
-  </template>
-</sl-alert>`
-
-export const WithOperate = () => ({
-  components: { SlAlert },
-  template: `
-    <div>
-      <sl-alert>
-        <template slot="message">
-          <p>操作提示信息</p>
-        </template>
-        <template slot="operate">
-          <el-button type="text" size="mini">查看帮助</el-button>
-        </template>
-      </sl-alert>
-      ${codeBlock(operateCode)}
-    </div>`
-})
-
-WithOperate.storyName = '带操作按钮'
-
-// ---- 多条消息 ----
-const multiCode = `<!-- 多条消息提示 -->
-<sl-alert>
-  <template slot="message">
-    <p>1. 删除后，该账号自动销号，此操作无法恢复</p>
-    <p>2. 删除前请确认所有数据已备份</p>
-    <p>3. 如有疑问请联系管理员</p>
-  </template>
-</sl-alert>`
-
-export const MultiMessage = () => ({
-  components: { SlAlert },
-  template: `
-    <div>
-      <sl-alert>
-        <template slot="message">
-          <p>1. 删除后，该账号自动销号，此操作无法恢复</p>
-          <p>2. 删除前请确认所有数据已备份</p>
-          <p>3. 如有疑问请联系管理员</p>
-        </template>
-      </sl-alert>
-      ${codeBlock(multiCode)}
-    </div>`
-})
-
-MultiMessage.storyName = '多条消息'

package/src/SlAlert/index.vue

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

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

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

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

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

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