swordpass-ui 1.0.0

package/packages/SidebarDialog/src/main.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-dialog
+    :width="width"
+    class="right-dialog"
+    height="100%"
+    :title="title"
+    :visible.sync="dialogVisible"
+    :before-close="beforeClose"
+    :append-to-body="appendToBody"
+    :custom-class="customClass"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :show-close="showClose"
+    :destroy-on-close="destroyOnClose"
+    :center="center"
+    :fullscreen="fullscreen"
+    :top="top"
+    @open="open"
+    @opened="opened"
+    @close="close"
+    @closed="closed"
+  >
+    <slot slot="title" name="title"></slot>
+    <slot></slot>
+    <slot slot="footer" name="footer"></slot>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'ClSidebarDialog',
+    props: {
+      width: {
+        type: String,
+        default: () => {
+          return '80%'
+        },
+      },
+      title: {
+        type: String,
+        default: '',
+      },
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+      beforeClose: {
+        type: Function,
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      customClass: {
+        type: String,
+      },
+      closeOnClickModal: {
+        type: Boolean,
+        default: false,
+      },
+      closeOnPressEscape: {
+        type: Boolean,
+        default: true,
+      },
+      showClose: {
+        type: Boolean,
+        default: true,
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: false,
+      },
+      center: {
+        type: Boolean,
+        default: false,
+      },
+      fullscreen: {
+        type: Boolean,
+        default: false,
+      },
+      top: {
+        type: String,
+        default: '0vh',
+      },
+      open: {
+        type: Function,
+        default() {
+          return () => {}
+        },
+      },
+      opened: {
+        type: Function,
+        default() {
+          return () => {}
+        },
+      },
+      close: {
+        type: Function,
+        default() {
+          return () => {}
+        },
+      },
+      closed: {
+        type: Function,
+        default() {
+          return () => {}
+        },
+      },
+    },
+    data() {
+      return {}
+    },
+    computed: {
+      dialogVisible: {
+        get() {
+          return this.visible
+        },
+        set(val) {
+          this.$emit('update:visible', val)
+        },
+      },
+    },
+    watch: {},
+    created() {},
+    methods: {},
+  }
+</script>
+
+<style lang="scss" scoped>
+  .right-dialog ::v-deep.el-dialog {
+    height: 100% !important;
+    border-radius: 0 !important;
+    right: 0 !important;
+    float: right !important;
+  }
+
+  .right-dialog ::v-deep .el-dialog__header {
+    border-bottom: 1px solid darkgrey;
+  }
+
+  ::v-deep .el-dialog__body {
+    height: calc(100% - 145px);
+    overflow-y: auto;
+  }
+
+  .right-dialog ::v-deep .dialog-footer {
+    position: absolute;
+    bottom: 20px;
+    left: 0px;
+    right: 0px;
+    text-align: center;
+  }
+  .right-dialog.el-dialog__wrapper {
+    overflow: hidden;
+  }
+</style>

package/packages/Slider/index.js

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

package/packages/Slider/src/main.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-slider
+      v-model="inputVal"
+      :max="max"
+      :step="step"
+      :show-input="showInput"
+      :disabled="!inputWriteable"
+    ></el-slider>
+    <!-- 校验 -->
+    <input
+      v-model="value"
+      v-validate="inputValidate"
+      type="hidden"
+      :name="inputName"
+    />
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClSlider',
+    mixins: [permission, inputName, form],
+    props: {
+      value: [Number, String],
+      max: {
+        type: Number,
+        default: 100,
+      },
+      defaultValue: {
+        type: Number,
+        default: 50,
+      },
+      step: {
+        type: Number,
+        default: 1,
+      },
+      showInput: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (
+            this.value !== null &&
+            this.value !== undefined &&
+            this.value.constructor == String
+          ) {
+            if (this.value.trim() == '') {
+              return 0
+            }
+            const valueNum = Number(this.value)
+            if (isNaN(valueNum)) {
+              throw `ClSlider组件的值必须是数字或值为数字的字符串。`
+            }
+            return valueNum
+          }
+          return this.value
+        },
+        set(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    mounted() {
+      if (!this.value) {
+        this.inputVal = this.defaultValue
+      }
+    },
+  }
+</script>

package/packages/Step/index.js

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

package/packages/StepLayout/index.js

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

package/packages/Steps/index.js

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

