目录
formatFormData
后端数据格式编辑
JSON解析和生成
加载（请求前，await后）
formComp
formatFormData
后端数据格式
为空的，可以直接不提交/提交null/undefined
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')
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>
