three-trees-ui 1.0.55 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-trees-ui",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "publicPath": "/ui",
   "author": "hotent",
   "private": false,

package/packages/CustomComponent/src/main.vue

@@ -6,82 +6,201 @@
         :ref="vueObj.alias"
         :data="data"
         :permission="permission"
-        :vueObj="vueObj"
+        :vue-obj="vueObj"
         :component="component"
+        :index="index"
+        :item="item"
       ></component>
     </template>
   </div>
 </template>
 
 <script>
-import Vue from 'vue'
+  import Vue from 'vue'
+  const { Base64 } = require('js-base64')
 
-export default {
-  name: 'HtCustomComponent',
-  componentName: 'HtCustomComponent',
-  props: ['data', 'permission', 'ccAlias'],
-  data() {
-    return {
-      loadOver: false,
-      vueObj: {},
-      component: {},
-      componentName: '',
-    }
-  },
-  methods: {
-    init() {
-      //解析jscode;
-      this.component = {}
-      if (this.vueObj.jsCode) {
-        let jsCode = Base64.decode(this.vueObj.jsCode, 'utf-8')
-        let parseJsCode = function () {
-          return eval('(function(){return {' + jsCode + '} })()')
-        }
-        this.component = parseJsCode()
+  export default {
+    name: 'HtCustomComponent',
+    componentName: 'HtCustomComponent',
+    props: {
+      data: Object,
+      permission: Object,
+      ccAlias: String,
+      item: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      index: {
+        type: Number,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        loadOver: false,
+        vueObj: {},
+        component: {},
+        componentName: '',
       }
+    },
+    mounted() {
+      // this.init();
+    },
+    created() {
+      //根据自定义组件id查询组件对象
+      // this.$http
+      //   .get('${form}/formCustomComponent/v1/getByAlias?alias=' + this.ccAlias)
+      //   .then((resp) => {
+      //     this.vueObj = resp.data
+      //     this.init()
+      //   })
 
-      this.component.props = ['data', 'permission', 'vueObj', 'component']
-      if (this.vueObj.template) {
-        this.component.template = Base64.decode(this.vueObj.template, 'utf-8')
-      } else {
-        this.component.template = '<div></div>'
-      }
-      if (this.vueObj.dataCode) {
-        let dataCodeStr = Base64.decode(this.vueObj.dataCode)
-        let parseDataCode = function () {
-          return eval('(function(){return ' + dataCodeStr + ' })()')
+      this.$requestConfig
+        .getFormCustomComponentByAlias(this.ccAlias)
+        .then((resp) => {
+          this.vueObj = resp
+          this.init()
+        })
+    },
+    methods: {
+      async init() {
+        //解析jscode;
+        this.component = {}
+
+        if (this.vueObj.jsCode) {
+          let jsCode = Base64.decode(this.vueObj.jsCode, 'utf-8')
+          let parseJsCode = function() {
+            return eval('(function(){return {' + jsCode + '} })()')
+          }
+          this.component = parseJsCode()
         }
-        let data = parseDataCode()
-        this.component.data = function () {
-          return data
+
+        this.component.props = [
+          'data',
+          'permission',
+          'vueObj',
+          'component',
+          'index',
+          'item',
+        ]
+        if (this.vueObj.template) {
+          this.component.template = Base64.decode(this.vueObj.template, 'utf-8')
+        } else {
+          this.component.template = '<div></div>'
         }
-      }
 
-      this.componentName = this.ccAlias + '-component'
-      //加载动态组件
-      Vue.component(this.componentName, this.component)
-      //加载完成后显示
-      this.loadOver = true
-    },
-  },
-  mounted() {
-    // this.init();
-  },
-  created() {
-    //根据自定义组件id查询组件对象
-    // this.$http
-    //   .get('${form}/formCustomComponent/v1/getByAlias?alias=' + this.ccAlias)
-    //   .then((resp) => {
-    //     this.vueObj = resp.data
-    //     this.init()
-    //   })
+        // 支持引用 工具类 js
+        const utilJsObj = {}
+        if (this.vueObj.utilJs) {
+          try {
+            const utilJsList = JSON.parse(
+              Base64.decode(this.vueObj.utilJs, 'utf-8')
+            )
+            for (const item of utilJsList) {
+              const name = item.utilJs_name
+              const path = item.utilJs_path.replace('@/', '')
+              if (name && path) {
+                // require 跟 import 都不能直接使用变量
+                const utilJs = await require('../../' + path)
+                utilJsObj[name] = utilJs.default
+              }
+              if ((name && !path) || (!name && path)) {
+                this.$message.error(
+                  'utilJs_name or utilJs_path cannot be empty！'
+                )
+                throw new Error('utilJs_name or utilJs_path cannot be empty！')
+              }
+            }
+          } catch (error) {
+            console.log(error, 'error')
+          }
+        }
 
-    this.$requestConfig
-      .getFormCustomComponentByAlias(this.ccAlias)
-      .then((resp) => {
-        this.vueObj = resp
-        this.init()
-      })
-  },
-}
+        if (this.vueObj.dataCode) {
+          let dataCodeStr = Base64.decode(this.vueObj.dataCode)
+          let parseDataCode = function() {
+            return eval('(function(){return ' + dataCodeStr + ' })()')
+          }
+          let data = parseDataCode()
+          this.component.data = function() {
+            return data
+          }
+        }
+
+        // 支持引用外部组件
+        if (this.vueObj.components) {
+          try {
+            const components = JSON.parse(
+              Base64.decode(this.vueObj.components, 'utf-8')
+            )
+            for (const item of components) {
+              const name = item.components_name
+              const path = item.components_path.replace('@/', '')
+              if (name && path) {
+                // require 跟 import 都不能直接使用变量
+                const component = await require('../../' + path)
+                this.component.components[item.components_name] =
+                  component.default
+              }
+              if ((name && !path) || (!name && path)) {
+                this.$message.error(
+                  'component_name or component_path cannot be empty！'
+                )
+                throw new Error(
+                  'component_name or component_path cannot be empty！'
+                )
+              }
+            }
+          } catch (error) {
+            console.log(error, 'error')
+          }
+        }
+
+        // 支持引用外部js混入
+        if (this.vueObj.mixins) {
+          this.component.mixins = []
+          try {
+            const mixins = JSON.parse(
+              Base64.decode(this.vueObj.mixins, 'utf-8')
+            )
+            for (const item of mixins) {
+              const name = item.mixin_name
+              const path = item.mixin_path.replace('@/', '')
+
+              if (name && path) {
+                // require 跟 import 都不能直接使用变量
+                const mixin = await require('../../' + path)
+                this.component.mixins.push(mixin.default)
+              }
+              if ((name && !path) || (!name && path)) {
+                this.$message.error(
+                  'mixin_name or mixin_path cannot be empty！'
+                )
+                throw new Error('mixin_name or mixin_path cannot be empty！')
+              }
+            }
+          } catch (error) {
+            console.log(error, 'error')
+          }
+        }
+
+        //支持引入css样式
+        if (this.vueObj.cssCode) {
+          let cssCode = Base64.decode(this.vueObj.cssCode, 'utf-8')
+          let stylee = document.createElement('style')
+          stylee.type = 'text/css'
+          stylee.innerHTML = cssCode
+          document.head.appendChild(stylee)
+        }
+
+        this.componentName = this.ccAlias + '-component'
+        //加载动态组件
+        Vue.component(this.componentName, this.component)
+        //加载完成后显示
+        this.loadOver = true
+      },
+    },
+  }
 </script>

package/packages/CustomDialog/src/customDialog.vue

@@ -1094,6 +1094,9 @@
             this.$el,
             'data-index'
           )
+          if (!thisIndex) {
+            thisIndex = utils.getSubScopeElAndIndex(this.$parent.$el).index
+          }
           parentIndex = utils.getSomeAttributeFromParentElement(
             this.$parent.$parent.$el,
             'data-index'

package/packages/Preview/src/FrameViewer.vue

@@ -3,8 +3,8 @@
     <div class="frame-container__body">
       <loading v-if="loading" />
       <div
-        class="frame-viewer__img"
         v-else-if="contentType.indexOf('image') > -1"
+        class="frame-viewer__img"
       >
         <img
           :src="dataSrc"
@@ -103,6 +103,9 @@
 
               console.log('createObjectURL(new Blob([data]))')
             }
+            if (this.mode === 'pdf') {
+              this.dataSrc += '#toolbar=0'
+            }
           })
           .catch((err) => {
             this.$emit('preview-error', err)

package/packages/Preview/src/main.vue

@@ -12,16 +12,16 @@
     <loading v-if="loading" />
     <fill-page v-if="errorMessage" type="2" :tip="errorMessage" />
     <!-- 预览pdf.word等文件格式 -->
-    <pdf-viewer
+    <!-- <pdf-viewer
       v-else-if="mode == 'pdf'"
       :src="src"
       :headers="headerVal"
       :watermark="watermark"
       :watermark-options="watermarkOptions"
       @preview-error="handlePreviewErr"
-    />
+    /> -->
     <frame-viewer
-      v-else-if="mode == 'html' || mode == 'picture'"
+      v-if="mode == 'pdf' || mode == 'html' || mode == 'picture'"
       :src="src"
       :mode="mode"
       :headers="headerVal"
@@ -164,14 +164,14 @@
       }
     },
     computed: {
-      headerVal: function () {
+      headerVal: function() {
         return this.headers
           ? this.headers
           : this.$requestConfig.header
           ? this.$requestConfig.header()
           : null
       },
-      titleVal: function () {
+      titleVal: function() {
         return this.tempTitle ? this.tempTitle : this.title
       },
     },

package/packages/Table/src/Table.vue

@@ -112,8 +112,10 @@
       :highlight-current-row="highlightCurrentRow"
       :row-class-name="rowClassName"
       :cell-class-name="cellClassName"
-      :style="{ height: `${tableMaxHeight ? tableMaxHeight : 400}` + 'px' }"
+      :height="`${tableMaxHeight ? tableMaxHeight : 400}`"
       :row-key="rowKey"
+      :show-summary="showSummary"
+      :summary-method="getSummaries"
       @row-click="handleRowClick"
       @select="handleTableSelect"
       @select-all="handleTableSelect"
@@ -190,6 +192,10 @@
   </el-main>
 </template>
 <script>
+  const METHOD_MAP = {
+    count: 'getCount',
+    sum: 'getSum',
+  }
   import Locale from '@/mixins/locale'
   import Emitter from '@/mixins/emitter'
   import utils from '@/utils.js'
@@ -367,6 +373,18 @@
         type: String,
         default: 'total, sizes, prev, pager, next, jumper',
       },
+      tableMainName: {
+        type: String,
+        default: '',
+      },
+      tableDataFields: {
+        type: Array,
+        default: () => [],
+      },
+      tableDataTotal: {
+        type: Object,
+        default: () => {},
+      },
     },
     data() {
       return {
@@ -388,6 +406,7 @@
         selection: [],
         tablePanelHeight: 0,
         isCardView: this.cardView,
+        showSummary: false,
       }
     },
     computed: {
@@ -447,6 +466,13 @@
       customTableHeight() {
         this.calcTableHeight()
       },
+      tableDataFields: {
+        immediate: true,
+        handler: function(val) {
+          // 只要显示列有一个属性设置了合计，则开启表格合计功能
+          this.showSummary = val.some((i) => i.summaryMethod)
+        },
+      },
     },
     created() {
       this.initCustomColumns()
@@ -692,8 +718,19 @@
               me.$refs.quickSearch.$children[0].$el.children[0].focus()
           })
         }
