n20-common-lib 1.3.4 → 1.3.7

package/src/components/NstcG6Components/NstcForm/SelectindialogCustom/index.vue

@@ -1,650 +0,0 @@
-<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 ||'请选择'
-      }}</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 "../../NstcDialog/NstcDialog";
-import TableRadioCustom from "../TableRadioCustom/index";
-import SelectCustom from "../SelectCustom/index";
-import NstcFormDialog from "../ComponentSecond";
-
-
-import axios from '../../../../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>