swordpass-ui 1.0.0

package/packages/Radio/src/main.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-radio-group
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :size="inputSize"
+      :name="inputName"
+      :style="styles"
+      @change="change"
+    >
+      <el-radio
+        v-for="item in optionsVal"
+        :key="item[propKey]"
+        :class="{
+          'el-radio-vertical': optionLayout == 'vertical',
+          'el-radio-horizontal': optionLayout == 'horizontal',
+        }"
+        :label="item[propKey]"
+        :disabled="readonly || disabled || item.disabled"
+      >
+        {{ item[propValue] }}
+      </el-radio>
+    </el-radio-group>
+    <cl-field-tail
+      v-if="permission_sub != 'n'"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="formatValue || 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: 'ClRadio',
+    components: {
+      ClFieldTail,
+    },
+    mixins: [permission, inputName, linkage, ganged, form, formDataUpdate],
+    props: {
+      value: [String, Number, Boolean],
+      options: Array,
+      optionLayout: {
+        type: String,
+        default: 'horizontal',
+        validator: function (value) {
+          return ['horizontal', 'vertical'].some((i) => i == value)
+        },
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      rdlist: String,
+      styles: Object,
+    },
+    data() {
+      return {
+        formatValue: '',
+        optionsVal: [],
+      }
+    },
+    computed: {
+      inputVal: {
+        get: function () {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          if (
+            this.value !== null &&
+            this.value !== undefined &&
+            !this.inputWriteable &&
+            this.optionsVal &&
+            this.optionsVal.length > 0
+          ) {
+            // eslint-disable-next-line
+            this.formatValue = this.optionsVal.find(
+              // eslint-disable-next-line
+              (opt) => opt[this.propKey] == this.value
+            ).value
+          }
+          return this.value
+        },
+        set: function (val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    watch: {
+      options: function () {
+        this.loadOption()
+      },
+    },
+    created() {
+      this.$on('formDataUpdate', () => {
+        this.loadOption()
+      })
+    },
+    mounted() {
+      this.loadOption()
+    },
+    methods: {
+      change(radioLabel) {
+        this.$emit('change', radioLabel)
+      },
+      //加载选项
+      loadOption() {
+        // 动态选项
+        if (this.ganged && this.ganged.alias) {
+          this.dynamicLoadOption()
+        } else {
+          // 静态选项
+          this.optionsVal = this.rdlist
+            ? JSON.parse(this.rdlist)
+            : this.options
+            ? this.options
+            : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption() {
+        this.doCustomQuery(null, true).then((data) => {
+          if (data != null || data != undefined) {
+            this.optionsVal = data
+          }
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  label.el-radio-horizontal {
+    margin: 0px 30px 5px 0;
+  }
+
+  label.el-radio-vertical {
+    display: block;
+  }
+
+  label.el-radio-vertical ~ label.el-radio-vertical {
+    margin-top: 10px;
+    margin-left: 0px;
+  }
+
+  .el-radio-group {
+    line-height: 14px;
+  }
+
+  div.el-radio-group[aria-invalid='true'] {
+    outline: 1px solid #f56c6c;
+  }
+</style>

package/packages/Rate/index.js

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

package/packages/Rate/src/main.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-rate
+      v-model="inputVal"
+      :max="max"
+      :allow-half="allowHalf"
+      :show-score="showScore || !inputWriteable"
+      :text-color="textColor"
+      :disabled="!inputWriteable"
+    ></el-rate>
+    <!-- 校验 -->
+    <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: 'ClRate',
+    mixins: [permission, inputName, form],
+    props: {
+      value: [Number, String],
+      allowHalf: {
+        type: Boolean,
+        default: false,
+      },
+      max: {
+        type: Number,
+        default: 5,
+      },
+      defaultValue: {
+        type: Number,
+        default: 5,
+      },
+      showScore: {
+        type: Boolean,
+        default: false,
+      },
+      textColor: {
+        type: String,
+        default: '#1F2D3D',
+      },
+    },
+    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 `ClRate组件的值必须是数字或值为数字的字符串。`
+            }
+            return valueNum
+          }
+          return this.value
+        },
+        set(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    mounted() {
+      if (!this.value) {
+        this.inputVal = this.defaultValue
+      }
+    },
+  }
+</script>

package/packages/ReadonlyInput/index.js

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

package/packages/ReadonlyInput/src/main.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-input
+      v-show="roInputDisplayMode == 'input'"
+      v-model="inputVal"
+      :type="type"
+      :size="inputSize"
+      :name="inputName"
+      :autosize="{ minRows: 1, maxRows: 4 }"
+      :style="styles"
+      readonly
+    ></el-input>
+    <el-input
+      v-show="roInputDisplayMode == 'html'"
+      v-model="inputVal"
+      :type="type"
+      :size="inputSize"
+      :name="inputName"
+      :autosize="{ minRows: 1, maxRows: 4 }"
+      :style="styles"
+      readonly
+      v-html="inputVal"
+    ></el-input>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import script from '@/mixins/script.js'
+  import permission from '@/mixins/permission.js'
+
+  export default {
+    name: 'ClReadonlyInput',
+    mixins: [inputName, permission, form, script],
+    props: {
+      value: [String, Number],
+      type: {
+        type: String,
+        default: 'text',
+        validator(val) {
+          return ['text', 'textarea'].includes(val)
+        },
+      },
+      styles: {
+        type: Object,
+      },
+    },
+    data() {
+      return {
+        roInputDisplayMode: 'input',
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          return this.value
+        },
+        set(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    created() {
+      this.roInputDisplayMode = 'input'
+      this.$on('formExtend:update', (formExtend) => {
+        this.roInputDisplayMode = formExtend.roInputDisplayMode || 'input'
+      })
+    },
+    mounted() {
+      if (this.value != null && this.value != undefined) {
+        this.inputVal = this.value
+      }
+      const result = this.evilJS()
+
+      if (result != null && result != undefined) {
+        this.inputVal = result
+      }
+    },
+  }
+</script>

package/packages/RelevantFlow/index.js

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