dx-element-ui/packages/form/src/main.vue

<template>
  <el-form :ref="formRef" :model="rowData" size="small" :rules="myRules" :label-position="labelPosition">
    <div v-if="modeList && modeList.length > 0">
      <div class="el-form-bottom" v-for="(mode, modeIndex) in modeList" :key="modeIndex">
        <div class="el-form-box ou" v-if="modeShowStatus(mode)">
          <div class="emz-divider" :style="mode.style">{{ mode.name }}
            <el-tag class="mode-tag" v-if="mode.btn" :color="mode.btn.color"
                    :effect="mode.btn.effect ? mode.btn.effect : 'dark'" size="mini" @click="modeEventClick(mode)">
              {{ mode.btn.name }}
            </el-tag>
          </div>
          <div class="clearfix em-form-content" v-if="iShowFormInput">
            <el-col
                v-for="(item,index) in sortAfterColumn" :key="index"
                :style="item[inputType] && item[inputType].formStyle ? item[inputType].formStyle : (item.formStyle ? item.formStyle : '')"
                :xs="colSpanResponsive(item, inputType, 'xs', 24)"
                :sm="colSpanResponsive(item, inputType, 'sm', 24)"
                :md="colSpanResponsive(item, inputType, 'md', 24)"
                :lg="colSpanResponsive(item, inputType, 'lg', 12)"
                :xl="colSpanResponsive(item, inputType, 'xl', 12)">
              <nt-input v-if="isShowInput(item, mode.ou)" :inputItem="item" :rowData="rowData" :inputType="inputType"
                        :itemMode="mode" :selectList="selectList" :axios="axios" :queryURL="queryURL"
                        :responseSuccess="responseSuccess" :publicParams="publicParams"
                        @myValidateField="myValidateField" @resetPageColumn="resetPageColumn"></nt-input>
            </el-col>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="el-form-bottom el-mode-list">
      <div class="el-form-box">
        <div class="clearfix em-form-content" v-if="iShowFormInput">
          <el-col
              v-for="(item,index) in sortAfterColumn" :key="index"
              :style="item[inputType] && item[inputType].formStyle ? item[inputType].formStyle : (item.formStyle ? item.formStyle : '')"
              :xs="colSpanResponsive(item, inputType, 'xs', 24)"
              :sm="colSpanResponsive(item, inputType, 'sm', 24)"
              :md="colSpanResponsive(item, inputType, 'md', 24)"
              :lg="colSpanResponsive(item, inputType, 'lg', 12)"
              :xl="colSpanResponsive(item, inputType, 'xl', 12)">
            <nt-input v-if="isShowInput(item)" :inputItem="item" :rowData="rowData" :inputType="inputType"
                      :selectList="selectList" :axios="axios" :queryURL="queryURL" :responseSuccess="responseSuccess"
                      :publicParams="publicParams" @myValidateField="myValidateField"
                      @resetPageColumn="resetPageColumn"></nt-input>
          </el-col>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <el-form-item class="el-del-btn-item" v-if="rowData._btn && rowData._btn.iShow">
      <div class="btn-item-footer">
        <el-button v-for="(btnItem, index) in rowData._btn.list" :key="index" :type="btnItem.bType"
                   size="small"
                   :icon="btnItem.icon" @click="btnClickEvent(btnItem)">{{ btnItem.label }}
        </el-button>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import NtInput from '@/components/thrid/em-element-ui/packages/input';
import {submitEditFormInfo, otherEvent} from './tool-form';
import {isTypeof, toolResetPageColumn, arrayToFieldSort} from '@/components/thrid/em-element-ui/src/tools/utils';
import {addValidatorObj} from '@/components/thrid/em-element-ui/src/tools/validate';
import { unitInitSelectList } from "@/components/thrid/em-element-ui/packages/list/src/tool-list";

