fpsys/src/components/Common/BaseForm.vue

<template>
  <el-form ref="baseForm" :inline="isInline" :model="baseForm" :label-position="labelPosition" :label-width="labelWidth" class="xl-form" :class="isInline && 'inputw190'">
    <template v-for="(item, index) in curData">
      <template v-if="insertSlotArr.indexOf(index) > -1">
        <slot :name="`OI${index}`" />
      </template>
      <el-form-item
        v-if="item.type === 'select'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :label-width="item.singleLabelWidth || labelWidth"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-select
          v-model.trim="baseForm[item.key]"
          clearable
          :placeholder="`请选择${item.label2 || item.label}`"
          :disabled="item.disabled || false"
          :multiple="item.multiple || false"
          :filterable="item.filterable"
          @change="changeHandle"
          @remove-tag="focusHandle(item.key)"
          @focus="focusHandle(item.key)"
        >
          <el-option
            v-for="(op, o) in item.options"
            :key="o"
            :label="op.key"
            :disabled="op.disabled"
            :value="op.val"
          >{{ op.key }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'colorPicker'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :label-width="item.singleLabelWidth || labelWidth"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-color-picker
          @change="changeHandle"
          @focus="focusHandle(item.key)"
          v-model.trim="baseForm[item.key]">
        </el-color-picker>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'selectRemote'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :label-width="item.singleLabelWidth || labelWidth"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >

        <el-select
          v-model.trim="baseForm[item.key]"
          filterable
          remote
          clearable
          :disabled="item.disabled || false"
          :multiple="item.multiple || false"
          :remote-method="remoteMethod"
          :loading="formLoading"
          :placeholder="`搜索${item.label}`"
          @change="changeHandle"
          @remove-tag="focusHandle(item.key)"
          @focus="focusHandle(item.key)"
        >
          <el-option
            v-for="(op, o) in item.remoteOptions"
            :key="o"
            :label="op.keyRO"
            :disabled="op.disabled"
            :value="op.valRO"
          >{{ op.keyRO }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'datePicker'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-date-picker
          v-model.trim="baseForm[item.key]"
          :style="item.type2 === 'date' && 'width: 100%;'"
          unlink-panels
          :type="`${item.type2 ? item.type2 : 'daterange'}`"
          :align="'right'"
          :value-format="`${item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'}`"
          range-separator="至"
          :disabled="item.disabled || false"
          :placeholder="`请选择${item.label}`"
          :start-placeholder="item.label2"
          :end-placeholder="item.label3"
          :picker-options="`${item.type2 ? {} : item.datePickerOptions}`"
          @focus="focusHandle(item.key)"
        />
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'timePicker'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-time-picker
          v-model="baseForm[item.key]"
          :is-range="item.type2!=='time'"
          range-separator="至"
          :value-format="item.format || 'HH:mm'"
          :format="item.format || 'HH:mm'"
          :disabled="item.disabled || false"
          :start-placeholder="item.label2 || '开始时间'"
          :end-placeholder="item.label3 || '结束时间'"
          :placeholder="`请选择${item.label}`"
        />
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'inputFont'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请输入'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-input
          v-model.trim="baseForm[item.key]"
          clearable
          :disabled="item.disabled || false"
          :maxlength="item.maxlength || false"
          :placeholder="`请输入${item.label2 || item.label}`"
          @change="changeHandle"
          @focus="focusHandle(item.key)"
        >
          <template v-if="item.prependFont" slot="prepend">{{ item.prependFont }}</template>
          <template v-if="item.appendFont" slot="append">{{ item.appendFont }}</template>
        </el-input>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'cascader'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-cascader
          v-model.trim="baseForm[item.key]"
          clearable
          :options="item.options"
          :props="item.props || {}"
          :disabled="item.disabled || false"
          :placeholder="`请选择${item.label}`"
          @focus="focusHandle(item.key)"
          @change="changeHandle"
        />
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'upload'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-upload
          class="img-upload"
          :disabled="item.disabled || false"
          :action="`${requireUrl}/adm/upload/cloud`"
          :data="{logic_type: 'estate', token}"
          name="upload"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="uploadBefore"
        >
          <img v-if="baseForm[item.key]" :src="baseForm[item.key].indexOf('_adm0') > -1 ? baseForm[item.key] : baseForm[item.key] + '_adm0'" class="img" @click="focusHandle(item.key)">
          <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
        </el-upload>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'cuImg'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-upload
          class="img-upload"
          :action="`${requireUrl}/adm/upload/cloudpub`"
          :data="{logic_type: 'estate', token}"
          name="upload"
          ref="cui"
          :auto-upload="false"
          :show-file-list="false"
          :on-change='cuImgOpen'
          :on-success="uploadSuccess"
        >
          <template v-if="item.options && item.options.SY === 1">
            <img v-if="baseForm[item.key]" :src="baseForm[item.key].indexOf('_adm0') > -1 ? baseForm[item.key] : baseForm[item.key] + '_adm0'" class="img" @click="focusHandle(item.key)">
            <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
          </template>
          <template v-else>
            <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
            <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'uploads'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-upload
          class="img-upload"
          :disabled="item.disabled || false"
          :action="`${requireUrl}/adm/upload/cloudpub`"
          :data="{logic_type: 'estate', token}"
          name="upload"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="uploadBefore"
        >
          <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
          <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
        </el-upload>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'uploadsGif'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-upload
          class="img-upload"
          :disabled="item.disabled || false"
          :action="`${requireUrl}/adm/upload/cloudpub`"
          :data="{logic_type: 'estate', token}"
          name="upload"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="uploadGifBefore"
        >
          <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
          <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
        </el-upload>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'uploadIcon'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-upload
          class="img-upload"
          :disabled="item.disabled || false"
          :action="`${requireUrl}/adm/theme/icon/upload`"
          :data="{logic_type: 'estate', token}"
          name="upload"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="uploadBefore"
        >
          <img v-if="baseForm[item.key]" :src="baseForm[item.key]" class="img" @click="focusHandle(item.key)">
          <i v-else class="el-icon-plus icon" @click="focusHandle(item.key)" />
        </el-upload>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'upload2'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请选择'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-upload
          :disabled="item.disabled || false"
          :action="`${requireUrl}/adm/upload/cloud`"
          :data="{filename: 'sysimg', token}"
          name="upload"
          :on-success="uploadSuccess2"
          :on-error="uploadError"
          :multiple="item.limit || false"
          :limit="item.limit || 1"
          :on-exceed="uploadHandleExceed"
          :on-remove="uploadHandleRemove"
          :file-list="baseForm[item.key] || []"
          :before-upload="uploadBefore2"
          @click.native="focusHandle(item.key)"
        >
          <el-button size="small" type="success" @click="focusHandle(item.key)">{{ baseForm[item.key].length > 0 ? '重新上传' : '立即上传' }}</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'inputSelect'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请输入'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-input
          v-model.trim="baseForm[item.key]"
          clearable
          :disabled="item.disabled || false"
          :placeholder="`请输入${item.label2 || item.label}`"
          @focus="focusHandle(item.key)"
        >
          <template slot="append">
            <el-select
              v-model.trim="baseForm[item.selectObj.key]"
              :disabled="item.disabled || false"
              :placeholder="`${item.selectObj.label}`"
            >
              <el-option
                v-for="(op, o) in item.selectObj.options"
                :key="o"
                :label="op.key"
                :value="op.val"
              >{{ op.key }}</el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'checkbox'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请勾选'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-checkbox-group v-model.trim="baseForm[item.key]" :disabled="item.disabled || false">
          <el-checkbox
            v-for="(op, o) in item.options"
            :key="o"
            :label="op.val"
          >{{ op.key }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'radio'"
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :label-width="item.singleLabelWidth || labelWidth"
        :rules="item.rules === 1 ? [{ required: true, message: '请勾选'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-radio-group v-model.trim="baseForm[item.key]" :disabled="item.disabled || false">
          <el-radio
            v-for="(op, o) in item.options"
            :key="o"
            :label="op.val"
            :disabled="op.disabled"
          >{{ op.key }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-else-if="item.type === 'switch'"
        :key="index"
        :class="item.class"
        :label="isInline && noLabel ? '' : item.label"
      >
        <el-switch
          v-model="baseForm[item.key]"
          :active-value="item.labelTrue || '1'"
          :inactive-value="item.labelFalse || '2'"
          :active-color="item.activeColor || '#13ce66'"
          :inactive-color="item.inactiveColor || '#ccc'"
          :active-text="item.activeText"
          :inactive-text="item.inactiveText"
          :disabled="item.disabled || false"
          @change="changeHandle"
          @focus.native="focusHandle(item.key)"
          @click.native="focusHandle(item.key)"
        />
      </el-form-item>
      <el-form-item
        v-else
        :key="index"
        :class="item.class"
        :prop="item.key"
        :label="isInline && noLabel ? '' : item.label"
        :rules="item.rules === 1 ? [{ required: true, message: '请输入'+ item.label, trigger: 'blur' }] : item.rules"
      >
        <el-input
          v-model.trim="baseForm[item.key]"
          clearable
          :type="item.type || 'text'"
          :disabled="item.disabled || false"
          :placeholder="`请输入${item.label2 || item.label}`"
          :maxlength="item.maxlength || false"
          @change="changeHandle"
          @focus="focusHandle(item.key)"
        />
      </el-form-item>
    </template>
    <slot name="otherItem" />
    <el-form-item>
      <slot name="footer" />
    </el-form-item>
    <cropper-img
      :isShow="isCIShow"
      :curObj="uploadObj"
      @close="cuImgClose"
    />
  </el-form>
</template>
<script>
import { strTrim } from '@/utils'
import CropperImg from './CropperImg'
export default {
  name: 'BaseForm',
  components: { CropperImg },
  props: {
    data: Array,
    labelWidth: {
      default: '80px',
      type: String
    },
    isInline: {
      default: true,
      type: Boolean
    },
    noLabel: {
      default: true,
      type: Boolean
    },
    labelPosition: {
      default: 'right',
      type: String
    },
    insertSlotArr: {
      default: () => [],
      type: Array
    }
  },
  data() {
    const curData = this.data
    let requireUrl = process.env.VUE_APP_BASE_API
    const userApi = window.sessionStorage.getItem('testUrl')
    const token = window.sessionStorage.getItem('fp_token')
    if (process.env.VUE_APP_BASE_API === 'http://api.t.antretail.cn' && userApi) {
      requireUrl = userApi
    }
    return {
      token,
      requireUrl,
      curData,
      formLoading: false,
      baseForm: {},
      curFormKey: '',
      curFormIndex: '',
      selectRemoteTotal: null,
      selectRemoteNum: null,
      uploadHeaders: {
        'Content-Type': 'multipart/form-data'
      },
      remoteOptionsPrev: {},
      isCIShow: false,
      uploadObj: {},
    }
  },
  watch: {
    data: {
      handler: function(val) {
        if (val.length === 0) return
        this.curData = [...val]
        this.selectRemoteTotal = 0
        this.selectRemoteNum = 0
        const baseForm = {}
        val.forEach((item, index) => {
          let emptyVal = ''
          // if (item.type === 'cascader' || item.type === 'upload2') emptyVal = []
          if (item.type === 'switch') emptyVal = item.labelFalse || '2'
          if (item.type === 'selectRemote') this.selectRemoteTotal++
          baseForm[item.key] = item.defaultValue || emptyVal
          if (item.type === 'datePicker') {
            this.curData[index].datePickerOptions = {
              shortcuts: [{
                text: '昨天',
                onClick(picker) {
                  // const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24)
                  picker.$emit('pick', [start, start])
                }
              }, {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                  picker.$emit('pick', [start, end])
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                  picker.$emit('pick', [start, end])
                }
              }]
            }
            if (item.disabledDate === '-1') {
              this.curData[index].datePickerOptions.disabledDate = function(time) {
                return time.getTime() > Date.now() - 3600 * 1000 * 24
              }
            }
          }
        })
        this.baseForm = Object.assign({}, baseForm)
        const that = this
        that.$nextTick(() => {
          that.$refs['baseForm'].resetFields()
          val.forEach((op, i) => {
            // 待优化，目前每次open都有请求
            if (that.curData[i].type === 'selectRemote') {
              that.remoteMethod(null, i)
            }
          })
        })
      },
      immediate: true
    }
  },
  methods: {
    uploadHandleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    uploadSuccess(res, file) {
      // console.log(res)
      const data = res.data || {}
      const uploadItem = this.curData[this.curFormIndex]
      // this.baseForm[uploadItem.key] = `${data.domain}${data.url}?url=${data.url}&id=${data.file_id}`
      this.baseForm[uploadItem.key] = `${data.url}`
      // this.baseForm[uploadItem.key] = uploadItem.uploadData.domain + res.key
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.changeHandle(file)
    },
    uploadError(file) {
      this.changeHandle(file)
    },
    uploadGifBefore(file) {
      const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLtM = file.size / 1024 / 1024 < 30
      if (!isJPGPNG) {
        this.$message.error('上传图片只能是 JPG PNG GIF 格式!')
      }
      if (!isLtM) {
        this.$message.error('上传图片大小不能超过 30M!')
      }
      return isJPGPNG && isLtM
    },
    uploadBefore(file) {
      const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLtM = file.size / 1024 / 1024 < 10
      if (!isJPGPNG) {
        this.$message.error('上传图片只能是 JPG PNG GIF 格式!')
      }
      if (!isLtM) {
        this.$message.error('上传图片大小不能超过 10M!')
      }
      return isJPGPNG && isLtM
    },
    uploadBefore2(file) {
      // console.log(file.type)
    },
    uploadSuccess2(res, file) {
      const data = res.data || {}
      const uploadItem = this.curData[this.curFormIndex]
      this.baseForm[uploadItem.key] = [{
        name: file.name,
        url: data.url
      }]
      this.changeHandle(file)
    },
    uploadHandleRemove(file, fileList) {
      window.setTimeout(() => {
        this.$set(this.baseForm, this.curFormKey, [])
      }, 100)
    },
    changeHandle(val) {
      this.$nextTick(() => {
        if (parseFloat(this.curFormIndex).toString() === 'NaN') return
        const curFormItem = this.curData[this.curFormIndex]
        if (curFormItem) {
          if (curFormItem.changeHandle) {
            if (curFormItem.type === 'selectRemote' && curFormItem.remoteOptions) {
              let curOption = curFormItem.multiple ? [] : {}
              curFormItem.remoteOptions.forEach(item => {
                if (curFormItem.multiple) {
                  const subArr = String(val).split(',') || []
                  subArr.forEach(sub => {
                    if (String(item.valRO) === sub) {
                      curOption.push(item)
                    }
                  })
                } else {
                  if (item.valRO === val) {
                    curOption = item
                  }
                }
              })
              // let curOption = {}
              // curFormItem.remoteOptions.forEach(item => {
              //   if (item.valRO === val) {
              //     curOption = item
              //   }
              // })
              curFormItem.changeHandle(val, curFormItem, curOption)
            } else if (curFormItem.type === 'select' && curFormItem.options) {
              let curOption = curFormItem.multiple ? [] : {}
              curFormItem.options.forEach(item => {
                if (curFormItem.multiple) {
                  const subArr = val || []
                  subArr.forEach(sub => {
                    if (item.val === sub) {
                      curOption.push(item)
                    }
                  })
                } else {
                  if (item.val === val) {
                    curOption = item
                  }
                }
              })
              curFormItem.changeHandle(val, curFormItem, curOption)
            } else {
              curFormItem.changeHandle(val, curFormItem, this.curFormIndex)
            }
          }
          if (curFormItem.type === 'selectRemote') {
            this.remoteChange(val)
          }
          if (curFormItem.type === 'checkbox' || curFormItem.type === 'switch') {
            // console.log(this.curFormKey)
            this.$set(this.baseForm, this.curFormKey, val)
          }
        }
      })
    },
    focusHandle(key) {
      this.curFormKey = key
      for (let i = 0; i < this.curData.length; i++) {
        if (this.curData[i].key === this.curFormKey) {
          this.curFormIndex = i
          const curFormItem = this.curData[i]
          if (curFormItem.focusHandle) {
            curFormItem.focusHandle(key, curFormItem, this.curFormIndex)
          }
          return
        }
      }
    },
    cuImgOpen(file, fileList) {
      const isLt10M = file.size / 1024 / 1024 < 1000
      if (!isLt10M) {
        this.$msgw('上传文件大小不能超过 1000MB!')
        return false
      }
      this.$nextTick(() => {
        let cObj = this.curData[this.curFormIndex]
        this.uploadObj = {
          url: URL.createObjectURL(file.raw),
          file,
          options: cObj.options,
        }
        this.isCIShow = true
      })
    },
    cuImgClose (url) {
      this.isCIShow = false
      if (url) {
        this.baseForm[this.curFormKey] = url
      }
    },
    remoteChange(val) {
      if (val) {
        const remoteParams = this.curData[this.curFormIndex].remoteParams
        if (remoteParams && remoteParams.changeKey) {
          this.$set(this.baseForm, remoteParams.changeKey, val)
        }
      }
    },
    remoteMethod(val, curI) {
      // const loading = this.$loading({
      //   lock: true,
      //   spinner: 'none',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })ss
      let curIndex = this.curFormIndex
      if (Number(curI) > -1) curIndex = curI
      this.formLoading = true
      if (!this.curData[curIndex]) return
      const remoteParams = this.curData[curIndex].remoteParams
      const apiArr = remoteParams.api.split('?')
      const apiUrl = apiArr[0]
      const params = this.noEmpty(val) ? { [remoteParams.skey]: strTrim(val) } : {}
      const apiUrlArr = apiUrl.split('.')
      if (apiArr[1]) {
        const queryArr = apiArr[1].split('&')
        queryArr.forEach(item => {
          const itemArr = item.split('=')
          if (this.noEmpty(itemArr[1])) params[itemArr[0]] = itemArr[1]
        })
      }
      if (!this.$api[apiUrlArr[0]] || !this.$api[apiUrlArr[0]][apiUrlArr[1]]) {
        console.warn('tip:接口不存在')
        return
      }
      if (val !== null && !params[remoteParams.skey]) {
        this.curData[curIndex].remoteOptions = this.remoteOptionsPrev[curIndex]
        this.$set(this.curData[curIndex], 'remoteOptions', this.remoteOptionsPrev[curIndex])
        this.formLoading = false
        const baseForm = { ...this.baseForm }
        this.$refs['baseForm'].resetFields()
        window.setTimeout(() => {
          this.baseForm = { ...baseForm }
          this.isRemoteOne = false
        }, 200)
        // loading.close()
        return
      }
      this.$api[apiUrlArr[0]][apiUrlArr[1]](params).then(data => {
        const arr = data.list || []
        const remoteOptions = []
        arr.forEach(item => {
          const curItem = { keyRO: item[remoteParams.opKey], valRO: item[remoteParams.opVal] }
          remoteOptions.push({ ...item, ...curItem })
        })
        const defaultRemoteOptions = this.curData[curIndex].remoteOptions || []
        if (val === null && defaultRemoteOptions && defaultRemoteOptions.length > 0) {
          const edIndexArr = []
          defaultRemoteOptions.forEach((old, o) => {
            remoteOptions.forEach(r => {
              if (String(old.valRO) === String(r.valRO)) {
                edIndexArr.push(o)
              }
            })
            if (edIndexArr.indexOf(o) === -1 && this.noEmpty(old.valRO)) {
              remoteOptions.unshift(old)
            }
          })
        }
        this.curData[curIndex].remoteOptions = remoteOptions
        const remoteOptionsPrev = this.remoteOptionsPrev[curIndex] || []
        const remoteOptionsPrev2 = [...remoteOptionsPrev]
        remoteOptionsPrev.forEach((one, o) => {
          remoteOptions.forEach(two => {
            if (one.valRO === two.valRO) {
              remoteOptionsPrev2.splice(o, 1)
            }
          })
        })
        this.remoteOptionsPrev[curIndex] = [...remoteOptionsPrev2, ...remoteOptions]
        this.formLoading = false
        this.selectRemoteNum++
        if (this.selectRemoteTotal === this.selectRemoteNum) {
          this.$emit('loaded')
          // loading.close()
        }
        this.curData = [...this.curData]
      })
    },
    btnHandle(key) { // 按钮回调
      this.curFormKey = key
      for (let i = 0; i < this.curData.length; i++) {
        if (this.curData[i].key === this.curFormKey) {
          this.$nextTick(() => {
            if (parseFloat(i).toString() === 'NaN') return
            const curFormItem = this.curData[i]
            if (curFormItem) {
              if (curFormItem.btnHandle) {
                curFormItem.btnHandle(key, this.curData[i].remoteOptions)
              }
            }
          })
          return
        }
      }
    }
  }
}
</script>
  <style lang="scss" scoped>
  .img-upload {
    ::v-deep .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #409EFF;
      }
    }
    .icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .img {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
  ::v-deep .el-form-item__content{
    display: flex;
    align-items: center;
    height: 100%;
  }

  </style>