doway-coms 2.5.1 → 2.5.3

package/packages/BasePulldown/src/index.vue

@@ -1,1330 +1,1331 @@
-<template>
-  <div class="d-control-container">
-    <div
-      class="d-control-label"
-      v-if="showLabel === true"
-      :style="{ width: labelWidth > 0 ? labelWidth + 'px' : 'none' }"
-    >
-      {{ label }}
-      <span v-if="rules && rules['required']" class="d-control-label-required"
-        >*</span
-      >
-      <Tooltip :title="tooltip" v-if="tooltip" style="margin: 0 2px">
-        <img src="../../styles/icon/help.png" alt="" style="width: 14px" />
-      </Tooltip>
-    </div>
-    <div
-      :class="{
-        'd-control': showLabel === true,
-        'd-grid-control': showLabel === false,
-      }"
-    >
-      <VxePulldown
-        style="width: 100%"
-        @hide-panel="pullDownHideEvent"
-        ref="pulldownRef"
-        v-if="edit === true"
-        transfer
-      >
-        <template #default>
-          <ValidationProvider :name="label" v-slot="v" :rules="rules">
-            <a-input
-              :size="'small'"
-              allow-clear
-              @change="inputChangeEvent"
-              class="inner-cell-control"
-              v-model="currentValue"
-              @click="inputClickEvent"
-              @focus="inputFocusEvent"
-              @blur="inputBlurEvent"
-              @keydown="inputKeydownEvent"
-              @keyup="inputKeyupEvent"
-              :class="{ 'd-error-input': v.errors.length > 0 }"
-              :disabled="disabled"
-            ></a-input>
-            <div class="d-error-msg">
-              {{ v.errors[0] }}
-            </div>
-          </ValidationProvider>
-        </template>
-        <template #dropdown>
-          <div class="pulldown-grid interceptor-class">
-            <vxe-grid
-              size="mini"
-              border
-              :row-class-name="gridRowStyle"
-              highlight-current-row
-              :keyboard-config="{ isArrow: true }"
-              highlight-hover-row
-              auto-resize
-              resizable
-              :loading="gridLoading"
-              height="auto"
-              ref="pupupGridView"
-              :data="searchRows"
-              @cell-click="gridCellClick"
-              @filter-visible="filterVisible"
-              :columns="internalColumns"
-              :checkbox-config="{ checkMethod: checkMethod }"
-              @sort-change="sortChange"
-              :filter-config="{
-                remote: true,
-              }"
-              :sort-config="{
-                multiple: true,
-                remote: true,
-                chronological: true,
-                defaultSort: defaultSort,
-              }"
-            >
-              <!-- :pager-config="gridPagerConfig" -->
-              <!-- @page-change="pageChangeEvent" -->
-              <template #matCode_header="{ column }">
-                <div class="first-col">
-                  <div class="first-col-top">
-                    {{ column.title }}
-                  </div>
-                  <div class="first-col-bottom">
-                    <input style="width: 100%" />
-                  </div>
-                </div>
-              </template>
-              <!--              普通输入框的过滤筛选-->
-              <template #text_filter="{ column }">
-                <div class="interceptor-class">
-                  <div v-for="(item, $index) in column.filters" :key="$index">
-                    <a-input
-                      allowClear
-                      v-model="item.data"
-                      @keyup.enter.native="filterConfirm(column)"
-                      style="margin-bottom: 5px"
-                    />
-                  </div>
-                  <a-button @click="filterAddExp(column)">添加条件</a-button>
-                  <a-button @click="filterConfirm(column)">确认</a-button>
-                </div>
-              </template>
-              <!--              选择筛选框-->
-              <template #select_filter="{ column }">
-                <div class="interceptor-class">
-                  <a-checkbox-group
-                    v-model="column.filters[0].data"
-                    @keyup.enter.native="filterConfirm(column)"
-                  >
-                    <div style="max-height: 200px; overflow-y: scroll">
-                      <div
-                        style="text-align: left"
-                        v-for="loopSource in column.params.dataSource"
-                        :key="loopSource.value"
-                      >
-                        <a-checkbox
-                          :value="loopSource.value"
-                          style="margin: 5px 0"
-                          >{{ loopSource.caption }}
-                        </a-checkbox>
-                      </div>
-                    </div>
-                  </a-checkbox-group>
-                  <br />
-                  <a-button @click="filterConfirm(column)">确认</a-button>
-                </div>
-              </template>
-              <template #pager>
-                <a-row>
-                  <a-col :span="8">
-                    <a-button
-                      v-if="isMultiSelect === true"
-                      type="primary"
-                      size="small"
-                      style="margin: 5px"
-                      @click="multiSelectConfirm"
-                    >
-                      确认选择
-                    </a-button>
-                    <a-button
-                      v-if="popupAddName"
-                      type="primary"
-                      size="small"
-                      style="margin: 5px"
-                      @click="pagerBtnClick(btn)"
-                    >
-                      新增
-                    </a-button>
-
-                    <template v-if="optBtns.length > 0">
-                      <a-button
-                        v-for="btn in optBtns"
-                        :key="btn.field"
-                        type="primary"
-                        size="small"
-                        style="margin: 5px"
-                        @click="pagerBtnClick(btn)"
-                      >
-                        {{ btn.name }}
-                      </a-button>
-                    </template>
-                  </a-col>
-                  <a-col :span="16">
-                    <vxe-pager
-                      align="right"
-                      size="mini"
-                      :current-page.sync="gridPagerConfig.currentPage"
-                      :page-size.sync="gridPagerConfig.pageSize"
-                      :total="gridPagerConfig.total"
-                      @page-change="pageChangeEvent"
-                    >
-                    </vxe-pager>
-                  </a-col>
-                </a-row>
-              </template>
-            </vxe-grid>
-          </div>
-        </template>
-      </VxePulldown>
-      <span v-if="edit === false">
-        <a v-if="route" @click="routeLinkClick">{{ currentValue }}</a>
-        <span v-else> {{ currentValue }}</span>
-      </span>
-    </div>
-    <keep-alive>
-      <div
-        :is="popupAddName"
-        ref="pupupAddView"
-        @popupSaveAfter="popupSaveAfter"
-      ></div>
-    </keep-alive>
-  </div>
-</template>
-
-<script>
-import XEUtils from 'xe-utils'
-import { sysRowState, sysFormState, controlType } from '../../utils/enum'
-import { replaceParamString, replaceParam } from '../../utils/common'
-import request from '../../utils/request'
-import { Input, Button, Row, Col, Checkbox } from 'ant-design-vue'
-import { ValidationProvider } from 'vee-validate'
-import { Pulldown } from 'vxe-table'
-import { Tooltip } from 'ant-design-vue'
-export default {
-  name: 'BasePulldown',
-  components: {
-    'a-input': Input,
-    'a-button': Button,
-    'a-row': Row,
-    'a-col': Col,
-    'a-checkbox': Checkbox,
-    'a-checkbox-group': Checkbox.Group,
-    VxePulldown: Pulldown,
-    ValidationProvider,
-    Tooltip,
-  },
-  data() {
-    return {
-      fetchFields: '',
-      internalColumns: [],
-      isInputChanged: false,
-      inputTimeout: null,
-      searchRows: [],
-      filterCols: [],
-      gridLoading: false,
-      gridPagerConfig: {
-        total: 0,
-        currentPage: 1,
-        pageSize: 10,
-      },
-      sorts: [],
-      defaultSort: [],
-      filterExpression: {
-        operator: 'and',
-        expressions: [],
-      },
-      newApiObj:{
-        newApi:''
-      }
-    }
-  },
-  props: {
-    dataSource: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    },
-    labelWidth: {
-      type: Number,
-      default: function () {
-        return 0
-      },
-    },
-    isMultiSelect: {
-      type: Boolean,
-      default: function () {
-        return false
-      },
-    },
-    popupAddName: {
-      type: String,
-      default: function () {
-        return null
-      },
-    },
-    popupAddPath: {
-      type: String,
-      default: function () {
-        return null
-      },
-    },
-    rules: {
-      type: Object,
-      default: function () {
-        return null
-      },
-    },
-    showLabel: {
-      type: Boolean,
-      default: function () {
-        return true
-      },
-    },
-    label: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    defaultExpression: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    formRow: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    row: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    edit: {
-      type: Boolean,
-      default: function () {
-        return false
-      },
-    },
-    route: Object,
-    placeholder: {
-      // 提示信息
-      type: String,
-    },
-    api: {
-      // api接口
-      type: String,
-    },
-    field: {
-      type: String,
-    },
-    pageSize: {
-      // 分页数量，默认不分页
-      type: Number,
-      default: () => {
-        return 0
-      },
-    },
-    columns: {
-      // 列集合
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    isOld: {
-      // 列集合
-      type: Boolean,
-      default: () => {
-        return false
-      },
-    },
-    exps: {
-      // 条件
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    value: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    optBtns: {
-      // 操作按钮
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    gridTable: {
-      // 操作按钮
-      type: Object,
-      default: () => {
-        return null
-      },
-    },
-    immediate: {
-      type: Boolean,
-      default: true,
-    },
-    isLocalData: {
-      type: Boolean,
-      default: false,
-    },
-    tooltip: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    propTableData: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    contrasts: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    allowAutoClear:{
-      type:Boolean,
-      default:function(){
-        return true
-      }
-    },
-    disabled:{
-      type:Boolean,
-      default:function(){
-        return false
-      }
-    },
-  },
-  watch: {
-    // 触发下拉表格字段更改，直接重新渲染
-    columns: {
-      handler(newVal) {
-        this.reloadColumn()
-      },
-      deep: true
-    }
-  },
-  computed: {
-    currentValue: {
-      // 动态计算currentValue的值
-      get: function () {
-        // return this.value // 将props中的value赋值给currentValue
-          for (let i = 0; i < this.dataSource.length; i++) {
-            const element = this.dataSource[i];
-            if (this.value === element.value) {
-              return element.caption
-            }
-          }
-          return this.value
-      },
-      set: function (val) {
-        this.$emit('input', val) // 通过$emit触发父组件
-      },
-    },
-  },
-  created() {
-    //   if (this.popupAddName && !this.$options.components[this.popupAddName]) {
-    //     // const tempRequire =  require('@/views' + this.popupAddPath + '.vue').default
-    //     // this.$options.components[this.popupAddName]  = tempRequire
-    //     this.$options.components[this.popupAddName] = () =>
-    //       import('@/views' + this.popupAddPath + '.vue')
-    //   }
-    this.gridPagerConfig.pageSize = this.pageSize
-
-    this.internalColumns.push({
-      type: 'seq',
-      fixed: 'left',
-      width: 50,
-    })
-
-    if (this.isMultiSelect === true) {
-      this.internalColumns.push({
-        type: 'checkbox',
-        fixed: 'left',
-        width: 40,
-      })
-    }
-
-    for (let i = 0; i < this.columns.length; i++) {
-      this.fetchFields = this.fetchFields + this.columns[i].field + ','
-      this.columns[i]['params'] = {
-        dataSource: [],
-      }
-      if (this.columns[i].dataSource) {
-        this.columns[i]['params'].dataSource = this.columns[i].dataSource
-      }
-      if (!this.columns[i].width) {
-        this.columns[i]['width'] = 100
-      }
-      if (this.columns[i].isCheckbox === true) {
-        this.columns[i]['type'] = 'checkbox'
-      }
-      if (!this.columns[i].controlType) {
-        this.columns[i].controlType = 'text'
-      }
-      // 设置字段的过滤插槽
-      if (this.columns[i].filter) {
-        this.columns[i]['filterMultiple'] = false
-
-        switch (this.columns[i].controlType) {
-          case 'checkbox':
-            this.columns[i]['slots'] = {
-              filter: `checkbox_filter`,
-            }
-            break
-          case 'select':
-            this.columns[i]['slots'] = {
-              filter: `select_filter`,
-            }
-            this.columns[i]['filters'] = [
-              {
-                data: [],
-              },
-            ]
-            break
-          default:
-            this.columns[i]['slots'] = {
-              filter: `text_filter`,
-            }
-            this.columns[i]['filters'] = [
-              {
-                data: '',
-              },
-            ]
-            break
-        }
-      }
-      // 默认排序
-      if (this.columns[i].defaultSort) {
-        this.defaultSort.push({
-          field: this.columns[i].field,
-          order: this.columns[i].defaultSort,
-        })
-        this.sorts.push([this.columns[i].field, this.columns[i].defaultSort])
-      }
-      this.internalColumns.push(this.columns[i])
-      if (this.columns[i].filter === true) {
-        this.filterCols.push(this.columns[i])
-      }
-    }
-  },
-  methods: {
-    // 刷新重置字段列
-    reloadColumn() {
-      this.internalColumns = []
-      this.fetchFields = []
-      this.internalColumns.push({
-        type: 'seq',
-        fixed: 'left',
-        width: 50,
-      })
-      if (this.isMultiSelect === true) {
-        this.internalColumns.push({
-          type: 'checkbox',
-          fixed: 'left',
-          width: 40,
-        })
-      }
-      for (let i = 0; i < this.columns.length; i++) {
-        this.fetchFields = this.fetchFields + this.columns[i].field + ','
-        this.columns[i]['params'] = {
-          dataSource: [],
-        }
-        if (this.columns[i].dataSource) {
-          this.columns[i]['params'].dataSource = this.columns[i].dataSource
-        }
-        if (!this.columns[i].width) {
-          this.columns[i]['width'] = 100
-        }
-        if (this.columns[i].isCheckbox === true) {
-          this.columns[i]['type'] = 'checkbox'
-        }
-        if (!this.columns[i].controlType) {
-          this.columns[i].controlType = 'text'
-        }
-        // 设置字段的过滤插槽
-        if (this.columns[i].filter) {
-          this.columns[i]['filterMultiple'] = false
-
-          switch (this.columns[i].controlType) {
-            case 'checkbox':
-              this.columns[i]['slots'] = {
-                filter: `checkbox_filter`,
-              }
-              break
-            case 'select':
-              this.columns[i]['slots'] = {
-                filter: `select_filter`,
-              }
-              this.columns[i]['filters'] = [
-                {
-                  data: [],
-                },
-              ]
-              break
-            default:
-              this.columns[i]['slots'] = {
-                filter: `text_filter`,
-              }
-              this.columns[i]['filters'] = [
-                {
-                  data: '',
-                },
-              ]
-              break
-          }
-        }
-        // 默认排序
-        if (this.columns[i].defaultSort) {
-          this.defaultSort.push({
-            field: this.columns[i].field,
-            order: this.columns[i].defaultSort,
-          })
-          this.sorts.push([this.columns[i].field, this.columns[i].defaultSort])
-        }
-        this.internalColumns.push(this.columns[i])
-        if (this.columns[i].filter === true) {
-          this.filterCols.push(this.columns[i])
-        }
-      }
-      this.$refs.pupupGridView.refreshColumn()
-    },
-    gridRowStyle(scope) {
-      if (scope.row.sysRepeat === true) {
-        return 'row--pending'
-      }
-      // if(scope.row.)
-    },
-    clearInputValue() {
-      if (this.isInputChanged === true) {
-        this.setLinkValue(null, this.row)
-        this.$emit('selectChanged', null)
-      }
-    },
-    routeLinkClick() {
-      let tempRouteName = this.route.name
-      let tempRouteQuery = this.row[this.route.field]
-      if (XEUtils.isArray(tempRouteName)) {
-        //需要不同条件跳转不同页面
-        for (let i = 0; i < tempRouteName.length; i++) {
-          if (tempRouteName[i].value === this.row[tempRouteName[i].field]) {
-            tempRouteQuery =
-              this.row[tempRouteName[i].query] || this.row[this.route.field]
-            tempRouteName = tempRouteName[i].name
-            break
-          }
-        }
-      }
-      this.$router.pushRoute({
-        name: tempRouteName,
-        query: { id: tempRouteQuery },
-      })
-    },
-    /**
-     * 输入框改变事件
-     */
-    inputChangeEvent(event) {
-      this.isInputChanged = true
-      if (event.type === 'click' && event.pointerType === 'mouse') {
-        //点击了清空按钮
-        this.$nextTick(() => {
-          this.clearInputValue()
-          this.inputClickEvent(null)
-        })
-      }
-    },
-    inputBlurEvent(event) {},
-    /**
-     * 输入框获取焦点事件
-     */
-    inputFocusEvent(event) {
-      event.currentTarget.select()
-      // this.$refs.pulldownRef.showPanel()
-      // this.searchData()
-    },
-    /**
-     * Tab键隐藏面板
-     */
-    inputKeydownEvent(event) {
-      if (event.keyCode === 9) {
-        //tab事件
-        if(this.allowAutoClear){
-          this.$refs.pulldownRef.hidePanel()
-            this.clearInputValue()
-        }
-      }
-    },
-    inputClickEvent(event) {
-      if (this.$refs.pulldownRef.isPanelVisible() === false) {
-        this.$refs.pulldownRef.showPanel()
-        this.clearColumnFilter()
-        this.searchData()
-      } else {
-        this.$refs.pulldownRef.hidePanel()
-        // 点击输入框隐藏panel时清空输入框
-        // if(this.allowAutoClear){
-        //   this.currentValue = ''
-        // }
-      }
-    },
-    /**
-     * 输入库输入事件
-     */
-    inputKeyupEvent(event) {
-      //好像ok
-      if (!this.immediate && event.keyCode !== 13) {
-        console.debug('davistest')
-      } else {
-        if (this.inputTimeout) {
-          clearTimeout(this.inputTimeout)
-        }
-        let vm = this
-        this.inputTimeout = setTimeout(() => {
-          //判断面板是否打开
-          if (vm.$refs.pulldownRef.isPanelVisible() === false) {
-            vm.$refs.pulldownRef.showPanel()
-          }
-          vm.searchData()
-        }, 500)
-      }
-    },
-    /**
-     * 网格列选中事件
-     */
-    gridCellClick({ row, column }) {
-      if (row.sysRepeat === true) {
-        return
-      }
-      if (column.type === 'seq' || column.type === 'checkbox') {
-        return
-      }
-      this.isInputChanged = false
-      this.setLinkValue(row, this.row)
-      this.$emit('selectChanged', row)
-      this.$refs.pulldownRef.hidePanel()
-    },
-    setLinkValue(pulldownRow, oriRow) {
-      for (let i = 0; i < this.internalColumns.length; i++) {
-        if (this.internalColumns[i].linkField) {
-          let tempLinkFields = this.internalColumns[i].linkField.split('.')
-          let tempRow = oriRow
-          //  for(let j=0;j<tempLinkFields.length;j++){
-          //     let tempField = tempLinkFields[j]
-          //     //如果赋值的属性不存在数据集中，就忽略更新，防止修改后网格单元格值不更细
-          //     if (!(tempField in tempRow)) {
-          //       this.$antwarning(
-          //         '赋值字段[' + this.internalColumns[i].linkField + ']不存在'
-          //       )
-          //       break
-          //     }
-          //     if(j===tempLinkFields.length-1){
-          //       if (pulldownRow === null) {
-          //         if (this.internalColumns[i].nullClear === false) {
-          //           //是否空值清除数据，用于可选可输入的控件
-          //           continue
-          //         }
-          //         this.$set(tempRow, tempField, null)
-          //         } else {
-          //           this.$set(
-          //             tempRow,
-          //             tempField,
-          //             this.getLinkValue(tempField, pulldownRow)
-          //           )
-          //         }
-          //     }else{
-          //       tempRow = tempRow[tempField]
-          //     }
-          //  }
-
-          //如果赋值的属性不存在数据集中，就忽略更新，防止修改后网格单元格值不更细
-          if (!(this.internalColumns[i].linkField in oriRow)) {
-            this.$antwarning(
-              '赋值字段[' + this.internalColumns[i].linkField + ']不存在'
-            )
-            continue
-          }
-          if (pulldownRow === null) {
-            if (this.internalColumns[i].nullClear === false) {
-              //是否空值清楚数据，用于可选可输入的控件
-              continue
-            }
-            this.$set(oriRow, this.internalColumns[i].linkField, null)
-          } else {
-            this.$set(
-              oriRow,
-              this.internalColumns[i].linkField,
-              this.getLinkValue(this.internalColumns[i].field, pulldownRow)
-            )
-          }
-        }
-      }
-    },
-    getLinkValue(field, row) {
-      let linkField = field.split('.')
-      if (linkField.length > 1) {
-        let fieldValue = row
-        for (let i = 0; i < linkField.length; i++) {
-          if (
-            fieldValue[linkField[i]] === undefined ||
-            fieldValue[linkField[i]] === null
-          ) {
-            return null
-          }
-          fieldValue = fieldValue[linkField[i]]
-        }
-        return fieldValue
-      }
-      return row[field]
-    },
-    /**
-     * 左下角按钮点击事件
-     */
-    pagerBtnClick(btn) {
-      this.$refs.pupupAddView.show()
-      // this.$emit('pulldownBtnClick', btn)
-      this.$refs.pulldownRef.hidePanel()
-    },
-    // 多选内容时，若数据不满足条件，不可选中
-    checkMethod({ row }) {
-      if (row.sysRepeat) {
-        return false
-      }
-      return true
-    },
-    /**
-     * 确认多选
-     */
-    multiSelectConfirm() {
-      this.isInputChanged = false
-      this.$emit(
-        'confirmMultiSelect',
-        this,
-        this.$refs.pupupGridView.getCheckboxRecords(true)
-      )
-      this.$refs.pulldownRef.hidePanel()
-    },
-    popupSaveAfter(pupupAddRowInfo) {
-      let postData = {
-        fields: null,
-        begin: 1,
-        size: 1,
-        expression: {},
-        sorts: '',
-      }
-      let tempKeyExp = XEUtils.find(
-        this.internalColumns,
-        (item) => item.isKey === true
-      )
-      postData.expression = {
-        operator: 'and',
-        expressions: [
-          {
-            operator: 'and',
-            expressions: [
-              {
-                field: tempKeyExp.field,
-                operator: 'EQ',
-                value: pupupAddRowInfo['id'],
-              },
-            ],
-          },
-        ],
-      }
-      let vm = this
-      let tempApi = this.getPostApi(postData)
-      request({
-        url: tempApi,
-        method: 'post',
-        data: postData,
-      })
-        .then((responseData) => {
-          if (responseData.content.length > 0) {
-            vm.setLinkValue(responseData.content[0], vm.row)
-            vm.$emit('selectChanged', responseData.content[0])
-          }
-        })
-        .catch((error) => {
-          console.error(error)
-        })
-        .finally(() => {})
-    },
-    /**
-     * 分页改变事件
-     */
-    pageChangeEvent({ currentPage, pageSize }) {
-      this.gridPagerConfig.currentPage = currentPage
-      this.gridPagerConfig.pageSize = pageSize
-      this.searchData()
-    },
-    /**
-     * 面板隐藏事件
-     */
-    pullDownHideEvent({ $event }) {
-      if(this.allowAutoClear){
-        this.clearInputValue()
-      }
-    },
-    /**
-     * 查询数据
-     */
-    searchData() {
-      if (this.isLocalData === true) {
-        let tempSearch = {
-          value: this.currentValue,
-          dataSource: [],
-        }
-        this.$emit('preSearch', tempSearch)
-        this.searchRows = tempSearch.dataSource
-        this.gridPagerConfig.total = tempSearch.dataSource.length
-        return
-      }
-
-      let tempExp = {
-        operator: 'or',
-        expressions: [],
-      }
-      if (this.isOld === true) {
-        tempExp = ''
-      }
-      if (this.filterExpression.expressions.length > 0) {
-        tempExp.expressions.push(this.filterExpression)
-      } else if (this.currentValue) {
-        for (let i = 0; i < this.filterCols.length; i++) {
-          if (this.isOld === true) {
-            tempExp =
-              tempExp +
-              this.filterCols[i].field +
-              '.contains("' +
-              this.currentValue +
-              '")'
-            if (i < this.filterCols.length - 1) {
-              tempExp = tempExp + ' or '
-            }
-          } else {
-            if (this.filterCols[i].controlType == 'number') {
-              tempExp.expressions.push({
-                field: this.filterCols[i].field,
-                operator: 'EQ',
-                value: Number(this.currentValue),
-              })
-            } else {
-              tempExp.expressions.push({
-                field: this.filterCols[i].field,
-                operator: 'CO',
-                value: this.currentValue,
-              })
-            }
-          }
-        }
-      }
-      if (this.isOld === true && tempExp.length > 0) {
-        tempExp = '(' + tempExp + ')'
-      }
-
-      if (this.defaultExpression) {
-        let tempDefault = replaceParamString(
-          this.defaultExpression,
-          this.formRow,
-          this.$store.getters.moduleSelectItems[this.$route.meta.moduleId]
-        )
-
-        if (tempExp) {
-          tempExp = tempExp + ' and (' + tempDefault + ')'
-        } else {
-          tempExp = tempDefault
-        }
-      }
-
-      let postExpression = {
-        field: this.field,
-        expression: tempExp,
-        extendParams: {},
-      }
-      let repeatRowInfo = {
-        field: '',
-        values: [],
-      }
-      //查询之前从外部组件构造其他的条件
-      this.$emit('preSearch', postExpression, repeatRowInfo, this.row,this.newApiObj)
-      let postData = {
-        fields: this.fetchFields,
-        begin:
-          (this.gridPagerConfig.currentPage - 1) *
-            this.gridPagerConfig.pageSize +
-          1,
-        size: this.gridPagerConfig.pageSize,
-        expression: postExpression.expression,
-        sorts: this.sorts,
-        extendParams: postExpression.extendParams,
-      }
-      // console.log(postData.sorts);
-      let tempApi = this.getPostApi(postData)
-
-      // let tempApi = this.api
-      // if (this.api.indexOf('?') > 0) {
-      //   tempApi = this.api.substring(0, this.api.indexOf('?'))
-      //   let tempExtenParams = this.api.substring(this.api.indexOf('?') + 1)
-      //   tempExtenParams = replaceParam(tempExtenParams, this.formRow)
-      //   let tempSplitParams = tempExtenParams.split('&')
-      //   for (let i = 0; i < tempSplitParams.length; i++) {
-      //     let tempSplitValue = tempSplitParams[i].split('=')
-      //     this.$set(
-      //       postData.extendParams,
-      //       tempSplitValue[0],
-      //       tempSplitValue[1]
-      //     )
-      //   }
-      // }
-      let vm = this
-      vm.gridLoading = true
-      request({
-        url: tempApi,
-        method: 'post',
-        data: postData,
-      })
-        .then((responseData) => {
-          if (vm.isOld === true) {
-            vm.searchRows = responseData.data
-            vm.gridPagerConfig.total = responseData.extData.totalRows
-          } else {
-            vm.searchRows = responseData.content
-            vm.$refs.pupupGridView.loadData(vm.searchRows)
-            vm.gridPagerConfig.total = responseData.otherContent.totalRows
-          }
-          //本身结果集会返回sysRepeat为true的数据，所以处理数据的时候不能默认设置成false，会把后台返回的数据重置掉
-          //查询下拉显示列配置成sysRepeat的列字段名称
-          let repeatCols = vm.columns
-            .filter((x) => x.sysRepeat)
-            .map((y) => {
-              return {
-                field: y.field,
-                linkField: y.linkField,
-              }
-            });
-          //添加当前行关联值
-          XEUtils.arrayEach(vm.contrasts, (loopItem)=>{
-            repeatCols.push({
-              isCurrentRow:true,
-              linkField:loopItem
-            })
-          })
-          if(repeatCols.length>0 && vm.propTableData.length>1){
-              //设置是否重复
-              XEUtils.arrayEach(vm.searchRows,(loopItem)=>{
-                  if(loopItem.sysRepeat===true) return
-                  //循环弹出查询返回的数据是否已经存在于表格中
-                  loopItem.sysRepeat =  XEUtils.some(vm.propTableData,(loopTableItem)=>{
-                      //判断表格行数据是当前输入行就返回false,无需重复验证
-                      if(loopTableItem['id']===vm.row['id']){
-                         return false
-                      }
-
-                      for(let i=0;i<repeatCols.length;i++){
-                        let tempRepeatColInfo = repeatCols[i]
-                        //弹出数据列值
-                        let tempPopupRowColValue =tempRepeatColInfo.isCurrentRow===true?vm.row[tempRepeatColInfo.linkField]:
-                        loopItem[tempRepeatColInfo.field]
-                        //表格数据列值
-                        let tempTableRowColValue =  loopTableItem[tempRepeatColInfo.linkField]
-                        if(tempPopupRowColValue!==tempTableRowColValue){
-                            //只有有一个不一致，就返回false
-                            return false
-                        }
-                      }
-                      return true
-                  })
-            })
-          }
-          // if (repeatRowInfo.field) {
-          //   //设置重复值
-          //   XEUtils.arrayEach(vm.searchRows, (item) => {
-          //     if (
-          //       XEUtils.arrayIndexOf(
-          //         repeatRowInfo.values,
-          //         item[repeatRowInfo.field]
-          //       ) > -1
-          //     ) {
-          //       item['sysRepeat'] = true
-          //     } 
-          //   })
-          // }
-          // 若当前表格内只有一行，则不进行判断
-          // if (vm.propTableData.length == 1) {
-          //   return
-          // }
-          // 设置字段sysRepeat后，所定字段的值全部相同则不可选择
-          // let fieldNames = vm.columns
-          //   .filter((x) => x.sysRepeat)
-          //   .map((y) => {
-          //     return {
-          //       field: y.field,
-          //       linkField: y.linkField,
-          //     }
-          //   })
-          // if (fieldNames.length) {
-          //   vm.searchRows.forEach((info) => {
-          //     // 当一次创建多行时，过滤需特定字段不可为空的
-          //     // 获取数组对象，根据选定字段，过滤选定字段都为空的
-          //     let tempArr = vm.propTableData.filter((currentInfo) => {
-          //       let tempD = []
-          //       fieldNames.forEach((z) => {
-          //         // 字段的值若为null、undefined，记录过滤掉
-          //         if (!currentInfo[z.linkField]) {
-          //           tempD.push(true)
-          //         }
-          //       })
-          //       return tempD.length !== fieldNames.length
-          //     })
-          //     let arr = []
-          //     // 分为有参查询和无参查询
-          //     if (tempExp.expressions.length && fieldNames.length == 1) {
-          //       for (let j = 0; j < fieldNames.length; j++) {
-          //         let mapArr = tempArr.map(
-          //           (item) => item[fieldNames[j].linkField]
-          //         )
-          //         let setArr = new Set(mapArr)
-          //         if (setArr.size < mapArr.length) {
-          //           arr.push(true)
-          //         }
-          //       }
-          //       if (fieldNames.length === arr.length) {
-          //         info.sysRepeat = true
-          //       }
-          //     } else {
-          //       tempArr.forEach((item) => {
-          //         // 接口字段可能和表字段field不一致，linkField一致
-          //         for (let j = 0; j < fieldNames.length; j++) {
-          //           if (
-          //             info[fieldNames[j].field] == item[fieldNames[j].linkField]
-          //           ) {
-          //             arr.push(true)
-          //           }
-          //         }
-          //         if (fieldNames.length === arr.length) {
-          //           info.sysRepeat = true
-          //         }
-          //       })
-          //     }
-          //     if (info.sysRepeat && this.contrasts.length) {
-          //       let flag = 0
-          //       XEUtils.arrayEach(this.propTableData, (item) => {
-          //         if (item[this.field] === info[this.field]) {
-          //           XEUtils.arrayEach(this.contrasts, (loop) => {
-          //             if (
-          //               item[loop] === this.row[loop] &&
-          //               item.id !== this.row.id
-          //             ) {
-          //               flag++
-          //             }
-          //           })
-          //         }
-          //       })
-          //       if (flag === this.contrasts.length) {
-          //         info.sysRepeat = true
-          //       }
-          //     }
-          //   })
-          // }
-        })
-        .catch((error) => {
-          console.error(error)
-        })
-        .finally(() => {
-          vm.gridLoading = false
-        })
-    },
-    getPostApi(postData) {
-      let tempApi = this.api
-      if(this.newApiObj.newApi){
-        tempApi=this.newApiObj.newApi
-      }
-      if (this.api.indexOf('?') > 0) {
-        tempApi = this.api.substring(0, this.api.indexOf('?'))
-        let tempExtenParams = this.api.substring(this.api.indexOf('?') + 1)
-        tempExtenParams = replaceParam(tempExtenParams, this.formRow)
-        let tempSplitParams = tempExtenParams.split('&')
-        for (let i = 0; i < tempSplitParams.length; i++) {
-          let tempSplitValue = tempSplitParams[i].split('=')
-          this.$set(postData.extendParams, tempSplitValue[0], tempSplitValue[1])
-        }
-      }
-      return tempApi
-    },
-    sortChange({ column, property, order, sortBy, sortList, $event }) {
-      let currentSort = sortList.map((x) => {
-        return [x.field, x.order]
-      })
-      this.sorts = currentSort
-      this.searchData()
-    },
-
-    // 下拉容器筛选条件被触发
-    filterVisible({ column }) {
-      XEUtils.remove(column.filters, (item) => {
-        return item.data === ''
-      })
-      if (column.filters.length === 0) {
-        column.filters.push({
-          data: '',
-        })
-      }
-    },
-    filterConfirm(column) {
-      let vm = this
-      this.filterExpression = {
-        operator: 'and',
-        expressions: [],
-      }
-      let col = this.columns.find((x) => x.field === column.field)
-      switch (col.controlType) {
-        case 'select':
-          column.filters[0].checked = column.filters[0].data.length > 0
-          break
-        default:
-          column.filters[0].checked = column.filters[0].data !== ''
-          break
-      }
-      //通知外部筛选改变事件
-      let columns = this.$refs.pupupGridView.getTableColumn().collectColumn
-      XEUtils.each(columns, (item) => {
-        let filterExpression = {
-          operator: 'or',
-          expressions: [],
-        }
-        if (!col.controlType) {
-          col.controlType = 'text'
-        }
-        switch (col.controlType) {
-          case 'select':
-            if (item.filters && item.filters[0].checked) {
-              XEUtils.each(item.filters[0].data, (loopItem) => {
-                filterExpression.expressions.push({
-                  field: item.field,
-                  operator: 'EQ',
-                  value: loopItem,
-                })
-              })
-              if (filterExpression.expressions.length > 0) {
-                vm.filterExpression.expressions.push(filterExpression)
-              }
-            }
-            break
-          default:
-            if (item.filters && item.filters[0].checked) {
-              XEUtils.each(item.filters, (loopItem) => {
-                if (loopItem.data) {
-                  filterExpression.expressions.push({
-                    field: item.field,
-                    operator: 'CO',
-                    value: loopItem.data,
-                  })
-                }
-              })
-              if (filterExpression.expressions.length > 0) {
-                vm.filterExpression.expressions.push(filterExpression)
-              }
-            }
-            break
-        }
-      })
-      this.gridPagerConfig.currentPage = 1
-      this.searchData()
-      this.$refs.pupupGridView.closeFilter()
-    },
-    // 添加筛选条件
-    filterAddExp(column) {
-      column['filters'].push({
-        data: '',
-      })
-    },
-
-    //   清除筛选条件
-    clearColumnFilter() {
-      let columns = []
-      let vm = this
-      try {
-        columns = this.$refs.pupupGridView.getTableColumn().collectColumn
-      } catch (err) {
-        console.debug(err)
-      }
-      XEUtils.each(columns, (item) => {
-        let col = vm.columns.find((x) => x.field === item.field)
-        if (!col) {
-          return
-        }
-        if (!col.controlType) {
-          col.controlType = 'text'
-        }
-        switch (col.controlType) {
-          case 'select':
-            if (item.filters && item.filters[0].checked) {
-              item.filters = [
-                {
-                  data: [],
-                },
-              ]
-            }
-            break
-          default:
-            if (item.filters && item.filters[0].checked) {
-              item.filters = [
-                {
-                  data: '',
-                },
-              ]
-            }
-            break
-        }
-      })
-      this.filterExpression = {
-        operator: 'and',
-        expressions: [],
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.pulldown-grid {
-  min-width: 600px;
-  width: auto;
-  height: 350px;
-  background-color: #fff;
-  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
-}
-
-.d-grid-control {
-  height: 30px;
-}
-.interceptor-class {
-  padding: 10px;
-  ::v-deep .ant-btn {
-    margin: 10px 10px 0;
-  }
-}
-</style>
-
-<style lang="less">
-@import '../../styles/default.less';
-</style>
+<template>
+  <div class="d-control-container">
+    <div
+      class="d-control-label"
+      v-if="showLabel === true"
+      :style="{ width: labelWidth > 0 ? labelWidth + 'px' : 'none' }"
+    >
+      {{ label }}
+      <span v-if="rules && rules['required']" class="d-control-label-required"
+        >*</span
+      >
+      <Tooltip :title="tooltip" v-if="tooltip" style="margin: 0 2px">
+        <img src="../../styles/icon/help.png" alt="" style="width: 14px" />
+      </Tooltip>
+    </div>
+    <div
+      :class="{
+        'd-control': showLabel === true,
+        'd-grid-control': showLabel === false,
+      }"
+    >
+      <VxePulldown
+        style="width: 100%"
+        @hide-panel="pullDownHideEvent"
+        ref="pulldownRef"
+        v-if="edit === true"
+        transfer
+      >
+        <template #default>
+          <ValidationProvider :name="label" v-slot="v" :rules="rules">
+            <a-input
+              :size="'small'"
+              allow-clear
+              @change="inputChangeEvent"
+              class="inner-cell-control"
+              v-model="currentValue"
+              @click="inputClickEvent"
+              @focus="inputFocusEvent"
+              @blur="inputBlurEvent"
+              @keydown="inputKeydownEvent"
+              @keyup="inputKeyupEvent"
+              :class="{ 'd-error-input': v.errors.length > 0 }"
+              :disabled="disabled"
+            ></a-input>
+            <div class="d-error-msg">
+              {{ v.errors[0] }}
+            </div>
+          </ValidationProvider>
+        </template>
+        <template #dropdown>
+          <div class="pulldown-grid interceptor-class">
+            <vxe-grid
+              size="mini"
+              border
+              :row-class-name="gridRowStyle"
+              highlight-current-row
+              :keyboard-config="{ isArrow: true }"
+              highlight-hover-row
+              auto-resize
+              resizable
+              :loading="gridLoading"
+              height="auto"
+              ref="pupupGridView"
+              :data="searchRows"
+              @cell-click="gridCellClick"
+              @filter-visible="filterVisible"
+              :columns="internalColumns"
+              :checkbox-config="{ checkMethod: checkMethod }"
+              @sort-change="sortChange"
+              :filter-config="{
+                remote: true,
+              }"
+              :sort-config="{
+                multiple: true,
+                remote: true,
+                chronological: true,
+                defaultSort: defaultSort,
+              }"
+            >
+              <!-- :pager-config="gridPagerConfig" -->
+              <!-- @page-change="pageChangeEvent" -->
+              <template #matCode_header="{ column }">
+                <div class="first-col">
+                  <div class="first-col-top">
+                    {{ column.title }}
+                  </div>
+                  <div class="first-col-bottom">
+                    <input style="width: 100%" />
+                  </div>
+                </div>
+              </template>
+              <!--              普通输入框的过滤筛选-->
+              <template #text_filter="{ column }">
+                <div class="interceptor-class">
+                  <div v-for="(item, $index) in column.filters" :key="$index">
+                    <a-input
+                      allowClear
+                      v-model="item.data"
+                      @keyup.enter.native="filterConfirm(column)"
+                      style="margin-bottom: 5px"
+                    />
+                  </div>
+                  <a-button @click="filterAddExp(column)">添加条件</a-button>
+                  <a-button @click="filterConfirm(column)">确认</a-button>
+                </div>
+              </template>
+              <!--              选择筛选框-->
+              <template #select_filter="{ column }">
+                <div class="interceptor-class">
+                  <a-checkbox-group
+                    v-model="column.filters[0].data"
+                    @keyup.enter.native="filterConfirm(column)"
+                  >
+                    <div style="max-height: 200px; overflow-y: scroll">
+                      <div
+                        style="text-align: left"
+                        v-for="loopSource in column.params.dataSource"
+                        :key="loopSource.value"
+                      >
+                        <a-checkbox
+                          :value="loopSource.value"
+                          style="margin: 5px 0"
+                          >{{ loopSource.caption }}
+                        </a-checkbox>
+                      </div>
+                    </div>
+                  </a-checkbox-group>
+                  <br />
+                  <a-button @click="filterConfirm(column)">确认</a-button>
+                </div>
+              </template>
+              <template #pager>
+                <a-row>
+                  <a-col :span="8">
+                    <a-button
+                      v-if="isMultiSelect === true"
+                      type="primary"
+                      size="small"
+                      style="margin: 5px"
+                      @click="multiSelectConfirm"
+                    >
+                      确认选择
+                    </a-button>
+                    <a-button
+                      v-if="popupAddName"
+                      type="primary"
+                      size="small"
+                      style="margin: 5px"
+                      @click="pagerBtnClick(btn)"
+                    >
+                      新增
+                    </a-button>
+
+                    <template v-if="optBtns.length > 0">
+                      <a-button
+                        v-for="btn in optBtns"
+                        :key="btn.field"
+                        type="primary"
+                        size="small"
+                        style="margin: 5px"
+                        @click="pagerBtnClick(btn)"
+                      >
+                        {{ btn.name }}
+                      </a-button>
+                    </template>
+                  </a-col>
+                  <a-col :span="16">
+                    <vxe-pager
+                      align="right"
+                      size="mini"
+                      :current-page.sync="gridPagerConfig.currentPage"
+                      :page-size.sync="gridPagerConfig.pageSize"
+                      :total="gridPagerConfig.total"
+                      @page-change="pageChangeEvent"
+                    >
+                    </vxe-pager>
+                  </a-col>
+                </a-row>
+              </template>
+            </vxe-grid>
+          </div>
+        </template>
+      </VxePulldown>
+      <span v-if="edit === false">
+        <a v-if="route" @click="routeLinkClick">{{ currentValue }}</a>
+        <span v-else> {{ currentValue }}</span>
+      </span>
+    </div>
+    <keep-alive>
+      <div
+        :is="popupAddName"
+        ref="pupupAddView"
+        @popupSaveAfter="popupSaveAfter"
+      ></div>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import { sysRowState, sysFormState, controlType } from '../../utils/enum'
+import { replaceParamString, replaceParam } from '../../utils/common'
+import request from '../../utils/request'
+import { Input, Button, Row, Col, Checkbox } from 'ant-design-vue'
+import { ValidationProvider } from 'vee-validate'
+import { Pulldown } from 'vxe-table'
+import { Tooltip } from 'ant-design-vue'
+export default {
+  name: 'BasePulldown',
+  components: {
+    'a-input': Input,
+    'a-button': Button,
+    'a-row': Row,
+    'a-col': Col,
+    'a-checkbox': Checkbox,
+    'a-checkbox-group': Checkbox.Group,
+    VxePulldown: Pulldown,
+    ValidationProvider,
+    Tooltip,
+  },
+  data() {
+    return {
+      fetchFields: '',
+      internalColumns: [],
+      isInputChanged: false,
+      inputTimeout: null,
+      searchRows: [],
+      filterCols: [],
+      gridLoading: false,
+      gridPagerConfig: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10,
+      },
+      sorts: [],
+      defaultSort: [],
+      filterExpression: {
+        operator: 'and',
+        expressions: [],
+      },
+      newApiObj:{
+        newApi:''
+      }
+    }
+  },
+  props: {
+    dataSource: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    labelWidth: {
+      type: Number,
+      default: function () {
+        return 0
+      },
+    },
+    isMultiSelect: {
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+    popupAddName: {
+      type: String,
+      default: function () {
+        return null
+      },
+    },
+    popupAddPath: {
+      type: String,
+      default: function () {
+        return null
+      },
+    },
+    rules: {
+      type: Object,
+      default: function () {
+        return null
+      },
+    },
+    showLabel: {
+      type: Boolean,
+      default: function () {
+        return true
+      },
+    },
+    label: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    defaultExpression: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    formRow: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    row: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    edit: {
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+    route: Object,
+    placeholder: {
+      // 提示信息
+      type: String,
+    },
+    api: {
+      // api接口
+      type: String,
+    },
+    field: {
+      type: String,
+    },
+    pageSize: {
+      // 分页数量，默认不分页
+      type: Number,
+      default: () => {
+        return 0
+      },
+    },
+    columns: {
+      // 列集合
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    isOld: {
+      // 列集合
+      type: Boolean,
+      default: () => {
+        return false
+      },
+    },
+    exps: {
+      // 条件
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    value: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    optBtns: {
+      // 操作按钮
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    gridTable: {
+      // 操作按钮
+      type: Object,
+      default: () => {
+        return null
+      },
+    },
+    immediate: {
+      type: Boolean,
+      default: true,
+    },
+    isLocalData: {
+      type: Boolean,
+      default: false,
+    },
+    tooltip: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    propTableData: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    contrasts: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    allowAutoClear:{
+      type:Boolean,
+      default:function(){
+        return true
+      }
+    },
+    disabled:{
+      type:Boolean,
+      default:function(){
+        return false
+      }
+    },
+  },
+  watch: {
+    // 触发下拉表格字段更改，直接重新渲染
+    columns: {
+      handler(newVal) {
+        this.reloadColumn()
+      },
+      deep: true
+    }
+  },
+  computed: {
+    currentValue: {
+      // 动态计算currentValue的值
+      get: function () {
+        // return this.value // 将props中的value赋值给currentValue
+          for (let i = 0; i < this.dataSource.length; i++) {
+            const element = this.dataSource[i];
+            if (this.value === element.value) {
+              return element.caption
+            }
+          }
+          return this.value
+      },
+      set: function (val) {
+        this.$emit('input', val) // 通过$emit触发父组件
+      },
+    },
+  },
+  created() {
+    //   if (this.popupAddName && !this.$options.components[this.popupAddName]) {
+    //     // const tempRequire =  require('@/views' + this.popupAddPath + '.vue').default
+    //     // this.$options.components[this.popupAddName]  = tempRequire
+    //     this.$options.components[this.popupAddName] = () =>
+    //       import('@/views' + this.popupAddPath + '.vue')
+    //   }
+    this.gridPagerConfig.pageSize = this.pageSize
+
+    this.internalColumns.push({
+      type: 'seq',
+      fixed: 'left',
+      width: 50,
+    })
+
+    if (this.isMultiSelect === true) {
+      this.internalColumns.push({
+        type: 'checkbox',
+        fixed: 'left',
+        width: 40,
+      })
+    }
+
+    for (let i = 0; i < this.columns.length; i++) {
+      this.fetchFields = this.fetchFields + this.columns[i].field + ','
+      this.columns[i]['params'] = {
+        dataSource: [],
+      }
+      if (this.columns[i].dataSource) {
+        this.columns[i]['params'].dataSource = this.columns[i].dataSource
+      }
+      if (!this.columns[i].width) {
+        this.columns[i]['width'] = 100
+      }
+      if (this.columns[i].isCheckbox === true) {
+        this.columns[i]['type'] = 'checkbox'
+      }
+      if (!this.columns[i].controlType) {
+        this.columns[i].controlType = 'text'
+      }
+      // 设置字段的过滤插槽
+      if (this.columns[i].filter) {
+        this.columns[i]['filterMultiple'] = false
+
+        switch (this.columns[i].controlType) {
+          case 'checkbox':
+            this.columns[i]['slots'] = {
+              filter: `checkbox_filter`,
+            }
+            break
+          case 'select':
+            this.columns[i]['slots'] = {
+              filter: `select_filter`,
+            }
+            this.columns[i]['filters'] = [
+              {
+                data: [],
+              },
+            ]
+            break
+          default:
+            this.columns[i]['slots'] = {
+              filter: `text_filter`,
+            }
+            this.columns[i]['filters'] = [
+              {
+                data: '',
+              },
+            ]
+            break
+        }
+      }
+      // 默认排序
+      if (this.columns[i].defaultSort) {
+        this.defaultSort.push({
+          field: this.columns[i].field,
+          order: this.columns[i].defaultSort,
+        })
+        this.sorts.push([this.columns[i].field, this.columns[i].defaultSort])
+      }
+      this.internalColumns.push(this.columns[i])
+      if (this.columns[i].filter === true) {
+        this.filterCols.push(this.columns[i])
+      }
+    }
+  },
+  methods: {
+    // 刷新重置字段列
+    reloadColumn() {
+      this.internalColumns = []
+      this.fetchFields = []
+      this.internalColumns.push({
+        type: 'seq',
+        fixed: 'left',
+        width: 50,
+      })
+      if (this.isMultiSelect === true) {
+        this.internalColumns.push({
+          type: 'checkbox',
+          fixed: 'left',
+          width: 40,
+        })
+      }
+      for (let i = 0; i < this.columns.length; i++) {
+        this.fetchFields = this.fetchFields + this.columns[i].field + ','
+        this.columns[i]['params'] = {
+          dataSource: [],
+        }
+        if (this.columns[i].dataSource) {
+          this.columns[i]['params'].dataSource = this.columns[i].dataSource
+        }
+        if (!this.columns[i].width) {
+          this.columns[i]['width'] = 100
+        }
+        if (this.columns[i].isCheckbox === true) {
+          this.columns[i]['type'] = 'checkbox'
+        }
+        if (!this.columns[i].controlType) {
+          this.columns[i].controlType = 'text'
+        }
+        // 设置字段的过滤插槽
+        if (this.columns[i].filter) {
+          this.columns[i]['filterMultiple'] = false
+
+          switch (this.columns[i].controlType) {
+            case 'checkbox':
+              this.columns[i]['slots'] = {
+                filter: `checkbox_filter`,
+              }
+              break
+            case 'select':
+              this.columns[i]['slots'] = {
+                filter: `select_filter`,
+              }
+              this.columns[i]['filters'] = [
+                {
+                  data: [],
+                },
+              ]
+              break
+            default:
+              this.columns[i]['slots'] = {
+                filter: `text_filter`,
+              }
+              this.columns[i]['filters'] = [
+                {
+                  data: '',
+                },
+              ]
+              break
+          }
+        }
+        // 默认排序
+        if (this.columns[i].defaultSort) {
+          this.defaultSort.push({
+            field: this.columns[i].field,
+            order: this.columns[i].defaultSort,
+          })
+          this.sorts.push([this.columns[i].field, this.columns[i].defaultSort])
+        }
+        this.internalColumns.push(this.columns[i])
+        if (this.columns[i].filter === true) {
+          this.filterCols.push(this.columns[i])
+        }
+      }
+      this.$refs.pupupGridView.refreshColumn()
+    },
+    gridRowStyle(scope) {
+      if (scope.row.sysRepeat === true) {
+        return 'row--pending'
+      }
+      // if(scope.row.)
+    },
+    clearInputValue() {
+      if (this.isInputChanged === true) {
+        this.setLinkValue(null, this.row)
+        this.$emit('selectChanged', null)
+      }
+    },
+    routeLinkClick() {
+      let tempRouteName = this.route.name
+      let tempRouteQuery = this.row[this.route.field]
+      if (XEUtils.isArray(tempRouteName)) {
+        //需要不同条件跳转不同页面
+        for (let i = 0; i < tempRouteName.length; i++) {
+          if (tempRouteName[i].value === this.row[tempRouteName[i].field]) {
+            tempRouteQuery =
+              this.row[tempRouteName[i].query] || this.row[this.route.field]
+            tempRouteName = tempRouteName[i].name
+            break
+          }
+        }
+      }
+      if (!tempRouteQuery) return
+      this.$router.pushRoute({
+        name: tempRouteName,
+        query: { id: tempRouteQuery },
+      })
+    },
+    /**
+     * 输入框改变事件
+     */
+    inputChangeEvent(event) {
+      this.isInputChanged = true
+      if (event.type === 'click' && event.pointerType === 'mouse') {
+        //点击了清空按钮
+        this.$nextTick(() => {
+          this.clearInputValue()
+          this.inputClickEvent(null)
+        })
+      }
+    },
+    inputBlurEvent(event) {},
+    /**
+     * 输入框获取焦点事件
+     */
+    inputFocusEvent(event) {
+      event.currentTarget.select()
+      // this.$refs.pulldownRef.showPanel()
+      // this.searchData()
+    },
+    /**
+     * Tab键隐藏面板
+     */
+    inputKeydownEvent(event) {
+      if (event.keyCode === 9) {
+        //tab事件
+        if(this.allowAutoClear){
+          this.$refs.pulldownRef.hidePanel()
+            this.clearInputValue()
+        }
+      }
+    },
+    inputClickEvent(event) {
+      if (this.$refs.pulldownRef.isPanelVisible() === false) {
+        this.$refs.pulldownRef.showPanel()
+        this.clearColumnFilter()
+        this.searchData()
+      } else {
+        this.$refs.pulldownRef.hidePanel()
+        // 点击输入框隐藏panel时清空输入框
+        // if(this.allowAutoClear){
+        //   this.currentValue = ''
+        // }
+      }
+    },
+    /**
+     * 输入库输入事件
+     */
+    inputKeyupEvent(event) {
+      //好像ok
+      if (!this.immediate && event.keyCode !== 13) {
+        console.debug('davistest')
+      } else {
+        if (this.inputTimeout) {
+          clearTimeout(this.inputTimeout)
+        }
+        let vm = this
+        this.inputTimeout = setTimeout(() => {
+          //判断面板是否打开
+          if (vm.$refs.pulldownRef.isPanelVisible() === false) {
+            vm.$refs.pulldownRef.showPanel()
+          }
+          vm.searchData()
+        }, 500)
+      }
+    },
+    /**
+     * 网格列选中事件
+     */
+    gridCellClick({ row, column }) {
+      if (row.sysRepeat === true) {
+        return
+      }
+      if (column.type === 'seq' || column.type === 'checkbox') {
+        return
+      }
+      this.isInputChanged = false
+      this.setLinkValue(row, this.row)
+      this.$emit('selectChanged', row)
+      this.$refs.pulldownRef.hidePanel()
+    },
+    setLinkValue(pulldownRow, oriRow) {
+      for (let i = 0; i < this.internalColumns.length; i++) {
+        if (this.internalColumns[i].linkField) {
+          let tempLinkFields = this.internalColumns[i].linkField.split('.')
+          let tempRow = oriRow
+          //  for(let j=0;j<tempLinkFields.length;j++){
+          //     let tempField = tempLinkFields[j]
+          //     //如果赋值的属性不存在数据集中，就忽略更新，防止修改后网格单元格值不更细
+          //     if (!(tempField in tempRow)) {
+          //       this.$antwarning(
+          //         '赋值字段[' + this.internalColumns[i].linkField + ']不存在'
+          //       )
+          //       break
+          //     }
+          //     if(j===tempLinkFields.length-1){
+          //       if (pulldownRow === null) {
+          //         if (this.internalColumns[i].nullClear === false) {
+          //           //是否空值清除数据，用于可选可输入的控件
+          //           continue
+          //         }
+          //         this.$set(tempRow, tempField, null)
+          //         } else {
+          //           this.$set(
+          //             tempRow,
+          //             tempField,
+          //             this.getLinkValue(tempField, pulldownRow)
+          //           )
+          //         }
+          //     }else{
+          //       tempRow = tempRow[tempField]
+          //     }
+          //  }
+
+          //如果赋值的属性不存在数据集中，就忽略更新，防止修改后网格单元格值不更细
+          if (!(this.internalColumns[i].linkField in oriRow)) {
+            this.$antwarning(
+              '赋值字段[' + this.internalColumns[i].linkField + ']不存在'
+            )
+            continue
+          }
+          if (pulldownRow === null) {
+            if (this.internalColumns[i].nullClear === false) {
+              //是否空值清楚数据，用于可选可输入的控件
+              continue
+            }
+            this.$set(oriRow, this.internalColumns[i].linkField, null)
+          } else {
+            this.$set(
+              oriRow,
+              this.internalColumns[i].linkField,
+              this.getLinkValue(this.internalColumns[i].field, pulldownRow)
+            )
+          }
+        }
+      }
+    },
+    getLinkValue(field, row) {
+      let linkField = field.split('.')
+      if (linkField.length > 1) {
+        let fieldValue = row
+        for (let i = 0; i < linkField.length; i++) {
+          if (
+            fieldValue[linkField[i]] === undefined ||
+            fieldValue[linkField[i]] === null
+          ) {
+            return null
+          }
+          fieldValue = fieldValue[linkField[i]]
+        }
+        return fieldValue
+      }
+      return row[field]
+    },
+    /**
+     * 左下角按钮点击事件
+     */
+    pagerBtnClick(btn) {
+      this.$refs.pupupAddView.show()
+      // this.$emit('pulldownBtnClick', btn)
+      this.$refs.pulldownRef.hidePanel()
+    },
+    // 多选内容时，若数据不满足条件，不可选中
+    checkMethod({ row }) {
+      if (row.sysRepeat) {
+        return false
+      }
+      return true
+    },
+    /**
+     * 确认多选
+     */
+    multiSelectConfirm() {
+      this.isInputChanged = false
+      this.$emit(
+        'confirmMultiSelect',
+        this,
+        this.$refs.pupupGridView.getCheckboxRecords(true)
+      )
+      this.$refs.pulldownRef.hidePanel()
+    },
+    popupSaveAfter(pupupAddRowInfo) {
+      let postData = {
+        fields: null,
+        begin: 1,
+        size: 1,
+        expression: {},
+        sorts: '',
+      }
+      let tempKeyExp = XEUtils.find(
+        this.internalColumns,
+        (item) => item.isKey === true
+      )
+      postData.expression = {
+        operator: 'and',
+        expressions: [
+          {
+            operator: 'and',
+            expressions: [
+              {
+                field: tempKeyExp.field,
+                operator: 'EQ',
+                value: pupupAddRowInfo['id'],
+              },
+            ],
+          },
+        ],
+      }
+      let vm = this
+      let tempApi = this.getPostApi(postData)
+      request({
+        url: tempApi,
+        method: 'post',
+        data: postData,
+      })
+        .then((responseData) => {
+          if (responseData.content.length > 0) {
+            vm.setLinkValue(responseData.content[0], vm.row)
+            vm.$emit('selectChanged', responseData.content[0])
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {})
+    },
+    /**
+     * 分页改变事件
+     */
+    pageChangeEvent({ currentPage, pageSize }) {
+      this.gridPagerConfig.currentPage = currentPage
+      this.gridPagerConfig.pageSize = pageSize
+      this.searchData()
+    },
+    /**
+     * 面板隐藏事件
+     */
+    pullDownHideEvent({ $event }) {
+      if(this.allowAutoClear){
+        this.clearInputValue()
+      }
+    },
+    /**
+     * 查询数据
+     */
+    searchData() {
+      if (this.isLocalData === true) {
+        let tempSearch = {
+          value: this.currentValue,
+          dataSource: [],
+        }
+        this.$emit('preSearch', tempSearch)
+        this.searchRows = tempSearch.dataSource
+        this.gridPagerConfig.total = tempSearch.dataSource.length
+        return
+      }
+
+      let tempExp = {
+        operator: 'or',
+        expressions: [],
+      }
+      if (this.isOld === true) {
+        tempExp = ''
+      }
+      if (this.filterExpression.expressions.length > 0) {
+        tempExp.expressions.push(this.filterExpression)
+      } else if (this.currentValue) {
+        for (let i = 0; i < this.filterCols.length; i++) {
+          if (this.isOld === true) {
+            tempExp =
+              tempExp +
+              this.filterCols[i].field +
+              '.contains("' +
+              this.currentValue +
+              '")'
+            if (i < this.filterCols.length - 1) {
+              tempExp = tempExp + ' or '
+            }
+          } else {
+            if (this.filterCols[i].controlType == 'number') {
+              tempExp.expressions.push({
+                field: this.filterCols[i].field,
+                operator: 'EQ',
+                value: Number(this.currentValue),
+              })
+            } else {
+              tempExp.expressions.push({
+                field: this.filterCols[i].field,
+                operator: 'CO',
+                value: this.currentValue,
+              })
+            }
+          }
+        }
+      }
+      if (this.isOld === true && tempExp.length > 0) {
+        tempExp = '(' + tempExp + ')'
+      }
+
+      if (this.defaultExpression) {
+        let tempDefault = replaceParamString(
+          this.defaultExpression,
+          this.formRow,
+          this.$store.getters.moduleSelectItems[this.$route.meta.moduleId]
+        )
+
+        if (tempExp) {
+          tempExp = tempExp + ' and (' + tempDefault + ')'
+        } else {
+          tempExp = tempDefault
+        }
+      }
+
+      let postExpression = {
+        field: this.field,
+        expression: tempExp,
+        extendParams: {},
+      }
+      let repeatRowInfo = {
+        field: '',
+        values: [],
+      }
+      //查询之前从外部组件构造其他的条件
+      this.$emit('preSearch', postExpression, repeatRowInfo, this.row,this.newApiObj)
+      let postData = {
+        fields: this.fetchFields,
+        begin:
+          (this.gridPagerConfig.currentPage - 1) *
+            this.gridPagerConfig.pageSize +
+          1,
+        size: this.gridPagerConfig.pageSize,
+        expression: postExpression.expression,
+        sorts: this.sorts,
+        extendParams: postExpression.extendParams,
+      }
+      // console.log(postData.sorts);
+      let tempApi = this.getPostApi(postData)
+
+      // let tempApi = this.api
+      // if (this.api.indexOf('?') > 0) {
+      //   tempApi = this.api.substring(0, this.api.indexOf('?'))
+      //   let tempExtenParams = this.api.substring(this.api.indexOf('?') + 1)
+      //   tempExtenParams = replaceParam(tempExtenParams, this.formRow)
+      //   let tempSplitParams = tempExtenParams.split('&')
+      //   for (let i = 0; i < tempSplitParams.length; i++) {
+      //     let tempSplitValue = tempSplitParams[i].split('=')
+      //     this.$set(
+      //       postData.extendParams,
+      //       tempSplitValue[0],
+      //       tempSplitValue[1]
+      //     )
+      //   }
+      // }
+      let vm = this
+      vm.gridLoading = true
+      request({
+        url: tempApi,
+        method: 'post',
+        data: postData,
+      })
+        .then((responseData) => {
+          if (vm.isOld === true) {
+            vm.searchRows = responseData.data
+            vm.gridPagerConfig.total = responseData.extData.totalRows
+          } else {
+            vm.searchRows = responseData.content
+            vm.$refs.pupupGridView.loadData(vm.searchRows)
+            vm.gridPagerConfig.total = responseData.otherContent.totalRows
+          }
+          //本身结果集会返回sysRepeat为true的数据，所以处理数据的时候不能默认设置成false，会把后台返回的数据重置掉
+          //查询下拉显示列配置成sysRepeat的列字段名称
+          let repeatCols = vm.columns
+            .filter((x) => x.sysRepeat)
+            .map((y) => {
+              return {
+                field: y.field,
+                linkField: y.linkField,
+              }
+            });
+          //添加当前行关联值
+          XEUtils.arrayEach(vm.contrasts, (loopItem)=>{
+            repeatCols.push({
+              isCurrentRow:true,
+              linkField:loopItem
+            })
+          })
+          if(repeatCols.length>0 && vm.propTableData.length>1){
+              //设置是否重复
+              XEUtils.arrayEach(vm.searchRows,(loopItem)=>{
+                  if(loopItem.sysRepeat===true) return
+                  //循环弹出查询返回的数据是否已经存在于表格中
+                  loopItem.sysRepeat =  XEUtils.some(vm.propTableData,(loopTableItem)=>{
+                      //判断表格行数据是当前输入行就返回false,无需重复验证
+                      if(loopTableItem['id']===vm.row['id']){
+                         return false
+                      }
+
+                      for(let i=0;i<repeatCols.length;i++){
+                        let tempRepeatColInfo = repeatCols[i]
+                        //弹出数据列值
+                        let tempPopupRowColValue =tempRepeatColInfo.isCurrentRow===true?vm.row[tempRepeatColInfo.linkField]:
+                        loopItem[tempRepeatColInfo.field]
+                        //表格数据列值
+                        let tempTableRowColValue =  loopTableItem[tempRepeatColInfo.linkField]
+                        if(tempPopupRowColValue!==tempTableRowColValue){
+                            //只有有一个不一致，就返回false
+                            return false
+                        }
+                      }
+                      return true
+                  })
+            })
+          }
+          // if (repeatRowInfo.field) {
+          //   //设置重复值
+          //   XEUtils.arrayEach(vm.searchRows, (item) => {
+          //     if (
+          //       XEUtils.arrayIndexOf(
+          //         repeatRowInfo.values,
+          //         item[repeatRowInfo.field]
+          //       ) > -1
+          //     ) {
+          //       item['sysRepeat'] = true
+          //     }
+          //   })
+          // }
+          // 若当前表格内只有一行，则不进行判断
+          // if (vm.propTableData.length == 1) {
+          //   return
+          // }
+          // 设置字段sysRepeat后，所定字段的值全部相同则不可选择
+          // let fieldNames = vm.columns
+          //   .filter((x) => x.sysRepeat)
+          //   .map((y) => {
+          //     return {
+          //       field: y.field,
+          //       linkField: y.linkField,
+          //     }
+          //   })
+          // if (fieldNames.length) {
+          //   vm.searchRows.forEach((info) => {
+          //     // 当一次创建多行时，过滤需特定字段不可为空的
+          //     // 获取数组对象，根据选定字段，过滤选定字段都为空的
+          //     let tempArr = vm.propTableData.filter((currentInfo) => {
+          //       let tempD = []
+          //       fieldNames.forEach((z) => {
+          //         // 字段的值若为null、undefined，记录过滤掉
+          //         if (!currentInfo[z.linkField]) {
+          //           tempD.push(true)
+          //         }
+          //       })
+          //       return tempD.length !== fieldNames.length
+          //     })
+          //     let arr = []
+          //     // 分为有参查询和无参查询
+          //     if (tempExp.expressions.length && fieldNames.length == 1) {
+          //       for (let j = 0; j < fieldNames.length; j++) {
+          //         let mapArr = tempArr.map(
+          //           (item) => item[fieldNames[j].linkField]
+          //         )
+          //         let setArr = new Set(mapArr)
+          //         if (setArr.size < mapArr.length) {
+          //           arr.push(true)
+          //         }
+          //       }
+          //       if (fieldNames.length === arr.length) {
+          //         info.sysRepeat = true
+          //       }
+          //     } else {
+          //       tempArr.forEach((item) => {
+          //         // 接口字段可能和表字段field不一致，linkField一致
+          //         for (let j = 0; j < fieldNames.length; j++) {
+          //           if (
+          //             info[fieldNames[j].field] == item[fieldNames[j].linkField]
+          //           ) {
+          //             arr.push(true)
+          //           }
+          //         }
+          //         if (fieldNames.length === arr.length) {
+          //           info.sysRepeat = true
+          //         }
+          //       })
+          //     }
+          //     if (info.sysRepeat && this.contrasts.length) {
+          //       let flag = 0
+          //       XEUtils.arrayEach(this.propTableData, (item) => {
+          //         if (item[this.field] === info[this.field]) {
+          //           XEUtils.arrayEach(this.contrasts, (loop) => {
+          //             if (
+          //               item[loop] === this.row[loop] &&
+          //               item.id !== this.row.id
+          //             ) {
+          //               flag++
+          //             }
+          //           })
+          //         }
+          //       })
+          //       if (flag === this.contrasts.length) {
+          //         info.sysRepeat = true
+          //       }
+          //     }
+          //   })
+          // }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {
+          vm.gridLoading = false
+        })
+    },
+    getPostApi(postData) {
+      let tempApi = this.api
+      if(this.newApiObj.newApi){
+        tempApi=this.newApiObj.newApi
+      }
+      if (this.api.indexOf('?') > 0) {
+        tempApi = this.api.substring(0, this.api.indexOf('?'))
+        let tempExtenParams = this.api.substring(this.api.indexOf('?') + 1)
+        tempExtenParams = replaceParam(tempExtenParams, this.formRow)
+        let tempSplitParams = tempExtenParams.split('&')
+        for (let i = 0; i < tempSplitParams.length; i++) {
+          let tempSplitValue = tempSplitParams[i].split('=')
+          this.$set(postData.extendParams, tempSplitValue[0], tempSplitValue[1])
+        }
+      }
+      return tempApi
+    },
+    sortChange({ column, property, order, sortBy, sortList, $event }) {
+      let currentSort = sortList.map((x) => {
+        return [x.field, x.order]
+      })
+      this.sorts = currentSort
+      this.searchData()
+    },
+
+    // 下拉容器筛选条件被触发
+    filterVisible({ column }) {
+      XEUtils.remove(column.filters, (item) => {
+        return item.data === ''
+      })
+      if (column.filters.length === 0) {
+        column.filters.push({
+          data: '',
+        })
+      }
+    },
+    filterConfirm(column) {
+      let vm = this
+      this.filterExpression = {
+        operator: 'and',
+        expressions: [],
+      }
+      let col = this.columns.find((x) => x.field === column.field)
+      switch (col.controlType) {
+        case 'select':
+          column.filters[0].checked = column.filters[0].data.length > 0
+          break
+        default:
+          column.filters[0].checked = column.filters[0].data !== ''
+          break
+      }
+      //通知外部筛选改变事件
+      let columns = this.$refs.pupupGridView.getTableColumn().collectColumn
+      XEUtils.each(columns, (item) => {
+        let filterExpression = {
+          operator: 'or',
+          expressions: [],
+        }
+        if (!col.controlType) {
+          col.controlType = 'text'
+        }
+        switch (col.controlType) {
+          case 'select':
+            if (item.filters && item.filters[0].checked) {
+              XEUtils.each(item.filters[0].data, (loopItem) => {
+                filterExpression.expressions.push({
+                  field: item.field,
+                  operator: 'EQ',
+                  value: loopItem,
+                })
+              })
+              if (filterExpression.expressions.length > 0) {
+                vm.filterExpression.expressions.push(filterExpression)
+              }
+            }
+            break
+          default:
+            if (item.filters && item.filters[0].checked) {
+              XEUtils.each(item.filters, (loopItem) => {
+                if (loopItem.data) {
+                  filterExpression.expressions.push({
+                    field: item.field,
+                    operator: 'CO',
+                    value: loopItem.data,
+                  })
+                }
+              })
+              if (filterExpression.expressions.length > 0) {
+                vm.filterExpression.expressions.push(filterExpression)
+              }
+            }
+            break
+        }
+      })
+      this.gridPagerConfig.currentPage = 1
+      this.searchData()
+      this.$refs.pupupGridView.closeFilter()
+    },
+    // 添加筛选条件
+    filterAddExp(column) {
+      column['filters'].push({
+        data: '',
+      })
+    },
+
+    //   清除筛选条件
+    clearColumnFilter() {
+      let columns = []
+      let vm = this
+      try {
+        columns = this.$refs.pupupGridView.getTableColumn().collectColumn
+      } catch (err) {
+        console.debug(err)
+      }
+      XEUtils.each(columns, (item) => {
+        let col = vm.columns.find((x) => x.field === item.field)
+        if (!col) {
+          return
+        }
+        if (!col.controlType) {
+          col.controlType = 'text'
+        }
+        switch (col.controlType) {
+          case 'select':
+            if (item.filters && item.filters[0].checked) {
+              item.filters = [
+                {
+                  data: [],
+                },
+              ]
+            }
+            break
+          default:
+            if (item.filters && item.filters[0].checked) {
+              item.filters = [
+                {
+                  data: '',
+                },
+              ]
+            }
+            break
+        }
+      })
+      this.filterExpression = {
+        operator: 'and',
+        expressions: [],
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pulldown-grid {
+  min-width: 600px;
+  width: auto;
+  height: 350px;
+  background-color: #fff;
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+}
+
+.d-grid-control {
+  height: 30px;
+}
+.interceptor-class {
+  padding: 10px;
+  ::v-deep .ant-btn {
+    margin: 10px 10px 0;
+  }
+}
+</style>
+
+<style lang="less">
+@import '../../styles/default.less';
+</style>