vue 表单form-item模板(编辑,查看,新建)

目录

formatFormData

JSON解析和生成

加载(请求前,await后)

formComp


formatFormData

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

后端数据格式

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

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

javascript 复制代码
  // 模块详情
  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解析和生成

javascript 复制代码
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后)

TypeScript 复制代码
 <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

javascript 复制代码
<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')
    handleChangeConfmCycle(newV: any, oldV: any) {
        if(newV!=oldV){
            this.formData.confmTm=""
        }
    }
    rules = {
        confmMode: [{ required: true, message: '请选择确认方式', trigger: ['blur', 'change'] }],
        confmCycle: [{ required: true, message: '请选择确认周期', trigger: 'change' }],
        confmTm: [{ required: true, validator: this.confmTmValidator, trigger: ['blur', 'change'] }],
        remindFrequency: [{ required: true, message: '请选择提醒频率', trigger: ['blur', '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] <= 0 || this.formData.confmTmRange[0] <= 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;
}
</style>
相关推荐
前端小巷子3 分钟前
深入理解TCP协议
前端·javascript·面试
万少5 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲19 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式