vue 表单form-item模板（编辑，查看，新建）

目录

formatFormData

JSON解析和生成

加载（请求前，await后） 

formComp

---

formatFormData

  formData: any = {
    confmNm: "", // string 数据确认版本名称
    moduleDataType: [], // string 包含数据类型  非必填
    applyType: 1, // integer 适用人群
    applyOa: [], // string OA
    applyTeamAttr: [], // string 团队属性  
    applyManagerLevel: [], // string 管理级别
    taskContent: {},//object 任务确认配置
    scoreContent: {},//object 业绩确认配置
    otherContent: {}//object 其他数据确认配置
  }

后端数据格式

为空的，可以直接不提交/提交null/undefined 

但获取后端返回的数据时，可能为空的且后续需要直接引用其方法/属性时，要赋初值

  // 模块详情
  confirmpageGet() {
    this.detailLoading = true
    API.getQuery(this.releId).then((res: any) => {
      if (res && res.code == 200) {
        this.formData = res.data
        if(!this.formData.moduleDataType){
          this.formData.moduleDataType=[]
        }
      }
    }).catch((e: any) => {
      this.$message.error(e && e.msg)
    }).finally(() => {
      this.detailLoading = false
      if (this.formData.moduleDataType.includes(2)) this.$refs.taskContent.formData = this.formData.taskContent;
      if (this.formData.moduleDataType.includes(1)) this.$refs.scoreContent.formData = this.formData.scoreContent;
      if (this.formData.moduleDataType.includes(3)) this.$refs.otherContent.formData = this.formData.otherContent;
    })
  }

JSON解析和生成

var str = '{"name": "参宿","id":7}';      //'JSON字符串'
var obj = JSON.parse(str);                //JSON.parse(str)
console.log(obj);                       //JSON的解析（JSON字符串转换为JS对象）
//Object { name: "参宿", id: 7 }
var jsonstr = JSON.stringify(obj);        //JSON.stringify(obj)
console.log(jsonstr);                     //JSON的生成（JS对象转换为JSON字符串）
 
JSON.parse(text[, reviver])//reviver函数参数，修改解析生成的原始值，调用时机在 parse 函数返回之前。
//k：key，v：value
JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
 
//从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});
 
// 1
// 2
// 4
// 6
// 5
// 3
// ""

加载（请求前，await后） 

 <mds-loading :isLoading="detailLoading" type="ball-pulse" loadingText="正在努力加载中" />
...
export default class extends Vue {
  detailLoading: boolean = false

//查看
  getQuery() {
    this.detailLoading = true
    API.getQuery(this.$route.params.releId).then((res: any) => {
      if (res && res.code == 200) {
      }
    }).catch((e: any) => {
      this.$message.error(e && e.msg)
    }).finally(() => {
      this.detailLoading = false
    })
  }

//编辑
  getQuery1() {
    API.getQuery1(this.$route.params.releId).then(async (res: any) => {
      if (res && res.code == 200) {

        const indexContent = JSON.parse(res.data.indexContent)
        
        indexContent.index.forEach((item: any) => {
          item.open = true
          item.taskIndex = {
            id: item.taskIndexCode,
            indexNm: item.taskIndexName
          }
        })

        this.formData.indexContent = indexContent
        await this.baseIndexQuaryScoreIndex(this.formData.applyType === 1 ? 'oa' : 'team')
        this.detailLoading = false
      }
    })
  }
}

formComp

