three-trees-ui 1.0.0

package/packages/TemplatePreview/src/TemplatePreviewFile.vue

@@ -0,0 +1,179 @@
+<template>
+  <div v-if="fileList.length > 0">
+    <div v-if="fileList.length <= 2">
+      <div
+        v-for="(item, index) in showList"
+        :key="index"
+        style="margin-right: 10px"
+      >
+        <ht-icon :name="item.icon" />
+        <el-link type="primary" @click="openDialog">
+          {{ item.name }}
+        </el-link>
+      </div>
+    </div>
+    <div v-else>
+      <span
+        v-for="(item, index) in showList"
+        :key="index"
+        style="margin-right: 6px"
+      >
+        <ht-icon :name="item.icon" />
+      </span>
+      <el-link type="primary" @click="openDialog">
+        ...共{{ fileList.length }}个附件
+      </el-link>
+    </div>
+
+    <el-dialog
+      :title="dialogTitle"
+      v-if="dialogVisible"
+      :visible.sync="dialogVisible"
+      width="40%"
+    >
+      <el-row v-for="(item, index) in fileList" :key="index">
+        <el-col
+          :span="16"
+          style="
+            display: flex;
+            justify-content: space-between;
+            text-align: left;
+          "
+        >
+          <div
+            style="
+              font-size: 14px;
+              font-family: Source Han Sans SC;
+              font-weight: 400;
+              line-height: 24px;
+              color: #333333;
+              opacity: 1;
+              white-space: initial;
+              margin-right: 16px;
+            "
+          >
+            <ht-icon :name="item.icon" />
+            {{ item.name }}
+          </div>
+          <span
+            style="
+              margin-right: 50px;
+              height: 18px;
+              font-size: 12px;
+              font-family: Source Han Sans SC;
+              font-weight: 400;
+              line-height: 22px;
+              color: #999999;
+              opacity: 1;
+            "
+          >
+            {{ item.username }}
+          </span>
+        </el-col>
+
+        <el-col :span="8">
+          <el-button size="mini" type="text" @click="previewFile(item)">
+            预览
+          </el-button>
+          <el-button size="mini" type="text" @click="download(item.id)">
+            下载
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  const { saveAs } = require('file-saver')
+  export default {
+    name: 'HtTemplatePreviewFile',
+    props: ['value'],
+    data() {
+      return {
+        fileList: [],
+        showList: [],
+        dialogVisible: false,
+        dialogTitle: '',
+      }
+    },
+    watch: {
+      value() {
+        this.loadFile()
+      },
+    },
+    mounted() {
+      this.loadFile()
+    },
+    methods: {
+      openDialog() {
+        this.dialogTitle = `附件(${this.fileList.length})个`
+        this.dialogVisible = true
+      },
+      download(fileId) {
+        this.$requestConfig
+          .download(fileId)
+          .then(({ data, headers }) => {
+            if (data && headers) {
+              // 附件下载
+              const fileName = decodeURIComponent(
+                headers['content-disposition']
+                  .split(';')[1]
+                  .split('filename=')[1]
+              )
+              const blob = new Blob([data])
+              saveAs(blob, fileName)
+            }
+          })
+          .catch((err) => {
+            this.$message.error(`附件下载失败：${err}`)
+          })
+      },
+      previewFile(file) {
+        this.$preview(file)
+      },
+      loadFile() {
+        this.fileList = []
+        if (this.value) {
+          let file = JSON.parse(this.value)
+          for (let i = 0; i < file.length; i++) {
+            let item = file[i].response
+            let obj = {
+              id: item.fileId,
+              name: item.fileName,
+              username: item.username,
+            }
+            let exe = item.fileName.substring(
+              item.fileName.lastIndexOf('.') + 1
+            )
+            let icon = ''
+            if (exe == 'ppt' || exe == 'pptx') {
+              icon = 'ppt'
+            } else if (exe == 'doc' || exe == 'docx') {
+              icon = 'word'
+            } else if (exe == 'xls' || exe == 'xlsx') {
+              icon = 'excel'
+            } else {
+              icon = 'file'
+            }
+            obj.icon = icon
+            obj.response = item
+            this.fileList.push(obj)
+            if (i < 3) {
+              this.showList.push(obj)
+            }
+          }
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

package/packages/TemplatePreview/src/TemplatePreviewImage.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div v-if="imageList.length > 0">
+      <span
+        v-for="(item, index) in showImage"
+        :key="index"
+        style="margin-right: 10px"
+      >
+        <el-image :style="imageStyle" :src="item" :preview-src-list="imageList">
+          <div slot="error" class="image-slot">
+            <i class="el-icon-picture-outline"></i>
+          </div>
+        </el-image>
+      </span>
+      <span
+        v-if="imageList.length > 3"
+        style="
+          width: 47px;
+          height: 20px;
+          font-size: 14px;
+          font-family: Source Han Sans SC;
+          font-weight: 400;
+          line-height: 22px;
+          color: #333333;
+          opacity: 1;
+          margin-left: -10px;
+        "
+      >
+        ...共{{ imageList.length }}张
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'HtTemplatePreviewImage',
+    props: ['value'],
+    data() {
+      return {
+        imageList: [],
+        showImage: [],
+      }
+    },
+    computed: {
+      imageStyle() {
+        let style = { width: '48px', height: '48px' }
+        if (this.imageList > 2) {
+          style = { width: '36px', height: '36px' }
+        }
+        return style
+      },
+    },
+    watch: {
+      value() {
+        this.loadImg()
+      },
+    },
+    mounted() {
+      this.loadImg()
+    },
+    methods: {
+      loadImg() {
+        this.imageList = []
+        if (this.value) {
+          let file = JSON.parse(this.value)
+          for (let i = 0; i < file.length; i++) {
+            let item = file[i]
+            let url =
+              this.$requestConfig.portalUrl +
+              '/system/file/v1/getImage?fileId=' +
+              item.response.fileId
+            this.imageList.push(url)
+            if (i < 3) {
+              this.showImage.push(url)
+            }
+          }
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

package/packages/TemplateTaskCirculate/index.js

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

package/packages/TemplateTaskCirculate/src/main.vue

@@ -0,0 +1,258 @@
+<template>
+  <div>
+    <el-dialog
+      v-if="dialogVisible"
+      title="流程传阅"
+      :visible.sync="dialogVisible"
+      width="70%"
+      @close="closeDialog"
+    >
+      <span>
+        <el-form
+          ref="form"
+          :model="form"
+          label-width="100px"
+          :inline="false"
+          size="normal"
+          data-vv-scope="todoReadForm"
+        >
+          <ht-form-item label="传阅人员" required>
+            <ht-user-selector-input
+              ref="htUserSelector"
+              v-model="form.users"
+              append-to-body
+              quick-search-props="fullname,account,phone,email"
+              permission="b"
+              :config="{ id: 'form' }"
+              @input="syncInputUserId"
+            ></ht-user-selector-input>
+          </ht-form-item>
+          <ht-form-item label="传阅说明" required>
+            <div class="approval-comments">
+              <ht-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>
+          </ht-form-item>
+          <ht-form-item label="附件上传">
+            <ht-file v-model="fileList" type="list" :downloadable="false" />
+          </ht-form-item>
+        </el-form>
+      </span>
+      <span slot="footer">
+        <el-button type="primary" @click="confirm">确定</el-button>
+        <el-button @click="closeDialog">取消</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,
+      }
+    },
+    watch: {
+      'form.opinion': {
+        handler(val) {
+          this.$emit('get-opinion', val)
+          this.opinionInput()
+        },
+        deep: true,
+      },
+    },
+    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('表单校验不通过，请完善表单信息')
+            return false
+          }
+          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()
+        })
+        if (this.form.opinion.length >= 500) {
+          this.form.opinion = this.form.opinion.substr(0, 500)
+          this.opinionInput()
+          return
+        }
+      },
+      //统计输入和选择常用语长度
+      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['htUserSelector'].$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,58 @@
+<template>
+  <!-- 大标题 小标题 文字  -->
+  <div v-if="permission != 'n'" class="ht-text" :style="textStyle">
+    <slot name="tip"></slot>
+    {{ textValue }}
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  export default {
+    name: 'HtText',
+    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>
+  .ht-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