-
-        this.$emit('load', { ...param }, loadedHandler, isSearchBtn)
+        // 是否需要后端统计
+        // 只要 表格列设置中，存在 合计方式为求和 且 合计范围不为 单页合计，即需要请求
+        const needRequestTotal = this.tableDataFields.some(
+          (field) =>
+            field.summaryMethod === 'sum' && field.summaryType !== 'single'
+        )
+        this.$emit(
+          'load',
+          { ...param },
+          loadedHandler,
+          isSearchBtn,
+          needRequestTotal
+        )
         this.$emit('loading', { ...param }, loadedHandler, isSearchBtn)
       },
       // 通过列属性获取列标签
@@ -862,13 +899,10 @@
               this.$refs.toolbarContainer.clientHeight) ||
             0
 
-          // templatePreview 中 nopagination 为 true，且有自定义的分页控件 占用 65
           const paginationPanelHeight =
-            this.$route.name === 'TemplatePreview' && this.nopagination
-              ? 65
-              : (this.$refs.paginationPanel &&
-                  this.$refs.paginationPanel.clientHeight) ||
-                0
+            (this.$refs.paginationPanel &&
+              this.$refs.paginationPanel.clientHeight) ||
+            0
           // 下外边距
           const searchPanelBottom = searchPanelHeight > 0 ? 18 : 0
           const toolbarPanelBottom = toolbarPanelHeight > 0 ? 18 : 0
