n20-common-lib 1.3.46 → 1.3.49

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

@@ -1,650 +1,650 @@
-<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"
-        :optionValueIsObject="optionValueIsObject"
-        @clear="handleClear"
-      />
-      <i
-        class="el-icon-search select-in-dialog-result-remote-icon"
-        @click="!disabled && (dialogVisible = true) && handleSelectClick()"
-      />
-    </div>
-    <div
-      v-else
-      class="select-in-dialog-result"
-      @click="!disabled && (dialogVisible = true) && handleSelectClick()"
-    >
-      <span :class="{ 'select-in-dialog-result-null': !resultLabel }">{{
-        resultLabel || $t("common_w_0018")
-      }}</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" />
-    </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 name="form" v-if="!originalForm" />
-      <NstcFormDialog
-        v-else-if="formConfig && formConfig.length"
-        ref="formCustom"
-        from="dialog"
-        :async-query.sync="asyncQuery"
-        :config="_formConfig"
-        :label-width="formLabelWidth"
-        @query="handleQuery"
-      />
-
-      <slot name="table" v-if="!originalTable" />
-      <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 "^/Dialog/src/main";
-import TableRadioCustom from "../TableRadioCustom/index";
-import SelectCustom from "../SelectCustom/index";
-import NstcFormDialog from "../ComponentSecond";
-import variables from "@/theme/theme1/styles/variables.scss";
-
-import request from "@/utils/request";
-
-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: variables.formItemDefaultWidth,
-    },
-
-    // 是否多选
-    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 request({
-          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"
+        :optionValueIsObject="optionValueIsObject"
+        @clear="handleClear"
+      />
+      <i
+        class="el-icon-search select-in-dialog-result-remote-icon"
+        @click="!disabled && (dialogVisible = true) && handleSelectClick()"
+      />
+    </div>
+    <div
+      v-else
+      class="select-in-dialog-result"
+      @click="!disabled && (dialogVisible = true) && handleSelectClick()"
+    >
+      <span :class="{ 'select-in-dialog-result-null': !resultLabel }">{{
+        resultLabel || $t("common_w_0018")
+      }}</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" />
+    </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 name="form" v-if="!originalForm" />
+      <NstcFormDialog
+        v-else-if="formConfig && formConfig.length"
+        ref="formCustom"
+        from="dialog"
+        :async-query.sync="asyncQuery"
+        :config="_formConfig"
+        :label-width="formLabelWidth"
+        @query="handleQuery"
+      />
+
+      <slot name="table" v-if="!originalTable" />
+      <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 "^/Dialog/src/main";
+import TableRadioCustom from "../TableRadioCustom/index";
+import SelectCustom from "../SelectCustom/index";
+import NstcFormDialog from "../ComponentSecond";
+import variables from "@/theme/theme1/styles/variables.scss";
+
+import request from "@/utils/request";
+
+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: variables.formItemDefaultWidth,
+    },
+
+    // 是否多选
+    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 request({
+          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>