n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/NstcForm/SelectindialogCustom/index.vue

@@ -1,648 +1,648 @@
-<template>
-  <div
-    :key="key"
-    :class="['select-in-dialog', { 'is-disabled': disabled }]"
-    :style="{ width: parseFloat(width) + 'px' }"
-  >
-    <div v-if="remote" class="select-in-dialog-result">
-      <SelectCustom
-        ref="selectCustom"
-        v-model="_value"
-        remote
-        filterable
-        option-value-is-object
-        :placeholder="placeholder"
-        :is-select-change-value.sync="isSelectChangeValue"
-        :value-key="valueKey"
-        :label-key="labelKey"
-        :multiple="multiple"
-        :clearable="clearable"
-        :disabled="disabled"
-        :http-method="httpMethod"
-        :url="url"
-        :query="query"
-        :query-params="queryParams"
-        :option-value-is-object="optionValueIsObject"
-        @clear="handleClear"
-      />
-      <i
-        class="el-icon-search select-in-dialog-result-remote-icon"
-        @click="!disabled && (dialogVisible = true) && handleSelectClick()"
-      ></i>
-    </div>
-    <div
-      v-else
-      class="select-in-dialog-result"
-      @click="!disabled && (dialogVisible = true) && handleSelectClick()"
-    >
-      <span :class="{ 'select-in-dialog-result-null': !resultLabel }">{{
-        resultLabel || '请选择'
-      }}</span>
-      <el-button
-        v-if="clearable && !disabled && hasValue"
-        type="text"
-        icon="el-icon-circle-close"
-        class="select-in-dialog-result-clear"
-        @click.stop="handleClear"
-      />
-      <i class="el-icon-search"></i>
-    </div>
-
-    <DialogCustom
-      v-model="dialogVisible"
-      :show-footer="multiple"
-      close-on-press-escape
-      close-on-click-modal
-      append-to-body
-      :title="title"
-      :footer-handlers="footerHandlers"
-      :width="dialogWidth"
-      @confirm="handleMultipleConfirm"
-    >
-      <slot v-if="!originalForm" name="form"></slot>
-      <NstcFormDialog
-        v-else-if="formConfig && formConfig.length"
-        ref="formCustom"
-        from="dialog"
-        :async-query.sync="asyncQuery"
-        :config="_formConfig"
-        :label-width="formLabelWidth"
-        @query="handleQuery"
-      />
-
-      <slot v-if="!originalTable" name="table"></slot>
-      <TableRadioCustom
-        v-else
-        v-model="_value"
-        :data="tableData"
-        :pagination.sync="pagination"
-        :show-pagination="showPagination"
-        :multiple="multiple"
-        :columns="columns"
-        :value-key="valueKey"
-        :label-key="labelKey"
-        @pagination-change="handlePaginationChange"
-        @change="handleTableChange"
-        @multiple-change="handleMultipleChange"
-      />
-    </DialogCustom>
-  </div>
-</template>
-
-<script>
-import DialogCustom from '../../NstcDialog/NstcDialog'
-import TableRadioCustom from '../TableRadioCustom/index'
-import SelectCustom from '../SelectCustom/index'
-import NstcFormDialog from '../ComponentSecond'
-
-import axios from '../../../../src/utils/axios'
-
-export default {
-  name: 'NstcSelectInDialog',
-
-  components: {
-    DialogCustom,
-    TableRadioCustom,
-    SelectCustom,
-    NstcFormDialog
-  },
-
-  props: {
-    // 双向绑定值,单选时为{ [valueKey]: 'xxx', [labelKey]: 'xxx' },多选时为[{ [valueKey]: 'xxx', [labelKey]: 'xxx' }, { [valueKey]: 'xxx', [labelKey]: 'xxx' },...]
-    value: {
-      type: [Object, Array, String],
-      default: null
-    },
-
-    width: {
-      type: [Number, String],
-      default: '224px'
-    },
-
-    // 是否多选
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-
-    // 是否可清空
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-
-    // 弹窗标题
-    title: {
-      type: String,
-      default: ''
-    },
-
-    // 弹窗表单配置项
-    formConfig: {
-      type: Array,
-      default: () => []
-    },
-
-    formLabelWidth: {
-      default: '80px',
-      type: [String, Number]
-    },
-
-    // 弹窗表单请求的url
-    url: {
-      type: String,
-      default: ''
-    },
-
-    // 弹窗表格列配置
-    columns: {
-      type: Array,
-      default: () => []
-    },
-
-    // 双向绑定值的valueKey，需对应到表格行数据的某个属性
-    valueKey: {
-      type: String,
-      default: 'key'
-    },
-
-    // 双向绑定值的labelKey，需对应到表格行数据的某个属性
-    labelKey: {
-      type: String,
-      default: ''
-    },
-
-    // 对请求参数的格式化
-    queryParamFormatter: {
-      type: Function,
-      default: undefined
-    },
-
-    // 对请求返回数据的格式化
-    queryDataFormatter: {
-      type: Function,
-      default: undefined
-    },
-
-    // 分页器是否展示
-    showPagination: {
-      default: false,
-      type: Boolean
-    },
-
-    // 是否支持远程搜索
-    remote: {
-      type: Boolean,
-      default: false
-    },
-
-    // 远程搜索传参的key
-    query: {
-      type: String,
-      default: 'query'
-    },
-
-    // 远程搜索的其他参数
-    queryParams: {
-      type: Object,
-      default: () => ({})
-    },
-
-    placeholder: {
-      type: String,
-      default: function () {
-        return '请选择'
-      }
-    },
-
-    // 如果该标志设置为true, 将缓存查询结果
-    cache: {
-      type: Boolean,
-      default: false
-    },
-
-    // 接收外部组件传来的表单默认值 (特殊)
-    account: {
-      type: String,
-      default: ''
-    },
-
-    // 弹框宽度
-    dialogWidth: {
-      type: String,
-      default: ''
-    },
-
-    // 请求方式
-    httpMethod: {
-      type: String,
-      default: 'post'
-    },
-
-    // 是否使用原始查询表单
-    originalForm: {
-      type: Boolean,
-      default: true
-    },
-
-    // 是否使用原始表格
-    originalTable: {
-      type: Boolean,
-      default: true
-    },
-    optionValueIsObject: {
-      type: Boolean,
-      default: false
-    },
-    // 表格数据选择的key
-    tableDataKey: {
-      type: String,
-      default: null
-    }
-  },
-
-  data() {
-    return {
-      key: `SelectindialogCustomID-${Math.random().toString(36).slice(2)}`,
-      hasInit: false,
-      isSelectChangeValue: false,
-      dialogVisible: false,
-      model: null,
-      asyncQuery: false,
-      loading: false,
-
-      tableData: [],
-      pagination: {
-        page: 1,
-        limit: 20,
-        total: 0
-      },
-
-      multipleSelected: [],
-      footerHandlers: {
-        confirm: {
-          text: '确认'
-        }
-      }
-    }
-  },
-
-  computed: {
-    resultLabel() {
-      return this.value
-        ? this.multiple
-          ? this.value.map((item) => item[this.labelKey]).join(',')
-          : this.value[this.labelKey] || ''
-        : ''
-    },
-
-    _formConfig() {
-      const _formConfig = this.formConfig.map((item) => {
-        if (Array.isArray(item)) {
-          return item.map((cItem) => ({
-            ...cItem,
-            clearable: true
-          }))
-        }
-
-        return {
-          ...item,
-          clearable: true
-        }
-      })
-
-      if (_formConfig[0] && _formConfig[0][0]) {
-        return [..._formConfig, [{ mold: 'querybutton' }]]
-      }
-
-      return [..._formConfig, { mold: 'querybutton' }]
-    },
-
-    _value: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        const _val = val === '' ? null : val // 避免单选时el-select清空时将_value设为'',导致value的type校验错误
-        this.$emit('input', _val)
-
-        // let parent = this.$parent || this.$root
-        // let name = parent.$options.componentName
-        //
-        // while (parent && (!name || name !== 'ElFormItem')) {
-        //   parent = parent.$parent
-        //
-        //   if (parent) {
-        //     name = parent.$options.componentName
-        //   }
-        // }
-        //
-        // if (parent) {
-        //   parent.$emit.apply(parent, ['el.form.change'].concat([value]))
-        // }
-      }
-    },
-
-    hasValue() {
-      return this.multiple
-        ? this._value && this._value.length
-        : this._value || this._value === 0
-    }
-  },
-
-  watch: {
-    _value: {
-      deep: true,
-      handler(val) {
-        if (this.isSelectChangeValue) {
-          this.isSelectChangeValue = false
-        } else {
-          this.setSelectOptions(val)
-        }
-      }
-    },
-
-    dialogVisible(val) {
-      if (this.$refs.formCustom) {
-        this.$refs.formCustom.resetFields()
-      }
-
-      const init =
-        (!this.formConfig || !this.formConfig.length) && !this.hasInit // 未初始化
-      const query = init || !this.cache // 不需要缓存
-      if (query && val) {
-        this.handleQuery()
-      }
-    }
-  },
-
-  mounted() {
-    this.setSelectOptions(this.value)
-  },
-
-  methods: {
-    handleClear() {
-      this.$nextTick(() => {
-        this._value = this.multiple ? [] : null
-      })
-    },
-
-    async handleQuery(model, initPage = true) {
-      console.log('initPage', initPage, this.loading)
-      if (this.loading) {
-        return ''
-      }
-      this.loading = true
-      console.log('__log_err', 11)
-      this.pagination.page = initPage.page || 1
-      try {
-        let param = {
-          ...this.queryParams
-        }
-
-        if (this.queryParamFormatter && model) {
-          const formatParam = await this.queryParamFormatter(
-            model,
-            this.pagination
-          )
-
-          param = {
-            ...param,
-            ...formatParam
-          }
-          // 如果没有分页
-          !param.pagination && (param.pagination = this.pagination)
-        } else {
-          if (this.showPagination) {
-            param = {
-              ...param,
-              ...model,
-              pagination: this.pagination
-            }
-          } else {
-            param = {
-              ...param,
-              ...model
-            }
-          }
-        }
-        console.log('查询参数', param)
-
-        const key = this.httpMethod === 'get' ? 'params' : 'data'
-        if (this.httpMethod === 'get' && param.pagination) {
-          param['page.current'] = param.pagination.page
-          param['page.size'] = param.pagination.limit
-          delete param.pagination
-        }
-        let res = []
-        await axios({
-          url: this.url,
-          method: this.httpMethod,
-          [key]: param
-        })
-          .then((data) => {
-            res = data
-            this.loading = false
-            console.log('__log_返回数据', data)
-          })
-          .catch(() => {
-            this.loading = false
-          })
-
-        let tableData = res.list || res
-
-        if (this.tableDataKey) {
-          tableData = tableData[this.tableDataKey]
-        }
-
-        // 后台报错时
-        if (!(tableData instanceof Array)) {
-          tableData = []
-        }
-
-        this.tableData = this.queryDataFormatter
-          ? await this.queryDataFormatter(tableData)
-          : tableData
-        this.hasInit = true
-        this.loading = false
-
-        if (this.showPagination) {
-          this.pagination.total = res.total
-        }
-      } catch (err) {
-        this.loading = false
-        console.error(err)
-      }
-    },
-
-    handlePaginationChange({ page }) {
-      this.$nextTick(() => {
-        this.$refs.formCustom.handleExpectQuery({
-          initPage: page === 1,
-          page
-        })
-      })
-    },
-
-    setSelectOptions(val) {
-      if (this.remote && val) {
-        let options
-
-        if (this.multiple) {
-          options = val.map((item) => {
-            return {
-              label: item[this.labelKey],
-              value: item
-            }
-          })
-        } else {
-          options = [
-            {
-              label: val[this.labelKey],
-              value: val
-            }
-          ]
-        }
-
-        this.$refs.selectCustom.setRemoteOptions(options)
-      }
-    },
-
-    handleMultipleChange(val) {
-      this.multipleSelected = val
-    },
-
-    handleMultipleConfirm() {
-      this._value = this.multipleSelected
-    },
-
-    async handleSelectClick() {
-      if (this.account) {
-        this._formConfig[0].default = this.account
-        this._formConfig[1].default = null
-      }
-    },
-
-    handleTableChange({ recordId, ...val }) {
-      this.dialogVisible = false
-      // console.log(recordId, val)
-      this.$emit('recordId-change', { recordId })
-      this.$emit('selectindialog-change', val)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.select-in-dialog {
-  display: inline-block;
-  &.is-disabled &-result {
-    background-color: #f5f7fa;
-    .select-in-dialog-result-remote-icon {
-      cursor: not-allowed;
-    }
-  }
-  &-result {
-    width: 100%;
-    height: 29px;
-    border: 1px solid #ccc;
-    cursor: pointer;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    overflow: hidden;
-    &:hover &-clear {
-      display: inline !important;
-    }
-    & > .el-select {
-      flex: 1;
-      height: 100%;
-      .el-input--suffix {
-        height: 100%;
-        margin: 0;
-        .el-input__suffix {
-          .el-input__suffix-inner {
-            height: 100%;
-            display: flex;
-            align-items: center;
-            position: relative;
-            .el-icon-circle-close {
-              width: 100%;
-              height: 100%;
-              display: block;
-              font-size: 16px;
-              position: relative;
-              &::before {
-                position: absolute;
-                top: 50%;
-                left: 10%;
-                transform: translate(-10%, -50%);
-              }
-            }
-          }
-        }
-      }
-      .el-input.is-focus {
-        .el-input__inner {
-          box-shadow: none;
-        }
-      }
-      .el-input__inner {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border: none;
-        height: 100%;
-        &:focus {
-          box-shadow: none;
-        }
-      }
-      .el-tag__close::before {
-        transform: translateX(-5.5px);
-      }
-    }
-    &-remote-icon {
-      border-left: 1px solid #ccc;
-    }
-    &-clear {
-      display: none !important;
-      color: #ccc !important;
-      &:hover {
-        color: #ccc !important;
-      }
-    }
-    & > span {
-      flex: 1;
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding: 0 15px;
-    }
-    .el-icon-search {
-      padding: 0 8px;
-    }
-  }
-  .select-in-dialog-result {
-    height: 32px;
-    .el-select .el-tag__close {
-      font-size: 14px;
-      &::before {
-        transform: none;
-        color: #fff;
-      }
-    }
-  }
-  .form-base-wrapper {
-    display: flex;
-    // flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-}
-</style>
+<template>
+  <div
+    :key="key"
+    :class="['select-in-dialog', { 'is-disabled': disabled }]"
+    :style="{ width: parseFloat(width) + 'px' }"
+  >
+    <div v-if="remote" class="select-in-dialog-result">
+      <SelectCustom
+        ref="selectCustom"
+        v-model="_value"
+        remote
+        filterable
+        option-value-is-object
+        :placeholder="placeholder"
+        :is-select-change-value.sync="isSelectChangeValue"
+        :value-key="valueKey"
+        :label-key="labelKey"
+        :multiple="multiple"
+        :clearable="clearable"
+        :disabled="disabled"
+        :http-method="httpMethod"
+        :url="url"
+        :query="query"
+        :query-params="queryParams"
+        :option-value-is-object="optionValueIsObject"
+        @clear="handleClear"
+      />
+      <i
+        class="el-icon-search select-in-dialog-result-remote-icon"
+        @click="!disabled && (dialogVisible = true) && handleSelectClick()"
+      ></i>
+    </div>
+    <div
+      v-else
+      class="select-in-dialog-result"
+      @click="!disabled && (dialogVisible = true) && handleSelectClick()"
+    >
+      <span :class="{ 'select-in-dialog-result-null': !resultLabel }">{{
+        resultLabel || '请选择'
+      }}</span>
+      <el-button
+        v-if="clearable && !disabled && hasValue"
+        type="text"
+        icon="el-icon-circle-close"
+        class="select-in-dialog-result-clear"
+        @click.stop="handleClear"
+      />
+      <i class="el-icon-search"></i>
+    </div>
+
+    <DialogCustom
+      v-model="dialogVisible"
+      :show-footer="multiple"
+      close-on-press-escape
+      close-on-click-modal
+      append-to-body
+      :title="title"
+      :footer-handlers="footerHandlers"
+      :width="dialogWidth"
+      @confirm="handleMultipleConfirm"
+    >
+      <slot v-if="!originalForm" name="form"></slot>
+      <NstcFormDialog
+        v-else-if="formConfig && formConfig.length"
+        ref="formCustom"
+        from="dialog"
+        :async-query.sync="asyncQuery"
+        :config="_formConfig"
+        :label-width="formLabelWidth"
+        @query="handleQuery"
+      />
+
+      <slot v-if="!originalTable" name="table"></slot>
+      <TableRadioCustom
+        v-else
+        v-model="_value"
+        :data="tableData"
+        :pagination.sync="pagination"
+        :show-pagination="showPagination"
+        :multiple="multiple"
+        :columns="columns"
+        :value-key="valueKey"
+        :label-key="labelKey"
+        @pagination-change="handlePaginationChange"
+        @change="handleTableChange"
+        @multiple-change="handleMultipleChange"
+      />
+    </DialogCustom>
+  </div>
+</template>
+
+<script>
+import DialogCustom from '../../NstcDialog/NstcDialog'
+import TableRadioCustom from '../TableRadioCustom/index'
+import SelectCustom from '../SelectCustom/index'
+import NstcFormDialog from '../ComponentSecond'
+
+import axios from '../../../../src/utils/axios'
+
+export default {
+  name: 'NstcSelectInDialog',
+
+  components: {
+    DialogCustom,
+    TableRadioCustom,
+    SelectCustom,
+    NstcFormDialog
+  },
+
+  props: {
+    // 双向绑定值,单选时为{ [valueKey]: 'xxx', [labelKey]: 'xxx' },多选时为[{ [valueKey]: 'xxx', [labelKey]: 'xxx' }, { [valueKey]: 'xxx', [labelKey]: 'xxx' },...]
+    value: {
+      type: [Object, Array, String],
+      default: null
+    },
+
+    width: {
+      type: [Number, String],
+      default: '224px'
+    },
+
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    // 弹窗标题
+    title: {
+      type: String,
+      default: ''
+    },
+
+    // 弹窗表单配置项
+    formConfig: {
+      type: Array,
+      default: () => []
+    },
+
+    formLabelWidth: {
+      default: '80px',
+      type: [String, Number]
+    },
+
+    // 弹窗表单请求的url
+    url: {
+      type: String,
+      default: ''
+    },
+
+    // 弹窗表格列配置
+    columns: {
+      type: Array,
+      default: () => []
+    },
+
+    // 双向绑定值的valueKey，需对应到表格行数据的某个属性
+    valueKey: {
+      type: String,
+      default: 'key'
+    },
+
+    // 双向绑定值的labelKey，需对应到表格行数据的某个属性
+    labelKey: {
+      type: String,
+      default: ''
+    },
+
+    // 对请求参数的格式化
+    queryParamFormatter: {
+      type: Function,
+      default: undefined
+    },
+
+    // 对请求返回数据的格式化
+    queryDataFormatter: {
+      type: Function,
+      default: undefined
+    },
+
+    // 分页器是否展示
+    showPagination: {
+      default: false,
+      type: Boolean
+    },
+
+    // 是否支持远程搜索
+    remote: {
+      type: Boolean,
+      default: false
+    },
+
+    // 远程搜索传参的key
+    query: {
+      type: String,
+      default: 'query'
+    },
+
+    // 远程搜索的其他参数
+    queryParams: {
+      type: Object,
+      default: () => ({})
+    },
+
+    placeholder: {
+      type: String,
+      default: function () {
+        return '请选择'
+      }
+    },
+
+    // 如果该标志设置为true, 将缓存查询结果
+    cache: {
+      type: Boolean,
+      default: false
+    },
+
+    // 接收外部组件传来的表单默认值 (特殊)
+    account: {
+      type: String,
+      default: ''
+    },
+
+    // 弹框宽度
+    dialogWidth: {
+      type: String,
+      default: ''
+    },
+
+    // 请求方式
+    httpMethod: {
+      type: String,
+      default: 'post'
+    },
+
+    // 是否使用原始查询表单
+    originalForm: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否使用原始表格
+    originalTable: {
+      type: Boolean,
+      default: true
+    },
+    optionValueIsObject: {
+      type: Boolean,
+      default: false
+    },
+    // 表格数据选择的key
+    tableDataKey: {
+      type: String,
+      default: null
+    }
+  },
+
+  data() {
+    return {
+      key: `SelectindialogCustomID-${Math.random().toString(36).slice(2)}`,
+      hasInit: false,
+      isSelectChangeValue: false,
+      dialogVisible: false,
+      model: null,
+      asyncQuery: false,
+      loading: false,
+
+      tableData: [],
+      pagination: {
+        page: 1,
+        limit: 20,
+        total: 0
+      },
+
+      multipleSelected: [],
+      footerHandlers: {
+        confirm: {
+          text: '确认'
+        }
+      }
+    }
+  },
+
+  computed: {
+    resultLabel() {
+      return this.value
+        ? this.multiple
+          ? this.value.map((item) => item[this.labelKey]).join(',')
+          : this.value[this.labelKey] || ''
+        : ''
+    },
+
+    _formConfig() {
+      const _formConfig = this.formConfig.map((item) => {
+        if (Array.isArray(item)) {
+          return item.map((cItem) => ({
+            ...cItem,
+            clearable: true
+          }))
+        }
+
+        return {
+          ...item,
+          clearable: true
+        }
+      })
+
+      if (_formConfig[0] && _formConfig[0][0]) {
+        return [..._formConfig, [{ mold: 'querybutton' }]]
+      }
+
+      return [..._formConfig, { mold: 'querybutton' }]
+    },
+
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        const _val = val === '' ? null : val // 避免单选时el-select清空时将_value设为'',导致value的type校验错误
+        this.$emit('input', _val)
+
+        // let parent = this.$parent || this.$root
+        // let name = parent.$options.componentName
+        //
+        // while (parent && (!name || name !== 'ElFormItem')) {
+        //   parent = parent.$parent
+        //
+        //   if (parent) {
+        //     name = parent.$options.componentName
+        //   }
+        // }
+        //
+        // if (parent) {
+        //   parent.$emit.apply(parent, ['el.form.change'].concat([value]))
+        // }
+      }
+    },
+
+    hasValue() {
+      return this.multiple
+        ? this._value && this._value.length
+        : this._value || this._value === 0
+    }
+  },
+
+  watch: {
+    _value: {
+      deep: true,
+      handler(val) {
+        if (this.isSelectChangeValue) {
+          this.isSelectChangeValue = false
+        } else {
+          this.setSelectOptions(val)
+        }
+      }
+    },
+
+    dialogVisible(val) {
+      if (this.$refs.formCustom) {
+        this.$refs.formCustom.resetFields()
+      }
+
+      const init =
+        (!this.formConfig || !this.formConfig.length) && !this.hasInit // 未初始化
+      const query = init || !this.cache // 不需要缓存
+      if (query && val) {
+        this.handleQuery()
+      }
+    }
+  },
+
+  mounted() {
+    this.setSelectOptions(this.value)
+  },
+
+  methods: {
+    handleClear() {
+      this.$nextTick(() => {
+        this._value = this.multiple ? [] : null
+      })
+    },
+
+    async handleQuery(model, initPage = true) {
+      console.log('initPage', initPage, this.loading)
+      if (this.loading) {
+        return ''
+      }
+      this.loading = true
+      console.log('__log_err', 11)
+      this.pagination.page = initPage.page || 1
+      try {
+        let param = {
+          ...this.queryParams
+        }
+
+        if (this.queryParamFormatter && model) {
+          const formatParam = await this.queryParamFormatter(
+            model,
+            this.pagination
+          )
+
+          param = {
+            ...param,
+            ...formatParam
+          }
+          // 如果没有分页
+          !param.pagination && (param.pagination = this.pagination)
+        } else {
+          if (this.showPagination) {
+            param = {
+              ...param,
+              ...model,
+              pagination: this.pagination
+            }
+          } else {
+            param = {
+              ...param,
+              ...model
+            }
+          }
+        }
+        console.log('查询参数', param)
+
+        const key = this.httpMethod === 'get' ? 'params' : 'data'
+        if (this.httpMethod === 'get' && param.pagination) {
+          param['page.current'] = param.pagination.page
+          param['page.size'] = param.pagination.limit
+          delete param.pagination
+        }
+        let res = []
+        await axios({
+          url: this.url,
+          method: this.httpMethod,
+          [key]: param
+        })
+          .then((data) => {
+            res = data
+            this.loading = false
+            console.log('__log_返回数据', data)
+          })
+          .catch(() => {
+            this.loading = false
+          })
+
+        let tableData = res.list || res
+
+        if (this.tableDataKey) {
+          tableData = tableData[this.tableDataKey]
+        }
+
+        // 后台报错时
+        if (!(tableData instanceof Array)) {
+          tableData = []
+        }
+
+        this.tableData = this.queryDataFormatter
+          ? await this.queryDataFormatter(tableData)
+          : tableData
+        this.hasInit = true
+        this.loading = false
+
+        if (this.showPagination) {
+          this.pagination.total = res.total
+        }
+      } catch (err) {
+        this.loading = false
+        console.error(err)
+      }
+    },
+
+    handlePaginationChange({ page }) {
+      this.$nextTick(() => {
+        this.$refs.formCustom.handleExpectQuery({
+          initPage: page === 1,
+          page
+        })
+      })
+    },
+
+    setSelectOptions(val) {
+      if (this.remote && val) {
+        let options
+
+        if (this.multiple) {
+          options = val.map((item) => {
+            return {
+              label: item[this.labelKey],
+              value: item
+            }
+          })
+        } else {
+          options = [
+            {
+              label: val[this.labelKey],
+              value: val
+            }
+          ]
+        }
+
+        this.$refs.selectCustom.setRemoteOptions(options)
+      }
+    },
+
+    handleMultipleChange(val) {
+      this.multipleSelected = val
+    },
+
+    handleMultipleConfirm() {
+      this._value = this.multipleSelected
+    },
+
+    async handleSelectClick() {
+      if (this.account) {
+        this._formConfig[0].default = this.account
+        this._formConfig[1].default = null
+      }
+    },
+
+    handleTableChange({ recordId, ...val }) {
+      this.dialogVisible = false
+      // console.log(recordId, val)
+      this.$emit('recordId-change', { recordId })
+      this.$emit('selectindialog-change', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.select-in-dialog {
+  display: inline-block;
+  &.is-disabled &-result {
+    background-color: #f5f7fa;
+    .select-in-dialog-result-remote-icon {
+      cursor: not-allowed;
+    }
+  }
+  &-result {
+    width: 100%;
+    height: 29px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    border-radius: 5px;
+    overflow: hidden;
+    &:hover &-clear {
+      display: inline !important;
+    }
+    & > .el-select {
+      flex: 1;
+      height: 100%;
+      .el-input--suffix {
+        height: 100%;
+        margin: 0;
+        .el-input__suffix {
+          .el-input__suffix-inner {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            position: relative;
+            .el-icon-circle-close {
+              width: 100%;
+              height: 100%;
+              display: block;
+              font-size: 16px;
+              position: relative;
+              &::before {
+                position: absolute;
+                top: 50%;
+                left: 10%;
+                transform: translate(-10%, -50%);
+              }
+            }
+          }
+        }
+      }
+      .el-input.is-focus {
+        .el-input__inner {
+          box-shadow: none;
+        }
+      }
+      .el-input__inner {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border: none;
+        height: 100%;
+        &:focus {
+          box-shadow: none;
+        }
+      }
+      .el-tag__close::before {
+        transform: translateX(-5.5px);
+      }
+    }
+    &-remote-icon {
+      border-left: 1px solid #ccc;
+    }
+    &-clear {
+      display: none !important;
+      color: #ccc !important;
+      &:hover {
+        color: #ccc !important;
+      }
+    }
+    & > span {
+      flex: 1;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0 15px;
+    }
+    .el-icon-search {
+      padding: 0 8px;
+    }
+  }
+  .select-in-dialog-result {
+    height: 32px;
+    .el-select .el-tag__close {
+      font-size: 14px;
+      &::before {
+        transform: none;
+        color: #fff;
+      }
+    }
+  }
+  .form-base-wrapper {
+    display: flex;
+    // flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+}
+</style>