From 2c3347401db5b54a1921e6c814a32416db8fa364 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Mon, 22 Feb 2021 14:56:34 +0800
Subject: [PATCH] feat: 优化部分组件

---
 examples/views/docs/component/select.md     |  2 +-
 examples/views/docs/component/table.md      | 17 ++++++++++++-----
 packages/form/index.vue                     |  2 +-
 packages/scheme-filter/index.vue            | 12 ++++++------
 packages/scheme-form/index.vue              |  6 +++---
 packages/scheme-form/scheme-form-render.vue | 10 +++++-----
 packages/scheme-table/cell-editable.vue     |  8 ++++----
 packages/scheme-table/editable.vue          |  4 ++--
 packages/scheme-table/index.vue             |  4 ++--
 packages/scheme/index.scss                  |  2 +-
 packages/scheme/index.vue                   | 18 +++++++++---------
 packages/select/index.bak.vue               |  4 ++--
 packages/table/editable.vue                 | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 13 files changed, 126 insertions(+), 52 deletions(-)

diff --git a/examples/views/docs/component/select.md b/examples/views/docs/component/select.md
index c51f72f..8bc591e 100644
--- a/examples/views/docs/component/select.md
+++ b/examples/views/docs/component/select.md
@@ -433,7 +433,7 @@ export default {
   },
   methods: {
     beforeQuery(query) {
-      console.log(query.length);
+      // 输入两个字符以上才执行查询
       return query.length > 2;
     },
     queryAPI(val) {
diff --git a/examples/views/docs/component/table.md b/examples/views/docs/component/table.md
index 2d2fc14..4d9f840 100644
--- a/examples/views/docs/component/table.md
+++ b/examples/views/docs/component/table.md
@@ -47,7 +47,14 @@ export default {
   <el-form size="mini">
     <el-row>
       <el-col :span="18">
-        <z-table :value="tableData" type="editable" border :columns="columns"></z-table>
+        <z-table v-model="tableData" type="editable" border :columns="columns">
+          <template #column-editor-gender="{ value, onInput }">
+            <el-radio-group size="mini" :value="value" @input="onInput">
+              <el-radio-button label="男">男</el-radio-button>
+              <el-radio-button label="女">女</el-radio-button>
+            </el-radio-group>
+          </template>
+        </z-table>
       </el-col>
       <el-col :span="6" style="padding-left: 10px">
         <pre class="demo-model">{{ tableData }}</pre>
@@ -61,12 +68,12 @@ export default {
   data() {
     return {
       tableData: [
-        { name: '张三', age: '31', gender: '男' },
-        { name: '李四', age: '27', gender: '女' },
-        { name: '王五', age: '16', gender: '男' },
+        { name: '张三', age: 31, gender: '男' },
+        { name: '李四', age: 27, gender: '女' },
+        { name: '王五', age: 16, gender: '男' },
       ],
       columns: [
-        { prop: 'name', label: '姓名' },
+        { prop: 'name', label: '姓名', editable: false },
         { type: 'el-input-number', prop: 'age', label: '年龄' },
         { prop: 'gender', label: '性别' },
       ]
diff --git a/packages/form/index.vue b/packages/form/index.vue
index f266ac8..87da3cd 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="form" :model="model" class="zee-form" v-bind="$attrs">
+  <el-form ref="form" :model="model" class="z-form" v-bind="$attrs">
     <slot v-if="$slots.row" name="row"></slot>
     <el-row v-else v-bind="row">
       <slot></slot>
diff --git a/packages/scheme-filter/index.vue b/packages/scheme-filter/index.vue
index 71cb9df..d8b6cc1 100644
--- a/packages/scheme-filter/index.vue
+++ b/packages/scheme-filter/index.vue
@@ -1,7 +1,7 @@
 <template>
   <z-scheme-form
     v-model="model"
-    class="zee-scheme-filter"
+    class="z-scheme-filter"
     :list="formattedList"
     :span="span"
     :labelWidth="labelWidth"
@@ -16,7 +16,7 @@
       </template>
       <slot v-else :name="key" :slot="key"></slot>
     </template>
-    <div v-if="!slotKeys.includes('operation')" slot="operation" class="zee-scheme-filter__button-group">
+    <div v-if="!slotKeys.includes('operation')" slot="operation" class="z-scheme-filter__button-group">
       <el-button-group :size="size">
         <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
         <el-button @click="handleReset"><span>重置</span></el-button>
@@ -96,9 +96,9 @@ export default {
     colVisibleRender(item, index) {
       if (this.collapsed) {
         const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2;
-        return index > visibleNumber && index < this.list.length ? 'zee-scheme-filter__item hidden' : 'zee-scheme-filter__item';
+        return index > visibleNumber && index < this.list.length ? 'z-scheme-filter__item hidden' : 'z-scheme-filter__item';
       }
-      return 'zee-scheme-filter__item';
+      return 'z-scheme-filter__item';
     },
     // 搜索
     handleSearch() {
@@ -118,10 +118,10 @@ export default {
 </script>
 
 <style>
-.zee-scheme-filter__item.hidden {
+.z-scheme-filter__item.hidden {
   display: none;
 }
-.zee-scheme-filter__button-group {
+.z-scheme-filter__button-group {
   width: 100%;
   box-sizing: border-box;
   text-align: right;
diff --git a/packages/scheme-form/index.vue b/packages/scheme-form/index.vue
index 9ef6fe6..d382396 100644
--- a/packages/scheme-form/index.vue
+++ b/packages/scheme-form/index.vue
@@ -1,5 +1,5 @@
 <style lang="scss">
-.zee-scheme-form {
+.z-scheme-form {
   &__flex-wrap {
     display: flex;
     flex-wrap: wrap;
@@ -26,7 +26,7 @@
 <template>
   <el-form
     ref="form"
-    class="zee-scheme-form"
+    class="z-scheme-form"
     :size="size"
     :class="formClass"
     :model="formModel"
@@ -52,7 +52,7 @@
     >
       <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
     </scheme-form-render>
-    <div v-if="$scopedSlots.footer" class="zee-scheme-form__footer">
+    <div v-if="$scopedSlots.footer" class="z-scheme-form__footer">
       <slot name="footer" :size="size" :validate="validate" :reset="reset" :model="model"></slot>
     </div>
   </el-form>
diff --git a/packages/scheme-form/scheme-form-render.vue b/packages/scheme-form/scheme-form-render.vue
index 7774df2..20258d6 100644
--- a/packages/scheme-form/scheme-form-render.vue
+++ b/packages/scheme-form/scheme-form-render.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
-  <component :is="rowComponent" class="zee-scheme-form__flex-wrap">
+  <component :is="rowComponent" class="z-scheme-form__flex-wrap">
     <template v-for="(item, index) in list">
       <!-- 表单项有设置分组时 -->
       <component
@@ -11,9 +11,9 @@
         :style="{ width: type === 'div' ? '100%' : undefined }"
         :class="colClassRender(item, index, colClass)"
       >
-        <component :is="rowComponent" class="zee-scheme-form__flex-wrap" :class="groupClass || 'zee-scheme-form__group'">
+        <component :is="rowComponent" class="z-scheme-form__flex-wrap" :class="groupClass || 'z-scheme-form__group'">
           <!-- 表单分组标题 -->
-          <component :is="rowComponent" :class="titleClass || 'zee-scheme-form__group-title'" v-if="item.group.title" style="width: 100%;">
+          <component :is="rowComponent" :class="titleClass || 'z-scheme-form__group-title'" v-if="item.group.title" style="width: 100%;">
             {{ item.group.title || item.group }}
           </component>
           <!-- 递归本组件 -->
@@ -22,7 +22,7 @@
             :item-class="itemClass"
             :content-class="contentClass"
             :group-class="groupClass"
-            :class="contentClass || 'zee-scheme-form__group-content'"
+            :class="contentClass || 'z-scheme-form__group-content'"
             :list="item.list"
             :value="value"
             :model="itemKey ? model[itemKey] || {} : model"
@@ -46,7 +46,7 @@
           :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
           :class="colClassRender(item, index, colClass)"
         >
-          <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'zee-scheme-form__item'">
+          <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'z-scheme-form__item'">
             <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot>
             <template v-else>
               <!-- 自定义组件 -->
diff --git a/packages/scheme-table/cell-editable.vue b/packages/scheme-table/cell-editable.vue
index c6136dc..9dba927 100644
--- a/packages/scheme-table/cell-editable.vue
+++ b/packages/scheme-table/cell-editable.vue
@@ -1,9 +1,9 @@
 <style>
-.zee-table-cell-editable {
+.z-table-cell-editable {
   display: flex;
   align-items: center;
 }
-.zee-table-cell-editable .zee-table-cell-editable__icon {
+.z-table-cell-editable .z-table-cell-editable__icon {
   cursor: pointer;
   vertical-align: middle;
   padding-left: 5px;
@@ -14,10 +14,10 @@
 <template>
   <div>
     <!-- 可编辑状态 -->
-    <div v-if="editable" class="zee-table-cell-editable">
+    <div v-if="editable" class="z-table-cell-editable">
       <component :value="$_get(row, item.fullKey)" :is="item.type" v-bind="item.props" :style="item.style" size="mini" @input="onInput"></component>
       <span v-if="btnVisible !== false" @click="onConfirm">
-        <svg class="zee-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
+        <svg class="z-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
           <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path>
         </svg>
       </span>
diff --git a/packages/scheme-table/editable.vue b/packages/scheme-table/editable.vue
index 8a1a47b..e668f91 100644
--- a/packages/scheme-table/editable.vue
+++ b/packages/scheme-table/editable.vue
@@ -1,5 +1,5 @@
 <style>
-.zee-table {
+.z-table {
   width: 100%;
 }
 </style>
@@ -14,7 +14,7 @@
       <el-button @click="handleDelete" size="mini" type="danger" v-if="tableSelection.length > 0">删除</el-button>
     </div>
     <el-table
-      class="zee-table"
+      class="z-table"
       ref="table"
       :data="tableData"
       v-bind="{ size: 'small', ...tableProps }"
diff --git a/packages/scheme-table/index.vue b/packages/scheme-table/index.vue
index 7bb1651..6d2269e 100644
--- a/packages/scheme-table/index.vue
+++ b/packages/scheme-table/index.vue
@@ -1,12 +1,12 @@
 <style>
-.zee-scheme-table {
+.z-scheme-table {
   width: 100%;
 }
 </style>
 
 <template>
   <el-table
-    class="zee-scheme-table"
+    class="z-scheme-table"
     ref="table"
     :data="tableData"
     v-bind="{ size, ...tableProps }"
diff --git a/packages/scheme/index.scss b/packages/scheme/index.scss
index b12d7d6..c12d872 100644
--- a/packages/scheme/index.scss
+++ b/packages/scheme/index.scss
@@ -1,4 +1,4 @@
-.zee-scheme {
+.z-scheme {
   &__header {
     margin-bottom: 10px;
   }
diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue
index 29afa53..3759963 100644
--- a/packages/scheme/index.vue
+++ b/packages/scheme/index.vue
@@ -3,13 +3,13 @@
 </style>
 
 <template>
-  <div class="zee-scheme">
+  <div class="z-scheme">
     <!-- 头部内容 -->
-    <div v-if="$scopedSlots.header || $slots.header" class="zee-scheme__header">
+    <div v-if="$scopedSlots.header || $slots.header" class="z-scheme__header">
       <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
     </div>
     <!-- 筛选组件 -->
-    <div v-if="filter" class="zee-scheme__filter">
+    <div v-if="filter" class="z-scheme__filter">
       <z-scheme-filter
         :value="_filterModel"
         :list="filterList || listMap.filter | noRulesFilter"
@@ -22,7 +22,7 @@
       ></z-scheme-filter>
     </div>
     <!-- 按钮区 -->
-    <div v-if="action" class="zee-scheme__action">
+    <div v-if="action" class="z-scheme__action">
       <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
       <template v-else>
         <el-button :size="size" type="primary" @click="openNew">新增</el-button>
@@ -31,7 +31,7 @@
       </template>
     </div>
     <!-- 表格内容 -->
-    <div class="zee-scheme__table">
+    <div class="z-scheme__table">
       <z-scheme-table
         ref="table"
         v-model="tableData"
@@ -65,7 +65,7 @@
         <template #column-end>
           <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
           <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
-            <div class="zee-scheme__table-operation" slot-scope="slotScope">
+            <div class="z-scheme__table-operation" slot-scope="slotScope">
               <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
               <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
               <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])">
@@ -78,7 +78,7 @@
       </z-scheme-table>
     </div>
     <!-- 底部区域 -->
-    <div class="zee-scheme__footer">
+    <div class="z-scheme__footer">
       <div v-if="selection.length > 0" class="selection-info">
         <span>已选中</span>
         <span class="num">{{ selection.length }}</span>
@@ -142,7 +142,7 @@
             <template v-else>
               <z-form
                 ref="form"
-                class="zee-scheme__view"
+                class="z-scheme__view"
                 :value="_formModel"
                 :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
                 v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
@@ -161,7 +161,7 @@
             </template>
           </template>
           <!-- 内置弹出框新增修改按钮 -->
-          <div class="zee-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
+          <div class="z-scheme__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
             <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
             <el-button :size="size" plain @click="closeDialog">取消</el-button>
           </div>
diff --git a/packages/select/index.bak.vue b/packages/select/index.bak.vue
index c6e549c..bd1391a 100644
--- a/packages/select/index.bak.vue
+++ b/packages/select/index.bak.vue
@@ -1,6 +1,6 @@
 <template>
   <el-select
-    class="zee-select"
+    class="z-select"
     :disabled="disabled"
     :value-key="valueKey"
     :filterable="filterable"
@@ -254,7 +254,7 @@ export default {
 </script>
 
 <style lang="scss">
-.zee-select {
+.z-select {
   .el-input__prefix {
     height: 100%;
     display: flex;
diff --git a/packages/table/editable.vue b/packages/table/editable.vue
index ed35907..10014ae 100644
--- a/packages/table/editable.vue
+++ b/packages/table/editable.vue
@@ -1,14 +1,52 @@
+<style lang="scss">
+.z-table-column__cell-editable {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .el-icon-edit {
+    color: rgba(151, 151, 151, 0.5);
+    &:hover {
+      color: $primary;
+    }
+  }
+  .el-icon-check {
+    color: $green;
+  }
+  .el-icon-close {
+    color: $red;
+  }
+  .el-icon-edit,
+  .el-icon-check,
+  .el-icon-close {
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 14px;
+  }
+}
+</style>
+
 <template>
   <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="_props" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
     <template v-for="(item, index) in columns">
       <el-table-column v-bind="item" :key="index">
+        <template #header>
+          <span>{{ item.label }}</span>
+        </template>
         <template #default="{ row, column }">
           <table-column-cell
-            :editable="row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop)"
+            :disabled="item.editable === false"
+            :editable="item.editable !== false && (row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop))"
             :type="item.type"
             :value="row[column.property]"
             @input="onCellInput"
-          ></table-column-cell>
+            @edit-click="onCellDblclick(row, column)"
+            @edit-confirm="onHeaderClick"
+          >
+            <template v-if="$scopedSlots[`column-editor-${item.prop}`]">
+              <slot :name="`column-editor-${item.prop}`" :value="row[column.property]" :onInput="onCellInput"></slot>
+            </template>
+          </table-column-cell>
         </template>
       </el-table-column>
     </template>
@@ -29,28 +67,49 @@ export default {
         value: [String, Number, Array, Object],
         type: { type: String, default: 'el-input' },
         editable: Boolean,
+        disabled: Boolean,
+        showHandler: {
+          type: Boolean,
+          default: true,
+        },
       },
       watch: {
         editable(val) {
           if (val && this.type === 'el-input') {
             this.$nextTick(() => {
-              this.$children[0].focus();
+              this.$children[0] && this.$children[0].focus && this.$children[0].focus();
             });
           }
         },
       },
       render(h) {
         if (this.editable) {
-          return h(this.type, {
-            props: { value: this.value, size: 'mini' },
-            on: {
-              input: value => {
-                this.$emit('input', value);
+          let editRender = [
+            h(this.type, {
+              props: { value: this.value, size: 'mini' },
+              on: {
+                input: value => {
+                  this.$emit('input', value);
+                },
               },
-            },
-          });
+            }),
+          ];
+          if (this.$scopedSlots.default) {
+            editRender = [this.$scopedSlots.default()];
+          }
+          if (this.showHandler !== false) {
+            const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm') } })];
+            // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
+            const handler = h('span', handlerItems);
+            editRender.push(handler);
+          }
+          return h('span', { class: 'z-table-column__cell-editable' }, editRender);
+        }
+        const defauleRender = [this.value];
+        if (!this.disabled && this.showHandler !== false) {
+          defauleRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
         }
-        return h('span', this.value);
+        return h('span', { class: 'z-table-column__cell-editable' }, defauleRender);
       },
     },
   },
@@ -69,6 +128,11 @@ export default {
     },
     ...tableProps,
   },
+  watch: {
+    value(val) {
+      this.tableData = val || [];
+    },
+  },
   data() {
     return {
       tableData: this.value,
@@ -82,6 +146,9 @@ export default {
       return value.map((item, index) => ({ ...item, $index: index }));
     },
   },
+  // mounted() {
+  //   console.log(this.$scopedSlots);
+  // },
   methods: {
     onHeaderClick() {
       this.tableEditCell = {};
--
libgit2 0.21.0