three-trees-ui 1.0.99 → 1.1.1

package/packages/UserSelector/src/main.vue

@@ -16,23 +16,48 @@
       @click="showDialog"
     >
       <div
-        v-if="inputWriteable"
-        class="el-input el-input--suffix"
-        :class="{ 'custom-selector-mobile': isMobile }"
+        ref="tagSpans"
+        class="user-selector_block"
+        :class="{
+          'el-select__tags_readonly': !inputWriteable,
+          'el-select__tags': inputWriteable,
+        }"
       >
-        <div v-if="isMobile" class="custom-selector-mobile-box">
-          <div
+        <span class="tag-wrap">
+          <span
             v-for="(item, index) in selectors"
             :key="index"
-            class="common-selector-tag"
+            class="el-tag el-tag--info el-tag--small"
+            @click.stop
           >
-            <span>{{ item.fullname }}</span>
-            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
-          </div>
-        </div>
+            <span class="el-select__tags-text">{{ item.fullname }}</span>
+            <i
+              v-if="inputWriteable"
+              class="el-tag__close el-icon-close"
+              @click.stop="handleRemove(item)"
+            ></i>
+          </span>
+          <template v-if="!selectors.length && value">
+            <span
+              v-for="(item, index) in value.split(',')"
+              :key="index"
+              class="el-tag el-tag--info el-tag--small"
+              @click.stop
+            >
+              <span class="el-select__tags-text">{{ item }}</span>
+              <i
+                v-if="inputWriteable"
+                class="el-tag__close el-icon-close"
+                @click.stop="handleRemoveText(index)"
+              ></i>
+            </span>
+          </template>
+        </span>
+      </div>
+      <div v-if="inputWriteable" class="el-input el-input--suffix">
         <input
           ref="inputEl"
-          v-model="calcInputValue"
+          v-model="value"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -40,71 +65,66 @@
           autocomplete="off"
           class="el-input__inner"
           :placeholder="placeholder"
+          :style="{
+            height: inputSuffixHeight + 'px',
+            lineHeight: inputSuffixHeight + 'px',
+          }"
         />
         <span class="el-input__suffix">
           <span class="el-input__suffix-inner">
-            <i
-              v-if="value"
-              class="el-icon-circle-close clear-icon"
-              @click.stop="clear"
-            ></i>
+            <i class="el-icon-circle-close clear-icon" @click.stop="clear"></i>
             <ht-icon name="user" class="user-icon" />
           </span>
         </span>
       </div>
-      <div v-else class="el-select__tags_readonly">
-        <span>{{ calcInputValue }}</span>
-      </div>
     </div>
     <ht-field-tail :field-name="inputName" :input-value="value" />
-    <template v-if="isDialogShow">
-      <user-selector-dialog
-        v-if="!isMobile"
-        ref="userSelectorDialog"
-        v-model="selectors"
-        :title="title"
-        :append-to-body="appendToBody"
-        :data="data"
-        :pagination="pagination"
-        :select-label="selectLabel"
-        :quick-search-props="quickSearchProps"
-        :single="single"
-        :search-placeholder="searchPlaceholder"
-        :primary-field="primaryField"
-        :mode="mode"
-        @filter-type-change="(type) => $emit('filter-type-change', type)"
-        @search="(word) => $emit('search', word)"
-        @reset="() => $emit('reset')"
-        @row-click="(row) => $emit('row-click', row)"
-        @select-data="(data) => $emit('select-data', data)"
-        @page-change="(page) => $emit('page-change', page)"
-        @size-change="(size) => $emit('size-change', size)"
-        @contact-group-change="(group) => $emit('contact-group-change', group)"
-        @load-org-user="(org) => $emit('load-org-user', org)"
-        @load-policy-user="(policy) => $emit('load-policy-user', policy)"
-        @load-role-user="(role) => $emit('load-role-user', role)"
-      />
-      <user-selector-mobile-dialog
-        v-else
-        ref="userSelectorMobileDialog"
-        v-model="selectors"
-        :title="title"
-        :append-to-body="appendToBody"
-        :data="data"
-        :pagination="pagination"
-        :select-label="selectLabel"
-        :quick-search-props="quickSearchProps"
-        :single="single"
-        :search-placeholder="searchPlaceholder"
-        :primary-field="primaryField"
-        @search="(word) => $emit('search', word)"
-        @reset="() => $emit('reset')"
-        @row-click="(row) => $emit('row-click', row)"
-        @select-data="(data) => $emit('select-data', data)"
-        @page-change="(page) => $emit('page-change', page)"
-        @getCustomQuerys="(querys) => $emit('getCustomQuerys', querys)"
-      />
-    </template>
+    <user-selector-dialog
+      v-if="!isMobile"
+      ref="userSelectorDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      :mode="mode"
+      @filter-type-change="(type) => $emit('filter-type-change', type)"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
+      @contact-group-change="(group) => $emit('contact-group-change', group)"
+      @load-org-user="(org) => $emit('load-org-user', org)"
+      @load-policy-user="(policy) => $emit('load-policy-user', policy)"
+      @load-role-user="(role) => $emit('load-role-user', role)"
+    />
+    <user-selector-mobile-dialog
+      v-else
+      ref="userSelectorMobileDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+      @getCustomQuerys="(querys) => $emit('getCustomQuerys', querys)"
+    />
   </div>
 </template>
 <script>
