swordpass-ui 1.0.0

package/packages/Select/src/main.vue

@@ -0,0 +1,330 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-select
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      style="width: 100%"
+      :name="inputName"
+      :size="inputSize"
+      :clearable="clearable"
+      :disabled="readonly || disabled"
+      :placeholder="placeholder"
+      :filterable="filterable"
+      :allow-create="allowCreate"
+      :multiple="multiple"
+      :multiple-limit="limitCount"
+      @change="change"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag"
+      @clear="handleClear"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    >
+      <slot
+        v-if="
+          optionsAry && optionsAry.constructor == Array && optionsAry.length > 0
+        "
+        :options="optionsAry"
+        :prop-key="propKey"
+        :prop-value="propValue"
+      >
+        <el-option
+          v-for="item in optionsAry"
+          :key="item[propKey]"
+          :label="item[propValue]"
+          :value="item[propKey]"
+        ></el-option>
+      </slot>
+    </el-select>
+    <cl-field-tail
+      :writeable.sync="writeable"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+      :tag-format-value="tagFormatValue"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import deepmerge from 'deepmerge'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import linkage from '@/mixins/linkage.js'
+  import ganged from '@/mixins/ganged.js'
+  import form from '@/mixins/form.js'
+  import formDataUpdate from '@/mixins/formDataUpdate.js'
+
+  export default {
+    name: 'ClSelect',
+    mixins: [permission, inputName, linkage, ganged, form, formDataUpdate],
+    props: {
+      value: [String, Number, Boolean, Array],
+      options: Array,
+      selectlist: Array,
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: false,
+      },
+      filterable: {
+        type: Boolean,
+        default: false,
+      },
+      allowCreate: {
+        type: Boolean,
+        default: false,
+      },
+      remoteMethod: Function,
+      remote: {
+        type: Boolean,
+        default: false,
+      },
+      relatedQuery: {
+        type: Array,
+        default: function () {
+          return []
+        },
+      },
+      limitCount: {
+        type: Number,
+        default: 0,
+      },
+    },
+    data() {
+      return {
+        optionsAry: [],
+        tagFormatValue: [],
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          this.relatedQueryLoad() // 触发绑定的关联查询
+          if (this.value.constructor == String) {
+            const ary = this.value === '' ? [] : this.value.split(',')
+            if (this.inputWriteable) {
+              if (this.multiple) {
+                return ary
+              } else {
+                return this.value
+              }
+            } else {
+              // 只读 多选
+              if (this.multiple) {
+                const ary = this.value === '' ? [] : this.value.split(',')
+                let optionVals = []
+                let tempAry = deepmerge([], ary, { clone: true })
+                ary.forEach((m) => {
+                  this.optionsAry.find((opt) => {
+                    if (opt[this.propKey] === m) {
+                      optionVals.push(opt[this.propValue])
+                      tempAry.remove(m)
+                    }
+                    if (opt.children && opt.children.length > 0) {
+                      opt.children.find((childOpt) => {
+                        if (childOpt[this.propKey] === m) {
+                          optionVals.push(childOpt[this.propValue])
+                          tempAry.remove(m)
+                        }
+                      })
+                    }
+                  })
+                })
+                optionVals = optionVals.concat(tempAry)
+                this.tagFormatValue = optionVals // eslint-disable-line
+                return ary
+              }
+              if (this.optionsAry && this.optionsAry.length > 0) {
+                let optionVals = []
+                let tempAry = deepmerge([], ary, { clone: true })
+                ary.forEach((m) => {
+                  this.optionsAry.find((opt) => {
+                    if (opt[this.propKey] === m) {
+                      optionVals.push(opt[this.propValue])
+                      tempAry.remove(m)
+                    }
+                    if (opt.children && opt.children.length > 0) {
+                      opt.children.find((childOpt) => {
+                        if (childOpt[this.propKey] === m) {
+                          optionVals.push(childOpt[this.propValue])
+                          tempAry.remove(m)
+                        }
+                      })
+                    }
+                  })
+                })
+                optionVals = optionVals.concat(tempAry)
+                this.tagFormatValue = optionVals // eslint-disable-line
+                return this.value
+              }
+            }
+          }
+          return this.value
+        },
+        set(val) {
+          let result = ''
+          if (this.multiple) {
+            if (val && val.constructor === Array && val.length > 0) {
+              if (val[0].constructor === Number) {
+                throw '多选不支持数字类型'
+              }
+              result = val.join(',')
+            }
+          } else {
+            result = val
+          }
+          if (result != '') {
+            this.relatedQueryLoad() // 触发绑定的关联查询
+          }
+          this.$emit('input', result)
+        },
+      },
+    },
+    watch: {
+      options: function () {
+        this.loadOption()
+      },
+    },
+    created() {
+      this.$on('formDataUpdate', () => {
+        this.loadOption(true)
+      })
+    },
+    mounted() {
+      this.loadOption()
+    },
+    methods: {
+      //加载选项
+      loadOption: function (resetValue) {
+        // 动态选项
+        if (this.ganged && this.ganged.alias) {
+          this.dynamicLoadOption(resetValue)
+        } else {
+          // 静态选项
+          this.optionsAry = this.selectlist
+            ? this.selectlist
+            : this.options
+            ? this.options
+            : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption(resetValue) {
+        this.doCustomQuery(null, true).then((data) => {
+          if (data != null || data != undefined) {
+            // 之前的选项是否是空的
+            const preOptionsAryIsEmpty =
+              !this.optionsAry || this.optionsAry.length == 0
+            // 动态选项是否相同
+            const optionsAryEquals = utils.arrayEquals(data, this.optionsAry)
+            this.optionsAry = data
+            if (
+              resetValue &&
+              this.inputWriteable &&
+              !preOptionsAryIsEmpty &&
+              !optionsAryEquals
+            ) {
+              this.$nextTick(() => {
+                this.$emit('input', '')
+              })
+            }
+          }
+        })
+      },
+      change: function (data) {
+        let selectObj = this.optionsAry.find((opt) => opt[this.propKey] === data)
+        this.$emit('change', data, selectObj)
+      },
+      visibleChange: function (m) {
+        this.$emit('visible-change', m)
+      },
+      removeTag: function (tag) {
+        this.$emit('remove-tag', tag)
+      },
+      handleClear: function () {
+        this.$emit('clear')
+      },
+      handleBlur: function (event) {
+        this.$emit('blur', event)
+      },
+      handleFocus: function (event) {
+        this.$emit('focus', event)
+      },
+      // 准备查询参数
+      prepareLoadParams: function (condition) {
+        let params = {}
+        if (condition && !utils.isEmpty(condition)) {
+          // 获取当前控件是否在子表某行中
+          let { index } = utils.getSubScopeElAndIndex(this.$el)
+          if (this.$el) {
+            const pInst = utils.getOnlineFormInstance(this)
+            Object.keys(condition).forEach((k) => {
+              let val = null
+              // 主表
+              if (index == null) {
+                val = utils.getValueByPath(pInst, condition[k])
+              }
+              // 子表
+              else {
+                val = utils.getValueByPath(pInst, condition[k], index)
+              }
+              if (!utils.isEmpty(val)) {
+                params[k] = val
+              }
+            })
+          }
+        }
+        return params
+      },
+      // 触发绑定的关联查询
+      relatedQueryLoad: function () {
+        if (
+          this.relatedQuery &&
+          this.relatedQuery.constructor == Array &&
+          this.relatedQuery.length > 0
+        ) {
+          const pInst = utils.getOnlineFormInstance(this)
+          // 遍历所有的关联查询，逐个触发
+          this.relatedQuery.forEach((q) => {
+            const params = this.prepareLoadParams(q.condition)
+            pInst.$emit('related-query:load', q.alias, params, q.result)
+          })
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+</style>

package/packages/SelectTree/index.js

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

package/packages/SelectTree/src/SelectTree.vue

@@ -0,0 +1,352 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-select
+      v-if="inputWriteable && ganged"
+      ref="treeselect"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      style="width: 100%"
+      :name="inputName"
+      :size="inputSize"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :filterable="filterable"
+      :filter-method="filterMethod"
+      :multiple="multiple"
+      @clear="() => $emit('clear')"
+      @remove-tag="handleSelectTagRemove"
+      @focus="selectBlur"
+    >
+      <el-option
+        v-for="item in tempoptions"
+        v-show="false"
+        :key="item.key"
+        :value="item.key"
+        :label="item.value"
+      ></el-option>
+      <el-option value disabled>
+        <el-tree
+          ref="treeselectElTree"
+          node-key="key"
+          :data="options"
+          :highlight-current="true"
+          :default-expand-all="true"
+          :expand-on-click-node="false"
+          :props="defaultProps"
+          :indent="indent"
+          :filter-node-method="filterNode"
+          :show-checkbox="multiple"
+          :check-strictly="!cascade"
+          @check="handleNodeClick"
+          @node-click="handleNodeClick"
+          @check-change="handleCheckChange"
+        ></el-tree>
+      </el-option>
+    </el-select>
+
+    <cl-select
+      v-if="inputWriteable && !ganged"
+      ref="selected"
+      v-model="inputVal"
+      :validate="inputValidate"
+      :options="options"
+      :name="inputName"
+      :size="inputSize"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :filterable="filterable"
+      reserve-keyword
+      :multiple="multiple"
+      :permission="permission_sub"
+      @click.native="clickNative"
+      @blur="selectBlur"
+    />
+    <cl-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      input-value
+      :tag-format-value="labelValue"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import linkage from '@/mixins/linkage.js'
+  import ganged from '@/mixins/ganged.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClSelectTree',
+    mixins: [permission, inputName, linkage, ganged, form],
+    props: {
+      value: String,
+      selectlist: Array,
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      indent: {
+        type: Number,
+        default: 8,
+      },
+      filterable: {
+        type: Boolean,
+        default: false,
+      },
+      customQuery: Object,
+      cascade: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        options: [],
+        tempoptions: [],
+        tagFormatValue: [],
+        defaultProps: {
+          children: 'children',
+          label: 'value',
+        },
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (this.multiple) {
+            if (this.value) {
+              return this.value.split(',')
+            } else {
+              return []
+            }
+          } else if (this.value || this.value === 0) {
+            return this.value + ''
+          } else {
+            return this.value
+          }
+        },
+        set(val) {
+          if (this.multiple) {
+            this.$emit('input', val.join(','))
+          } else {
+            this.$emit('input', val)
+            if (!this.multiple && val) {
+              //判断对话框是否绑定了关联查询
+              if (
+                this.customQuery &&
+                this.customQuery.custQueryJson &&
+                this.customQuery.custQueryJson.length > 0
+              ) {
+                let custQueryJson = this.customQuery.custQueryJson
+                for (let i = 0; i < custQueryJson.length; i++) {
+                  if (custQueryJson[i].conditionfield.length > 0) {
+                    this.doSubCustomQuery(custQueryJson[i])
+                  } else {
+                    console.error(
+                      '[' +
+                        custQueryJson[i].comment +
+                        ']关联查询取值参数未绑定表单字段'
+                    )
+                  }
+                }
+              }
+            }
+          }
+        },
+      },
+      labelValue() {
+        const labelAry = []
+        this.tempoptions.forEach((opt) => {
+          if (this.multiple) {
+            if (this.inputVal.some((v) => v == opt.key)) {
+              labelAry.push(opt.value)
+            }
+          } else {
+            if (opt.key == this.inputVal) {
+              labelAry.push(opt.value)
+              return
+            }
+          }
+        })
+        return labelAry
+      },
+    },
+    created() {
+      this.loadOption()
+    },
+    methods: {
+      handleSelectTagRemove(value) {
+        this.$refs.treeselectElTree.setChecked(value, false, this.cascade)
+      },
+      //判断对象里面的值是否为空
+      objIsEmpty(obj) {
+        for (let key in obj) {
+          if (obj[key]) {
+            return false
+          }
+        }
+        return true
+      },
+      // 加载选项
+      loadOption() {
+        if (this.ganged && this.ganged.alias) {
+          this.dynamicLoadOption()
+        } else {
+          this.options = this.selectlist ? this.selectlist : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption() {
+        this.doCustomQuery(null, false).then((data) => {
+          if (data && this.ganged.PId) {
+            this.tempoptions = []
+            this.addSelectList(data)
+            data = utils.tile2nest(
+              data,
+              this.ganged.valueBind || 'key',
+              this.ganged.PId
+            )
+            this.options = data
+          } else if (data) {
+            this.tempoptions = []
+            this.addSelectList(data)
+            this.options = data
+          }
+        })
+      },
+      doSubCustomQuery() {
+        //TODO 实现关联子查询
+      },
+      clickNative: function () {
+        this.loadOption()
+      },
+      selectBlur: function () {
+        this.loadOption()
+      },
+      handleCheckChange() {
+        if (this.multiple) {
+          let checkedNodes = this.$refs.treeselectElTree.getCheckedNodes()
+          let modelValue = []
+          this.tempoptions = checkedNodes
+          for (let data of checkedNodes) {
+            modelValue.push(data.key)
+          }
+          this.$emit('input', modelValue.join(','))
+        }
+      },
+      handleNodeClick(data) {
+        if (!this.multiple) {
+          this.$emit('input', data.key)
+          if (data.key) {
+            //判断对话框是否绑定了关联查询
+            if (
+              this.customQuery &&
+              this.customQuery.custQueryJson &&
+              this.customQuery.custQueryJson.length > 0
+            ) {
+              let custQueryJson = this.customQuery.custQueryJson
+              for (let i = 0; i < custQueryJson.length; i++) {
+                if (custQueryJson[i].conditionfield.length > 0) {
+                  this.doSubCustomQuery(custQueryJson[i])
+                } else {
+                  console.error(
+                    '[' +
+                      custQueryJson[i].comment +
+                      ']关联查询取值参数未绑定表单字段'
+                  )
+                }
+              }
+            }
+          }
+          this.$refs.treeselect.blur()
+          setTimeout(() => {
+            this.$validator.validate()
+          })
+        } else if (this.multiple) {
+          let checkedNodes = this.$refs.treeselectElTree.getCheckedNodes()
+          let modelValue = []
+          this.tempoptions = checkedNodes
+          for (let data of checkedNodes) {
+            modelValue.push(data.key)
+          }
+          this.$emit('input', modelValue.join(','))
+        }
+      },
+      filterNode(value, data) {
+        if (!value) return true
+        return data.value.indexOf(value) !== -1
+      },
+      filterMethod(query) {
+        this.$refs.treeselectElTree.filter(query)
+      },
+      addSelectList(list) {
+        let valueFiled =
+          (this.ganged.valueBind || '') == 'key' ? '' : this.ganged.valueBind
+        let labelFiled =
+          (this.ganged.labelBind || '') == 'value' ? '' : this.ganged.labelBind
+        if (list && list.length > 0) {
+          list.forEach((l) => {
+            if (valueFiled) {
+              l['key'] = l[valueFiled]
+            }
+            if (labelFiled) {
+              l['value'] = l[labelFiled]
+            }
+            this.tempoptions.push(l)
+            if (l.children) {
+              this.addSelectList(l.children)
+            }
+          })
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: #fff;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 14px;
+    padding: 0 8px;
+    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;
+  }
+</style>

package/packages/Selector/index.js

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