封裝組件
<template>
  <el-form
    class="supervise-detail__form"
    ref="baseForm"
    :rules="baseRules"
    :model="baseForm"
    label-position="top"
  >
    <el-row :gutter="32">
      <el-col
        v-for="item in baseFormList"
        :key="item.key"
        :xl="item.xl"
        :lg="item.lg"
        :md="item.md"
        :sm="item.sm"
      >
        <el-form-item v-if="!item.notShow" :class="item.class" :prop="item.key">
          <template slot="label">
            {{ item.label }}
            <!-- 提示 -->
            <el-popover
              v-if="item.tipsType"
              popper-class="supervise-detail__tips"
              placement="bottom"
              trigger="hover"
            >
              <div v-if="item.tipsType === 'text'" style="max-width: 600px">
                {{ item.tips }}
              </div>
              <div v-else-if="item.tipsType === 'table'" style="max-width: 600px">
                <el-table
                  stripe
                  tooltip-effect="light"
                  :cell-style="getCellStyle"
                  :data="baseForm[item.tipsKey]"
                  style="width: 100%;">
                  <el-table-column
                    show-overflow-tooltip
                    v-for="tableItem in item.tipsHeader"
                    :key="tableItem.key"
                    :prop="tableItem.key"
                    :label="tableItem.label"
                    :width="tableItem.width || 'auto'"
                    :align="tableItem.algin || 'left'"
                  >
                    <template slot-scope="scope">
                      {{ scope.row[tableItem.key] }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <svg-icon
                style="margin-left: 5px;"
                slot="reference"
                class="icon"
                icon-class="infoTips"
              />
            </el-popover>
          </template>
          <!-- {{ item.key }}----
          {{ baseForm[item.key] }} -->
          <!-- 輸入框 -->
          <el-input
            :disabled="item.disabled ? true : false"
            v-emoji
            :maxlength="item.maxLength || 500"
            v-if="item.type === 'input'"
            v-model.trim="baseForm[item.key]"
            :placeholder="`請輸入${item.label}`"
          >
          </el-input>
          <!-- 下拉選 -->
          <el-select
            :disabled="item.disabled ? true : false"
            v-else-if="item.type === 'select'"
            v-model="baseForm[item.key]"
            :filterable="item.isFilterable"
            :multiple="item.isMultiple"
            :placeholder="`請選擇${item.label}`"
            collapse-tags
            @change="(val) => changeSelect(val, item, baseForm)"
          >
            <el-option
              v-for="optionItem in item.optionList"
              :key="optionItem.value"
              :label="optionItem.label"
              :value="optionItem.value"
            ></el-option>
          </el-select>
          <!-- 遠程選擇(員工) -->
          <el-select
            :disabled="item.disabled ? true : false"
            v-else-if="item.type === 'selectRemote'"
            v-model="baseForm[item.key]"
            :filterable="item.isFilterable"
            :remote="item.isRemote"
            :multiple="item.isMultiple"
            :placeholder="`請輸入${item.label}`"
            :remote-method="(query) => getRemoteOption(query, item)"
            :loading="item.loading"
            @focus="getRemoteOption('', item)"
            @change="(str) => changeUserSelect(str, item, baseForm)"
          >
            <div slot="prefix">
              <i class="el-icon-search"></i>
            </div>
            <el-option
              v-for="optionItem in item.optionList"
              :key="optionItem.loginId"
              :label="optionItem.userName"
              :value="optionItem.loginId"
            >
              {{ `${optionItem.userName} - ${optionItem.workCode}` }}
            </el-option>
          </el-select>
          <el-input
            v-emoji
            disabled
            class="addKey"
            :maxlength="item.maxLength || 500"
            v-if="item.addKey"
            v-model.trim="baseForm[item.addKey.label.subLable]"
          >
          </el-input>
          <!-- 時間選擇 -->
          <el-date-picker
            :disabled="item.disabled ? true : false"
            v-else-if="item.type === 'date'"
            v-model="baseForm[item.key]"
            type="date"
            :editable="false"
            :clearable="false"
            value-format="yyyy-MM-dd"
            :placeholder="`請選擇${item.label}`"
          >
          </el-date-picker>
          <!-- 級聯(lián) -->
          <el-cascader
            :disabled="item.disabled ? true : false"
            v-else-if="item.type === 'cascader'"
            :props="{
              checkStrictly: item.isCheckStrictly,
              multiple: item.isMultiple,
            }"
            collapse-tags
            v-model="baseForm[item.key]"
            :options="item.optionList"
            @change="(val) => changeDepSelect(val, item, baseForm)"
            :placeholder="`請選擇${item.label}`"
          >
          </el-cascader>
          <!-- 文本域 -->
          <el-input
            :disabled="item.disabled ? true : false"
            :maxlength="item.maxLength || 500"
            show-word-limit
            v-emoji
            v-else-if="item.type === 'textarea'"
            type="textarea"
            :rows="2"
            :autosize="{
              minRows: 3,
            }"
            v-model.trim="baseForm[item.key]"
            :placeholder="`請輸入${item.label}`"
          >
          </el-input>
          <!-- 附件上傳 -->
          <el-upload
            :class="{hideBtn: item.hideBtn}"
            v-else-if="item.type === 'uploadFile'"
            class="upload"
            accept="*"
            :disabled="item.disabled || uploading"
            :action="uploadUrl"
            :file-list="baseForm[item.key]"
            :before-upload="fileBeforeUpload"
            :on-preview="downloadFile"
            :on-error="uploadError"
            :on-progress="uploadProgress"
            :on-remove="(file)=>fileRemove(file, item)"
            :on-success="(res) => uploadSuccess(res, item)"
          >
            <el-button type="primary" :disabled="uploading">
              上傳附件
            </el-button>
            <div slot="tip" class="el-upload__tip">
              僅支持上傳以下類型文件: .pdf，.xls，.xlsx，.doc，.docx，.zip，.png，.jpg，.jpeg，.rar，且單個文件不超過50MB
            </div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
