swordpass-ui 1.0.0

package/packages/TreeDialog/src/main.vue

@@ -0,0 +1,293 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    :append-to-body="appendToBody"
+    :close-on-click-modal="false"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    :destroy-on-close="destroyOnClose"
+  >
+    <el-scrollbar style="height:100%">
+      <cl-tree
+        ref="clTree"
+        :tree-data="data"
+        :props="props"
+        :empty-text="emptyText"
+        :filter-node-method="filterNodeMethod"
+        :support-filter="supportFilter"
+        :show-more-button="showMoreButton"
+        :default-expand-all="defaultExpandAll"
+        :load="load"
+        :lazy="lazy"
+        :show-checkbox="showCheckbox"
+        :accordion="accordion"
+        :node-key="nodeKey"
+        :default-expanded-keys="defaultExpandedKeys"
+        :highlight-current="highlightCurrent"
+        :render-after-expand="renderAfterExpand"
+        :render-content="renderContent"
+        :check-on-click-node="checkOnClickNode"
+        :auto-expand-parent="autoExpandParent"
+        :check-strictly="checkStrictly"
+        :current-node-key="currentNodeKey"
+        :indent="indent"
+        :icon-class="iconClass"
+        :draggable="draggable"
+        :allow-drag="allowDrag"
+        :allow-drop="allowDrop"
+        :expand-on-click-node="expandOnClickNode"
+        :default-checked-keys="defaultCheckedKeys"
+        @node-click="handleNodeClick"
+        @node-contextmenu="nodeContextmenu"
+        @check-change="checkChange"
+        @check="check"
+        @current-change="currentChange"
+        @node-expand="nodeExpand"
+        @node-collapse="nodeCollapse"
+        @node-drag-start="nodeDragStart"
+        @node-drag-enter="nodeDragEnter"
+        @node-drag-leave="nodeDragLeave"
+        @node-drag-over="nodeDragOver"
+        @node-drag-end="nodeDragEnd"
+        @node-drop="nodeDrop"
+      ></cl-tree>
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="onConfirm">确定</el-button>
+      <el-button @click="handleClose">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+  import ClTree from '../../Tree/index'
+
+  export default {
+    name: 'ClTreeDialog',
+    components: {
+      ClTree,
+    },
+    props: {
+      dialogTitle: {
+        type: String,
+        default: '请选择',
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      showMoreButton: {
+        type: Boolean,
+        default: false,
+      },
+      emptyText: String,
+      filterNodeMethod: Function,
+      data: Array,
+      load: {
+        type: Function,
+      },
+      lazy: {
+        type: Boolean,
+        default: false,
+      },
+      accordion: {
+        type: Boolean,
+        default: false,
+      },
+      showCheckbox: {
+        type: Boolean,
+        default: false,
+      },
+      defaultExpandAll: {
+        type: Boolean,
+        default: false,
+      },
+      props: {
+        type: Object,
+        default: function() {
+          return {
+            children: 'children',
+            label: 'label',
+          }
+        },
+      },
+      supportFilter: {
+        type: Boolean,
+        default: false,
+      },
+      iconClass: {
+        type: String,
+      },
+      nodeKey: {
+        type: String,
+      },
+      defaultExpandedKeys: {
+        type: Array,
+      },
+      highlightCurrent: {
+        type: Boolean,
+        default: false,
+      },
+      renderAfterExpand: {
+        type: Boolean,
+        default: true,
+      },
+      renderContent: {
+        type: Function,
+      },
+      checkOnClickNode: {
+        type: Boolean,
+        default: false,
+      },
+      autoExpandParent: {
+        type: Boolean,
+        default: true,
+      },
+      checkStrictly: {
+        type: Boolean,
+        default: false,
+      },
+      currentNodeKey: {
+        type: [String, Number],
+      },
+      indent: {
+        type: Number,
+        default: 16,
+      },
+      draggable: {
+        type: Boolean,
+        default: false,
+      },
+      allowDrag: {
+        type: Function,
+      },
+      allowDrop: {
+        type: Function,
+      },
+      expandOnClickNode: {
+        type: Boolean,
+        default: false,
+      },
+      defaultCheckedKeys: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      // showCheck 为true时 是否只返回叶子节点
+      leafOnly: {
+        type: Boolean,
+        default: false,
+      },
+      // showCheck 为true时 是否只返回包含半选中的叶子节点
+      includeHalfChecked: {
+        type: Boolean,
+        default: false,
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        selectedNode: null,
+      }
+    },
+    methods: {
+      showDialog() {
+        this.dialogVisible = true
+      },
+      handleClose() {
+        this.dialogVisible = false
+      },
+      onConfirm() {
+        let resultNodes = null
+        if (this.$refs.clTree.showCheckbox) {
+          resultNodes = this.$refs.clTree.$refs.elTree.getCheckedNodes(
+            this.leafOnly,
+            this.includeHalfChecked
+          )
+          if (!resultNodes || resultNodes.length <= 0) {
+            this.$message.error('请选择')
+            return
+          }
+        } else {
+          resultNodes = this.$refs.clTree.$refs.elTree.getCurrentNode()
+        }
+        if (!resultNodes) {
+          this.$message.error('请选择')
+          return
+        }
+        this.dialogVisible = false
+        this.$emit('onConfirm', resultNodes)
+      },
+      handleNodeClick(data, node, nodeComponent) {
+        this.$emit('node-click', data, node, nodeComponent)
+      },
+      nodeContextmenu(event, data, node, nodeComponent) {
+        this.$emit('node-contextmenu', event, data, node, nodeComponent)
+      },
+      checkChange(data, isChecked, hasChildChecked) {
+        this.$emit('check-change', data, isChecked, hasChildChecked)
+      },
+      check(data, checkedObj) {
+        this.$emit('check', data, checkedObj)
+      },
+      currentChange(data, node) {
+        this.$emit('current-change', data, node)
+      },
+      nodeExpand(data, node, nodeComponent) {
+        this.$emit('node-expand', data, node, nodeComponent)
+      },
+      nodeCollapse(data, node, nodeComponent) {
+        this.$emit('node-collapse', data, node, nodeComponent)
+      },
+      nodeDragStart(node, event) {
+        this.$emit('node-drag-start', node, event)
+      },
+      nodeDragEnter(dragNode, enterNode, event) {
+        this.$emit('node-drag-enter', dragNode, enterNode, event)
+      },
+      nodeDragLeave(dragNode, enterNode, event) {
+        this.$emit('node-drag-leave', dragNode, enterNode, event)
+      },
+      nodeDragOver(dragNode, enterNode, event) {
+        this.$emit('node-drag-over', dragNode, enterNode, event)
+      },
+      nodeDragEnd(dragNode, endNode, position, event) {
+        this.$emit('node-drag-end', dragNode, endNode, position, event)
+      },
+      nodeDrop(dragNode, endNode, position, event) {
+        this.$emit('node-drop', dragNode, endNode, position, event)
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-dialog {
+    width: 300px;
+    height: 500px;
+  }
+  ::v-deep .el-dialog__header {
+    border-bottom: 1px solid darkgrey;
+  }
+  ::v-deep .el-dialog__body {
+    padding: 0px;
+    height: 380px;
+  }
+  ::v-deep .el-dialog__footer {
+    position: absolute;
+    text-align: center;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+  }
+  ::v-deep .el-tree {
+    width: 300px;
+  }
+  ::v-deep .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+</style>

package/packages/TreeListDialog/index.js

@@ -0,0 +1,7 @@
+import TreeListDialog from './src/main.vue'
+
+TreeListDialog.install = function(Vue) {
+  Vue.component(TreeListDialog.name, TreeListDialog)
+}
+
+export default TreeListDialog

package/packages/TreeListDialog/src/main.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="inputs">
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      class="dialog-selector__wrapper"
+      top="6vh"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :append-to-body="appendToBody"
+      :destroy-on-close="destroyOnClose"
+    >
+      <el-container class="container">
+        <el-aside width="210px" class="left-aside">
+          <el-card class="box-card org-find-card" shadow="never">
+            <cl-tree
+              ref="tree"
+              :lazy="lazy"
+              :load="loadOrgTree"
+              :data="treeData"
+              :default-expand-all="false"
+              :highlight-current="true"
+              :props="props"
+              :node-key="nodeKey"
+              :default-expanded-keys="defaultExpandedKeys"
+              accordion
+              @node-click="handleNodeClick"
+            ></cl-tree>
+          </el-card>
+        </el-aside>
+        <el-container>
+          <el-main>
+            <cl-selector
+              ref="selector"
+              v-model="selectors"
+              :data="data"
+              :pagination="pagination"
+              :table-columns="tableColumns"
+              :select-label="selectLabel"
+              :quick-search-props="quickSearchProps"
+              :single="single"
+              :search-placeholder="searchPlaceholder"
+              @load="load"
+              @reset="reset"
+            />
+          </el-main>
+        </el-container>
+      </el-container>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleDialogSure">
+          确 定
+        </el-button>
+        <el-button size="small" @click="handleDialogCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import ClSelector from '../../Selector/index'
+  import { setTimeout } from 'timers'
+
+  export default {
+    name: 'ClTreeListDialog',
+    components: {
+      ClSelector,
+    },
+    props: {
+      dialogTitle: {
+        type: String,
+        default: '对话框',
+      },
+      props: {
+        type: Object,
+        default() {
+          return { children: 'children', label: 'name', isLeaf: 'leaf' }
+        },
+      },
+      treeData: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      loadOrgTree: {
+        type: Function,
+      },
+      value: String,
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      lazy: {
+        type: Boolean,
+        default: false,
+      },
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      tableColumns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      selectLabel: {
+        type: String,
+        default: 'name',
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      defaultDemension: {
+        type: [String, Number],
+        default: '',
+      },
+      quickSearchProps: {
+        type: [String, Array],
+        required: true,
+      },
+      nodeKey: {
+        type: String,
+        default: 'id',
+      },
+      defaultExpandedKeys: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      searchPlaceholder: {
+        type: String,
+        default: '',
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        inputName: null,
+        selectors: [],
+        dialogVisible: false,
+      }
+    },
+    methods: {
+      // 同步value到当前所选数据中
+      showDialog(selectors) {
+        this.dialogVisible = true
+        if (!selectors) {
+          selectors = []
+        }
+        setTimeout(() => {
+          this.$refs.selector.onShow(selectors)
+        })
+      },
+      handleClose(done) {
+        this.$refs.selector.onHide()
+        done && done()
+      },
+      handleDialogSure() {
+        this.dialogVisible = false
+        this.$refs.selector.onHide(true)
+        this.$emit('onConfirm', this.selectors)
+      },
+      handleDialogCancel() {
+        this.dialogVisible = false
+        this.$refs.selector.onHide()
+      },
+      handleRemove(item) {
+        this.selectors.remove(item)
+      },
+      load(param, cb) {
+        this.$emit('load', param, cb)
+      },
+      handleNodeClick(data) {
+        this.$emit('loadListData', data)
+      },
+      reset() {
+        this.$emit('reset')
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~@/styles/selector.scss';
+  .inputs {
+    display: block;
+  }
+
+  .el-select__tags {
+    background: #fff;
+    margin-left: 1px;
+  }
+
+  .el-select__tags_readonly {
+    position: relative;
+    top: 50%;
+  }
+
+  .el-input__inner[aria-invalid='true'] {
+    border-color: #f56c6c;
+  }
+</style>

package/packages/Typography/index.js

@@ -0,0 +1,8 @@
+import createHeader from './src/create-header'
+
+export const ClH1 = createHeader('1')
+export const ClH2 = createHeader('2')
+export const ClH3 = createHeader('3')
+export const ClH4 = createHeader('4')
+export const ClH5 = createHeader('5')
+export const ClH6 = createHeader('6')

package/packages/Typography/src/create-header.js

@@ -0,0 +1,72 @@
+import styles from '@/styles/index.scss'
+
+export default (level) => {
+  const headerComponent = {
+    name: `ClH${level}`,
+    props: {
+      type: {
+        type: String,
+        default: 'primary',
+        validator(val) {
+          return (
+            val === 'info' ||
+            val === 'success' ||
+            val === 'warning' ||
+            val === 'danger' ||
+            val === 'primary'
+          )
+        },
+      },
+      textGap: {
+        type: String,
+        default: '16px',
+      },
+      scene: {
+        type: Boolean,
+        default: false,
+      },
+      barWidth: {
+        type: String,
+        default: '4px',
+      },
+      inline: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      typeColor() {
+        return this.type == 'info'
+          ? styles.info_color
+          : this.type == 'success'
+          ? styles.success_color
+          : this.type == 'warning'
+          ? styles.warning_color
+          : this.type == 'danger'
+          ? styles.danger_color
+          : styles.primary_color
+      },
+    },
+    render(h) {
+      let style = {
+        '--header-padding-left': this.textGap,
+        '--bar-color': this.typeColor,
+        '--bezier': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        '--bar-width': this.barWidth,
+        display: this.inline ? 'inline' : 'block',
+        color: this.scene ? this.typeColor : 'trsparent',
+      }
+      this.inline && (style.display = 'inline')
+      this.scene && (style.color = this.typeColor)
+      return h(
+        `h${level}`,
+        {
+          class: ['cl-typography__header'],
+          style,
+        },
+        this.$slots.default
+      )
+    },
+  }
+  return headerComponent
+}

package/packages/UserDialog/index.js

@@ -0,0 +1,7 @@
+import UserDialog from './src/main.vue'
+
+UserDialog.install = function(Vue) {
+  Vue.component(UserDialog.name, UserDialog)
+}
+
+export default UserDialog