package/packages/Steps/src/Step.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-row>
+    <el-col :span="12" :push="2">
+      <span style="font-weight:bold;font-size:14px;">
+        {{ pageNum + 1 }}/{{ pageSize }}
+      </span>
+    </el-col>
+    <el-col :span="4" style="float: right;">
+      <el-button
+        class="step_change_btn"
+        :class="{ hidden: pageNum == 0 }"
+        type="success"
+        :style="
+          'background-color:' +
+            backButton.color +
+            ';border-color:' +
+            backButton.color
+        "
+        :icon="backButton.icon"
+        @click="back"
+      >
+        {{ backButton.name }}
+      </el-button>
+      <el-button
+        class="step_change_btn"
+        :class="{ hidden: pageNum >= pageSize - 1 }"
+        type="success"
+        :style="
+          'background-color:' +
+            nextButton.color +
+            ';border-color:' +
+            nextButton.color
+        "
+        :icon="nextButton.icon"
+        @click="next"
+      >
+        {{ nextButton.name }}
+      </el-button>
+    </el-col>
+  </el-row>
+</template>
+<script>
+  import Emitter from '@/mixins/emitter'
+
+  export default {
+    name: 'ClStep',
+    componentName: 'ClStep',
+    mixins: [Emitter],
+    props: {
+      pageSize: {
+        type: Number,
+        require: true,
+      },
+      backButton: {
+        type: Object,
+        default: () => {
+          return {
+            name: '上一步',
+            color: '#409eff',
+          }
+        },
+      },
+      nextButton: {
+        type: Object,
+        default: () => {
+          return {
+            name: '下一步',
+            color: '#67C23A',
+          }
+        },
+      },
+      isVerify: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        pageNum: 0,
+      }
+    },
+    created() {
+      this.$on('validateRegion', (result, step) => {
+        result && this.doJump(step)
+      })
+    },
+    methods: {
+      verifyBeforeJump(step) {
+        this.dispatch('ClSteps', 'beforeJump', step)
+      },
+      doJump(step) {
+        this.pageNum += step
+        this.dispatch('ClSteps', 'pageAlter', this.pageNum)
+        this.$emit('updatePageIndex', this.pageNum)
+      },
+      back() {
+        if (!this.isVerify) {
+          this.doJump(-1)
+        } else {
+          this.verifyBeforeJump(-1)
+        }
+      },
+      next() {
+        if (!this.isVerify) {
+          this.doJump(1)
+        } else {
+          this.verifyBeforeJump(1)
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .step_change_btn {
+    height: 32px;
+    width: 80px;
+    padding: 0px;
+  }
+  .step_change_btn.hidden {
+    visibility: hidden;
+  }
+</style>

package/packages/Steps/src/StepLayout.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="step-layout__container"
+    :class="{ active: pageIndex === showIndex }"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ClStepLayout',
+    componentName: 'ClStepLayout',
+    props: { pageIndex: { type: Number, require: true } },
+    data() {
+      return {
+        showIndex: 0,
+      }
+    },
+    created() {
+      const this_ = this
+      //监听分页组件分页数量改变事件.
+      this.$on('pageAlter', (content) => {
+        this_.showIndex = content
+      })
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .step-layout__container {
+    display: none;
+  }
+  .step-layout__container.active {
+    display: block;
+  }
+</style>

package/packages/Steps/src/Steps.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="steps__container">
+    <el-steps
+      :class="{ 'el-steps__hidden': hiddenBar }"
+      :active="active"
+      finish-status="success"
+      align-center
+    >
+      <el-step
+        v-for="(col, colIndex) in columns"
+        :key="colIndex"
+        :title="col.name"
+      ></el-step>
+    </el-steps>
+    <slot></slot>
+  </div>
+</template>
+<script>
+  import Emitter from '@/mixins/emitter'
+  import regionValidator from '@/mixins/regionValidator.js'
+
+  export default {
+    name: 'ClSteps',
+    componentName: 'ClSteps',
+    mixins: [Emitter, regionValidator],
+    props: {
+      columns: Array,
+      hiddenBar: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        active: 0,
+      }
+    },
+    computed: {
+      hasColumns: function() {
+        return this.columns.length > 0
+      },
+    },
+    created() {
+      const this_ = this
+      //监听分页组件分页数量改变事件.
+      this.$on('pageAlter', (content) => {
+        this_.active = content
+        this.broadcast('ClStepLayout', 'pageAlter', content)
+      })
+      // 在分页发生跳转前的事件
+      this.$on('beforeJump', (step) => {
+        // 做局部表单校验
+        this.validateRegion('.step-layout__container.active').then((errors) => {
+          // 校验结果发送给Step组件
+          this.broadcast('ClStep', 'validateRegion', [errors.length == 0, step])
+        })
+      })
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .el-steps__hidden {
+    display: none !important;
+  }
+</style>

package/packages/Subtable/index.js

@@ -0,0 +1,33 @@
+import SubDialog from './src/SubDialog.vue'
+import SubtableBackfill from './src/SubtableBackfill.vue'
+import SubPagination from './src/SubPagination.vue'
+import SubExportDialog from './src/SubExportDialog.vue'
+import SubImportDialog from './src/SubImportDialog.vue'
+
+SubDialog.install = function(Vue) {
+  Vue.component(SubDialog.name, SubDialog)
+}
+
+SubtableBackfill.install = function(Vue) {
+  Vue.component(SubtableBackfill.name, SubtableBackfill)
+}
+
+SubPagination.install = function(Vue) {
+  Vue.component(SubPagination.name, SubPagination)
+}
+
+SubExportDialog.install = function(Vue) {
+  Vue.component(SubExportDialog.name, SubExportDialog)
+}
+
+SubImportDialog.install = function(Vue) {
+  Vue.component(SubImportDialog.name, SubImportDialog)
+}
+
+export {
+  SubDialog,
+  SubtableBackfill,
+  SubPagination,
+  SubExportDialog,
+  SubImportDialog,
+}