<template>
    <mds-form :model="formData" :rules="rules" ref="formData">
        <mds-form-item label="确认方式" prop="confmMode" :required="true">
            <mds-select  v-model="formData.confmMode" style="width: 480px" placeholder="请选择" :disabled="disabled" clearable
                filterable>
                <mds-option v-for="item in CONFM_MODE" :value="item.id" :label="item.label" />
            </mds-select>
        </mds-form-item>
        <mds-form-item  label="确认周期" prop="confmCycle" :required="true">
            <mds-select v-model="formData.confmCycle" style="width: 480px" placeholder="请选择" :disabled="disabled" clearable
                filterable>
                <mds-option v-for="item in CONFM_CYCLE" :value="item.id" :label="item.label" />
            </mds-select>
        </mds-form-item>
        <mds-form-item  label="可确认时间" prop="confmTm" :required="true"
            class="confmTm-form-item">
            <mds-select :class="{ 'validate-success': formData.confmTm }" v-model="formData.confmTm" style="width: 230px"
                placeholder="请选择" :disabled="disabled" clearable filterable>
                <mds-option v-for="item in CONFM_TM" :value="item.id" :label="item.label" :disabled="isDisabledTm(item)" />
            </mds-select>
            <mds-select :class="{ 'validate-success': (formData.confmTmRange[0] > 0) }" v-model="formData.confmTmRange[0]"
                style="width: 105px" placeholder="开始日期" :disabled="disabled" clearable no-match-text='暂无日期' filterable>
                <mds-option v-for="item in CONFM_TM_RANGE" :value="item" :label="item + '号'"
                    :disabled="isDisabledStart(item)" />
            </mds-select>至
            <mds-select :class="{ 'validate-success': (formData.confmTmRange[1] > 0) }" v-model="formData.confmTmRange[1]"
                style="width: 105px" placeholder="结束日期" :disabled="disabled" clearable no-match-text='暂无日期' filterable>
                <mds-option v-for="item in CONFM_TM_RANGE" :value="item" :label="item + '号'"
                    :disabled="isDisabledEnd(item)" />
            </mds-select>
        </mds-form-item>
        <mds-form-item  label="提醒频率" prop="remindFrequency" :required="true">
            <mds-select v-model="formData.remindFrequency" style="width: 480px" placeholder="请选择" :disabled="disabled"
                clearable filterable>
                <mds-option v-for="item in REMINDE_FREQUENCY" :value="item.id" :label="item.label" />
            </mds-select>
        </mds-form-item>
    </mds-form>
</template>
  
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { CONFM_MODE, CONFM_CYCLE, CONFM_TM, REMINDE_FREQUENCY, CONFM_TM_RANGE } from '@/utils/formComp'
@Component({
    components: {}
})

export default class formComp extends Vue {
    @Prop({ required: true }) private disabled!: boolean

    data() {
        return {
            CONFM_MODE: CONFM_MODE,
            CONFM_CYCLE: CONFM_CYCLE,
            CONFM_TM: CONFM_TM,
            REMINDE_FREQUENCY: REMINDE_FREQUENCY,
            CONFM_TM_RANGE: CONFM_TM_RANGE,
            pickerOptions: {
                disabledDate(confmTm: Date) {
                    return confmTm.getTime() < Date.now()
                }
            },
            formData: {
                confmMode: 1,
                confmCycle: "",
                confmTm: "",
                remindFrequency: "",
                confmTmRange: [,]
            }
        }
    }
    //单向绑定数据，主数据改变，则子数据清空
    @Watch('formData.confmCycle')
    changetaskStandardDrawer(newV: any, oldV: any) {
        if (oldV && newV != oldV) {
            this.formData.confmTm = ""
        }
    }
    rules = {
        confmMode: [{ required: true, message: '请选择确认方式', trigger: 'change' }],
        confmCycle: [{ required: true, message: '请选择确认周期', trigger: 'change' }],
        confmTm: [{ required: true, validator: this.confmTmValidator, trigger: 'change' }],
        remindFrequency: [{ required: true, message: '请选择提醒频率', trigger: 'change' }],
    }
    //同一个提示位置
    confmTmValidator(rule: any, value: any, callback: any) {
        if (!value || value.length === 0) {
            callback(new Error('请选择可确认时间'))
            //从未选过||选完又取消时会存在值
        } else if (this.formData.confmTmRange.length < 2 || !this.formData.confmTmRange[1] || !this.formData.confmTmRange[0]) {
            callback(new Error('请选择可确认时间范围'))
        } else {
            callback()
        }
    }
    submit() {
        var isValid;
        //判断表单数据是否有效
        this.$refs.formData.validate((valid: any) => {
            isValid = valid;
        })
        return isValid;
    }
    //双向绑定数据
    isDisabledStart(item: number) {
        //选完又取消
        return this.formData.confmTmRange[1] > 0 && item > this.formData.confmTmRange[1];
    }
    isDisabledEnd(item: number) {
        return this.formData.confmTmRange[0] > 0 && item < this.formData.confmTmRange[0];
    }
    //单向绑定数据
    isDisabledTm(item: { id: number, label: string }) {
        if (this.formData.confmCycle === 3 && item.id != 2) return true;
    }
}

</script>

<style lang="scss" scoped>
::v-deep .mds-form-item-content {
    width: 480px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

::v-deep .validate-success .mds-input {
    border-color: #d8dce6 !important;
}

::v-deep .mds-input[disabled] {
    cursor: not-allowed !important;
}
</style>

  setCursorDisabled() {
    const selectInnerInput = document.querySelector('.mds-select-inner-input') as HTMLElement;
    if (selectInnerInput instanceof HTMLInputElement && selectInnerInput.disabled) {
      const wrapElement = document.querySelector('.mds-input-affix-wrapper') as HTMLElement;
      wrapElement .style.cursor = 'not-allowed';
    }
  }