swordpass-ui 1.0.0

package/packages/Checkbox/index.js

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

package/packages/Checkbox/src/main.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-checkbox-group
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :size="inputSize"
+      :name="inputName"
+      :min="min"
+      :max="max"
+      :disabled="disabled || readonly"
+    >
+      <el-checkbox
+        v-for="item in optionsVal"
+        :key="item.key"
+        :class="{
+          'el-checkbox-vertical': optionLayout == 'vertical',
+          'el-checkbox-horizontal': optionLayout == 'horizontal',
+        }"
+        :label="item.key"
+        :disabled="item.disabled"
+        @change="handleCheckboxChange"
+      >
+        {{ item.value }}
+      </el-checkbox>
+    </el-checkbox-group>
+    <cl-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      input-value
+      :tag-format-value="inputVal"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import ClFieldTail from '../../FieldTail/index'
+  import permission from '@/mixins/permission.js'
+  import linkage from '@/mixins/linkage.js'
+  import inputName from '@/mixins/inputName.js'
+  import ganged from '@/mixins/ganged.js'
+  import form from '@/mixins/form.js'
+  import formDataUpdate from '@/mixins/formDataUpdate.js'
+
+  export default {
+    name: 'ClCheckbox',
+    components: {
+      ClFieldTail,
+    },
+    mixins: [permission, inputName, linkage, ganged, form, formDataUpdate],
+    props: {
+      value: String,
+      optionLayout: {
+        type: String,
+        default: 'horizontal',
+        validator: function (value) {
+          return ['horizontal', 'vertical'].some((i) => i == value)
+        },
+      },
+      options: Array,
+      cklist: String,
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      min: Number,
+      max: Number,
+    },
+    data() {
+      return {
+        optionsVal: [],
+      }
+    },
+    computed: {
+      inputVal: {
+        get: function () {
+          if (
+            utils.isEmpty(this.value) ||
+            !this.optionsVal ||
+            this.optionsVal.length == 0
+          ) {
+            return []
+          }
+          if (this.value.constructor == String) {
+            const ary = this.value.split(',')
+            if (this.inputWriteable) {
+              return ary
+            } else {
+              let opts = []
+              ary.forEach((m) => {
+                opts.push(this.optionsVal.find((opt) => opt.key === m).value)
+              })
+              return opts
+            }
+          }
+          return []
+        },
+        set: function () {},
+      },
+    },
+    watch: {
+      options: function () {
+        this.loadOption()
+      },
+    },
+    created() {
+      this.$on('formDataUpdate', () => {
+        this.loadOption()
+      })
+    },
+    mounted() {
+      this.$isCheckbox = true
+      this.loadOption()
+    },
+    methods: {
+      //加载选项
+      loadOption: function () {
+        // 动态选项
+        if (this.ganged && this.ganged.alias) {
+          this.dynamicLoadOption()
+        } else {
+          // 静态选项
+          this.optionsVal = this.cklist
+            ? JSON.parse(this.cklist)
+            : this.options
+            ? this.options
+            : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption() {
+        this.doCustomQuery(null, true).then((data) => {
+          if (data != null || data != undefined) {
+            this.optionsVal = data
+          }
+        })
+      },
+      // 通过选项值数组 获取 选项key数组
+      getOptionKeyByValue: function (valueAry) {
+        const keyAry = []
+        if (!valueAry || valueAry.constructor !== Array || valueAry.length == 0) {
+          return keyAry
+        }
+        valueAry.forEach((m) => {
+          const _option = this.optionsVal.find((opt) => opt.value === m)
+          if (_option) {
+            keyAry.push(_option.key)
+          }
+        })
+        return keyAry
+      },
+      handleCheckboxChange: function (m, n) {
+        let vals = [...this.inputVal]
+        const currentVal = n.currentTarget.value
+        if (m) {
+          vals.push(currentVal)
+        } else {
+          vals.remove(currentVal)
+        }
+        vals = vals.filter((i) => i !== '')
+        this.$emit('input', vals.join(','))
+        this.$emit('change', m, n)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  label.el-checkbox-horizontal {
+    margin: 0px 30px 5px 0;
+  }
+
+  label.el-checkbox-vertical {
+    display: block;
+  }
+
+  label.el-checkbox-vertical ~ label.el-checkbox-vertical {
+    margin-top: 10px;
+    margin-left: 0px;
+  }
+
+  .el-checkbox-group {
+    line-height: 14px;
+  }
+
+  div.el-checkbox-group[aria-invalid='true'] {
+    outline: 1px solid #f56c6c;
+  }
+</style>

package/packages/Collapse/index.js

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

package/packages/Collapse/src/ClCollapse.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-collapse
+    ref="collapse"
+    :accordion="accordion"
+    :value="openDefaultArr"
+    @change="handleChange"
+  >
+    <slot></slot>
+  </el-collapse>
+</template>
+<script>
+  import regionValidator from '@/mixins/regionValidator.js'
+
+  export default {
+    name: 'ClCollapse',
+    mixins: [regionValidator],
+    props: {
+      accordion: {
+        type: Boolean,
+        default: false,
+      },
+      openDefault: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      isVerify: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        openDefaultArr: this.openDefault,
+        preActiveNames: [],
+      }
+    },
+    mounted() {
+      this.preActiveNames = [].concat(this.openDefaultArr)
+    },
+    methods: {
+      handleChange(activeNames) {
+        // 收起来时才去判断是否校验
+        if (activeNames.length < this.preActiveNames.length) {
+          if (this.isVerify) {
+            this.validateRegion('.el-collapse-item.is-active').then(
+              (errorItems) => {
+                if (errorItems.length > 0) {
+                  // 还原将要折叠的面板
+                  this.openDefaultArr = [].concat(this.preActiveNames)
+                } else {
+                  // 更新当前打开的面板名称数组
+                  this.preActiveNames = [].concat(activeNames)
+                  this.$emit('change', activeNames)
+                }
+              }
+            )
+            return
+          }
+        }
+        this.preActiveNames = [].concat(activeNames)
+        this.$emit('change', activeNames)
+      },
+    },
+  }
+</script>

package/packages/Collapse/src/ClCollapseItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-collapse-item :title="title" :name="name" :disabled="disabled">
+    <slot slot="title" name="title"></slot>
+    <slot></slot>
+  </el-collapse-item>
+</template>
+<script>
+  export default {
+    name: 'ClCollapseItem',
+    props: {
+      title: String,
+      name: {
+        type: [String, Number],
+        default() {
+          return this._uid
+        },
+      },
+      disabled: Boolean,
+    },
+  }
+</script>

package/packages/CollapseItem/index.js

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

package/packages/CustomDialog/index.js

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

package/packages/CustomDialog/src/customDialog.js

@@ -0,0 +1,99 @@
+import utils from '@/utils.js'
+
+export default {
+  data() {
+    return {
+      pagination: {},
+      dialogData: [],
+      total: 0,
+      form: {},
+      itemSavestate: {},
+    }
+  },
+  methods: {
+    //更新对话框数据
+    setDialogData(data) {
+      this.dialogData = data
+    },
+    getDialoglistJson(pagination) {
+      return this.$requestConfig
+        .request({
+          url: pagination.queryUrl,
+          method: 'post',
+          data: pagination.pageBean,
+        })
+        .then((response) => {
+          const listKey = pagination.listKey
+            ? pagination.listKey
+            : pagination.dsType && pagination.dsType == 'dataSource'
+            ? 'rows'
+            : ''
+          if (!listKey) {
+            console.warn(
+              '自定义对话框未获取到数据返回的listKey，数据加载可能产生异常。'
+            )
+          }
+          // 通过路径取得对象中的属性
+          const rows = utils.getValueByPath(response, listKey)
+          const pathPage = utils.getValueByPath(response, pagination.pageKey)
+          const pathPageSize = utils.getValueByPath(
+            response,
+            pagination.pageSizeKey
+          )
+          const pathTotal = utils.getValueByPath(response, pagination.totalKey)
+          if (pathPage) {
+            this.pageResult = {
+              page: pathPage,
+              pageSize: pathPageSize,
+              total: pathTotal,
+            }
+          }
+          this.setTodoRows(rows) //列表数据
+          this.setTotal(pathTotal) //总数据条数
+          let pageBean = {
+            page: pathPage,
+            pageSize: pathPageSize,
+            showTotal: true,
+          }
+          this.setPagination(pageBean)
+          return
+        })
+    },
+    //更新每页下拉显示数据
+    setPaginationSize(size) {
+      this.pagination.pageSize = size
+    },
+    //更新第几页
+    setPaginationPageNum(currentPage) {
+      this.pagination.page = currentPage
+    },
+    getTreeData(data) {
+      return new Promise((resolve) => {
+        if (data.requestType == 'GET') {
+          this.$requestConfig.request({ url: data.url }).then((response) => {
+            resolve(response.data)
+          })
+        }
+      })
+    },
+    setPagination(pagination) {
+      this.pagination = pagination
+    },
+    setTodoRows(rows) {
+      let newRows = []
+      for (let i = 0; i < rows.length; i++) {
+        let data = rows[i]
+        let keys = Object.keys(data)
+        let objRows = {}
+        keys.forEach((key) => {
+          objRows[key.toLowerCase()] = data[key]
+        })
+        newRows.push(objRows)
+      }
+      this.setDialogData(newRows)
+    },
+    setTotal(total) {
+      this.total = total
+    },
+  },
+}