@@ -909,6 +943,91 @@
           )
         })
       },
+      getSummaries(param) {
+        const { columns, data } = param
+        const sums = []
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计'
+            return
+          }
+          if (column.property) {
+            const tableFieldItem = this.getTableFieldItem(column.property)
+            if (tableFieldItem) {
+              const {
+                summaryMethod,
+                summaryType,
+                name,
+                tableName,
+                oldTableField,
+                fieldDesc,
+              } = tableFieldItem
+              let field = ''
+              if (oldTableField) {
+                // 数据列表
+                field = this.getPropTable(
+                  name,
+                  tableName,
+                  oldTableField
+                ).toLowerCase()
+              } else {
+                // 数据视图
+                field = fieldDesc.toLowerCase()
+              }
+              switch (summaryType) {
+                // 单页统计
+                case 'single':
+                  // 前端合计当前页
+                  sums[index] = this[METHOD_MAP[summaryMethod]](data, name)
+                  break
+                default:
+                  if (summaryMethod === 'sum') {
+                    // 后端合计全部页
+                    sums[index] = this.tableDataTotal[field]
+                  } else if (summaryMethod === 'count') {
+                    // 计数 计算当前列不为空的个数
+                    sums[index] = this[METHOD_MAP[summaryMethod]](data, name)
+                  }
+                  break
+              }
+            } else {
+              sums[index] = ''
+            }
+          } else {
+            sums[index] = ''
+          }
+        })
+
+        return sums
+      },
+      getTableFieldItem(property) {
+        return this.tableDataFields.find((i) => {
+          let field = ''
+          if (i.oldTableField) {
+            // 表单列表
+            field = this.getPropTable(i.name, i.tableName, i.oldTableField)
+            return field === property
+          } else {
+            // 数据视图
+            return i.fieldDesc.toLowerCase() === property.toLowerCase()
+          }
+        })
+      },
+      getCount(data, field) {
+        const hasValueList = data.filter((i) => i[field])
+        return hasValueList.length
+      },
+      getSum(data, field) {
+        const sumResult = data.reduce((pre, cur) => pre + Number(cur[field]), 0)
+        return sumResult ? utils.thousandBit(sumResult) : sumResult
+      },
+      getPropTable(field, tableName, oldTableField) {
+        if (this.tableMainName.toLowerCase() == tableName.toLowerCase()) {
+          return `t.${oldTableField}`
+        } else {
+          return `${tableName}.${oldTableField}`
+        }
+      },
     },
   }
 </script>

