three-trees-ui 1.0.93 → 1.0.95

package/packages/RoleSelector/src/main.vue

@@ -16,33 +16,23 @@
       @click="showDialog"
     >
       <div
-        ref="tagSpans"
-        style="width: calc(100% - 25px);"
-        :class="{
-          'el-select__tags_readonly': !inputWriteable,
-          'el-select__tags': inputWriteable,
-        }"
+        v-if="inputWriteable"
+        class="el-input el-input--suffix"
+        :class="{ 'custom-selector-mobile': isMobile }"
       >
-        <span class="tag-wrap">
-          <span
+        <div v-if="isMobile" class="custom-selector-mobile-box">
+          <div
             v-for="(item, index) in selectors"
             :key="index"
-            class="el-tag el-tag--info el-tag--small"
-            @click.stop
+            class="common-selector-tag"
           >
-            <span class="el-select__tags-text">{{ item.name }}</span>
-            <i
-              v-if="inputWriteable"
-              class="el-tag__close el-icon-close"
-              @click="handleRemove(item)"
-            ></i>
-          </span>
-        </span>
-      </div>
-      <div v-if="inputWriteable" class="el-input el-input--suffix">
+            <span>{{ item.name }}</span>
+            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
+          </div>
+        </div>
         <input
           ref="inputEl"
-          v-model="value"
+          v-model="calcInputValue"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -50,10 +40,6 @@
           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">
@@ -62,50 +48,55 @@
           </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" />
-    <role-selector-mobile-dialog
-      v-if="isMobile"
-      ref="roleSelectorMobileDialog"
-      v-model="selectors"
-      :search-placeholder="searchPlaceholder"
-      :single="single"
-      :data="data"
-      :table-columns="tableColumns"
-      :pagination="pagination"
-      :select-label="selectLabel"
-      :quick-search-props="quickSearchProps"
-      :append-to-body="appendToBody"
-      :title="title"
-      :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)"
-    />
-    <role-selector-dialog
-      v-else
-      ref="roleSelectorDialog"
-      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)"
-    />
+    <template v-if="isDialogShow">
+      <role-selector-mobile-dialog
+        v-if="isMobile"
+        ref="roleSelectorMobileDialog"
+        v-model="selectors"
+        :search-placeholder="searchPlaceholder"
+        :single="single"
+        :data="data"
+        :table-columns="tableColumns"
+        :pagination="pagination"
+        :select-label="selectLabel"
+        :quick-search-props="quickSearchProps"
+        :append-to-body="appendToBody"
+        :title="title"
+        :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)"
+      />
+      <role-selector-dialog
+        v-else
+        ref="roleSelectorDialog"
+        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)"
+      />
+    </template>
   </div>
 </template>
 <script>
@@ -182,11 +173,23 @@
     },
     data() {
       return {
+        isDialogShow: false,
         inputSuffixHeight: 30,
         selectors: [],
       }
     },
     computed: {
+      calcInputValue: function() {
+        let name = ''
+        if (this.selectors) {
+          name = this.selectors
+            .map((k) => {
+              return k.name
+            })
+            .join(',')
+        }
+        return name
+      },
       primaryField: function() {
         return this.config && this.config.hasOwnProperty('id')
           ? 'id'
@@ -245,14 +248,8 @@
         // 通过valueChange事件发布值变更消息
         this.$emit('valueChange', ary.join(','), newVal)
         setTimeout(() => {
-          if (newVal.length > 0) {
-            this.calacInputSuffixHeight()
-          } else {
-            this.inputSuffixHeight = 30
-          }
           if (this.$refs.inputEl) {
-            this.$refs.inputEl.focus()
-            this.$refs.inputEl.blur()
+            this.$validator.validate(this.inputName)
           }
         }, 10)
       },
@@ -317,10 +314,14 @@
           this.selectors = tmpAry
         }
       },
-      showDialog() {
+      async showDialog() {
         if (!this.inputWriteable) {
           return
         }
+        if (this.isDialogShow === false) {
+          this.isDialogShow = true
+          await this.$nextTick()
+        }
         if (this.isMobile) {
           this.$refs.roleSelectorMobileDialog.showDialog()
         } else {
@@ -337,12 +338,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
+        // }
       },
     },
   }
@@ -353,6 +354,11 @@
     margin-left: 1px;
   }
 
