swordpass-ui 1.0.0

package/packages/TemplateTaskCirculate/src/main.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <el-dialog title="流程传阅" :visible.sync="dialogVisible" width="70%">
+      <span>
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          :inline="false"
+          size="normal"
+          data-vv-scope="todoReadForm"
+        >
+          <cl-form-item label="传阅人员" required>
+            <cl-user-selector-input
+              ref="clUserSelector"
+              v-model="form.users"
+              append-to-body
+              quick-search-props="name,account,phone,email"
+              permission="b"
+              :config="{ id: 'form' }"
+              @input="syncInputUserId"
+            ></cl-user-selector-input>
+          </cl-form-item>
+          <cl-form-item label="传阅说明" required>
+            <div class="approval-comments">
+              <cl-input
+                ref="opinionInput"
+                v-model="form.opinion"
+                type="textarea"
+                display-style="block"
+                placeholder="请输入意见内容......"
+                name="审批意见"
+                validate="required"
+                :maxlength="500"
+                :max="500"
+                :autosize="{ minRows: 4, maxRows: 4 }"
+                permission="b"
+              />
+              <div class="common-words">
+                <el-button
+                  title="添加常用语"
+                  icon="el-icon-plus"
+                  size="mini"
+                  @click="addCommonOpinion"
+                />
+                <span>常用语：</span>
+                <span
+                  v-for="commonOpinion in commonWordsList"
+                  :key="commonOpinion"
+                >
+                  <el-tag
+                    v-if="commonOpinion.length > 30"
+                    :title="commonOpinion"
+                    @click.native="choseCommonOpinion(commonOpinion)"
+                  >
+                    {{ commonOpinion.substring(0, 30) }}...
+                  </el-tag>
+                  <el-tag
+                    v-else
+                    effect="plain"
+                    type="info"
+                    @click.native="choseCommonOpinion(commonOpinion)"
+                  >
+                    {{ commonOpinion }}
+                  </el-tag>
+                </span>
+                <span class="word-count">{{ wordCount }}/500</span>
+              </div>
+            </div>
+          </cl-form-item>
+          <cl-form-item label="附件上传">
+            <cl-file v-model="fileList" type="list" :downloadable="false" />
+          </cl-form-item>
+        </el-form>
+      </span>
+      <span slot="footer">
+        <el-button type="primary" @click="confirm">确定</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'TemplateTaskCirculate',
+    data() {
+      return {
+        dialogVisible: false,
+        form: {
+          users: '',
+          userId: '',
+          opinion: '',
+        },
+        fileList: '',
+        defKey: '',
+        instId: '',
+        taskId: '',
+        commonWordsList: [],
+        commonWordLoaded: false,
+        wordCount: 0,
+      }
+    },
+    methods: {
+      showDialog(row, flowBtnPermission) {
+        const instId = row['bpm_proc_inst_id_']
+        this.defKey = row['bpm_proc_def_key_']
+        this.instId = instId
+        if (instId) {
+          this.taskId = flowBtnPermission[instId]
+            ? flowBtnPermission[instId].taskId || ''
+            : ''
+        }
+        this.$validator = this.$root.$validator
+        this.commonWordLoaded || this.loadCommonWord()
+        this.dialogVisible = true
+      },
+      confirm() {
+        this.$validator.validateAll('todoReadForm').then((result) => {
+          if (!result) {
+            this.$message.warning('表单校验不通过，请完善表单信息')
+          }
+          const data = {
+            copyToType: '0',
+            files: JSON.stringify(this.fileList || []),
+            instanceId: this.instId,
+            opinion: this.form.opinion,
+            messageType: 'inner',
+            userId: this.form.userId,
+            taskId: this.taskId,
+          }
+          this.$requestConfig.transToMore(data).then((resp) => {
+            if (resp.state) {
+              this.$message.success(resp.message)
+              this.closeDialog()
+            } else if (resp.message) {
+              this.$message.error(resp.message)
+            }
+          })
+        })
+      },
+      loadCommonWord() {
+        this.$requestConfig
+          .getCommonWordsByDefKeyAndTypeId(this.defKey)
+          .then((resp) => {
+            this.commonWordLoaded = true
+            this.commonWordsList = resp
+          })
+      },
+      closeDialog() {
+        this.$set(this, 'form', {
+          users: '',
+          userId: '',
+          opinion: '',
+        })
+        this.taskId = ''
+        this.instId = ''
+        this.fileList = ''
+        this.dialogVisible = false
+      },
+      //选择常用语
+      choseCommonOpinion(commonOpinion) {
+        this.form.opinion += commonOpinion
+        this.opinionInput()
+        // 触发校验
+        this.$nextTick(() => {
+          this.$refs.opinionInput.$validator.validate()
+        })
+      },
+      //统计输入和选择常用语长度
+      opinionInput() {
+        this.wordCount = this.form.opinion.length
+      },
+      //添加常用语
+      addCommonOpinion() {
+        if (!this.form.opinion) {
+          this.$message.warning('请输入审批意见')
+          return
+        }
+        this.$confirm(`确认添加 【${this.form.opinion}】 为常用语?`)
+          .then(() => {
+            const params = {
+              expression: this.form.opinion,
+              departmentId: '',
+              postId: '',
+              roleId: '',
+              type: 4,
+            }
+            this.$requestConfig.savaCommonWords(params).then((data) => {
+              if (data.state) {
+                this.$message({ type: 'success', message: data.message })
+                this.loadCommonWord()
+              } else if (data.message) {
+                this.$message.error(data.message)
+              }
+            })
+          })
+          .catch(() => {})
+      },
+      syncInputUserId() {
+        let selection =
+          this.$refs['clUserSelector'].$refs['userSelectorEl'].selectors
+        this.form.userId = selection.map((item) => item.id).join(',')
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .approval-comments {
+    outline: 1px solid;
+
+    .common-words {
+      padding: 5px 10px;
+      border-top: 1px solid;
+
+      .el-button {
+        margin-right: 10px;
+      }
+      .word-count {
+        float: right;
+      }
+    }
+
+    ::v-deep {
+      .inputs {
+        .el-textarea__inner {
+          border: none;
+        }
+      }
+    }
+    .el-tag {
+      margin-right: 10px;
+      cursor: pointer;
+    }
+  }
+</style>

package/packages/Text/index.js

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

package/packages/Text/src/main.vue

@@ -0,0 +1,57 @@
+<template>
+  <!-- 大标题 小标题 文字  -->
+  <div class="cl-text" :style="textStyle" v-if="permission_sub != 'n'">
+    {{ textValue }}
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  export default {
+    name: 'ClText',
+    mixins: [permission],
+    props: {
+      textValue: String,
+      color: {
+        type: String,
+        default: '#666',
+      },
+      fontSize: {
+        type: String,
+        default: '12px',
+      },
+      fontWeight: {
+        type: String,
+        default: '400',
+      },
+      paddingTop: String,
+      paddingBottom: String,
+      paddingLeft: String,
+      paddingRight: String,
+      textAlign: {
+        type: String,
+        default: 'center',
+        validator: (val) => {
+          return ['left', 'center', 'right'].indexOf(val) > -1
+        },
+      },
+    },
+    computed: {
+      textStyle() {
+        return {
+          color: this.color,
+          fontSize: this.fontSize,
+          textAlign: this.textAlign,
+          fontWeight: this.fontWeight,
+          paddingTop: this.paddingTop,
+          paddingBottom: this.paddingBottom,
+          paddingLeft: this.paddingLeft,
+          paddingRight: this.paddingRight,
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .cl-text {
+  }
+</style>

package/packages/TimePicker/index.js

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

package/packages/TimePicker/src/main.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-time-picker
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :arrow-control="arrowControl"
+      :name="inputName"
+      :picker-options="pickerOptions"
+      :disabled="disabled"
+      :readonly="readonly"
+      :editable="editable"
+      :clearable="clearable"
+      :size="inputSize"
+      :start-placeholder="startPlaceholderVal"
+      :end-placeholder="endPlaceholderVal"
+      :is-range="isRange"
+      :range-separator="rangeSeparator"
+      :value-format="valueFormat"
+      :default-value="defaultValue"
+      :placeholder="placeholder"
+    ></el-time-picker>
+    <cl-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="value"
+    />
+  </div>
+</template>
+<script>
+  import ClFieldTail from '../../FieldTail/index'
+  import locale from '@/mixins/locale.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClTimePicker',
+    components: {
+      ClFieldTail,
+    },
+    mixins: [locale, permission, inputName, form],
+    props: {
+      value: String,
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      editable: {
+        type: Boolean,
+        default: true,
+      },
+      defaultValue: {
+        type: [String, Date],
+      },
+      valueFormat: {
+        type: String,
+        default: 'HH:mm:ss',
+      },
+      rangeSeparator: {
+        type: String,
+        default: '-',
+      },
+      pickerOptions: {
+        type: Object,
+        default() {
+          return {}
+        },
+      },
+      arrowControl: {
+        type: Boolean,
+        default: false,
+      },
+      isRange: {
+        type: Boolean,
+        default: false,
+      },
+      endPlaceholder: {
+        type: String,
+      },
+      startPlaceholder: {
+        type: String,
+      },
+    },
+    computed: {
+      startPlaceholderVal() {
+        return this.startPlaceholder
+          ? this.startPlaceholder
+          : this.t('cl.date.startTime')
+      },
+      endPlaceholderVal() {
+        return this.endPlaceholder
+          ? this.endPlaceholder
+          : this.t('cl.date.endTime')
+      },
+      inputVal: {
+        get: function() {
+          if (this.value && this.isRange && this.value.constructor == String) {
+            return this.value.split(',')
+          }
+          return this.value
+        },
+        set: function(val) {
+          if (val && this.isRange && val.constructor == Array) {
+            this.$emit('input', val.join(','))
+            return
+          }
+          this.$emit('input', val)
+        },
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div.inputs.cl-form-inputs__inline {
+    width: auto;
+  }
+  .inputs {
+    div.el-date-editor--timerange[aria-invalid='true'] {
+      border-color: #f56c6c;
+    }
+  }
+</style>

package/packages/TimeSelect/index.js

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

package/packages/TimeSelect/src/main.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="permission_sub !== 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-time-select
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :name="inputName"
+      :clearable="clearable"
+      :picker-options="pickerOptions"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :size="inputSize"
+      :editable="editable"
+    ></el-time-select>
+    <cl-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+    />
+  </div>
+</template>
+<script>
+  import ClFieldTail from '../../FieldTail/index'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClTimeSelect',
+    components: {
+      ClFieldTail,
+    },
+    mixins: [permission, inputName, form],
+    props: {
+      value: String,
+      pickerOptions: {
+        type: Object,
+        default() {
+          return {
+            start: '00:00',
+            step: '00:15',
+            end: '23:59',
+          }
+        },
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      editable: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      inputVal: {
+        get: function() {
+          return this.value
+        },
+        set: function(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] ::v-deep .el-input__inner,
+  div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
+    border-color: #f56c6c;
+  }
+  .inputs.cl-form-inputs__block {
+    ::v-deep {
+      .el-date-editor {
+        width: 100%;
+      }
+    }
+  }
+</style>

package/packages/Tree/index.js

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