swordpass-ui 1.0.0

package/packages/ProcessRecord/src/main.vue

@@ -0,0 +1,392 @@
+<template>
+  <div v-if="dialogVisible" class="record-wrap">
+    <el-dialog title="审批记录" :visible.sync="dialogVisible" width="80%">
+      <div v-if="dialogVisible" class="record-content">
+        <cl-table
+          :data="rows"
+          :show-export="false"
+          :show-custom-column="false"
+          :nopagination="true"
+          @loading="loadData"
+        >
+          <cl-table-column
+            width="50"
+            align="center"
+            label="序号"
+            type="index"
+          />
+          <cl-table-column
+            label="审批节点"
+            width="170"
+            align="center"
+            prop="taskName"
+            show-overflow-tooltip
+          />
+          <cl-table-column
+            prop="qualfiedNames"
+            label="待审批人"
+            show-overflow-tooltip
+            width="110"
+            align="center"
+          >
+            <template #default="{ row }">
+              <span
+                v-if="
+                  row.status != 'awaiting_check' &&
+                    qualfiedsName(row.qualfiedNames, true) < 2
+                "
+              >
+                {{ row.qualfiedNames }}
+              </span>
+              <span
+                v-if="
+                  row.status === 'awaiting_check' &&
+                    row.qualfieds &&
+                    row.qualfieds.length === 1 &&
+                    !row.qualfieds[0].users
+                "
+              >
+                {{ row.qualfiedNames }}
+              </span>
+              <el-popover
+                v-if="
+                  row.status == 'awaiting_check' ||
+                    qualfiedsName(row.qualfiedNames, true) > 1
+                "
+                placement="right"
+                popper-class="right-popover"
+                trigger="hover"
+              >
+                <div>
+                  <p class="qualfied_names">名称</p>
+                  <div
+                    v-if="isQualfiedListHasUser(row.qualfieds)"
+                    class="btn__wrap"
+                  >
+                    <p v-for="(item, index) in row.qualfieds" :key="index">
+                      <el-tooltip
+                        v-if="item.users"
+                        class="item"
+                        effect="light"
+                        placement="top"
+                        :content="item.users"
+                      >
+                        <el-button plain size="mini">{{ item.name }}</el-button>
+                      </el-tooltip>
+                      <el-button v-if="!item.users" plain size="mini">
+                        {{ item.name }}
+                      </el-button>
+                    </p>
+                  </div>
+                  <div v-else class="btn__wrap">
+                    <p
+                      v-for="(item, index) in qualfiedsName(
+                        row.qualfiedNames,
+                        false
+                      )"
+                      :key="index"
+                    >
+                      <el-button plain size="mini">{{ item }}</el-button>
+                    </p>
+                  </div>
+                </div>
+                <i
+                  v-if="
+                    isQualfiedListHasUser(row.qualfieds) ||
+                      qualfiedsName(row.qualfiedNames, true) > 1
+                  "
+                  slot="reference"
+                  class="el-icon-more qualfied-more__icon"
+                ></i>
+              </el-popover>
+            </template>
+          </cl-table-column>
+          <cl-table-column
+            label="处理人"
+            width="110"
+            align="center"
+            prop="auditorName"
+            show-overflow-tooltip
+          />
+          <cl-table-column
+            align="center"
+            label="处理情况"
+            width="140"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span v-if="row.statusVal == '待审批'">
+                {{ row.isRead == 0 ? '待阅' : '已阅' }}
+              </span>
+              <span v-else>
+                {{ row.statusVal }}
+              </span>
+            </template>
+          </cl-table-column>
+
+          <cl-table-column
+            label="处理意见"
+            show-overflow-tooltip
+            align="center"
+          >
+            <template #default="{ row }">
+              <strong>
+                <span style="white-space: pre-wrap">{{ row.opinion }}</span>
+              </strong>
+              <br />
+              <div
+                v-if="row.filesArray && row.filesArray.length != 0"
+                class="appendix"
+              >
+                <div class="title">附件：</div>
+                <div
+                  v-for="(item, index) in row.filesArray"
+                  :key="index"
+                  style="cursor: pointer"
+                >
+                  <el-tag @click="search(item)">{{ item.name }}</el-tag>
+                </div>
+              </div>
+              <br />
+            </template>
+          </cl-table-column>
+
+          <cl-table-column
+            label="操作时间"
+            width="170"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span>{{ row.completeTime }}</span>
+            </template>
+          </cl-table-column>
+
+          <cl-table-column
+            align="center"
+            label="停留时长"
+            width="110"
+            show-overflow-tooltip
+          >
+            <template #default="{ row }">
+              <span>{{ formatTimeLag(row) }}</span>
+            </template>
+          </cl-table-column>
+        </cl-table>
+      </div>
+
+      <!-- 预览文件-->
+      <cl-preview ref="previewHelp" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'ProcessRecord',
+    props: {
+      instId: String,
+      taskId: String,
+      referOpinion: Boolean,
+      nodeType: String,
+      defId: String,
+      nodeId: String,
+      myReadType: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        src: '',
+        data: { taskId: '', referOpinion: false },
+        fileId: '',
+        // 获取row的key值
+        // getRowKeys(row) {
+        //   return row.id
+        // },
+        previewNodeFormDialogVisible: false,
+        opinionSelectNodeId: '',
+        opinionInstId: '',
+        opinionTaskId: '',
+        opinionFormData: '',
+        opinionTaskName: '',
+        opinionProcDefId: '',
+        rows: [], // 表格数据
+        dialogVisible: false,
+      }
+    },
+    created() {
+      this.initParams()
+    },
+    methods: {
+      showDialog() {
+        this.dialogVisible = true
+      },
+      initParams() {
+        if (this.instId) {
+          this.data.instId = this.instId
+          this.data.taskId = this.taskId
+          this.data.referOpinion = this.referOpinion
+          this.data.nodeType = this.nodeType
+          this.data.defId = this.defId
+          this.data.nodeId = this.nodeId
+          //类型为我的请求时添加参数isRequest进行过滤
+          if (this.myReadType === 'request') {
+            this.data.isRequest = true
+          }
+        }
+      },
+      qualfiedsName(names, isLength) {
+        if (names && isLength) {
+          return names.split(',').length
+        }
+        if (names && !isLength) {
+          return names.split(',')
+        }
+      },
+      isQualfiedListHasUser(data) {
+        if (Array.isArray(data)) {
+          for (let i = 0; i < data.length; i++) {
+            if (data[i].users) {
+              return true
+            }
+          }
+          return false
+        }
+      },
+      //持续时间
+      formatTimeLag(row) {
+        const { days, hours, minutes, seconds } = utils.dateDuration(
+          row.completeTime,
+          utils.formatDate(new Date())
+        )
+        if (days > 0) return days + '天'
+        if (hours > 0) return hours + '小时'
+        if (minutes > 0) return minutes + '分钟'
+        if (minutes == 0 && seconds >= 0) return '小于1分钟'
+      },
+      search(item) {
+        const url = `${this.$file.previewUrl}?fileId=${item.response.fileId}`
+        this.$refs.previewHelp.preview(url, item.response.fileName)
+      },
+      loadData(param, cb) {
+        const params = {
+          instId: this.instId,
+          taskId: this.taskId,
+          referOpinion: this.referOpinion,
+          nodeType: this.nodeType,
+          defId: this.defId,
+          nodeId: this.nodeId,
+        }
+        this.$requestConfig
+          .getOpinionsById(params)
+          .then((response) => {
+            response.map((e) => {
+              //有可能出现e.files是"\"\""的情况
+              if (e.files && JSON.parse(e.files)) {
+                e.filesArray = JSON.parse(JSON.parse(e.files))
+              }
+            })
+            this.rows = response
+          })
+          .finally(() => {
+            cb()
+          })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .el-message-box__body {
+    border-top: none;
+  }
+  .el-main {
+    padding: 0;
+  }
+  .record-wrap {
+    padding: 20px;
+    background: #fff;
+  }
+  .appendix {
+    padding: 5px 0px;
+    text-align: left;
+  }
+
+  .appendix_left {
+    padding: 0 15px;
+    border-left: 1px solid #d8d8d8;
+  }
+
+  .appendix_right {
+    padding: 0 15px 0 0;
+  }
+
+  .title {
+    display: block;
+    font-weight: bold;
+    color: #a2a2a2;
+  }
+
+  .record-container {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  .record-container > span {
+    padding-left: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #666;
+    // border-left: 3px solid $--theme-color;
+  }
+
+  .record-content {
+    padding: 20px 0;
+  }
+
+  .files {
+    font-size: 12px;
+    color: #5eade6;
+    cursor: pointer;
+  }
+
+  .files:hover {
+    // color: $--theme-color;
+  }
+
+  ::v-deep .el-table .cell.el-tooltip {
+    min-width: 50px;
+  }
+
+  ::v-deep .el-table .cell {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-right: 10px;
+    padding-left: 10px;
+    overflow: hidden;
+    line-height: 23px;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+  ::v-deep .owner-span {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .btn__wrap {
+    display: flex;
+    flex-wrap: wrap;
+    p {
+      margin: 0;
+    }
+  }
+  .qualfied-more__icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>

package/packages/Qrcode/index.js

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

package/packages/Qrcode/src/Qrcode.vue

@@ -0,0 +1,105 @@
+<template>
+  <div :style="containerStyle" v-if="permission_sub != 'n'">
+    <canvas v-show="showCode" ref="clQrcode" class="qr-canvas"></canvas>
+    <!-- <el-skeleton v-if="!showCode" :rows="3" animated /> -->
+    <span v-if="!showCode" title="流程实例还未生成">-</span>
+  </div>
+</template>
+
+<script>
+  import permission from '@/mixins/permission.js'
+  export default {
+    name: 'ClQrcode',
+    mixins: [permission],
+    props: {
+      width: {
+        type: Number,
+        default: 130,
+      },
+      height: {
+        type: Number,
+        default: 130,
+      },
+      url: String,
+      instId: [String, Number],
+      isSupportMobile: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        showCode: false,
+        curUrl: null,
+      }
+    },
+    computed: {
+      containerStyle() {
+        return {
+          width: `${this.width}px`,
+          height: `${this.height}px`,
+          display: 'inline-block',
+        }
+      },
+      urlVal() {
+        return this.curUrl ? this.curUrl : this.url
+      },
+    },
+    watch: {
+      urlVal: {
+        handler: function (newVal) {
+          if (newVal) {
+            this.$nextTick(() => this.initQrcode())
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {
+      if (!this.url && this.instId) {
+        if (this.isSupportMobile) {
+          this.getQrcodeUrl()
+        } else {
+          this.$message.error('二维码需要在流程绑定手机表单')
+        }
+      }
+    },
+    methods: {
+      getQrcodeUrl() {
+        // 未传入url时，调用外部方法获取url
+        if (this.$requestConfig.getQrcodeUrl) {
+          const result = this.$requestConfig.getQrcodeUrl(this.instId)
+          if (result) {
+            if (result.constructor == Promise) {
+              result.then((data) => {
+                this.curUrl = data && data.value.shortUrl
+              })
+            } else if (result.constructor == String) {
+              this.curUrl = result
+            }
+          }
+        }
+      },
+      initQrcode() {
+        let noErr = true
+        this.$qrcode.toCanvas(
+          this.$refs.clQrcode,
+          `${this.$requestConfig.getBaseMobileUrl()}/${this.urlVal}`,
+          function (error) {
+            if (error) {
+              noErr = false
+              throw error
+            }
+          }
+        )
+        this.showCode = noErr
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .qr-canvas {
+    height: 100% !important;
+    width: 100% !important;
+  }
+</style>

package/packages/QuerySqlPreview/index.js

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

package/packages/QuerySqlPreview/src/QuerySqlPreview.vue

@@ -0,0 +1,163 @@
+<template>
+  <div name="online-form" class="data-preview-container">
+    <el-row class="top-title__row">
+      <h3 class="top-title">{{ queryView.name ? queryView.name : '' }}</h3>
+    </el-row>
+    <template v-if="html">
+      <cl-querysql-runtime-template
+        :sql-alias="sqlAlias"
+        :alias="alias"
+        :single="single"
+        :query-view="queryView"
+        class="data-preview-wrap"
+      />
+    </template>
+    <div v-if="loadedFail" class="loaded-fail__div">
+      {{ alias }}视图不存在...
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import querySqlPreview from '@/mixins/querySqlPreview.js'
+  export default {
+    name: 'ClQuerySqlPreview',
+    props: {
+      viewId: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        queryView: {},
+        displayFields: [],
+        html: '',
+        alarmSettingMap: {},
+        summaryTypeMap: {},
+        loadedFail: false,
+        sqlAlias: '',
+        alias: '',
+      }
+    },
+    watch: {
+      viewId: function(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      },
+    },
+    created() {
+      this.init()
+    },
+    methods: {
+      // 根据当前formKey初始化
+      init() {
+        let _me = this
+        this.$requestConfig
+          .getQuerySqlView(this.viewId)
+          .then((result) => {
+            if (result) {
+              _me.queryView = result
+              _me.sqlAlias = result.sqlAlias
+              _me.alias = result.alias
+              _me.html = result.template
+              this.customInit()
+            } else {
+              this.loadedFail = true
+            }
+          })
+          .finally(() => {})
+      },
+      customInit() {
+        Vue.component('cl-querysql-runtime-template', {
+          mixins: [querySqlPreview],
+          props: {
+            single: String,
+            sqlAlias: String,
+            alias: String,
+            queryView: Object,
+          },
+          data() {
+            return {}
+          },
+          template: this.html,
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  >>> th.todo-header-row {
+    background-color: #fafafa;
+    font-size: 13px;
+  }
+
+  >>> tr.todo-row {
+    font-size: 13px;
+  }
+
+  .el-container {
+    background-color: #fff;
+  }
+
+  .top-title__row {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    .top-title {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      font-size: 14px;
+      // border-bottom: 1px solid #ccc;
+    }
+  }
+  .data-preview-container {
+    height: 100%;
+    .data-preview-wrap {
+      height: calc(100% - 30px);
+    }
+  }
+
+  .el-header {
+    border-bottom: 1.5px solid #ededed;
+  }
+
+  .i {
+    margin-right: 4px;
+  }
+
+  .todo-subject {
+    cursor: pointer;
+  }
+
+  .todo-subject:hover {
+  }
+
+  >>> .el-dialog__body {
+    padding: 15px 10px;
+  }
+
+  >>> .el-checkbox {
+    // margin-left: 15px;
+  }
+
+  >>> .el-radio {
+    margin-left: 15px;
+  }
+
+  >>> .el-button {
+    margin-left: 0px;
+  }
+  .loaded-fail__div {
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #f56c6c;
+  }
+</style>

package/packages/Radio/index.js

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