+  .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+
   .el-select__tags_readonly {
     position: relative;
     top: 50%;

package/packages/SubEditModeDialog/index.js

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

package/packages/SubEditModeDialog/src/main.vue

@@ -0,0 +1,115 @@
+<template>
+  <van-popup
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    position="right"
+    get-container="body"
+    class="ht-sub-edit-mode-dialog"
+  >
+    <van-nav-bar
+      title="子表编辑"
+      left-arrow
+      @click-left="dialogVisible = false"
+    />
+    <el-form
+      v-if="dialogVisible"
+      v-form="{
+        formItemAlign: 'top',
+        inputsDisplay: 'block',
+        roInputDisplayMode: 'text',
+      }"
+      class="sub-edit-main"
+      :data-vv-scope="searchFormScope"
+      label-position="top"
+    >
+      <slot :row="{ row, index: 0 }"></slot>
+    </el-form>
+    <div class="sub-edit-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm">确 定</el-button>
+    </div>
+  </van-popup>
+</template>
+<script>
+  import { cloneDeep } from 'lodash'
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'HtSubEditModeDialog',
+    props: {},
+    data() {
+      return {
+        dialogVisible: false,
+        dialogType: 'add',
+        row: {},
+        orgRow: {}, // 存储原始数据，用来修改子表的数据
+        data: {}, // 主表数据，用来处理参数绑定、值回显等问题
+        permission: {},
+      }
+    },
+    computed: {
+      searchFormScope() {
+        return `Form${utils.guid()}`
+      },
+    },
+    methods: {
+      showDialog({ type, data, mainData }) {
+        this.dialogVisible = true
+        this.permission = utils.getOnlineFormInstance(this).permission || {}
+        this.dialogType = type
+        this.orgRow = data
+        this.data = mainData
+        this.row = cloneDeep(data)
+      },
+      handleConfirm() {
+        utils
+          .validateForm(this, this.searchFormScope)
+          .then(() => {
+            this.dialogVisible = false
+            // 点击确认更新子表数据
+            const keys = Object.keys(this.orgRow || {})
+            keys.forEach((key) => {
+              if (this.orgRow[key] !== this.row[key]) {
+                this.orgRow[key] = this.row[key]
+              }
+            })
+            this.$emit('getSubEditModeData', this.row, this.dialogType)
+          })
+          .catch(() => {})
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  ::v-deep {
+    .el-row {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+</style>
+<style lang="scss">
+  .ht-sub-edit-mode-dialog {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    .sub-edit-main {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      &.el-form--label-top .el-form-item__label {
+        padding-bottom: 0;
+      }
+    }
+    .sub-edit-footer {
+      height: 46px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 24px;
+      border-top: 1px solid #ebebeb;
+    }
+  }
+</style>

package/packages/UserSelector/src/main.vue

@@ -16,48 +16,23 @@
       @click="showDialog"
     >
       <div
-        ref="tagSpans"
-        class="user-selector_block"
-        :class="{
-          'el-select__tags_readonly': !inputWriteable,
-          'el-select__tags': inputWriteable,
-        }"
+        v-if="inputWriteable"
+        class="el-input el-input--suffix"
+        :class="{ 'custom-selector-mobile': isMobile }"
       >
-        <span class="tag-wrap">
-          <span
+        <div v-if="isMobile" class="custom-selector-mobile-box">
+          <div
             v-for="(item, index) in selectors"
             :key="index"
-            class="el-tag el-tag--info el-tag--small"
-            @click.stop
+            class="common-selector-tag"
           >
-            <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">
+            <span>{{ item.fullname }}</span>
+            <i class="el-icon-error" @click.stop="handleRemove(item)"></i>
+          </div>
+        </div>
         <input
           ref="inputEl"
-          v-model="value"
+          v-model="calcInputValue"
           v-validate="inputValidate"
           type="text"
           readonly="readonly"
@@ -65,66 +40,71 @@
           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 class="el-icon-circle-close clear-icon" @click.stop="clear"></i>
+            <i
+              v-if="value"
+              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" />
-    <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 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>
   </div>
 </template>
 <script>
@@ -198,11 +178,23 @@
     },
     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'
@@ -316,14 +308,8 @@
         // 通过valueChange事件发布值变更消息
         setTimeout(() => {
           this.$emit('valueChange', ary.join(','), newVal)
-          if (newVal.length > 0) {
-            this.calacInputSuffixHeight()
-          } else {
-            this.inputSuffixHeight = 30
-          }
           if (this.$refs.inputEl) {
-            this.$refs.inputEl.focus()
-            this.$refs.inputEl.blur()
+            this.$validator.validate(this.inputName)
           }
         }, 10)
       },
@@ -461,10 +447,14 @@
           this.selectors = tmpAry
         }
       },
-      showDialog() {
+      async showDialog() {
         if (!this.inputWriteable) {
           return
         }
+        if (this.isDialogShow === false) {
+          this.isDialogShow = true
+          await this.$nextTick()
+        }
         if (this.isMobile) {
           this.$refs.userSelectorMobileDialog.showDialog()
         } else {
@@ -480,12 +470,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) {
@@ -499,6 +489,7 @@
   }
 </script>
 <style lang="scss" scoped>
+  @import '~@/styles/selector.scss';
   .user-selector_block {
     width: calc(100% - 25px);
     background: #fff;
@@ -509,6 +500,10 @@
     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,8 +32,14 @@ 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(
-          vnode.context.data[pathAry[1]][key[1]][key[2]],
+          dialogData.dialogVisible
+            ? dialogData.row
+            : vnode.context.data[pathAry[1]][key[1]][key[2]],
           pathAry[3],
           ''
         )