three-trees-ui 1.0.0

package/packages/TemplateFormDialog/src/main.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+    title="表单内容"
+    :visible.sync="dialogVisible"
+    :width="dialogWidth"
+    :style="{ '--dialogHeight': dialogHeight }"
+    custom-class="template-form-dialog"
+    top="5vh"
+    :append-to-body="appendToBody"
+  >
+    <span>
+      <ht-template-form
+        class="template-form-dialog_form"
+        v-if="dialogVisible"
+        :template-key="templateKey"
+        :is-share="false"
+        open-type="dialog"
+        :in-dialog="true"
+        :dialog-param="dialogParam"
+        :action="action"
+        :quit-after-saving="quitAfterSaving"
+        @close="close"
+      ></ht-template-form>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'HtTemplateFormDialog',
+    props: {
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        templateKey: '',
+        action: 'get',
+        dialogWidth: '70%',
+        dialogHeight: '',
+        dialogParam: {},
+        quitAfterSaving: false,
+      }
+    },
+    methods: {
+      showDialog(param) {
+        this.templateKey = param.templateKey
+        this.action = param.action
+        this.dialogParam = param.dialogParam
+        this.dialogHeight = param.dialogHeight
+        this.dialogWidth = param.dialogWidth
+        this.quitAfterSaving = !(
+          !param.quitAfterSaving || param.quitAfterSaving == 'false'
+        )
+        this.dialogVisible = true
+      },
+      close() {
+        this.dialogVisible = false
+        this.$emit('close')
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .template-form-dialog {
+      height: var(--dialogHeight);
+      .el-dialog__body {
+        height: calc(100% - 84px);
+        overflow: auto;
+        box-sizing: border-box;
+        .el-button {
+          margin-right: 10px;
+        }
+        .template-form-dialog_form {
+          width: 100%;
+          padding: 0;
+          .base-main_box {
+            box-sizing: border-box;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            padding: 0 20px;
+            #printData {
+              max-height: calc(var(--dialogHeight) - 170px);
+              overflow-y: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/packages/TemplateIframeDialog/index.js

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

package/packages/TemplateIframeDialog/src/main.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-dialog
+    title="url内容"
+    :visible.sync="dialogVisible"
+    :width="dialogWidth"
+    :style="{ '--dialogHeight': dialogHeight }"
+    custom-class="template-iframe-dialog"
+    top="5vh"
+  >
+    <iframe
+      width="100%"
+      class="template-iframe-dialog_iframe"
+      frameborder="0"
+      hspace="0"
+      :src="url"
+    ></iframe>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'HtTemplateIframeDialog',
+    data() {
+      return {
+        dialogVisible: false,
+        dialogWidth: '70%',
+        dialogHeight: '740px',
+        url: '',
+      }
+    },
+    methods: {
+      showDialog(param) {
+        this.url = param.url
+        if (param.dialogWidth) {
+        }
+        this.dialogWidth =
+          param.dialogWidth && String(param.dialogWidth).includes('px')
+            ? param.dialogWidth
+            : param.dialogWidth
+            ? param.dialogWidth + 'px'
+            : '70%'
+        this.dialogHeight =
+          param.dialogHeight && String(param.dialogHeight).includes('px')
+            ? param.dialogHeight
+            : param.dialogHeight
+            ? param.dialogHeight + 'px'
+            : '740px'
+        this.dialogVisible = true
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep {
+    .template-iframe-dialog {
+      height: var(--dialogHeight);
+      box-sizing: border-box;
+      .el-dialog__body {
+        height: calc(100% - 84px);
+        overflow: auto;
+        box-sizing: border-box;
+        .el-button {
+          margin-right: 10px;
+        }
+        .template-iframe-dialog_iframe {
+          height: calc(100% - 4px);
+        }
+      }
+    }
+  }
+</style>

package/packages/TemplateImportResult/index.js

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

package/packages/TemplateImportResult/src/main.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <el-dialog
+      v-if="dialogVisible"
+      title="导入结果"
+      :visible.sync="dialogVisible"
+      width="70%"
+    >
+      <span>
+        <el-tabs
+          v-model="activeName"
+          type="card"
+          tab-position="top"
+          @tab-click="handleTabClick"
+        >
+          <el-tab-pane
+            v-for="item in data"
+            :key="item.entName"
+            :label="`${item.desc}(${item.entName})`"
+            :name="item.entName"
+          >
+            <el-table :data="item.pageList.rows" border stripe height="500px">
+              <el-table-column type="index" align="center"></el-table-column>
+              <el-table-column label="主键" align="center">
+                <template slot-scope="scope">
+                  <span>
+                    {{ scope.row.dataNode[entMap[item.entName].pkKey] }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="外键" align="center">
+                <template slot-scope="scope">
+                  <span>
+                    {{ scope.row.dataNode[entMap[item.entName].fk] }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否有效" align="center">
+                <template slot-scope="scope">
+                  <el-tag v-if="!scope.row.state" type="danger">否</el-tag>
+                  <el-tag v-if="scope.row.state" type="success">是</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="错误信息"
+                prop="cause"
+                align="center"
+              ></el-table-column>
+              <el-table-column label="是否重复" align="center">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.repeat" type="danger">是</el-tag>
+                  <el-tag v-else type="success">否</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-for="column in attributeMap[item.entName] || []"
+                :key="column.id"
+                :label="column.desc"
+                align="center"
+              >
+                <template slot-scope="scope">
+                  <span>
+                    {{ scope.row.dataNode[column.name] }}
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              :current-page="pageBean.page"
+              :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
+              :page-size="pageBean.pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="pageBean.total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            ></el-pagination>
+          </el-tab-pane>
+        </el-tabs>
+      </span>
+      <span slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="processImportResult">导入</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'TemplateImportResult',
+    props: {
+      templateInfo: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        cacheKey: '',
+        dialogVisible: false,
+        activeName: '',
+        data: [],
+        entMap: {},
+        attributeMap: {},
+        mapLoaded: false,
+        pageBean: {
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        currentIndex: 0,
+      }
+    },
+    methods: {
+      handleSizeChange(pageSize) {
+        this.pageBean.pageSize = pageSize
+        this.loadData(true)
+      },
+      handleCurrentChange(page) {
+        this.pageBean.page = page
+        this.loadData(true)
+      },
+      showDialog(cacheKey) {
+        this.cacheKey = cacheKey
+        this.currentIndex = 0
+        this.loadData()
+        //this.dialogVisible = true
+      },
+      handleTabClick(tab) {
+        this.currentIndex = Number(tab.index)
+        this.pageBean = {
+          page: 1,
+          pageSize: 20,
+        }
+        this.loadData(true)
+      },
+      loadData(isSizeOrPageChange = false) {
+        const this_ = this
+        this.$requestConfig
+          .getTemplateImportResult(this_.cacheKey, this.pageBean)
+          .then((resp) => {
+            const { page, pageSize, total } = resp[this.currentIndex].pageList
+            if (!resp || !resp.length) {
+              this_.$message.error('导入失败')
+            } else {
+              this_.data = resp
+              this.pageBean = {
+                page,
+                pageSize,
+                total,
+              }
+              if (resp.length && !isSizeOrPageChange) {
+                this.activeName = resp[0].entName
+              }
+              let entAttributeMap = {}
+              let entMap = {}
+              if (!this_.mapLoaded) {
+                this.$requestConfig
+                  .getBoDefinition(this_.templateInfo.boDefAlias)
+                  .then((boJson) => {
+                    let fn_ = function(obj) {
+                      entMap[obj.name] = obj
+                      if (obj.attributeList && obj.attributeList.length) {
+                        entAttributeMap[obj.name] = obj.attributeList
+                      }
+                      if (obj.childEnts && obj.childEnts.length) {
+                        obj.childEnts.forEach(fn_)
+                      }
+                    }
+                    fn_(boJson.boEnt)
+                    this_.attributeMap = entAttributeMap
+                    this_.entMap = entMap
+                    this_.mapLoaded = true
+                    this_.dialogVisible = true
+                  })
+              } else {
+                this_.dialogVisible = true
+              }
+            }
+          })
+      },
+      processImportResult() {
+        const loading = this.$loading({
+          text: '正在保存数据',
+        })
+        this.$requestConfig
+          .saveImportResult(this.cacheKey, this.templateInfo.alias)
+          .then((result) => {
+            if (result.state) {
+              this.$message.success(result.message)
+              this.dialogVisible = false
+              loading.close()
+              this.$emit('after-save')
+            }
+          })
+          .catch(() => {
+            loading.close()
+          })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped></style>

package/packages/TemplatePreview/index.js

@@ -0,0 +1,19 @@
+import TemplatePreview from './src/TemplatePreview.vue'
+
+import TemplatePreviewFile from './src/TemplatePreviewFile.vue'
+
+import TemplatePreviewImage from './src/TemplatePreviewImage.vue'
+
+TemplatePreview.install = function (Vue) {
+  Vue.component(TemplatePreview.name, TemplatePreview)
+}
+
+TemplatePreviewFile.install = function (Vue) {
+  Vue.component(TemplatePreviewFile.name, TemplatePreviewFile)
+}
+
+TemplatePreviewImage.install = function (Vue) {
+  Vue.component(TemplatePreviewImage.name, TemplatePreviewImage)
+}
+
+export { TemplatePreview, TemplatePreviewFile, TemplatePreviewImage }

package/packages/TemplatePreview/src/TemplatePreview.vue

@@ -0,0 +1,239 @@
+<template>
+  <div name="data-view" class="template-preview-container" >
+    <span v-if="html" class="template-content">
+      <div v-if="showDateView" class="data_view">
+        <ht-dataview-runtime-template 
+          :key="refreshTime"
+          :template-key="templateKey"
+          :html="html"
+          :searchForm="searchForm"
+          :template-info="templateInfo"
+          :single="single"
+          :task-type="taskType"
+          :is-join-flow="isJoinFlow"
+          :def-key="defKey"
+          :data-view="dataView"
+          :current-table-height="tableHeight"
+          class="data-preview-wrap"
+          :parameterq-querys="parameterqQuerys"
+        />
+      </div>
+    </span>
+    <div v-if="loadedFail" class="loaded-fail__div">报表不存在...</div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import templatePreviewMixin from '@/mixins/templatePreview.js'
+  export default {
+    name: 'HtTemplatePreview',
+    props: {
+      templateKey: { type: String, required: true },
+      parameterqQuerys: String,
+      single: String,
+      taskType: {
+        type: String,
+        default: '',
+      },
+      defKey: String,
+      dataView: Object,
+      isJoinFlow: {
+        type: Boolean,
+        default: false,
+      },
+      tableHeight: {
+        type: [Number, Function],
+      },
+    },
+    data() {
+      return {
+        html: '',
+        templateInfo: {},
+        loadedFail: false,
+        refreshTime: new Date().getTime(),
+        showDateView: true,
+      }
+    },
+    watch: {
+      templateKey: function(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      },
+    },
+    created() {
+      this.init()
+    },
+    methods: {
+      // 根据当前formKey初始化
+      init() {
+        let _me = this
+        this.$requestConfig
+          .getBpmDataTemplateInfo({
+            templateKey: this.templateKey,
+          })
+          .then((result) => {
+            if (result.state) {
+              _me.templateInfo = result.value
+              this.getTemplateDataListForm()
+            } else {
+              this.$message.error(result.message)
+            }
+          })
+      },
+      getTemplateDataListForm() {
+        this.$requestConfig
+          .getTemplateDataListForm(this.templateKey)
+          .then((result) => {
+            if (result.state) {
+              this.html = result.value
+              this.customInit()
+            } else {
+              this.loadedFail = true
+              this.$message.error(result.message || '获取表单列表模板html失败')
+            }
+          })
+      },
+      customInit() {
+        Vue.component('ht-dataview-runtime-template', {
+          mixins: [templatePreviewMixin],
+          props: {
+            templateInfo: {
+              type: Object,
+            },
+            single: String,
+            currentTableHeight: {
+              type: [Number, Function],
+            },
+          },
+          data() {
+            return {}
+          },
+          template: this.html,
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .template-preview-container {
+    height: 100%;
+    .template-content {
+      display: inline-block;
+      height: 100%;
+      width: 100%;
+    }
+    .data_view,
+    .data-preview-wrap {
+      height: 100%;
+    }
+    >>> .navbar-collapse {
+      position: absolute;
+      top: 45%;
+      cursor: pointer;
+      width: 0px;
+      z-index: 99;
+    }
+
+    >>> .navbar-collapse.navbar-collapse-right {
+      top: 45%;
+    }
+
+    >>> .navbar-collapse:hover {
+      transform: scale(1);
+    }
+
+    >>> .navbar-collapse:hover .navbar-collapse-arrow {
+      color: #333333;
+    }
+
+    >>> .navbar-collapse-arrow {
+      position: relative;
+      top: 25%;
+      right: 15px;
+      font-size: 18px;
+      color: #a8a8a8;
+    }
+
+    >>> .navbar-collapse-bg {
+      -webkit-transition: all 0.12s ease;
+      height: 40px;
+      border-bottom: 8px solid transparent;
+      border-right: none;
+      border-left: 12px solid #ebebeb;
+      border-top: 8px solid transparent;
+      opacity: 0.9;
+    }
+  }
+  >>> th.todo-header-row {
+    background-color: #fafafa;
+    font-size: 13px;
+  }
+
+  >>> tr.todo-row {
+    font-size: 13px;
+  }
+
+  .el-container {
+    background-color: #fff;
+  }
+
+  .el-row {
+    margin-bottom: 20px;
+  }
+
+  .el-header {
+    border-bottom: 1.5px solid #ededed;
+  }
+
+  .i {
+    margin-right: 4px;
+  }
+
+  .todo-subject {
+    cursor: pointer;
+  }
+
+  >>> .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;
+  }
+  .data-preview-wrap
+    ::v-deep
+    .dropdown-upload__btn
+    > .el-button-group
+    > button:first-child {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<style lang="scss">
+  .template-dropdown {
+    .el-button:first-child {
+      padding: 0 !important;
+    }
+    .template-dropdown-item {
+      span {
+        display: inline-block;
+        padding: 7px 15px;
+      }
+    }
+  }
+</style>