@@ -178,23 +198,11 @@
     },
     data() {
       return {
-        isDialogShow: false,
         inputSuffixHeight: 30,
         selectors: [],
       }
     },
     computed: {
-      calcInputValue: function() {
-        let name = ''
-        if (this.selectors) {
-          name = this.selectors
-            .map((k) => {
-              return k.fullname
-            })
-            .join(',')
-        }
-        return name
-      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -308,8 +316,14 @@
         // 通过valueChange事件发布值变更消息
         setTimeout(() => {
           this.$emit('valueChange', ary.join(','), newVal)
+          if (newVal.length > 0) {
+            this.calacInputSuffixHeight()
+          } else {
+            this.inputSuffixHeight = 30
+          }
           if (this.$refs.inputEl) {
-            this.$validator.validate(this.inputName)
+            this.$refs.inputEl.focus()
+            this.$refs.inputEl.blur()
           }
         }, 10)
       },
@@ -447,14 +461,10 @@
           this.selectors = tmpAry
         }
       },
-      async showDialog() {
+      showDialog() {
         if (!this.inputWriteable) {
           return
         }
-        if (this.isDialogShow === false) {
-          this.isDialogShow = true
-          await this.$nextTick()
-        }
         if (this.isMobile) {
           this.$refs.userSelectorMobileDialog.showDialog()
         } else {
@@ -470,12 +480,12 @@
       },
       // 更新当前输入框的高度来适配已选数据的高度
       calacInputSuffixHeight() {
-        // if (!this.$refs.tagSpans) return
-        // if (this.$refs.tagSpans.offsetHeight) {
-        //   this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
-        // } else {
-        //   this.inputSuffixHeight = 30
-        // }
+        if (!this.$refs.tagSpans) return
+        if (this.$refs.tagSpans.offsetHeight) {
+          this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+        } else {
+          this.inputSuffixHeight = 30
+        }
       },
       handleRemoveText(index) {
         if (!this.value) {
@@ -489,7 +499,6 @@
   }
 </script>
 <style lang="scss" scoped>
-  @import '~@/styles/selector.scss';
   .user-selector_block {
     width: calc(100% - 25px);
     background: #fff;
@@ -500,10 +509,6 @@
     top: 50%;
     background: unset !important;
   }
-  .el-input__inner {
-    height: 32px;
-    line-height: 32px;
-  }
 
   .el-input__inner[aria-invalid='true'] {
     border-color: #f56c6c;

package/src/directive/formulas.js

@@ -32,14 +32,8 @@ const formula = {
         vnode.context.$set(vnode.context.data[pathAry[1]], pathAry[2], '')
       } else if (pathAry.length == 4) {
         let key = /^(\w+)\[(\d+)\]$/.exec(pathAry[2])
-        // 存在dialogData则是子表编辑模式，dialogData.dialogVisible为true则是打开弹窗
-        const name = (pathAry[2] || '').substring(4).split('[')
-        const dialogData =
-          vnode.context.$refs[`HtSubEditModeDialog_${name[0]}`] || {}
         vnode.context.$set(
-          dialogData.dialogVisible
-            ? dialogData.row
-            : vnode.context.data[pathAry[1]][key[1]][key[2]],
+          vnode.context.data[pathAry[1]][key[1]][key[2]],
           pathAry[3],
           ''
         )

package/src/index.js

@@ -42,7 +42,6 @@ import HtEditor from '../packages/Editor/index'
 import HtPicture from '../packages/picture/index'
 import HtExplain from '../packages/Explain/index'
 import HtAvatarImage from '../packages/Avatar/index'
-import HtSubEditModeDialog from '../packages/SubEditModeDialog/index'
 import {
   HtH1,
   HtH2,
@@ -231,7 +230,6 @@ const HotentUi = {
   HtPostDialog,
   HtJobDialog,
   HtRoleDialog,
-  HtSubEditModeDialog,
 }
 
 HotentUi.install = (Vue, opts = {}) => {

package/src/mixins/onlineSubtable.js

@@ -10,28 +10,13 @@ export default {
       transitionIndex: -1,
       left_image: '',
       right_image: '',
-      collapseType: 'expand',
-      subDataArr: [],
     }
   },
   computed: {
-    showMobileEdit() {
-      return (subName) => {
-        if (this.permission && this.permission.fields[subName]) {
-          return Object.keys(this.permission.fields[subName]).some((k) => {
-            return (
-              this.permission.fields[subName][k] == 'b' ||
-              this.permission.fields[subName][k] == 'w'
-            )
-          })
-        }
-        return false
-      }
-    },
     // 子表前端分页过滤器
     pagingSubData() {
       const me = this
-      return function(datapath) {
+      return function (datapath) {
         // 通过子表数据路径获取分页数据
         return SubPagination.pagingByPath(datapath, me)
       }
@@ -69,25 +54,6 @@ export default {
     }
   },
   methods: {
-    getSunExpandArr(data, type) {
-      return this.getExpandArr(data, type)
-    },
-    getSubEditModeData(data = {}, type) {
-      if (type === 'edit') return
-      this.$root.$emit(
-        'add-new-collapse-item',
-        data.sub_guid,
-        this.collapseType
-      )
-      this.subDataArr.push(data)
-    },
-    editSubRow(row, name) {
-      this.$refs[`HtSubEditModeDialog_${name}`].showDialog({
-        data: row,
-        mainData: this.data,
-        type: 'edit',
-      })
-    },
     //合计计算
     getSummaries(param, list) {
       let CancelTheCalculation = sessionStorage.getItem(
@@ -291,7 +257,7 @@ export default {
       let exp = calc.mathExp
       if (!exp) return null
       var reg = /([\[|\{]).*?\((.*?)\)[\}|\]]/g
-      exp = exp.replace(reg, function() {
+      exp = exp.replace(reg, function () {
         var symbol = arguments[1],
           name = arguments[2]
         const prop = name.split('.')[1]
@@ -388,7 +354,6 @@ export default {
       return num
     },
     getExpandArr(data, type) {
-      this.collapseType = type
       if (type === 'expand' && data) {
         let arr = []
         data.forEach((item) => {
@@ -403,7 +368,7 @@ export default {
       if (this.isPrint) {
         this.$router.go(-1)
       }
-      setTimeout(function() {
+      setTimeout(function () {
         location.reload()
       }, 200)
     },
@@ -489,7 +454,7 @@ export default {
       this.$forceUpdate()
     },
     //子表默认值回填
-    addSubTab(subTabPath, subEditMode, name) {
+    addSubTab(subTabPath) {
       let pathArr = subTabPath.split('.')
       if (pathArr.length < 3) {
         this.$message({
@@ -509,9 +474,9 @@ export default {
         //把数组里面的值为 null 转换为空字符串
         let str = JSON.stringify(subInitData).replace(/null/g, '""')
         let subData = JSON.parse(str)
-        this.subDataArr = this.data[pathArr[1]][pathArr[2]]
+        const subDataArr = this.data[pathArr[1]][pathArr[2]]
         //子表添加后的长度，因为在nextTick中，子表已经添加完毕。
-        const nextIndex = this.subDataArr.length
+        const nextIndex = subDataArr.length
         for (var key in subData) {
           //点添加时判断要新增子表记录中的孙表是否有值
           if (key.indexOf('sub_') == 0) {
@@ -532,16 +497,8 @@ export default {
         }
         let fillObj = this.toFillOrg(pathArr[1] + '.' + pathArr[2], subData)
         fillObj.sub_guid = this.guid()
-        if (subEditMode == 2) {
-          this.$refs[`HtSubEditModeDialog_${name}`].showDialog({
-            data: fillObj,
-            mainData: this.data,
-            type: 'add',
-          })
-          return
-        }
         this.$root.$emit('add-new-collapse-item', fillObj.sub_guid)
-        this.subDataArr.push(fillObj)
+        subDataArr.push(fillObj)
       }
     },
     //子表添加头部样式
@@ -557,13 +514,14 @@ export default {
       return { '--headerBgColor': color ? color : '#f4f4f4' }
     },
     guid() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(
-        c
-      ) {
-        var r = (Math.random() * 16) | 0,
-          v = c == 'x' ? r : (r & 0x3) | 0x8
-        return v.toString(16)
-      })
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == 'x' ? r : (r & 0x3) | 0x8
+          return v.toString(16)
+        }
+      )
     },
     //孙表默认值回填
     addSunTab(subTabPath, index) {
@@ -840,17 +798,15 @@ export default {
             if (conf.code) {
               const codePath = conf.code.split('.')
               if (!this.data[paths[0]][paths[1]][0][codePath[2]]) {
-                this.data[paths[0]][paths[1]][0][
-                  codePath[2]
-                ] = this.fillOrg.code
+                this.data[paths[0]][paths[1]][0][codePath[2]] =
+                  this.fillOrg.code
               }
             }
             if (conf.name) {
               const namePath = conf.name.split('.')
               if (!this.data[paths[0]][paths[1]][0][namePath[2]]) {
-                this.data[paths[0]][paths[1]][0][
-                  namePath[2]
-                ] = this.fillOrg.name
+                this.data[paths[0]][paths[1]][0][namePath[2]] =
+                  this.fillOrg.name
               }
             }
           }

package/src/styles/selector.scss

@@ -11,10 +11,10 @@
         .ht-selector__table {
           height: 380px;
         }
-        .el-pagination {
+        .el-pagination{
           white-space: pre-wrap !important;
         }
-      }
+      }    
     }
 
     @media (min-width: 1400px) {
@@ -128,43 +128,3 @@
     }
   }
 }
-
-.custom-selector-mobile {
-  .custom-selector-mobile-box {
-    display: flex;
-    min-height: 32px;
-    align-items: center;
-    padding: 4px 14px;
-    flex-wrap: wrap;
-    gap: 4px;
-    line-height: 22px;
-    padding-right: 40px;
-    box-sizing: border-box;
-    .el-icon-error {
-      color: #909399;
-    }
-  }
-  .el-input__inner {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    user-select: none;
-    background: none;
-    color: transparent !important;
-    pointer-events: none;
-    height: 100%;
-  }
-  .el-input__suffix-inner {
-    display: flex;
-    align-items: center;
-  }
-  .el-icon-circle-close {
-    margin-right: 3px;
-  }
-  .user-icon,
-  .el-icon-circle-close {
-    display: inline-block !important;
-  }
-}

package/src/styles/variables.scss

@@ -90,17 +90,16 @@ col[width='1'] {
         cursor: pointer;
         color: #dbdbdb;
       }
-      .el-icon-search,
       .user-icon,
       .org-icon {
         display: none;
       }
     }
-    // .el-input {
-    //   .el-input__inner {
-    //     color: #fff;
-    //   }
-    // }
+    .el-input {
+      .el-input__inner {
+        color: #fff;
+      }
+    }
   }
   .el-select__tags_readonly {
     .tag-wrap {

package/src/utils.js

@@ -1163,13 +1163,6 @@ var utils = {
       return url
     }
   },
-  guid: () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = (Math.random() * 16) | 0,
-        v = c == 'x' ? r : (r & 0x3) | 0x8
-      return v.toString(16)
-    })
-  },
 }
 
 // 在数组上扩展一个删除指定项的方法

package/packages/SubEditModeDialog/index.js

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