n20-common-lib 1.3.9 → 1.3.12

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

@@ -0,0 +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>