，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>