export default {
  name: 'NtForm',
  components: { NtInput },
  props: {
    rowData: {
      type: Object,
      required: true
    },
    pageColumn: {
      type: Array,
      required: true
    },
    modeList: {
      type: Array | undefined,
      default: function () {
        return [];
      }
    },
    modeStatus: {
      type: Object,
      default: function () {
        return {
          show: 1,
          detail: 2
        }
      }
    },
    inputType: {
      type: String,
      default: 'show'
    },
    selectList: {
      type: Object | undefined,
      default: function () {
        return {};
      }
    },
    axios: {
      type: Object,
      default: function () {
        return {};
      }
    },
    queryURL: {
      type: Object,
      default: function () {
        return {};
      }
    },
    responseSuccess: {
      type: Object,
      default: function () {
        return {};
      }
    },
    labelPosition: {
      type: String,
      default: 'left'
    },
    formRef: {
      type: String,
      default: 'form'
    },
    initSelect: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      myRules: {},
      sortAfterColumn: null,
      iShowFormInput: true,
      publicParams: {},
      select_list: this.selectList // 兼容initSelect
    };
  },
  watch: {},
  created: function () {
    this.initData();
  },
  methods: {
    initData() {
      this.publicParams = (this.options && this.options.publicParams) ? this.options.publicParams : {};
      // 模糊图片初始化
      this.pageColumn.forEach(item => {
        if (item[this.inputType] && item[this.inputType].hasOwnProperty('vague')) {
          item[this.inputType].vague = true;
        }
      })
      // 是否重新加载select
      this.initSelect && this.initSelectList();
      // column重新排序
      this.resetPageColumn();
    },
    initSelectList(demandList = null) {
      unitInitSelectList(this, demandList);
    },
    myValidateField(field) {
      this.$refs[this.formRef].validateField(field)
    },
    modeShowStatus(mode) {
      let tmpModeStatus = false;

      tmpModeStatus = ((mode.status & this.modeStatus[this.inputType]) == this.modeStatus[this.inputType]);

      if (tmpModeStatus && mode.hasOwnProperty('ou')) {
        let tmpModeOuList = this.sortAfterColumn.filter(item => item[this.inputType] && item[this.inputType].hasOwnProperty('ou') && item[this.inputType].ou === mode.ou);
        tmpModeStatus = tmpModeOuList.length > 0 ? true : false
      }

      return tmpModeStatus
    },
    colSpanResponsive(item, inputType, node, number) {
      if ((item[inputType] && item[inputType].colspan) || item.colspan) {
        return item[inputType] && item[inputType].colspan ? item[inputType].colspan : (item.colspan ? item.colspan : number)
      } else {
        return item[inputType] && item[inputType][node] ? item[inputType][node] : (item[node] ? item[node] : number)
      }
    },
    resetPageColumn(value = '', inputItem = {}) {
      this.sortAfterColumn = arrayToFieldSort(this.pageColumn, this.inputType);
      this.iShowFormInput = false;
      this.$nextTick(() => {
        this.sortAfterColumn = toolResetPageColumn(this, this.pageColumn, this.sortAfterColumn, this.rowData, this.inputType, arguments.length > 0 ? true : false)

        this.iShowFormInput = true
        // 修改规则校验
        this.myRules = addValidatorObj(this, this.sortAfterColumn)
      })
    },
    isShowInput(item, mode = '') {
      let noShow = item[this.inputType] && item[this.inputType].noShow ? item[this.inputType].noShow : 0,
          ouShow = item[this.inputType] && item[this.inputType].ou ? item[this.inputType].ou : '',
          btnType = this.rowData._btn && this.rowData._btn.type ? this.rowData._btn.type : '',
          ouFlag = mode === '' ? true : ouShow == mode,
          showFlag = item[this.inputType] ? (item[this.inputType] && !((btnType == 'add' && (noShow & 1) == 1) || (btnType == 'edit' && (noShow & 2) == 2))) : false;

      return showFlag && ouFlag;
    },
    modeEventClick(item) {
      this.$emit('handleModeEvent', item, this.pageColumn, this.rowData);
    },
    btnClickEvent(item) {
      switch (item.type) {
        case 'close':
          if (isTypeof(this.rowData._oldData) === 'object') {
            for (let [k, v] of Object.entries(this.rowData._oldData)) {
              if (this.rowData[k] !== v) {
                this.rowData[k] = v;
              }
            }
          }
          this.$emit('clear', 'edit');
          break;
        case 'submit':
          submitEditFormInfo(this, 'form');
          break;
        default:
          otherEvent(this, item, 'form');
      }
    }
  },
  beforeDestroy() {
    this.btnClickEvent({ type: 'close' });
  }
};

</script>
<style lang="scss">
.el-form-box {
  &.ou {
    border: 1px solid #f2f2f2;
    border-radius: 8px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 30px;

    .emz-divider {
      position: absolute;
      top: -10px;
      left: 10px;
      color: #409EFF;
      padding: 1px 5px;
      background-color: #fefefe;
    }

    .em-form-content {
      padding-top: 20px;
    }

    .mode-tag {
      cursor: pointer;
    }
  }
}
</style>