three-trees-ui 1.0.0 → 1.0.2

package/packages/CustomDialog/src/customMobileDialog.vue

@@ -278,6 +278,7 @@
       sunIndex: Number,
       subPath: String,
       currentSubData: Array,
+      dialogConfig: Object,
     },
     data() {
       return {
@@ -349,6 +350,19 @@
           this.selectIds.length > 0 ? `(${this.selectIds.length})` : ''
         return `${this.$t('ht.common.confirm')}${selectedText}`
       },
+      jumpParamKey() {
+        return this.dialogConfig && this.dialogConfig.jumpParamKey
+          ? this.dialogConfig.jumpParamKey
+          : ''
+      },
+      // 是否保存成跳转url参数
+      isHaveJumpUrl() {
+        return (
+          this.dialogConfig &&
+          ((this.isMobile && this.dialogConfig.mobileUrl) ||
+            (!this.isMobile && this.dialogConfig.pcUrl))
+        )
+      },
     },
     methods: {
       searchInputChange() {
@@ -396,122 +410,124 @@
         this.search(true)
       },
       showDialog() {
-        const this_ = this
         this.fixedParams = {}
+        // 如果已存在配置信息就不去请求配置信息 直接初始化数据
+        if (this.dialogConfig) {
+          this.initDialog(this.dialogConfig)
+          return
+        }
         var alias = this.custdialog.custDialog.alias
         this.$requestConfig
           .getCustomDialogByAlias(alias)
           .then((customDialog) => {
-            if (!customDialog || !customDialog.alias) {
-              this.$message.error('对话框别名【' + alias + '】不存在！')
-              return
-            }
-            if (customDialog.style == 1) {
-              var displaylist = JSON.parse(customDialog.displayfield)
-              this_.nodeKey = displaylist.id
+            this.initDialog(customDialog)
+          })
+      },
+      initDialog(customDialog) {
+        let alias = this.custdialog.custDialog.alias
+        const this_ = this
+        if (!customDialog || !customDialog.alias) {
+          this.$message.error('对话框别名【' + alias + '】不存在！')
+          return
+        }
+        if (customDialog.style == 1) {
+          var displaylist = JSON.parse(customDialog.displayfield)
+          this_.nodeKey = displaylist.id
+        }
+        if (customDialog.needPage && customDialog.requestType === 'POST') {
+          let obj = {}
+          this.getLastKeyByPath(obj, customDialog.pageKey, 1)
+          this.getLastKeyByPath(obj, customDialog.pageSizeKey, 10)
+          this.getLastKeyByPath(obj, customDialog.totalKey, true)
+          const exp = utils.parseExp(customDialog.dataParam, obj, true)
+          if (exp) {
+            const params = JSON.parse(exp)
+            if (params.pageBean) {
+              this.pagination = {
+                ...params.pageBean,
+              }
             }
-            if (customDialog.needPage && customDialog.requestType === 'POST') {
+          }
+        }
+        //对话框按表单字段查询（参数传入的）
+        let bindList = this_.custdialog.custDialog.conditions
+        this_.param = [] //绑定的表单字段
+        if (bindList.length > 0) {
+          bindList.forEach((ele) => {
+            //绑定表单字段
+            if (
+              ele.bind &&
+              (ele.defaultType == '3' || ele.bind.startsWith('data.searchForm'))
+            ) {
               let obj = {}
-              this.getLastKeyByPath(obj, customDialog.pageKey, 1)
-              this.getLastKeyByPath(obj, customDialog.pageSizeKey, 10)
-              this.getLastKeyByPath(obj, customDialog.totalKey, true)
-              const exp = utils.parseExp(customDialog.dataParam, obj, true)
-              if (exp) {
-                const params = JSON.parse(exp)
-                if (params.pageBean) {
-                  this.pagination = {
-                    ...params.pageBean,
-                  }
-                }
-              }
+              obj.field = ele.field
+              obj.bind = ele.bind
+              obj.bindType = ele.bindType
+              this_.param.push(obj)
             }
-            //对话框按表单字段查询（参数传入的）
-            let bindList = this_.custdialog.custDialog.conditions
-            this_.param = [] //绑定的表单字段
-            if (bindList.length > 0) {
-              bindList.forEach((ele) => {
-                //绑定表单字段
-                if (
-                  ele.bind &&
-                  (ele.defaultType == '3' ||
-                    ele.bind.startsWith('data.searchForm'))
-                ) {
-                  let obj = {}
-                  obj.field = ele.field
-                  obj.bind = ele.bind
-                  obj.bindType = ele.bindType
-                  this_.param.push(obj)
-                }
-                // bindType 1 表单字段 2固定 3脚本
-                if (ele.defaultType == '3' && ele.bindType === 2) {
-                  this_.fixedParams[ele.field] = ele.bind || ''
-                }
-              })
+            // bindType 1 表单字段 2固定 3脚本
+            if (ele.defaultType == '3' && ele.bindType === 2) {
+              this_.fixedParams[ele.field] = ele.bind || ''
             }
+          })
+        }
 
-            //判断对话框查询是否有条件
-            let userInputList = JSON.parse(customDialog.conditionfield)
-            this_.conditionBind = []
-            let queryParams = []
-            let placeholders = []
-            if (userInputList.length > 0) {
-              userInputList.forEach((ele) => {
-                var obj = {}
-                //条件查询参数（用户输入的） 文本框输入 defaultType 1 用户输入 2固定值 3参数传入 5脚本
-                if (ele.defaultType == '1') {
-                  obj[ele.field] = ''
-                  queryParams.push(obj)
-                  // queryParams[ele.field] = "";
-                  this_.conditionBind.push(ele)
-                  placeholders.push('请输入' + ele.comment)
-                }
-                if (ele.defaultType == '2' && ele.defaultValue) {
-                  this_.fixedParams[ele.field] = ele.defaultValue
-                }
-              })
-              this.$set(this, 'queryParams', queryParams)
-              this.$set(this, 'placeholders', placeholders)
+        //判断对话框查询是否有条件
+        let userInputList = JSON.parse(customDialog.conditionfield)
+        this_.conditionBind = []
+        let queryParams = []
+        let placeholders = []
+        if (userInputList.length > 0) {
+          userInputList.forEach((ele) => {
+            var obj = {}
+            //条件查询参数（用户输入的） 文本框输入 defaultType 1 用户输入 2固定值 3参数传入 5脚本
+            if (ele.defaultType == '1') {
+              obj[ele.field] = ''
+              queryParams.push(obj)
+              // queryParams[ele.field] = "";
+              this_.conditionBind.push(ele)
+              placeholders.push('请输入' + ele.comment)
             }
-            if (customDialog.style == 0 || customDialog.style == 2) {
-              //列表
-              this_.customDialogShow({
-                alias: alias,
-                customDialog: customDialog,
-              })
-            } else if (customDialog.style == 1) {
-              //树形
-              this_.pageParam = { alias: alias, customDialog: customDialog }
-              this_.customDialog = customDialog
-              let param = {}
-              this_.conditionfieldTree = []
-              //判断是否存在条件
-              if (customDialog.conditionfield) {
-                this_.conditionfieldTree = JSON.parse(
-                  customDialog.conditionfield
-                )
-                if (this_.conditionfieldTree.length > 0) {
-                  for (
-                    let i = this_.conditionfieldTree.length - 1;
-                    i >= 0;
-                    i--
-                  ) {
-                    //判断条件字段是否是动态传入（defaultType：4：动态传入，2：固定值 ）
-                    if (this_.conditionfieldTree[i].defaultType == '4') {
-                      param[this_.conditionfieldTree[i].field] =
-                        this_.conditionfieldTree[i].comment
-                    }
-                  }
+            if (ele.defaultType == '2' && ele.defaultValue) {
+              this_.fixedParams[ele.field] = ele.defaultValue
+            }
+          })
+          this.$set(this, 'queryParams', queryParams)
+          this.$set(this, 'placeholders', placeholders)
+        }
+        if (customDialog.style == 0 || customDialog.style == 2) {
+          //列表
+          this_.customDialogShow({
+            alias: alias,
+            customDialog: customDialog,
+          })
+        } else if (customDialog.style == 1) {
+          //树形
+          this_.pageParam = { alias: alias, customDialog: customDialog }
+          this_.customDialog = customDialog
+          let param = {}
+          this_.conditionfieldTree = []
+          //判断是否存在条件
+          if (customDialog.conditionfield) {
+            this_.conditionfieldTree = JSON.parse(customDialog.conditionfield)
+            if (this_.conditionfieldTree.length > 0) {
+              for (let i = this_.conditionfieldTree.length - 1; i >= 0; i--) {
+                //判断条件字段是否是动态传入（defaultType：4：动态传入，2：固定值 ）
+                if (this_.conditionfieldTree[i].defaultType == '4') {
+                  param[this_.conditionfieldTree[i].field] =
+                    this_.conditionfieldTree[i].comment
                 }
               }
-              //有动态传入的字段
-              if (JSON.stringify(param) != '{}') {
-                this_.dialogVisible = true
-              } else {
-                //无动态传入的字段
-                this_.customDialogTreeShow(this_.pageParam)
-              }
             }
-          })
+          }
+          //有动态传入的字段
+          if (JSON.stringify(param) != '{}') {
+            this_.dialogVisible = true
+          } else {
+            //无动态传入的字段
+            this_.customDialogTreeShow(this_.pageParam)
+          }
+        }
       },
       treeClick(data) {
         // 单选
@@ -648,13 +664,22 @@
           }
           // 添加用户id 岗位id 组织id
           try {
-            if (this.$requestConfig.getUserId()) {
+            if (
+              this.$requestConfig.getUserId &&
+              this.$requestConfig.getUserId()
+            ) {
               ctx.userId = this.$requestConfig.getUserId()
             }
-            if (this.$requestConfig.getOrgId()) {
+            if (
+              this.$requestConfig.getOrgId &&
+              this.$requestConfig.getOrgId()
+            ) {
               ctx.orgId = this.$requestConfig.getOrgId()
             }
-            if (this.$requestConfig.getPostId()) {
+            if (
+              this.$requestConfig.getPostId &&
+              this.$requestConfig.getPostId()
+            ) {
               ctx.postId = this.$requestConfig.getPostId()
             }
           } catch (e) {
@@ -751,8 +776,19 @@
         this.selectOrgs = this.convertComment2Field(str, field)
         this.custdialog.custDialog.mappingConf.forEach((con) => {
           var val = ''
-          str.forEach((item) => {
-            val += item[con.from] + ','
+          str.forEach((item, index) => {
+            // 此处添加url跳转参数保存逻辑
+            if (
+              this.jumpParamKey &&
+              this.isHaveJumpUrl &&
+              this.modelName == 'data.' + con['target'][0]
+            ) {
+              val += `${item[con.from]}¯${this.jumpParamKey}:${
+                this.selectOrgs[index][this.jumpParamKey]
+              },`
+            } else {
+              val += item[con.from] + ','
+            }
           })
           if (this.modelName == 'data.' + con['target'][0]) {
             utils.setValueByPath(
@@ -912,13 +948,22 @@
           ctx.total = pageBean.pageBean.total
           // 添加用户id 岗位id 组织id
           try {
-            if (this.$requestConfig.getUserId()) {
+            if (
+              this.$requestConfig.getUserId &&
+              this.$requestConfig.getUserId()
+            ) {
               ctx.userId = this.$requestConfig.getUserId()
             }
-            if (this.$requestConfig.getOrgId()) {
+            if (
+              this.$requestConfig.getOrgId &&
+              this.$requestConfig.getOrgId()
+            ) {
               ctx.orgId = this.$requestConfig.getOrgId()
             }
-            if (this.$requestConfig.getPostId()) {
+            if (
+              this.$requestConfig.getPostId &&
+              this.$requestConfig.getPostId()
+            ) {
               ctx.postId = this.$requestConfig.getPostId()
             }
           } catch (e) {
@@ -1211,7 +1256,17 @@
           var from = con.from.toLowerCase()
           str.forEach((item) => {
             if (item) {
-              val += decodeURIComponent(item[from]) + ','
+              if (
+                this.jumpParamKey &&
+                this.isHaveJumpUrl &&
+                this.modelName == 'data.' + con['target'][0]
+              ) {
+                val += `${decodeURIComponent(item[from])}¯${
+                  this.jumpParamKey
+                }:${item[this.jumpParamKey]},`
+              } else {
+                val += decodeURIComponent(item[from]) + ','
+              }
             }
           })
           if (this.modelName == 'data.' + con['target'][0]) {

package/packages/CustomDialog/src/main.vue

@@ -22,9 +22,14 @@
               v-for="(item, index) in inputVal"
               :key="item.value"
               class="el-tag el-tag--info el-tag--small"
-              @click="showEditInput"
+              @click.stop="jumpUrl(item)"
             >
-              <span class="el-select__tags-text">{{ item.value }}</span>
+              <span
+                class="el-select__tags-text"
+                :class="{ 'src-color': isSrcColor }"
+              >
+                {{ item.value }}
+              </span>
               <i
                 class="el-tag__close el-icon-close"
                 @click.stop="removeSelectOrg(index)"
@@ -94,9 +99,11 @@
         :key="item.value"
         class="el-tag el-tag--info el-tag--small"
         style="margin-right: 8px"
-        @click.stop
+        @click.stop="jumpUrl(item)"
       >
-        <span class="el-select__tags-text">{{ item.value }}</span>
+        <span class="el-select__tags-text" :class="{ 'src-color': isSrcColor }">
+          {{ item.value }}
+        </span>
       </span>
     </span>
     <custom-mobile-dialog
@@ -108,6 +115,7 @@
       :sun-index="sunIndex"
       :sub-path="subPath"
       :current-sub-data="currentSubData"
+      :dialog-config="dialogConfig"
       @calacInputSuffixHeight="calacInputSuffixHeight"
       @updateInput="updateInput"
     ></custom-mobile-dialog>
@@ -121,6 +129,8 @@
       :sun-index="sunIndex"
       :sub-path="subPath"
       :current-sub-data="currentSubData"
+      :is-read-only="!inputWriteable"
+      :dialog-config="dialogConfig"
       @calacInputSuffixHeight="calacInputSuffixHeight"
       @updateInput="updateInput"
     ></custom-dialog>
@@ -161,6 +171,7 @@
     },
     data() {
       return {
+        dialogConfig: null, // 对话框配置信息
         isEditInputShow: false,
         customValue: '',
         defualtTooltipplacement: 'bottom',
@@ -200,7 +211,19 @@
           }
           let result = []
           nameAry.forEach((m) => {
-            let n = { value: m }
+            // 带url跳转参数的 使用上横杆区分参数 值格式为 名称¯跳转key:跳转value
+            let n = {}
+            if (m.includes('¯') && m.split('¯')[1]) {
+              n.value = m.split('¯')[0]
+              let jumpParamStr = m.split('¯')[1]
+              if (jumpParamStr) {
+                let jumpParam = jumpParamStr.split(':')
+                n.jumpParamKey = jumpParam[0]
+                n.jumpParamValue = jumpParam[1]
+              }
+            } else {
+              n = { value: m }
+            }
             result.push(n)
           })
           return result
@@ -209,6 +232,18 @@
       isAllowCustom() {
         return this.custdialog && this.custdialog.allowInput
       },
+      // 是否展示可跳转颜色
+      isSrcColor() {
+        return (
+          this.dialogConfig &&
+          ((this.isMobile && this.dialogConfig.mobileUrl) ||
+            (!this.isMobile && this.dialogConfig.pcUrl))
+        )
+      },
+    },
+    created() {
+      // 获取对话框配置，看是否有配置url跳转
+      this.getDialogConfig()
     },
     mounted() {
       const { subScopeEl } = utils.getSubScopeElAndIndex(this.$el)
@@ -233,6 +268,72 @@
       this.calacInputSuffixWidth()
     },
     methods: {
+      // 跳转url页面
+      jumpUrl(item) {
+        if (!this.dialogConfig || !this.dialogConfig.pcUrl) {
+          return
+        }
+        let url = this.isMobile
+          ? this.dialogConfig.mobileUrl
+          : this.dialogConfig.pcUrl
+        // 获取通用token 和 url翻译
+        Promise.all([
+          this.$requestConfig.getThreeTreeToken(),
+          this.transformUrl(url),
+        ]).then((res) => {
+          if (res[0] && res[0].code == 200) {
+            let token = res[0].value
+            let endUrl = res[1]
+            // 拼接参数 token和参数
+            if (endUrl.indexOf('?') == -1) {
+              endUrl += `?bnsToken=${token}&${item.jumpParamKey}=${item.jumpParamValue}`
+            } else {
+              endUrl += `&bnsToken=${token}&${item.jumpParamKey}=${item.jumpParamValue}`
+            }
+            window.open(endUrl)
+          } else {
+            this.$message.info(res.message || '获取token失败！')
+          }
+        })
+      },
+      // 替换url中域名通配符 需要发送接口
+      transformUrl(url) {
+        return new Promise((resolve) => {
+          var reg = /(\$\{(\w+)\})/
+          var match = reg.exec(url)
+          if (match) {
+            let alias = match[2]
+            if (alias) {
+              this.$requestConfig.getHostByAlias(alias).then((res) => {
+                if (res && res.value && res.value.rootAddress) {
+                  resolve(url.replace(match[1], res.value.rootAddress))
+                } else {
+                  resolve(url)
+                }
+              })
+            } else {
+              resolve(url)
+            }
+          } else {
+            resolve(url)
+          }
+        })
+      },
+      // 获取对话框配置
+      getDialogConfig() {
+        if (
+          this.custdialog &&
+          this.custdialog.custDialog &&
+          this.custdialog.custDialog.alias
+        )
+          this.$requestConfig
+            .getCustomDialogByAlias(this.custdialog.custDialog.alias)
+            .then((response) => {
+              if (response) {
+                this.dialogConfig = response
+              }
+            })
+      },
       editInputBlur() {
         this.$emit('input', this.customValue)
         this.isEditInputShow = false
@@ -482,4 +583,8 @@
     display: block;
     margin: 8px 0;
   }
+  .src-color {
+    cursor: pointer;
+    color: #409eff;
+  }
 </style>