// import { api } from '@/api';
import { flat } from '@/util/validate';
import myForm from '@/mixins/my-form';

export default {
  name: 'my-form',
  mixins: [myForm],
  components: {},
  props: {
    // 輸入框類型
    baseFormList: {
      type: Array,
      default: () => [],
    },
    // 輸入框選中后的傳參
    baseForm: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    baseForm: {
      handler(val) {
        if (val) {
          this.updateForm();
        }
      },
      deep: true,
    },
    baseFormList: {
      // eslint-disable-next-line no-unused-vars
      handler(val) {
        // console.log('myFrom組件的baseFormList組件類型', val);
      },
      deep: true,
    },
  },
  data() {
    return {
      // 校驗
      baseRules: {},
      // 扁平化處理下拉選
      depOptions: [],
      // 附件上傳地址
      uploadUrl: `${process.env.VUE_APP_BASE_URL}common/file/upload`,
      uploading: false,
    };
  },
  created() {
    this.initData();
    this.initOption();
  },
  methods: {
    ...mapActions(['apiGetDepList']),
    // 更新數(shù)據(jù)
    updateForm() {
      // 關閉數(shù)據(jù)后更新依然要刷新下拉框
      this.initOption();
      this.$emit('update:baseForm', this.baseForm);
    },
    // 取消校驗
    closeBaseForm() {
      this.$refs.baseForm.resetFields();
    },
    // 校驗必填項
    checkValidate() {
      const that = this;
      console.log(this.baseFormList, this.baseForm);
      return new Promise((resolve) => {
        this.$refs.baseForm.validate((valid) => {
          if (!valid) {
            resolve(false);
            return false;
          }
          that.updateForm();
          resolve(true);
          return true;
        });
      });
    },
    // 重置數(shù)據(jù)
    resetForm() {
      this.$refs.baseForm.resetFields();
    },
    /**
     * 附件相關
     */
    // 上傳校驗
    fileBeforeUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$message.error('上傳文件大小不能超過 50MB!');
        return false;
      }
      const suffix = file.name.split('.').slice(-1)[0].toLowerCase();
      const types = ['pdf', 'xls', 'xlsx', 'doc', 'docx', 'zip', 'png', 'jpg', 'jpeg', 'rar'];
      const isRightType = types.includes(suffix);
      if (!isRightType) {
        this.$message.error('僅支持上傳以下類型文件:.pdf|.xls|.xlsx|.doc|.docx|.zip|.png|.jpg|.jpeg|.rar');
        return false;
      }
      return isLt50M && isRightType;
    },
    // 移除文件
    fileRemove(file, item) {
      this.baseForm[item.key] = this.baseForm[item.key].filter(
        (el) => (el.url !== file.url),
      );
    },
    // 上傳中
    uploadProgress() {
      this.uploading = true;
    },
    // 上傳失敗
    uploadError(res) {
      this.$message.error(res.message);
    },
    // 上傳成功
    uploadSuccess(res, item) {
      this.uploading = false;
      if (res.messageCode === '200') {
        this.baseForm[item.key].push({
          name: res.data.docName,
          ...res.data,
        });
        this.$message({
          message: '上傳成功',
          type: 'success',
        });
      } else {
        this.$message({
          message: res.message,
          type: 'error',
        });
      }
    },
    // 下載文件
    downloadFile(file) {
      if (file.url) {
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = file.location;
        link.setAttribute('download', file.name);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    // 數(shù)據(jù)初始化
    initData() {
      // console.log(this.baseForm, this.baseFormList);
      // 督辦立項單
      this.baseFormList.forEach((el) => {
        if (el.isMultiple && !el.labelKey) {
          this.$set(this.baseForm, el.key, []);
        } else if (!el.isMultiple && el.labelKey) {
          this.$set(this.baseForm, el.key, '');
          this.$set(this.baseForm, el.labelKey, '');
        } else if (!el.isMultiple && !el.labelKey) {
          this.$set(this.baseForm, el.key, '');
        }
        if (el.defaultValue) {
          this.$set(this.baseForm, el.key, el.defaultValue);
        }
        if (el.defaultLabelValue) {
          this.$set(this.baseForm, el.labelKey, el.defaultLabelValue);
        }
        if (el.notRequired) {
          return false;
        }
        const rules = [];
        const inputType = ['input', 'textarea'];
        if (inputType.indexOf(el.type) > -1) {
          rules.push({
            required: true,
            message: `請輸入${el.label}`,
            trigger: ['change', 'blur'],
          });
          this.$set(this.baseRules, el.key, rules);
        } else {
          rules.push({
            required: true,
            message: `請選擇${el.label}`,
            trigger: ['change'],
          });
          this.$set(this.baseRules, el.key, rules);
        }
        return true;
      });
    },
    // 下拉選初始化
    async initOption() {
      // 部門處理
      const res = await this.apiGetDepList();
      // 部門扁平化處理,方便獲取名稱
      this.depOptions = flat(res);
      // 部門相關下拉選,在這里可以更改下拉框的重置參數(shù)
      const dep = ['hostUnitId', 'assistanceUnitId'];
      this.baseFormList.forEach((el) => {
        if (this.getConditionObj[el.key]) {
          this.$set(el, 'optionList', this.getConditionObj[el.key]);
        }
        if (dep.indexOf(el.key) > -1) {
          this.$set(el, 'optionList', res[0].children);
        }
      });
    },
  },
  computed: {
    ...mapGetters(['getConditionObj', 'getUserInfo']),
  },
};
</script>

