cnhis-design-vue 2.1.56 → 2.1.58

package/packages/select/src/TableSelect/index.vue

@@ -1,514 +1,514 @@
-<template>
-  <!-- <div
-    class="table-select"
-    @mousedown="
-      e => {
-        e.preventDefault();
-        this.isOpen = true;
-      }
-    "
-  > -->
-  <div class="table-select" @mousedown="mousedown($event)">
-    <a-select
-      ref="selectBox"
-      v-on="$listeners"
-      v-bind="$attrs"
-      :showSearch="type === 'noEdit'"
-      :value="value"
-      :not-found-content="fetching ? undefined : null"
-      :mode="mode"
-      :open="isOpen"
-      style="width: 100%"
-      :dropdownStyle="{ 'z-index': 100 }"
-      @blur="isSearch = false"
-      @focus="isSearch = true"
-      @search="debounceSearch"
-      @change="valueChange"
-      :getPopupContainer="
-        triggerNode => {
-          return triggerNode.parentNode || document.body;
-        }
-      "
-    >
-      <div slot="dropdownRender" slot-scope="menu">
-        <div v-if="fetching" class="nodata-box">
-          <a-spin slot="notFoundContent" />
-        </div>
-        <template v-else>
-          <v-nodes :vnodes="menu" />
-          <c-grid
-            border="inner"
-            class="c-grid"
-            ref="xTable"
-            resizable
-            auto-resize
-            show-overflow
-            show-header-overflow
-            highlight-hover-row
-            highlight-current-row
-            max-height="300"
-            align="center"
-            row-id="id"
-            :columns="columns"
-            :data="tableData"
-            :radio-config="{ trigger: 'row', checkRowKey: defaultSelecteRow }"
-            :edit-config="{ trigger: 'click', mode: 'cell' }"
-            :edit-rules="rules"
-            @radio-change="radioChangeEvent"
-            @cell-click="cellClick"
-          >
-            <template v-if="type === 'edit'" #operate="{ row }">
-              <span class="opt-btn" @click="deleteRow(row)">删除</span>
-            </template>
-
-            <template v-for="item in colSelectList" #[item.slots.edit]="scope">
-              <a-select
-                :key="item.slots.edit"
-                show-search
-                :placeholder="`请选择${item.title}`"
-                style="width: 100%"
-                :default-active-first-option="false"
-                :filter-option="false"
-                :not-found-content="null"
-                :defaultValue="scope.row[item.field]"
-                v-model="scope.row[item.field]"
-                @change="$refs.xTable.updateStatus(scope)"
-                @search="value => cellSearch(value, scope.row, item.field)"
-              >
-                <a-select-option :key="option.value" :value="option.value" v-for="option in item.editRender.options">
-                  {{ option.label }}
-                </a-select-option>
-              </a-select>
-            </template>
-
-            <template #empty>
-              <span>
-                <p class="no-data">暂无数据</p>
-                <a-button class="no-data" size="small" @click="isOpen = false">关闭</a-button>
-              </span>
-            </template>
-          </c-grid>
-          <div class="bottom-box">
-            <a-pagination
-              v-if="type === 'noEdit'"
-              :total="total"
-              show-size-changer
-              show-quick-jumper
-              @change="change"
-              :current="page"
-              @showSizeChange="showSizeChange"
-              :page-size.sync="pageSize"
-              size="small"
-            />
-            <template v-else>
-              <a-button type="primary" style="margin-right: auto" @click="addRow">新增</a-button>
-              <span v-show="!isOk" class="tips">请完善表格信息</span>
-              <span v-show="isOk && isRepeat" class="tips">表格信息不能重复</span>
-              <a-button style="margin-right: 10px" @click="cancel">取消</a-button>
-              <a-button type="primary" @click="saveRow">确定</a-button>
-            </template>
-          </div>
-        </template>
-      </div>
-    </a-select>
-  </div>
-</template>
-<script>
-/**
- * @author wenhongling
- * @desc 根据reuseapp项目功能定制
- * @time 2021-09-29
- */
-import Vue from 'vue';
-import { Select, Button, Icon, Spin, Pagination } from 'ant-design-vue';
-import Grid from '~/grid';
-import create from '@/core/create';
-import vexutils from '@/utils/vexutils';
-
-export default create({
-  name: 'table-select',
-  props: {
-    type: {
-      type: String,
-      default: 'noEdit'
-    },
-    columns: {
-      type: Array,
-      require: true
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    selectAttr: {
-      type: String,
-      default: ''
-    },
-    fetching: {
-      type: Boolean,
-      default: false
-    },
-    validRules: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  computed: {
-    mode() {
-      const obj = this.columns.find(v => v.type);
-      return obj?.type === 'checkbox' || this.type === 'edit' ? 'multiple' : 'default';
-    },
-    colSelectList() {
-      return this.columns.filter(v => v.slots?.edit);
-    }
-  },
-  beforeCreate() {
-    Vue.use(Select)
-      .use(Icon)
-      .use(Spin)
-      .use(Pagination)
-      .use(Button);
-  },
-  components: {
-    VNodes: {
-      functional: true,
-      render: (h, ctx) => {
-        return ctx.props.vnodes;
-      }
-    },
-    [Grid.name]: Grid
-  },
-  data() {
-    return {
-      value: this.type === 'edit' ? [] : '',
-      tableData: [],
-      setDefaultValue: true,
-      defaultSelecteRow: '',
-      isOpen: false,
-      isOk: true,
-      isRepeat: false,
-      page: 1, // 配置page是因为，使用时分页触发page没有同步
-      isSearch: true,
-      rules: {},
-      pageSize: 10
-    };
-  },
-  watch: {
-    data: {
-      handler(value) {
-        if (value) {
-          this.tableData = JSON.parse(JSON.stringify(this.data));
-          const { defaultValue = '' } = this.$attrs;
-          // 默认值相关
-          if (this.tableData.length && this.type === 'noEdit' && this.setDefaultValue && defaultValue) {
-            this.value = defaultValue;
-            this.defaultSelecteRow = this.tableData.find(v => v[this.selectAttr] === defaultValue).id;
-            this.setDefaultValue = false;
-          }
-
-          if (this.type === 'edit' && this.tableData.length) {
-            this.setValues(this.tableData);
-          }
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  mounted() {
-    this.$nextTick().then(() => {
-      document.addEventListener('mouseup', this.handlerMouseUp, true);
-    });
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    cellSearch(value, row, field) {
-      // 需要处理：保留不为空的上一个的value值
-      if (value) {
-        row[field] = value;
-      }
-    },
-    mousedown(e) {
-      this.isOpen = true;
-      this.type === 'edit' && (this.isOk = true);
-      if (e.target?.className === 'ant-select-selection__rendered') {
-        if (this.type === 'noEdit') {
-          this.isSearch = true;
-          // 展开就搜索会导致当前选中行显示错误
-          // this.onSearch('');
-        }
-        e.preventDefault();
-      }
-    },
-    handlerMouseUp(e) {
-      const target = e.target;
-      const className = target?.className;
-      if (this.isOpen) {
-        if (!this.$el?.contains(target) && !className?.includes('vxe-select-option') && !className?.includes('ant-select-dropdown-menu-item')) {
-          if (this.type === 'noEdit') {
-            this.isOpen = false;
-          } else {
-            this.cancel();
-          }
-        }
-      }
-    },
-    init() {
-      this.debounceSearch = vexutils.debounce(this.debounceSearch, 800);
-
-      this.setValidRules();
-    },
-    setValidRules() {
-      if (this.type === 'edit') {
-        if (!Object.keys(this.validRules || {}).length) {
-          const rules = {};
-          this.columns.forEach(v => {
-            v.field && (rules[v.field] = [{ required: true, message: `请填入${v.title}` }]);
-          });
-          this.$set(this, 'rules', rules);
-        } else {
-          this.$set(this, 'rules', JSON.parse(JSON.stringify(this.validRules)));
-        }
-      }
-    },
-    debounceSearch(value) {
-      if (this.type === 'noEdit') {
-        if (this.isSearch) {
-          // 防止离开焦点时触发paginationchange
-          this.$emit('update:fetching', true);
-          this.page = 1;
-          this.$emit('paginationchange', { page: 1, selectAttrVal: value });
-        }
-        if (!this.isSearch && !value) this.isSearch = true;
-      }
-    },
-    change(page, pageSize) {
-      this.pageSize = pageSize;
-      this.$emit('update:fetching', true);
-      this.page = page;
-      this.$emit('paginationchange', { page, pageSize });
-      this.isSearch = true; // 防止mousedown和focus方法都没有触发isSearch为true
-    },
-    showSizeChange(current, size) {
-      this.pageSize = size;
-      this.$emit('update:fetching', true);
-      this.page = current;
-      this.$emit('paginationchange', { page: current, pageSize: size });
-      this.isSearch = true; // 防止mousedown和focus方法都没有触发isSearch为true
-    },
-    radioChangeEvent({ row }) {
-      if (this.mode === 'default') {
-        this.isOpen = false;
-        this.value = row[this.selectAttr];
-        this.$emit('change', { value: this.value, row });
-      }
-    },
-    cellClick() {
-      if (this.type === 'noEdit') {
-        this.isOpen = false;
-      }
-    },
-    async addRow() {
-      const $table = this.$refs.xTable;
-      const tableData = $table.getTableData().tableData;
-      let record = {
-        id: tableData.length ? +(tableData[tableData.length - 1]?.id || 0) + 1 + '' : '1'
-      };
-      this.columns.forEach(v => {
-        if (v.field) {
-          record[v.field] = '';
-        }
-        if (v?.slots?.edit) {
-          record[v.field] = undefined;
-        }
-      });
-      const { row: newRow } = await $table.insertAt(record, -1);
-    },
-    async deleteRow(row) {
-      const $table = this.$refs.xTable;
-      const index = $table.getRowIndex(row);
-      await $table.remove(row);
-      !!~index && this.value.splice(index, 1);
-    },
-    async cancel() {
-      this.isOpen = false;
-      const index = this.value?.length || 0;
-      const $table = this.$refs.xTable;
-      const tableData = $table.getTableData().tableData;
-      const invalidTableData = tableData.slice(index);
-      index !== tableData.length && (await $table.remove(invalidTableData));
-    },
-    async saveRow() {
-      const $table = this.$refs.xTable;
-      const tableData = $table.getTableData().tableData;
-      // 校验已经填入数据的行全部值不能为空
-      // const effectiveTableData = tableData.filter(v => Object.keys(v).some(k => k !== 'id' && (v[k] !== '' || v[k].length)));
-      // const invalidTableData = tableData.filter(v => Object.keys(v).every(k => k !== 'id' && (!v[k]?.length))); // 失效的数据，即新增全部为空的
-
-      const effectiveTableData = tableData.filter(v => {
-        return Object.keys(v).some(k => {
-          if (k == 'id') {
-            return false;
-          } else {
-            return v[k] || v[k]?.length;
-          }
-        });
-      });
-      const invalidTableData = tableData.filter(v => {
-        return Object.keys(v).every(k => {
-          if (k == 'id') {
-            return true;
-          } else {
-            return !v[k]?.length;
-          }
-        });
-      });
-
-      let isOk = false;
-      if (Object.keys(this.rules).length && this.type === 'edit') {
-        const errMap = await $table.validate(effectiveTableData).catch(errMap => errMap);
-        isOk = !errMap ? true : false;
-      } else {
-        isOk = effectiveTableData.every(v => Object.values(v).every(k => k !== '' || v.length));
-      }
-
-      if (isOk) {
-        this.isOk = true;
-        this.setValues(effectiveTableData);
-        $table.remove(invalidTableData);
-        // 去重 表格信息不能重复，否则会报警告
-        let newArr = effectiveTableData.reduce((pre, cur) => {
-          let newCur = { ...cur };
-          newCur.id && delete newCur.id;
-          const index = pre.findIndex(v => {
-            let newV = { ...v };
-            newV.id && delete newV.id;
-            return JSON.stringify(newV) === JSON.stringify(newCur);
-          });
-          if (!~index) {
-            return pre.concat(cur);
-          } else {
-            return pre;
-          }
-        }, []);
-        if (newArr.length !== this.value.length) {
-          this.isRepeat = true;
-        } else {
-          this.isRepeat = false;
-          this.isOpen = false;
-        }
-      } else {
-        this.isOk = false;
-      }
-    },
-    setValues(tableData) {
-      this.value = tableData.map(v => {
-        let newV = { ...v };
-        Object.keys(v).forEach(k => {
-          if (!this.selectAttr || this.selectAttr.includes(k)) {
-            const cellObj = this.columns.find(j => j.field === k);
-            if (cellObj?.editRender?.name.includes('$select')) {
-              newV[k] = cellObj.editRender.options.find(q => q.value == v[k])?.label || '';
-            }
-            if (cellObj?.editRender?.name.includes('ASelect')) {
-              newV[k] = cellObj.editRender.options.find(q => q.value == v[k])?.label || v[k];
-            }
-          }
-          if (this.selectAttr && !this.selectAttr.includes(k)) {
-            delete newV[k];
-          }
-        });
-        if (newV.id) delete newV.id;
-        return Object.values(newV).join('/');
-      });
-    },
-    async valueChange(value) {
-      // 同步表格数据
-      const $table = this.$refs.xTable;
-      const tableData = $table.getTableData().tableData;
-      const index = this.value.findIndex(v => !value.includes(v));
-      await $table.remove(tableData[index]);
-      this.value = value;
-    }
-  },
-  beforeDestroy() {
-    document.removeEventListener('mouseup', this.handlerMouseUp, true);
-  }
-});
-</script>
-<style lang="less" scoped>
-@deep: ~'>>>';
-.nodata-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-}
-.no-data {
-  margin-top: 20px;
-}
-.no-data + .no-data {
-  margin: 10px 0 20px;
-}
-.opt-btn {
-  cursor: pointer;
-  color: #5585f5;
-}
-// .table-select {
-.bottom-box {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 5px;
-  .tips {
-    margin-right: 10px;
-    color: red;
-  }
-}
-@{deep} .c-grid {
-  .vxe-tree-cell,
-  .vxe-body--column,
-  .vxe-footer--column,
-  .vxe-header--column {
-    padding: 0;
-    height: 30px;
-  }
-  .vxe-cell {
-    padding: 0 4px;
-    line-height: 30px;
-    height: 30px;
-    min-height: 30px;
-    .vxe-cell--title {
-      > .anticon-setting {
-        font-size: 14px;
-      }
-    }
-
-    .ant-select-selection--single {
-      height: 28px;
-      .ant-select-selection__rendered {
-        line-height: 28px;
-      }
-    }
-  }
-  .vxe-cell .vxe-default-input,
-  .vxe-cell .vxe-default-select,
-  .vxe-cell .vxe-default-textarea,
-  .vxe-table--filter-wrapper .vxe-default-input,
-  .vxe-table--filter-wrapper .vxe-default-select,
-  .vxe-table--filter-wrapper .vxe-default-textarea,
-  .vxe-input {
-    height: 28px;
-  }
-}
-@{deep} .table-select .ant-pagination-item-active a {
-  color: #5585f5 !important;
-}
-// }
-</style>
+<template>
+  <!-- <div
+    class="table-select"
+    @mousedown="
+      e => {
+        e.preventDefault();
+        this.isOpen = true;
+      }
+    "
+  > -->
+  <div class="table-select" @mousedown="mousedown($event)">
+    <a-select
+      ref="selectBox"
+      v-on="$listeners"
+      v-bind="$attrs"
+      :showSearch="type === 'noEdit'"
+      :value="value"
+      :not-found-content="fetching ? undefined : null"
+      :mode="mode"
+      :open="isOpen"
+      style="width: 100%"
+      :dropdownStyle="{ 'z-index': 100 }"
+      @blur="isSearch = false"
+      @focus="isSearch = true"
+      @search="debounceSearch"
+      @change="valueChange"
+      :getPopupContainer="
+        triggerNode => {
+          return triggerNode.parentNode || document.body;
+        }
+      "
+    >
+      <div slot="dropdownRender" slot-scope="menu">
+        <div v-if="fetching" class="nodata-box">
+          <a-spin slot="notFoundContent" />
+        </div>
+        <template v-else>
+          <v-nodes :vnodes="menu" />
+          <c-grid
+            border="inner"
+            class="c-grid"
+            ref="xTable"
+            resizable
+            auto-resize
+            show-overflow
+            show-header-overflow
+            highlight-hover-row
+            highlight-current-row
+            max-height="300"
+            align="center"
+            row-id="id"
+            :columns="columns"
+            :data="tableData"
+            :radio-config="{ trigger: 'row', checkRowKey: defaultSelecteRow }"
+            :edit-config="{ trigger: 'click', mode: 'cell' }"
+            :edit-rules="rules"
+            @radio-change="radioChangeEvent"
+            @cell-click="cellClick"
+          >
+            <template v-if="type === 'edit'" #operate="{ row }">
+              <span class="opt-btn" @click="deleteRow(row)">删除</span>
+            </template>
+
+            <template v-for="item in colSelectList" #[item.slots.edit]="scope">
+              <a-select
+                :key="item.slots.edit"
+                show-search
+                :placeholder="`请选择${item.title}`"
+                style="width: 100%"
+                :default-active-first-option="false"
+                :filter-option="false"
+                :not-found-content="null"
+                :defaultValue="scope.row[item.field]"
+                v-model="scope.row[item.field]"
+                @change="$refs.xTable.updateStatus(scope)"
+                @search="value => cellSearch(value, scope.row, item.field)"
+              >
+                <a-select-option :key="option.value" :value="option.value" v-for="option in item.editRender.options">
+                  {{ option.label }}
+                </a-select-option>
+              </a-select>
+            </template>
+
+            <template #empty>
+              <span>
+                <p class="no-data">暂无数据</p>
+                <a-button class="no-data" size="small" @click="isOpen = false">关闭</a-button>
+              </span>
+            </template>
+          </c-grid>
+          <div class="bottom-box">
+            <a-pagination
+              v-if="type === 'noEdit'"
+              :total="total"
+              show-size-changer
+              show-quick-jumper
+              @change="change"
+              :current="page"
+              @showSizeChange="showSizeChange"
+              :page-size.sync="pageSize"
+              size="small"
+            />
+            <template v-else>
+              <a-button type="primary" style="margin-right: auto" @click="addRow">新增</a-button>
+              <span v-show="!isOk" class="tips">请完善表格信息</span>
+              <span v-show="isOk && isRepeat" class="tips">表格信息不能重复</span>
+              <a-button style="margin-right: 10px" @click="cancel">取消</a-button>
+              <a-button type="primary" @click="saveRow">确定</a-button>
+            </template>
+          </div>
+        </template>
+      </div>
+    </a-select>
+  </div>
+</template>
+<script>
+/**
+ * @author wenhongling
+ * @desc 根据reuseapp项目功能定制
+ * @time 2021-09-29
+ */
+import Vue from 'vue';
+import { Select, Button, Icon, Spin, Pagination } from 'ant-design-vue';
+import Grid from '~/grid';
+import create from '@/core/create';
+import vexutils from '@/utils/vexutils';
+
+export default create({
+  name: 'table-select',
+  props: {
+    type: {
+      type: String,
+      default: 'noEdit'
+    },
+    columns: {
+      type: Array,
+      require: true
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    selectAttr: {
+      type: String,
+      default: ''
+    },
+    fetching: {
+      type: Boolean,
+      default: false
+    },
+    validRules: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    mode() {
+      const obj = this.columns.find(v => v.type);
+      return obj?.type === 'checkbox' || this.type === 'edit' ? 'multiple' : 'default';
+    },
+    colSelectList() {
+      return this.columns.filter(v => v.slots?.edit);
+    }
+  },
+  beforeCreate() {
+    Vue.use(Select)
+      .use(Icon)
+      .use(Spin)
+      .use(Pagination)
+      .use(Button);
+  },
+  components: {
+    VNodes: {
+      functional: true,
+      render: (h, ctx) => {
+        return ctx.props.vnodes;
+      }
+    },
+    [Grid.name]: Grid
+  },
+  data() {
+    return {
+      value: this.type === 'edit' ? [] : '',
+      tableData: [],
+      setDefaultValue: true,
+      defaultSelecteRow: '',
+      isOpen: false,
+      isOk: true,
+      isRepeat: false,
+      page: 1, // 配置page是因为，使用时分页触发page没有同步
+      isSearch: true,
+      rules: {},
+      pageSize: 10
+    };
+  },
+  watch: {
+    data: {
+      handler(value) {
+        if (value) {
+          this.tableData = JSON.parse(JSON.stringify(this.data));
+          const { defaultValue = '' } = this.$attrs;
+          // 默认值相关
+          if (this.tableData.length && this.type === 'noEdit' && this.setDefaultValue && defaultValue) {
+            this.value = defaultValue;
+            this.defaultSelecteRow = this.tableData.find(v => v[this.selectAttr] === defaultValue).id;
+            this.setDefaultValue = false;
+          }
+
+          if (this.type === 'edit' && this.tableData.length) {
+            this.setValues(this.tableData);
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    this.$nextTick().then(() => {
+      document.addEventListener('mouseup', this.handlerMouseUp, true);
+    });
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    cellSearch(value, row, field) {
+      // 需要处理：保留不为空的上一个的value值
+      if (value) {
+        row[field] = value;
+      }
+    },
+    mousedown(e) {
+      this.isOpen = true;
+      this.type === 'edit' && (this.isOk = true);
+      if (e.target?.className === 'ant-select-selection__rendered') {
+        if (this.type === 'noEdit') {
+          this.isSearch = true;
+          // 展开就搜索会导致当前选中行显示错误
+          // this.onSearch('');
+        }
+        e.preventDefault();
+      }
+    },
+    handlerMouseUp(e) {
+      const target = e.target;
+      const className = target?.className;
+      if (this.isOpen) {
+        if (!this.$el?.contains(target) && !className?.includes('vxe-select-option') && !className?.includes('ant-select-dropdown-menu-item')) {
+          if (this.type === 'noEdit') {
+            this.isOpen = false;
+          } else {
+            this.cancel();
+          }
+        }
+      }
+    },
+    init() {
+      this.debounceSearch = vexutils.debounce(this.debounceSearch, 800);
+
+      this.setValidRules();
+    },
+    setValidRules() {
+      if (this.type === 'edit') {
+        if (!Object.keys(this.validRules || {}).length) {
+          const rules = {};
+          this.columns.forEach(v => {
+            v.field && (rules[v.field] = [{ required: true, message: `请填入${v.title}` }]);
+          });
+          this.$set(this, 'rules', rules);
+        } else {
+          this.$set(this, 'rules', JSON.parse(JSON.stringify(this.validRules)));
+        }
+      }
+    },
+    debounceSearch(value) {
+      if (this.type === 'noEdit') {
+        if (this.isSearch) {
+          // 防止离开焦点时触发paginationchange
+          this.$emit('update:fetching', true);
+          this.page = 1;
+          this.$emit('paginationchange', { page: 1, selectAttrVal: value });
+        }
+        if (!this.isSearch && !value) this.isSearch = true;
+      }
+    },
+    change(page, pageSize) {
+      this.pageSize = pageSize;
+      this.$emit('update:fetching', true);
+      this.page = page;
+      this.$emit('paginationchange', { page, pageSize });
+      this.isSearch = true; // 防止mousedown和focus方法都没有触发isSearch为true
+    },
+    showSizeChange(current, size) {
+      this.pageSize = size;
+      this.$emit('update:fetching', true);
+      this.page = current;
+      this.$emit('paginationchange', { page: current, pageSize: size });
+      this.isSearch = true; // 防止mousedown和focus方法都没有触发isSearch为true
+    },
+    radioChangeEvent({ row }) {
+      if (this.mode === 'default') {
+        this.isOpen = false;
+        this.value = row[this.selectAttr];
+        this.$emit('change', { value: this.value, row });
+      }
+    },
+    cellClick() {
+      if (this.type === 'noEdit') {
+        this.isOpen = false;
+      }
+    },
+    async addRow() {
+      const $table = this.$refs.xTable;
+      const tableData = $table.getTableData().tableData;
+      let record = {
+        id: tableData.length ? +(tableData[tableData.length - 1]?.id || 0) + 1 + '' : '1'
+      };
+      this.columns.forEach(v => {
+        if (v.field) {
+          record[v.field] = '';
+        }
+        if (v?.slots?.edit) {
+          record[v.field] = undefined;
+        }
+      });
+      const { row: newRow } = await $table.insertAt(record, -1);
+    },
+    async deleteRow(row) {
+      const $table = this.$refs.xTable;
+      const index = $table.getRowIndex(row);
+      await $table.remove(row);
+      !!~index && this.value.splice(index, 1);
+    },
+    async cancel() {
+      this.isOpen = false;
+      const index = this.value?.length || 0;
+      const $table = this.$refs.xTable;
+      const tableData = $table.getTableData().tableData;
+      const invalidTableData = tableData.slice(index);
+      index !== tableData.length && (await $table.remove(invalidTableData));
+    },
+    async saveRow() {
+      const $table = this.$refs.xTable;
+      const tableData = $table.getTableData().tableData;
+      // 校验已经填入数据的行全部值不能为空
+      // const effectiveTableData = tableData.filter(v => Object.keys(v).some(k => k !== 'id' && (v[k] !== '' || v[k].length)));
+      // const invalidTableData = tableData.filter(v => Object.keys(v).every(k => k !== 'id' && (!v[k]?.length))); // 失效的数据，即新增全部为空的
+
+      const effectiveTableData = tableData.filter(v => {
+        return Object.keys(v).some(k => {
+          if (k == 'id') {
+            return false;
+          } else {
+            return v[k] || v[k]?.length;
+          }
+        });
+      });
+      const invalidTableData = tableData.filter(v => {
+        return Object.keys(v).every(k => {
+          if (k == 'id') {
+            return true;
+          } else {
+            return !v[k]?.length;
+          }
+        });
+      });
+
+      let isOk = false;
+      if (Object.keys(this.rules).length && this.type === 'edit') {
+        const errMap = await $table.validate(effectiveTableData).catch(errMap => errMap);
+        isOk = !errMap ? true : false;
+      } else {
+        isOk = effectiveTableData.every(v => Object.values(v).every(k => k !== '' || v.length));
+      }
+
+      if (isOk) {
+        this.isOk = true;
+        this.setValues(effectiveTableData);
+        $table.remove(invalidTableData);
+        // 去重 表格信息不能重复，否则会报警告
+        let newArr = effectiveTableData.reduce((pre, cur) => {
+          let newCur = { ...cur };
+          newCur.id && delete newCur.id;
+          const index = pre.findIndex(v => {
+            let newV = { ...v };
+            newV.id && delete newV.id;
+            return JSON.stringify(newV) === JSON.stringify(newCur);
+          });
+          if (!~index) {
+            return pre.concat(cur);
+          } else {
+            return pre;
+          }
+        }, []);
+        if (newArr.length !== this.value.length) {
+          this.isRepeat = true;
+        } else {
+          this.isRepeat = false;
+          this.isOpen = false;
+        }
+      } else {
+        this.isOk = false;
+      }
+    },
+    setValues(tableData) {
+      this.value = tableData.map(v => {
+        let newV = { ...v };
+        Object.keys(v).forEach(k => {
+          if (!this.selectAttr || this.selectAttr.includes(k)) {
+            const cellObj = this.columns.find(j => j.field === k);
+            if (cellObj?.editRender?.name.includes('$select')) {
+              newV[k] = cellObj.editRender.options.find(q => q.value == v[k])?.label || '';
+            }
+            if (cellObj?.editRender?.name.includes('ASelect')) {
+              newV[k] = cellObj.editRender.options.find(q => q.value == v[k])?.label || v[k];
+            }
+          }
+          if (this.selectAttr && !this.selectAttr.includes(k)) {
+            delete newV[k];
+          }
+        });
+        if (newV.id) delete newV.id;
+        return Object.values(newV).join('/');
+      });
+    },
+    async valueChange(value) {
+      // 同步表格数据
+      const $table = this.$refs.xTable;
+      const tableData = $table.getTableData().tableData;
+      const index = this.value.findIndex(v => !value.includes(v));
+      await $table.remove(tableData[index]);
+      this.value = value;
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('mouseup', this.handlerMouseUp, true);
+  }
+});
+</script>
+<style lang="less" scoped>
+@deep: ~'>>>';
+.nodata-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+.no-data {
+  margin-top: 20px;
+}
+.no-data + .no-data {
+  margin: 10px 0 20px;
+}
+.opt-btn {
+  cursor: pointer;
+  color: #5585f5;
+}
+// .table-select {
+.bottom-box {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 5px;
+  .tips {
+    margin-right: 10px;
+    color: red;
+  }
+}
+@{deep} .c-grid {
+  .vxe-tree-cell,
+  .vxe-body--column,
+  .vxe-footer--column,
+  .vxe-header--column {
+    padding: 0;
+    height: 30px;
+  }
+  .vxe-cell {
+    padding: 0 4px;
+    line-height: 30px;
+    height: 30px;
+    min-height: 30px;
+    .vxe-cell--title {
+      > .anticon-setting {
+        font-size: 14px;
+      }
+    }
+
+    .ant-select-selection--single {
+      height: 28px;
+      .ant-select-selection__rendered {
+        line-height: 28px;
+      }
+    }
+  }
+  .vxe-cell .vxe-default-input,
+  .vxe-cell .vxe-default-select,
+  .vxe-cell .vxe-default-textarea,
+  .vxe-table--filter-wrapper .vxe-default-input,
+  .vxe-table--filter-wrapper .vxe-default-select,
+  .vxe-table--filter-wrapper .vxe-default-textarea,
+  .vxe-input {
+    height: 28px;
+  }
+}
+@{deep} .table-select .ant-pagination-item-active a {
+  color: #5585f5 !important;
+}
+// }
+</style>