swordpass-ui 1.0.0

package/packages/Dictionary/src/main.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-select
+      v-if="inputWriteable"
+      ref="elSelect"
+      v-model="valueDesc"
+      v-validate="inputValidate"
+      :name="inputName"
+      :size="inputSize"
+      :popper-class="popperClass"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :style="styles"
+      :filterable="filterable"
+      :filter-method="filterMethod"
+      @clear="clear"
+    >
+      <el-option v-if="selectlist && selectlist.length > 0" :value="inputVal">
+        <el-scrollbar style="height:100%">
+          <el-tree
+            ref="elTree"
+            node-key="key"
+            style="height:245px"
+            :data="selectlist"
+            :indent="indent"
+            :highlight-current="true"
+            :default-expand-all="true"
+            :expand-on-click-node="false"
+            :props="defaultProps"
+            :filter-node-method="filterNode"
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-scrollbar>
+      </el-option>
+    </el-select>
+    <cl-field-tail
+      v-if="permission_sub != 'n'"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="valueDesc"
+    ></cl-field-tail>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClDictionary',
+    mixins: [permission, inputName, form],
+    props: {
+      value: String,
+      dickey: {
+        type: String,
+        require: true,
+      },
+      popperClass: String,
+      styles: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      filterable: {
+        type: Boolean,
+        default: false,
+      },
+      indent: {
+        type: Number,
+        default: 8,
+      },
+    },
+    data() {
+      return {
+        selectlist: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+        },
+        valueDesc: '',
+      }
+    },
+    computed: {
+      inputVal: {
+        get: function() {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          this.findDesc(this.selectlist)
+          return this.value
+        },
+        set: function(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    mounted() {
+      this.loadOptions()
+    },
+    methods: {
+      loadOptions() {
+        if (this.dickey) {
+          this.$requestConfig.getDictionaryByKey(this.dickey).then((resp) => {
+            this.selectlist = resp
+            if (this.value !== null && this.value !== undefined) {
+              this.findDesc(resp)
+            }
+          })
+        }
+      },
+      clear() {
+        this.filterMethod('')
+        this.$emit('input', '')
+      },
+      handleNodeClick(data) {
+        this.inputVal = data.key
+        this.valueDesc = data.name
+        this.$refs.elSelect.blur()
+        setTimeout(() => {
+          this.$validator.validate()
+        })
+      },
+      filterNode(value, data) {
+        if (!value) return true
+        return data.name.indexOf(value) !== -1
+      },
+      findDesc(list) {
+        if (list && list.length > 0) {
+          list.forEach((l) => {
+            if (l.key == this.value) {
+              this.valueDesc = l.name
+              return
+            }
+            if (l.children) {
+              this.findDesc(l.children)
+            }
+          })
+        }
+      },
+      filterMethod(query) {
+        this.$refs.elTree.filter(query)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+
+  .inputs {
+    ::v-deep {
+      .el-select {
+        width: 100%;
+      }
+    }
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    padding-right: 0;
+    padding-left: 0;
+    background-color: #fff;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 14px;
+    padding: 0 20px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+    height: 100%;
+    line-height: 34px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  li.el-select-dropdown__item.selected {
+    font-weight: normal;
+    padding-right: 0;
+    padding-left: 0;
+  }
+</style>

package/packages/DimensionSelector/index.js

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

package/packages/DimensionSelector/src/main.vue

@@ -0,0 +1,359 @@
+<template>
+  <div
+    v-if="permission !== 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <div
+      style="width: 100%; min-width:180px;"
+      class="el-select"
+      @click="showDialog"
+    >
+      <div
+        ref="tagSpans"
+        style="width: calc(100% - 25px);"
+        :class="{
+          'el-select__tags_readonly': !inputWriteable,
+          'el-select__tags': inputWriteable,
+        }"
+      >
+        <span>
+          <span
+            v-for="(item, index) in demensions"
+            :key="index"
+            class="el-tag el-tag--info el-tag--small"
+            @click.stop
+          >
+            <span class="el-select__tags-text">{{ item.name }}</span>
+            <i
+              v-if="inputWriteable"
+              class="el-tag__close el-icon-close"
+              @click="handleRemove(item)"
+            ></i>
+          </span>
+        </span>
+      </div>
+      <div v-if="inputWriteable" class="el-input el-input--suffix">
+        <input
+          ref="inputEl"
+          v-model="value"
+          v-validate="inputValidate"
+          type="text"
+          readonly="readonly"
+          :name="inputName"
+          autocomplete="off"
+          class="el-input__inner"
+          :placeholder="placeholder"
+          :style="{
+            height: inputSuffixHeight + 'px',
+            lineHeight: inputSuffixHeight + 'px',
+          }"
+        />
+        <span class="el-input__suffix">
+          <span class="el-input__suffix-inner">
+            <cl-icon name="users" />
+          </span>
+        </span>
+      </div>
+    </div>
+    <cl-field-tail :field-name="inputName" :input-value="value" />
+    <el-dialog
+      title="选择维度"
+      :visible.sync="dialogVisible"
+      class="dialog-selector__wrapper"
+      :class="{ 'mobile-dialog': isMobile }"
+      top="6vh"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :append-to-body="appendToBody"
+    >
+      <cl-selector
+        ref="selector"
+        v-model="demensions"
+        :data="data"
+        :pagination="pagination"
+        :table-columns="tableColumns"
+        :select-label="selectLabel"
+        :quick-search-props="quickSearchProps"
+        :single="single"
+        :search-placeholder="searchPlaceholder"
+        :primary-field="primaryField"
+        @load="load"
+        @select="select"
+        @row-click="rowClick"
+      />
+      <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 utils from '@/utils.js'
+  import inputName from '@/mixins/inputName.js'
+  import permission from '@/mixins/permission.js'
+  import form from '@/mixins/form.js'
+  import mobileMode from '@/mixins/mobileMode.js'
+  import ClFieldTail from '../../FieldTail/index'
+  import ClSelector from '../../Selector/index'
+  import { setTimeout } from 'timers'
+
+  export default {
+    name: 'ClDimensionSelector',
+    components: {
+      ClFieldTail,
+      ClSelector,
+    },
+    mixins: [inputName, permission, form, mobileMode],
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '名称、编码',
+      },
+      value: String,
+      selectLabel: String,
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      config: Object,
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      tableColumns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      quickSearchProps: {
+        type: String,
+        required: true,
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        inputSuffixHeight: 30,
+        demensions: [],
+        dialogVisible: false,
+        primaryField: this.selectLabel,
+      }
+    },
+    watch: {
+      // 当所选择的数据发生变化时，同步到v-model中
+      demensions: function(newVal) {
+        let ary = [],
+          idAry = [],
+          demNameAry = [],
+          codeAry = []
+        if (newVal && newVal.constructor === Array && newVal.length > 0) {
+          newVal.forEach((m) => {
+            ary.push(m.name)
+            if (m.hasOwnProperty('id')) {
+              idAry.push(m.id)
+            }
+            if (m.hasOwnProperty('code')) {
+              codeAry.push(m.code)
+            }
+            if (m.hasOwnProperty('demName')) {
+              demNameAry.push(m.demName)
+            }
+          })
+        }
+        if (this.config) {
+          // 配置了id的绑定关系，则回填到指定属性上
+          if (this.config.hasOwnProperty('id')) {
+            utils.setValueByConfigKey(this, this.config, 'id', idAry.join(','))
+            this.primaryField = 'id'
+          }
+          // 配置了code的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('code')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'code',
+              codeAry.join(',')
+            )
+            this.primaryField = this.primaryField == 'id' ? 'id' : 'code'
+          }
+          // 配置了demName的绑定关系，则回填到指定属性上
+          if (this.config.hasOwnProperty('demName')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'demName',
+              demNameAry.join(',')
+            )
+          }
+        }
+        // 通过valueChange事件发布值变更消息
+        this.$emit('valueChange', ary.join(','), newVal)
+        setTimeout(() => {
+          this.calacInputSuffixHeight()
+          if (this.$refs.inputEl) {
+            this.$refs.inputEl.focus()
+            this.$refs.inputEl.blur()
+          }
+        }, 10)
+      },
+      value: function() {
+        // 父级传递进来的value发生变更时，需要同步到当前所选数据中
+        this.valueInit()
+      },
+    },
+    mounted() {
+      // 组件第一次挂载时，同步value到当前所选数据中
+      this.valueInit()
+    },
+    methods: {
+      // 同步value到当前所选数据中
+      valueInit() {
+        let tmpAry = []
+        if (this.value) {
+          let idAry = [],
+            demNameAry = [],
+            codeAry = []
+          if (this.config) {
+            // 配置了id绑定关系，则获取id的值
+            if (this.config.hasOwnProperty('id')) {
+              let idVal = utils.getValueByConfigKey(this, this.config, 'id')
+              if (idVal) {
+                idAry = idVal.split(',').trim()
+              }
+            }
+            // 配置了code绑定关系，则获取code的值
+            if (this.config.hasOwnProperty('code')) {
+              let codeVal = utils.getValueByConfigKey(this, this.config, 'code')
+              if (codeVal) {
+                codeAry = codeVal.split(',').trim()
+              }
+            }
+            // 配置了demName绑定关系，则获取demName的值
+            if (this.config.hasOwnProperty('demName')) {
+              let demNameVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'demName'
+              )
+              if (demNameVal) {
+                demNameAry = demNameVal.split(',').trim()
+              }
+            }
+          }
+          // 将name、id、code从逗号分割的字符串解析为json对象格式的数组
+          let valAry = this.value.split(',').trim()
+          valAry.forEach((m, index) => {
+            let item = { name: m }
+            if (idAry.length > index) {
+              item['id'] = idAry[index]
+            }
+            if (codeAry.length > index) {
+              item['code'] = codeAry[index]
+            }
+            if (demNameAry.length > index) {
+              item['demName'] = demNameAry[index]
+            }
+            tmpAry.push(item)
+          })
+        }
+        // 对数组做深度对比，如果值不完全相等，则进行赋值操作
+        if (!utils.arrayEquals(tmpAry, this.demensions)) {
+          this.demensions = tmpAry
+        }
+      },
+      showDialog() {
+        if (!this.inputWriteable) {
+          return
+        }
+        this.dialogVisible = true
+        setTimeout(() => {
+          this.$refs.selector.onShow()
+        })
+      },
+      handleClose(done) {
+        this.$refs.demSelector.onHide()
+        done && done()
+      },
+      handleDialogSure() {
+        this.$emit('select-data', this.$refs.selector.getSelectedData())
+        this.dialogVisible = false
+        this.$refs.selector.onHide(true)
+      },
+      handleDialogCancel() {
+        this.dialogVisible = false
+        this.$refs.selector.onHide()
+      },
+      handleRemove(item) {
+        this.demensions.remove(item)
+      },
+      // 更新当前输入框的高度来适配已选数据的高度
+      calacInputSuffixHeight() {
+        if (!this.$refs.tagSpans) return
+        if (this.$refs.tagSpans.offsetHeight) {
+          this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+        } else {
+          this.inputSuffixHeight = 30
+        }
+      },
+      load(param, cb) {
+        this.$emit('load', param, cb)
+      },
+      select(selection, row) {
+        this.$emit('select', selection, row)
+      },
+      rowClick(row, column, event) {
+        this.$emit('row-click', row, column, event)
+      },
+    },
+  }
+</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;
+  }
+  .el-input__suffix {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>

package/packages/DimensionSelectorInput/index.js

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

package/packages/DimensionSelectorInput/src/main.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <cl-dimension-selector
+      v-model="value"
+      :validate="validate"
+      select-label="name"
+      :placeholder="placeholder"
+      :permission="permission_sub"
+      :single="single"
+      :config="config"
+      :name="inputName"
+      :data="data"
+      :table-columns="tableColumns"
+      :pagination="pagination"
+      :append-to-body="appendToBody"
+      quick-search-props="demName,demCode"
+      @load="handleLoad"
+      @valueChange="valueChange"
+    ></cl-dimension-selector>
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClDimensionSelectorInput',
+    mixins: [permission, inputName, form],
+    props: {
+      value: String,
+      single: Boolean,
+      config: Object,
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        data: [],
+        tableColumns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'code', label: '编码' },
+          { prop: 'demDesc', label: '描述' },
+        ],
+        pagination: {
+          page: 1,
+          pageSize: 50,
+          total: 0,
+          showTotal: true,
+        },
+      }
+    },
+    methods: {
+      handleLoad(queryFilter, cb) {
+        let _this = this
+        this.$requestConfig.getDimensionList(queryFilter).then((data) => {
+          _this.data = data.rows
+          _this.pagination.page = data.page
+          _this.pagination.pageSize = data.pageSize
+          _this.pagination.total = data.total
+          cb()
+        })
+      },
+      valueChange(value) {
+        this.$emit('input', value)
+      },
+    },
+  }
+</script>

package/packages/Divider/index.js

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

package/packages/Divider/src/main.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    :class="['el-divider', `el-divider--${direction}`]"
+    :style="'background-color:' + color"
+  >
+    <div
+      v-if="$slots.default && direction !== 'vertical'"
+      :class="['el-divider__text', `is-${contentPosition}`]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ClDivider',
+    props: {
+      direction: {
+        type: String,
+        default: 'horizontal',
+        validator: function(value) {
+          return ['horizontal', 'vertical'].indexOf(value) !== -1
+        },
+      },
+      contentPosition: {
+        type: String,
+        default: 'center',
+        validator: function(value) {
+          return ['left', 'right', 'center'].indexOf(value) !== -1
+        },
+      },
+      color: {
+        type: String,
+        default: '#dcdfe6',
+      },
+    },
+  }
+</script>

package/packages/Duration/index.js

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