swordpass-ui 1.0.0

package/packages/UserDialog/src/main.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="inputs">
+    <el-dialog
+      title="选择用户"
+      :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>
+        <el-aside width="210px" class="left-aside">
+          <el-card class="box-card org-find-card" shadow="never">
+            <div slot="header" class="clearfix">
+              <span>按组织查找</span>
+            </div>
+            <cl-select
+              v-model="currentDemension"
+              size="small"
+              :options="demensions"
+              :props="{ key: 'id', value: 'demName' }"
+              :remote-method="loadDemensions"
+              @change="changeDemension"
+            />
+            <cl-tree
+              ref="tree"
+              lazy
+              :load="loadOrgTree"
+              :data="orgs"
+              :default-expand-all="false"
+              :highlight-current="true"
+              :props="{ children: 'children', label: 'name', isLeaf: 'leaf' }"
+              :node-key="nodeKey"
+              :default-expanded-keys="defaultExpandedKeys"
+              class="org-tree"
+              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: 'ClUserDialog',
+    components: {
+      ClSelector,
+    },
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '用户名称、账号',
+      },
+      demensions: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      orgs: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      loadOrgTree: {
+        type: Function,
+      },
+      value: String,
+      single: {
+        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: 'fullname',
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      defaultDemension: {
+        type: [String, Number],
+        default: '',
+      },
+      quickSearchProps: {
+        type: String,
+        required: true,
+      },
+      nodeKey: {
+        type: String,
+        default: 'id',
+      },
+      defaultExpandedKeys: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        inputName: null,
+        selectors: [],
+        dialogVisible: false,
+        currentDemension: null,
+      }
+    },
+    watch: {
+      defaultDemension: function(newVal, oldVal) {
+        if (newVal && newVal != oldVal) {
+          this.currentDemension = newVal
+          this.changeDemension()
+        }
+      },
+    },
+    methods: {
+      // 同步value到当前所选数据中
+      showDialog(selectors) {
+        this.dialogVisible = true
+        if (!selectors) {
+          selectors = []
+        }
+        this.loadDemensions()
+        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)
+      },
+      changeDemension() {
+        this.$emit('changeDemension', this.currentDemension)
+      },
+      handleNodeClick(data) {
+        this.$emit('loadOrgUser', data)
+      },
+      loadDemensions() {
+        this.$emit('loadDemensions')
+      },
+      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;
+  }
+
+  ::v-deep .el-main {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  div.org-find-card ::v-deep .el-card__body {
+    padding: 10px;
+    max-height: 520px;
+    overflow: auto;
+  }
+</style>

package/packages/UserSelector/index.js

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