使用baseFormList傳參

const EDIT_LIST = [{
  label: '事項1',
  key: 'superviseDesc',
  type: 'input',
  disabled: true,
  optionList: [],
  class: '',
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
}, {
  label: '任務1',
  key: 'taskName',
  type: 'input',
  disabled: true,
  optionList: [],
  class: '',
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
}, {
  label: '申請延期原因',
  key: 'delayReason',
  type: 'textarea',
  optionList: [],
  class: '',
  xl: 24,
  lg: 24,
  md: 24,
  sm: 24,
}, {
  label: ' 延期辦結(jié)時限',
  key: 'delayFinishDate',
  type: 'date',
  optionList: [],
  class: '',
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
}, {
  label: '申請人員',
  key: 'creatorName',
  type: 'input',
  disabled: true,
  optionList: [],
  class: '',
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
}, {
  label: '申請部門',
  key: 'deptName',
  type: 'input',
  disabled: true,
  optionList: [],
  class: '',
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
}, {
  label: '申請時間',
  key: 'applyDate',
  type: 'date',
  disabled: true,
  optionList: [],
  class: '',
  xl: 12,
  lg: 12,
  md: 12,
  sm: 12,
}{
  label: '附件',
  key: 'attachmentList',
  type: 'uploadFile',
  isMultiple: true,
  loading: false,
  notRequired: true,
  optionList: [],
  class: '',
  xl: 24,
  lg: 24,
  md: 24,
  sm: 24,
}];
上面是常量
data() {
    return {
      visible: false,
      baseFormList: JSON.parse(JSON.stringify(EDIT_LIST)),
      baseForm: {
      },
    };
  },

templeent:
    <my-form
      ref="myForm"
      :baseFormList="baseFormList"
      :baseForm="baseForm">
    </my-form>

baseForm是每個組件的傳入不同展示輸入框的數(shù)據(jù)（如input.value），組件間更新是雙向數(shù)據(jù)綁定的

baseFormList是傳入的組件類型數(shù)據(jù)，如input，下拉選，時間選擇器等等

用法，使用常量傳入設置不同的組件類型，key是要用到baseForm的返回的數(shù)據(jù)的字符

其他輸入框?qū)傩钥煽磂lemenet的form的表單屬性