@leevan/jtui 2.0.52 → 2.0.54-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leevan/jtui",
-  "version": "2.0.52",
+  "version": "2.0.54-beta.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/packages/jt-table/components/edit-components/EditInput.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="edit-input-wrapper">
+    <el-input
+      v-if="inputType === 'text'"
+      v-model="currentValue"
+      type="text"
+      size="mini"
+      ref="inputRef"
+      @blur="handleBlur"
+      @change="handleChange"
+      @keyup.enter="handleBlur"
+    />
+    <el-input
+      v-else-if="inputType === 'password'"
+      v-model="currentValue"
+      type="password"
+      show-password
+      size="mini"
+      ref="inputRef"
+      @blur="handleBlur"
+      @change="handleChange"
+      @keyup.enter="handleBlur"
+    />
+    <el-input-number
+      v-else-if="inputType === 'number'"
+      v-model="currentValue"
+      :controls="true"
+      size="mini"
+      ref="inputRef"
+      @blur="handleBlur"
+      @change="handleChange"
+    />
+    <el-input-number
+      v-else-if="inputType === 'integer'"
+      v-model="currentValue"
+      :precision="0"
+      :step="1"
+      size="mini"
+      ref="inputRef"
+      @blur="handleBlur"
+      @change="handleChange"
+    />
+    <el-input-number
+      v-else-if="inputType === 'float'"
+      v-model="currentValue"
+      :precision="2"
+      :step="0.1"
+      size="mini"
+      ref="inputRef"
+      @blur="handleBlur"
+      @change="handleChange"
+    />
+    <el-date-picker
+      v-else-if="inputType === 'date'"
+      v-model="currentValue"
+      type="date"
+      value-format="yyyy-MM-dd"
+      size="mini"
+      ref="inputRef"
+      @change="handleChange"
+    />
+    <el-date-picker
+      v-else-if="inputType === 'datetime'"
+      v-model="currentValue"
+      type="datetime"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      size="mini"
+      ref="inputRef"
+      @change="handleChange"
+    />
+    <el-date-picker
+      v-else-if="inputType === 'week'"
+      v-model="currentValue"
+      type="week"
+      format="yyyy 第 WW 周"
+      value-format="yyyy-Www"
+      size="mini"
+      ref="inputRef"
+      @change="handleChange"
+    />
+    <el-date-picker
+      v-else-if="inputType === 'month'"
+      v-model="currentValue"
+      type="month"
+      value-format="yyyy-MM"
+      size="mini"
+      ref="inputRef"
+      @change="handleChange"
+    />
+    <el-date-picker
+      v-else-if="inputType === 'year'"
+      v-model="currentValue"
+      type="year"
+      value-format="yyyy"
+      size="mini"
+      ref="inputRef"
+      @change="handleChange"
+    />
+    <el-input
+      v-else
+      v-model="currentValue"
+      type="text"
+      size="mini"
+      ref="inputRef"
+      @blur="handleBlur"
+      @change="handleChange"
+      @keyup.enter="handleBlur"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditInput',
+  props: {
+    value: [String, Number],
+    type: {
+      type: String,
+      default: 'text'
+    },
+    row: {
+      type: Object,
+      default: null
+    },
+    prop: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value
+    };
+  },
+  computed: {
+    inputType() {
+      return this.type || 'text';
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.currentValue = newVal;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.inputRef) {
+        const input = this.$refs.inputRef.$el ? this.$refs.inputRef.$el.querySelector('input') : this.$refs.inputRef;
+        if (input && input.focus) {
+          input.focus();
+        }
+      }
+    });
+  },
+  methods: {
+    handleBlur(e) {
+      this.doComplete();
+    },
+    handleChange(val) {
+      this.doComplete();
+    },
+    doComplete() {
+      if (this.row && this.prop) {
+        if (!(this.prop in this.row)) {
+          this.$set(this.row, this.prop, this.currentValue);
+        } else {
+          this.row[this.prop] = this.currentValue;
+        }
+      }
+      this.$emit('input', this.currentValue);
+      this.closeEdit();
+    },
+    closeEdit() {
+      try {
+        let vm = this.$parent;
+        let count = 0;
+        while (vm && count < 30) {
+          const componentName = vm.$options && vm.$options.name;
+          if (componentName === 'VxeTable' || componentName === 'VxeTable') {
+            if (vm.$xegrid) {
+              if (typeof vm.$xegrid._clearActived === 'function') {
+                vm.$xegrid._clearActived();
+                return;
+              }
+            }
+            if (typeof vm._clearActived === 'function') {
+              vm._clearActived();
+              return;
+            }
+          }
+          vm = vm.$parent;
+          count++;
+        }
+      } catch (e) {
+        console.error('closeEdit error', e);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.edit-input-wrapper {
+  width: 100%;
+  ::v-deep .el-input,
+  ::v-deep .el-input-number,
+  ::v-deep .el-date-editor {
+    width: 100%;
+  }
+}
+</style>

package/packages/jt-table/components/edit-components/EditSelect.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="custom-select-wrapper" ref="selectWrapper">
+    <div
+      class="custom-select-input"
+      @click="toggleDropdown"
+      ref="inputRef"
+    >
+      <span class="custom-select-value">
+        {{ displayLabel }}
+      </span>
+      <i class="custom-select-arrow" :class="{'is-open': isOpen}"></i>
+    </div>
+    <div class="custom-select-dropdown" v-show="isOpen" ref="dropdownRef">
+      <ul>
+        <li
+          v-for="op in options"
+          :key="op.value"
+          :class="{'is-selected': value === op.value}"
+          @mousedown.prevent="selectOption(op)"
+        >
+          {{ op.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditSelect',
+  props: {
+    value: [String, Number],
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isOpen: true
+    };
+  },
+  computed: {
+    displayLabel() {
+      const findItem = this.options.find(op => op.value === this.value);
+      return findItem ? findItem.label : (this.value || '请选择');
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+  methods: {
+    toggleDropdown() {
+      this.isOpen = !this.isOpen;
+    },
+    selectOption(op) {
+      this.$emit('input', op.value);
+      this.isOpen = false;
+      this.closeEdit();
+    },
+    handleClickOutside(e) {
+      if (this.$refs.selectWrapper && !this.$refs.selectWrapper.contains(e.target)) {
+        this.isOpen = false;
+        this.closeEdit();
+      }
+    },
+    closeEdit() {
+      // 向上查找vxe-table实例
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$vxe && parent.$vxe.table) {
+          parent.$vxe.table.clearEdit();
+          break;
+        }
+        parent = parent.$parent;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.custom-select-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.custom-select-input {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  padding: 0 5px;
+  font-size: 14px;
+  color: #606266;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+
+  &:hover {
+    border-color: #c0c4cc;
+  }
+}
+
+.custom-select-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.custom-select-arrow {
+  position: relative;
+  width: 0;
+  height: 0;
+  margin-left: 3px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid #c0c4cc;
+  transition: transform 0.3s;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+.custom-select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 9999;
+  min-width: fit-content;
+  width: auto;
+  margin-top: 4px;
+  padding: 6px 0;
+  background-color: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  max-height: 274px;
+  overflow-y: auto;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    padding: 0 20px;
+    height: 34px;
+    line-height: 34px;
+    font-size: 14px;
+    color: #606266;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+
+    &.is-selected {
+      color: #409eff;
+      font-weight: 700;
+      background-color: #f5f7fa;
+    }
+  }
+}
+</style>

package/packages/jt-table/components/tableColumn.vue

@@ -32,8 +32,8 @@
           :formatter="formatEnum"
           :cell-render="cellRenderData(subSubItem.cellRender)"
         >
-           <template v-slot:edit="{ row }" v-if="item && item.edit && item.edit.name == '$select'">
-            <div class="custom-select-wrapper" ref="selectWrapper">
+           <template v-slot:edit="{ row }">
+            <div v-if="item && item.edit && item.edit.name == '$select'" class="custom-select-wrapper" ref="selectWrapper">
               <div
                 class="custom-select-input"
                 @click="toggleDropdown"
@@ -57,6 +57,13 @@
                 </ul>
               </div>
             </div>
+            <EditInput
+              v-else-if="item && item.edit && item.edit.name == '$input'"
+              v-model="row[subSubItem.prop]"
+              :type="(item.edit.props && item.edit.props.type) || 'text'"
+              :row="row"
+              :prop="subSubItem.prop"
+            />
           </template>
         </vxe-table-column>
       </vxe-colgroup>
@@ -78,8 +85,8 @@
         :formatter="formatEnum"
         :cell-render="cellRenderData(subItem.cellRender)"
       >
-         <template v-slot:edit="{ row }" v-if="item && item.edit && item.edit.name == '$select'">
-            <div class="custom-select-wrapper" ref="selectWrapper">
+         <template v-slot:edit="{ row }">
+            <div v-if="item && item.edit && item.edit.name == '$select'" class="custom-select-wrapper" ref="selectWrapper">
               <div
                 class="custom-select-input"
                 @click="toggleDropdown"
@@ -103,6 +110,13 @@
                 </ul>
               </div>
             </div>
+            <EditInput
+              v-else-if="item && item.edit && item.edit.name == '$input'"
+              v-model="row[subItem.prop]"
+              :type="(item.edit.props && item.edit.props.type) || 'text'"
+              :row="row"
+              :prop="subItem.prop"
+            />
           </template>
       </vxe-table-column>
     </template>
@@ -125,8 +139,8 @@
     :formatter="formatEnum"
     :cell-render="cellRenderData(item.cellRender)"
   >
-    <template v-slot:edit="{ row }" v-if="item && item.edit && item.edit.name == '$select'">
-      <div class="custom-select-wrapper" ref="selectWrapper">
+    <template v-slot:edit="{ row }">
+      <div v-if="item && item.edit && item.edit.name == '$select'" class="custom-select-wrapper" ref="selectWrapper">
         <div
           class="custom-select-input"
           @click="toggleDropdown"
@@ -150,18 +164,31 @@
           </ul>
         </div>
       </div>
+      <EditInput
+        v-else-if="item && item.edit && item.edit.name == '$input'"
+        v-model="row[item.prop]"
+        :type="(item.edit.props && item.edit.props.type) || 'text'"
+        :row="row"
+        :prop="item.prop"
+      />
     </template>
   </vxe-table-column>
 </template>
 
 
 <script>
+import EditInput from './edit-components/EditInput.vue';
+
 export default {
   name: "tableColumn",
+  components: {
+    EditInput
+  },
   
   data() {
     return {
-      isOpen: false
+      isOpen: false,
+      vxeTableInstance: null
     };
   },
   mounted() {
@@ -171,6 +198,8 @@ export default {
     this.$nextTick(() => {
       this.isOpen = true;
     });
+    // 查找并保存vxe-table实例
+    this.findVxeTable();
   },
   beforeDestroy() {
     document.removeEventListener('click', this.handleClickOutside);
@@ -202,6 +231,34 @@ export default {
   },
  
   methods: {
+    findVxeTable() {
+      // 向上查找vxe-table实例
+      let parent = this.$parent;
+      let count = 0;
+      while (parent && count < 30) {
+        const componentName = parent.$options && parent.$options.name;
+        if (componentName === 'VxeTable' || componentName === 'VxeTable') {
+          if (parent.clearEdit && typeof parent.clearEdit === 'function') {
+            this.vxeTableInstance = parent;
+            return;
+          }
+          if (parent.$vxe && parent.$vxe.table) {
+            this.vxeTableInstance = parent.$vxe.table;
+            return;
+          }
+          if (parent.xetable) {
+            this.vxeTableInstance = parent.xetable;
+            return;
+          }
+        }
+        if (parent.clearEdit && typeof parent.clearEdit === 'function') {
+          this.vxeTableInstance = parent;
+          return;
+        }
+        parent = parent.$parent;
+        count++;
+      }
+    },
     getLabel(value) {
       if (!this.item || !this.item.edit || !this.item.edit.options) return value;
       const findItem = this.item.edit.options.find(op => op.value === value);
@@ -213,6 +270,37 @@ export default {
     selectOption(op, row) {
       row[this.item.prop] = op.value;
       this.isOpen = false;
+      this.closeEdit();
+    },
+    closeEdit() {
+      try {
+        let vm = this.$parent;
+        let count = 0;
+        while (vm && count < 30) {
+          const componentName = vm.$options && vm.$options.name;
+
+          if (componentName === 'VxeTable' || componentName === 'VxeTable') {
+            if (vm.$xegrid) {
+              if (typeof vm.$xegrid._clearActived === 'function') {
+                vm.$xegrid._clearActived();
+                return;
+              }
+              if (typeof vm.$xegrid.clearEdit === 'function') {
+                vm.$xegrid.clearEdit();
+                return;
+              }
+            }
+            if (typeof vm._clearActived === 'function') {
+              vm._clearActived();
+              return;
+            }
+          }
+          vm = vm.$parent;
+          count++;
+        }
+      } catch (e) {
+        console.error('closeEdit error', e);
+      }
     },
     handleClickOutside(e) {
       if (this.$refs.selectWrapper && !this.$refs.selectWrapper.contains(e.target)) {
@@ -316,4 +404,13 @@ export default {
     }
   }
 }
+
+.edit-input-wrapper {
+  width: 100%;
+  ::v-deep .el-input,
+  ::v-deep .el-input-number,
+  ::v-deep .el-date-editor {
+    width: 100%;
+  }
+}
 </style>