ylwl-cpscoms 1.1.0 → 1.3.0

package/src/SlTable/SlTable.stories.js

@@ -1,118 +0,0 @@
-import SlTable from './index.vue'
-
-export default {
-  title: 'Components/SlTable',
-  component: SlTable,
-  parameters: {
-    docs: {
-      description: {
-        component: '业务表格组件，基于 el-table 封装。支持远程分页、多选、排序、自定义列、操作列渲染、列拖拽排序等功能。通过 columns 配置驱动表格渲染。'
-      }
-    }
-  }
-}
-
-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;')
-}
-
-// mock 数据
-const mockData = [
-  { id: 1, name: '张三', age: 28, dept: '研发部', status: 1 },
-  { id: 2, name: '李四', age: 32, dept: '产品部', status: 0 },
-  { id: 3, name: '王五', age: 25, dept: '设计部', status: 1 },
-  { id: 4, name: '赵六', age: 30, dept: '研发部', status: 1 },
-  { id: 5, name: '孙七', age: 27, dept: '运营部', status: 0 }
-]
-
-function mockApi(params) {
-  const { currentPage, pageSize } = params
-  const start = (currentPage - 1) * pageSize
-  const list = mockData.slice(start, start + pageSize)
-  return Promise.resolve({
-    code: 1,
-    data: { list, total: mockData.length }
-  })
-}
-
-// ---- 基础用法 ----
-const defaultColumns = [
-  { type: 'selection' },
-  { prop: 'id', label: 'ID', width: '80' },
-  { prop: 'name', label: '姓名' },
-  { prop: 'age', label: '年龄', sortable: true },
-  { prop: 'dept', label: '部门' },
-  { prop: 'status', label: '状态', template: 'statusTpl' },
-  { prop: 'operate', label: '操作', width: '150', list: [
-    { label: '编辑', click: () => {} },
-    { label: '删除', type: 'danger', click: () => {} }
-  ]}
-]
-
-const defaultCode = `<!-- 使用方式 -->
-<sl-table ref="table" :table-api="fetchList" :columns="columns"
-  :auto-request="true" />
-
-<!-- columns 配置 -->
-columns: [
-  { type: 'selection' },
-  { prop: 'id', label: 'ID', width: '80' },
-  { prop: 'name', label: '姓名' },
-  { prop: 'operate', label: '操作', list: [...] }
-]`
-
-export const Default = () => ({
-  components: { SlTable },
-  data() {
-    return {
-      tableApi: mockApi,
-      columns: defaultColumns
-    }
-  },
-  template: `
-    <div>
-      <sl-table ref="table" :table-api="tableApi" :columns="columns" :auto-request="true">
-        <template slot="statusTpl" slot-scope="scope">
-          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
-            {{ scope.row.status === 1 ? '启用' : '禁用' }}
-          </el-tag>
-        </template>
-      </sl-table>
-      ${codeBlock(defaultCode)}
-    </div>`
-})
-
-Default.storyName = '基础用法'
-
-// ---- 无分页 ----
-const noPageCode = `<!-- 无分页模式 -->
-<sl-table :table-api="fetchList" :columns="columns"
-  :show-pagination="false" :auto-request="true" />`
-
-export const NoPagination = () => ({
-  components: { SlTable },
-  data() {
-    return {
-      tableApi: mockApi,
-      columns: [
-        { prop: 'id', label: 'ID', width: '80' },
-        { prop: 'name', label: '姓名' },
-        { prop: 'age', label: '年龄' },
-        { prop: 'dept', label: '部门' }
-      ]
-    }
-  },
-  template: `
-    <div>
-      <sl-table :table-api="tableApi" :columns="columns" :show-pagination="false" :auto-request="true" />
-      ${codeBlock(noPageCode)}
-    </div>`
-})
-
-NoPagination.storyName = '无分页模式'

package/src/SlTable/components/colSetting.vue

@@ -1,86 +0,0 @@
-<template>
-  <div>
-    <el-table ref="dragTable" :data="columns" :border="true" row-key="prop" default-expand-all >
-      <el-table-column prop="drag" align="center" label="拖拽" width="60">
-        <template slot-scope="scope">
-          <i class="el-icon-rank" style="cursor: move;"></i>
-        </template>
-      </el-table-column>
-      <el-table-column prop="label" align="center" label="列名" />
-      <el-table-column prop="isShow" align="center" label="显示">
-        <template slot-scope="scope">
-          <el-switch v-model="scope.row.isShow" @change="changeTableColumn"></el-switch>
-        </template>
-      </el-table-column>
-
-      <template #empty>
-        <div class="table-empty">
-          <!-- <img src="../assets/images/notData.png" alt="notData" /> -->
-          <div>暂无可配置列</div>
-        </div>
-      </template>
-    </el-table>
-  </div>
-</template>
-<script>
-import Sortable from 'sortablejs'
-export default {
-  props: {
-    columns: { type: Array, default: () => [] }
-  },
-  data() {
-    return {
-      localColumns: []
-    }
-  },
-  watch: {
-    columns: {
-      handler(newVal) {
-        this.localColumns = [...newVal]
-        this.$nextTick(() => {
-          this.setSort()
-        })
-      },
-      deep: true,
-      immediate: true
-
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.setSort()
-    })
-  },
-  methods: {
-    setSort() {
-      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost',
-        setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
-        },
-        onEnd: evt => {
-          const { oldIndex, newIndex } = evt
-          this.handleDragEnd(oldIndex, newIndex)
-        }
-      })
-    },
-    handleDragEnd(oldIndex, newIndex) {
-      const columns = [...this.localColumns]
-      const targetRow = columns.splice(oldIndex, 1)[0]
-      columns.splice(newIndex, 0, targetRow)
-      this.localColumns = columns
-      this.$emit('update-columns', columns)
-    },
-    changeTableColumn() {
-      this.$emit('change-columns')
-    }
-  }
-}
-</script>
-<style scoped>
-.sortable-ghost {
-  opacity: 0.8;
-  background: #f0f9eb;
-}
-</style>