element ui的from表单，不断修改版

，from表单

有两个parmas，展示的数据，rules，校验规则

看代码，虽然没用

1，如果弹窗后关闭弹窗，再打开发现有校验问题，这个需要重置表单，使用resetfields() 方法，这个方法可以对整个表单进行重置，将所有字段值重置为初始值并移除校验结果；

坑：也会清除并初始化所有的默认数据，所以要注意使用

2，如果再点击弹窗，弹窗中有类似于切换的页面的，如

弹出后后面需要往弹窗传数据，并且点击对应的编辑弹出对应的导航数据时，要在关闭弹窗的时候将导航脚标设置为初始值；

export const BASE_FORM = [
  {
    label: '单号',
    key: 'superviseNo',
    type: 'input',
    disabled: true,
    loading: false,
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '事项',
    key: 'superviseDesc',
    type: 'input',
    maxLength: 50,
    loading: false,
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '部门',
    key: 'creatorId',
    labelKey: 'creatorName',
    addKey: {
      label: {
        getLable: 'deptName',
        subLable: 'deptName',
      },
      value: {
        getLable: 'deptId',
        subLable: 'deptId',
      },
    }, // 附带值,下拉选之后,其他内容默认展示
    type: 'selectRemote',
    apiUrl: 'getStaffList',
    isFilterable: true,
    isRemote: true,
    loading: false,
    disabled: true,
    optionList: [],
    class: 'hasAddKey',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '日期',
    key: 'createTime',
    type: 'input',
    disabled: true,
    loading: false,
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '联系电话',
    key: 'contactNumber',
    type: 'input',
    disabled: true,
    loading: false,
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '类别',
    key: 'superviseCategory',
    labelKey: 'superviseCategoryName',
    type: 'select',
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '来源',
    key: 'superviseSource',
    labelKey: 'superviseSourceName',
    type: 'select',
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '签发人',
    key: 'signerId',
    labelKey: 'signerName', // 需要给后台同时传label 和 value 2个值
    type: 'selectRemote',
    apiUrl: 'getUserLeader',
    defaultValue: 'gyh',
    defaultLabelValue: '',
    isFilterable: true,
    isRemote: true,
    loading: false,
    optionList: [{
      deptId: '2',
      deptName: '公司领导',
      loginId: '',
      userName: '',
      workCode: 'CT00142',
    }],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '反馈周期',
    key: 'feedbackPeriod',
    defaultValue: 'week',
    type: 'select',
    loading: false,
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '计划办结时限',
    key: 'planFinishDate',
    type: 'date',
    optionList: [],
    class: '',
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
  },
  {
    label: '要求',
    key: 'superviseRequirements',
    type: 'textarea',
    optionList: [],
    class: '',
    xl: 24,
    lg: 24,
    md: 24,
    sm: 24,
  },
  {
    label: '备注',
    key: 'remark',
    type: 'textarea',
    notRequired: true,
    optionList: [],
    class: '',
    xl: 24,
    lg: 24,
    md: 24,
    sm: 24,
  },
  {
    label: '附件',
    key: 'attachmentList',
    type: 'uploadFile',
    isMultiple: true,
    loading: false,
    notRequired: true,
    optionList: [],
    class: '',
    xl: 24,
    lg: 24,
    md: 24,
    sm: 24,
  },
];

<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>
          <!-- 输入框 -->
          <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>
          <!-- 级联 -->
          <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) {
        console.log('查看baseForm', val);
        if (val) {
          this.updateForm();
        }
      },
      deep: true,
    },
    baseFormList: {
      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']),
    // 更新数据
    updateForm() {
      // 关闭数据后更新依然要刷新下拉框
      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;
        });
      });
    },
    // 重置数据
    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);
      }
    },
    // 数据初始化
    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;
      });
      // console.log(this.baseForm, this.taskInfo, this.baseRules);
    },
    // 下拉选初始化
    async initOption() {
      // 部门处理
      const res = await this.apiGetDepList();
      // 部门扁平化处理,方便获取名称
      this.depOptions = flat(res);
      // 部门相关下拉选,在这里可以更改下拉框的重置参数
      const dep = ['hostUnitId', 'assistanceUnitId', 'hostUnitName', 'assistanceUnitName'];
      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>