package/packages/TemplateForm/src/main.vue

@@ -33,10 +33,43 @@
           v-if="isShow && action != 'editDraft'"
           type="primary"
           :disabled="disabled"
-          @click="boSave()"
+          @click="SetOpinionText()"
         >
           提交
         </el-button>
+        <!-- 是否需要保存意见对话框 --start -->
+        <el-dialog
+          id="needOpinionDialog"
+          title="请填写修改理由："
+          :visible.sync="needOpinionDialog"
+          width="30%"
+          :before-close="closeOpinionDialog"
+        >
+          <el-container>
+            <el-main style="padding:0px;height:80px">
+              <ht-input
+                v-model="needOpinionDetail"
+                type="textarea"
+                name="修改理由"
+                :validate="{ required: true }"
+                style="width:100%"
+              ></ht-input>
+            </el-main>
+          </el-container>
+          <div slot="footer" class="dialog-footer">
+            <el-button
+              :disabled="needOpinionDetail === '' ? true : false"
+              type="primary"
+              @click="boSave()"
+            >
+              提交
+            </el-button>
+            <el-button type="default" @click="closeOpinionDialog()">
+              取消
+            </el-button>
+          </div>
+        </el-dialog>
+        <!-- 是否需要保留意见对话框 --end -->
         <!-- <el-button
           v-if="action === 'editDraft'"
           type="primary"
@@ -107,6 +140,10 @@
         type: Boolean,
         default: false,
       },
+      //是否需要保存意见
+      needOpinion: {
+        type: String,
+      },
     },
     data() {
       return {
@@ -131,6 +168,8 @@
         tempAlias: '',
         startLable: '发起流程',
         printLable: '打印',
+        needOpinionDialog: false,
+        needOpinionDetail: '',
       }
     },
     computed: {
@@ -244,6 +283,15 @@
               boAlias: this.boAlias,
               boData: formData,
             }
+            //把修改原因也设置到boData里面
+            if (
+              this.action === 'edit' &&
+              ((this.needOpinion && this.needOpinion === '1') ||
+                (this.$route.query.needOpinion &&
+                  this.$route.query.needOpinion === '1'))
+            ) {
+              data.boData.needOpinionDetail = this.needOpinionDetail
+            }
             this.disabled = true
 
             if (delDraftId) {
@@ -255,6 +303,8 @@
               .boSave(data)
               .then((result) => {
                 if (result.state) {
+                  //保存成功时清空意见框
+                  this.needOpinionDetail = ''
                   if (this.closeSave) {
                     this.close()
                     return
@@ -292,6 +342,27 @@
           })
           .catch(() => {})
       },
+      SetOpinionText() {
+        console.log(
+          this.action,
+          this.needOpinion,
+          this.$route.query.needOpinion
+        )
+        if (
+          this.action === 'edit' &&
+          ((this.needOpinion && this.needOpinion === '1') ||
+            (this.$route.query.needOpinion &&
+              this.$route.query.needOpinion === '1'))
+        ) {
+          //只有编辑的时候需要填写意见框
+          this.needOpinionDialog = true
+        } else {
+          this.boSave()
+        }
+      },
+      closeOpinionDialog() {
+        this.needOpinionDialog = false
+      },
       boSaveAndDelDraft() {
         this.boSave(this.draftId)
       },