若依二次开发 前端菜鸟级经验分享
qq_52234528 2024-08-06 12:33:01 阅读 61
推荐视频
【若依框架】15分钟玩转若依二次开发_哔哩哔哩_bilibili
在这个视频导入的前端代码的基础上，下面是我做项目时收获的一些小知识
(哦对，还有下面这个element官网，没接触过这个的可以玩一玩，挺有意思的）
组件 | Element
代码基础知识补充
前端代码几乎修改都在这个页面：
这个代码中：
这四个部分分别对应了页面中的：
1对应查询部分：
2对应四个按钮部分：
3对应查看列表的部分
4对应新增按钮和修改按钮的页面
表单校验：如对联系电话输入框限制
得到的效果是这样的：
基础代码：
<code><el-form-item label="联系电话" prop="contactnumber">code>
<el-input v-model="form.contactnumber" placeholder="请输入联系电话"/>code>
</el-form-item>
加限制后的代码：
<el-form-item label="联系电话" prop="contactnumber">code>
<el-input v-model="form.contactnumber" placeholder="请输入联系电话"></el-input>code>
</el-form-item>
export default {
data() {
return {
form: {
contactnumber: ''
},
rules: {
contactnumber: [
{ required:true,message: '联系电话不能为空', trigger: 'blur' },
{ pattern: /^[0-9]+$/, message: '联系电话必须为数字', trigger: 'blur' },
{ pattern: /^[0-9]{11}$/, message: '联系电话必须为11位数字', trigger: 'blur' }
]
}
总结一下，也就是改三个地方，input那里、form和rules那里，非常需要注意的是，【若依框架】15分钟玩转若依二次开发_哔哩哔哩_bilibili的视频里导出的代码自带form和rules。。。我刚开始没注意到，自己又新加了form和rules，导致结果一直运行不出来。。。好笨。。
如果不想要联系电话前面的红色的星号，把required:true,删了就行了
级联选择器el-cascader
以文化程度为例，效果展示：
代码如下：
<code><template>
<el-form-item label="文化程度" prop="educationlevel">code>
<el-cascader
v-model="form.educationlevel"code>
:options="educationOptions"code>
placeholder="请选择文化程度"code>
clearable
size="small"code>
></el-cascader>
</el-form-item>
</template>
<script>
export default {
data() {
return {
form: {
educationlevel: []
},
educationOptions: [
{
value: '0',
label: '研究生',
children: [
{ value: '1', label: '研究生毕业' },
{ value: '2', label: '研究生肄业' }
]
},
{
value: '3',
label: '大学本科(简称“大学”)',
children: [
{ value: '4', label: '大学毕业' },
{ value: '5', label: '相当大学毕业' },
{ value: '6', label: '大学肄业' }
]
},
{
value: '7',
label: '大学专科和专科学校',
children: [
{ value: '8', label: '专科毕业' },
{ value: '9', label: '相当专科毕业' },
{ value: '10', label: '专科肄业' }
]
},
{
value: '11',
label: '中等专业学校(简称“中专”)或中等技术学校(简称“中技”)',
children: [
{ value: '12', label: '中专毕业' },
{ value: '13', label: '中技毕业' },
{ value: '14', label: '相当中专或中技毕业' },
{ value: '15', label: '中专或中技肄业' }
]
},
{
value: '16',
label: '技工学校',
children: [
{ value: '17', label: '技工学校毕业' },
{ value: '18', label: '技工学校肄业' }
]
},
{
value: '19',
label: '高中',
children: [
{ value: '20', label: '高中毕业' },
{ value: '21', label: '职业高中毕业' },
{ value: '22', label: '农业高中毕业' },
{ value: '23', label: '相当高中毕业' },
{ value: '24', label: '高中肄业' }
]
},
{
value: '25',
label: '初中',
children: [
{ value: '26', label: '初中毕业' },
{ value: '27', label: '职业初中毕业' },
{ value: '28', label: '农业初中毕业' },
{ value: '29', label: '相当初中毕业' },
{ value: '30', label: '初中肄业' }
]
},
{
value: '31',
label: '小学',
children: [
{ value: '32', label: '小学毕业' },
{ value: '33', label: '相当小学毕业' },
{ value: '34', label: '小学肄业' }
]
},
{
value: '35',
label: '文盲或半文盲'
}
]
};
}
};
</script>
如果想要下图这种前面有个小圆圈的，加一句 filterable change-on-select就好了
代码如下：
<code><el-form-item label="健康状况" prop="healthstatus">code>
<el-cascader v-model="form.healthstatus" :options="healthOptions" placeholder="请选择健康状况" clearable size="small"code>
filterable change-on-select></el-cascader>
</el-form-item>
获取创建人、创建时间、修改人、修改时间
效果如图：
修改代码步骤如下：
这时 你会发现时间格式有问题，用下面的代码修改一下：
<code><el-table-column label="记录创建时间" align="center" prop="creatortime">code>
<template slot-scope="scope">code>
{ { new Date(scope.row.creatortime).toLocaleString('zh-CN', { hour12: false }) }}
</template>
</el-table-column>
标签页
效果如图：
代码如下：
<code> <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>code>
<el-tabs value="personalInfo">code>
<!-- 个人信息标签页 -->
<el-tab-pane label="个人信息" name="personalInfo">code>
<el-form ref="formpersonalInfo" :model="form" :rules="rules" label-width="80px">code>
<el-form-item label="员工编码" prop="employeecode">code>
<el-input v-model="form.employeecode" placeholder="请输入员工编码" />code>
</el-form-item>
<el-form-item label="离退起始日期" prop="retirementstartdate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.retirementstartdate" type="date"code>
value-format="yyyy-MM-dd" placeholder="选择离退起始日期">code>
</el-date-picker>
</el-form-item>
<el-form-item label="原单位" prop="originalunit">code>
<el-input v-model="form.originalunit" placeholder="请输入原单位" />code>
</el-form-item>
<el-form-item label="单位分类" prop="unitclassification">code>
<el-input v-model="form.unitclassification" placeholder="请输入单位分类" />code>
</el-form-item>
<el-form-item label="原科室" prop="originaldepartment">code>
<el-input v-model="form.originaldepartment" placeholder="请输入原科室" />code>
</el-form-item>
<el-form-item label="姓名" prop="name">code>
<el-input v-model="form.name" placeholder="请输入姓名" />code>
</el-form-item>
<el-form-item label="身份证号" prop="identitynumber">code>
<el-input v-model="form.identitynumber" placeholder="请输入身份证号"></el-input>code>
</el-form-item>
<el-form-item label="出生日期" prop="dateofbirth">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.dateofbirth" type="date"code>
value-format="yyyy-MM-dd" placeholder="选择出生日期">code>
</el-date-picker>
</el-form-item>
<el-form-item label="性别" prop="gender">code>
<el-select v-model="form.gender" placeholder="请选择性别">code>
<el-option label="未知的性别" value="未知的性别"></el-option>code>
<el-option label="男" value="男"></el-option>code>
<el-option label="女" value="女"></el-option>code>
<el-option label="未说明的性别" value="未说明的性别"></el-option>code>
</el-select>
</el-form-item>
<el-form-item label="民族" prop="ethnicity">code>
<el-select v-model="form.ethnicity" placeholder="请选择民族">code>
<el-option label="汉族" value="汉族"></el-option>code>
<el-option label="蒙古族" value="蒙古族"></el-option>code>
<el-option label="回族" value="回族"></el-option>code>
<el-option label="藏族" value="藏族"></el-option>code>
<el-option label="维吾尔族" value="维吾尔族"></el-option>code>
<el-option label="苗族" value="苗族"></el-option>code>
<el-option label="彝族" value="彝族"></el-option>code>
<el-option label="壮族" value="壮族"></el-option>code>
<el-option label="布依族" value="布依族"></el-option>code>
<el-option label="朝鲜族" value="朝鲜族"></el-option>code>
<el-option label="满族" value="满族"></el-option>code>
<el-option label="侗族" value="侗族"></el-option>code>
<el-option label="瑶族" value="瑶族"></el-option>code>
<el-option label="白族" value="白族"></el-option>code>
<el-option label="土家族" value="土家族"></el-option>code>
<el-option label="哈尼族" value="哈尼族"></el-option>code>
<el-option label="哈萨克族" value="哈萨克族"></el-option>code>
<el-option label="傣族" value="傣族"></el-option>code>
<el-option label="黎族" value="黎族"></el-option>code>
<el-option label="傈僳族" value="傈僳族"></el-option>code>
<el-option label="佤族" value="佤族"></el-option>code>
<el-option label="畲族" value="畲族"></el-option>code>
<el-option label="高山族" value="高山族"></el-option>code>
<el-option label="拉祜族" value="拉祜族"></el-option>code>
<el-option label="水族" value="水族"></el-option>code>
<el-option label="东乡族" value="东乡族"></el-option>code>
<el-option label="纳西族" value="纳西族"></el-option>code>
<el-option label="景颇族" value="景颇族"></el-option>code>
<el-option label="柯尔克孜族" value="柯尔克孜族"></el-option>code>
<el-option label="土族" value="土族"></el-option>code>
<el-option label="达斡尔族" value="达斡尔族"></el-option>code>
<el-option label="仫佬族" value="仫佬族"></el-option>code>
<el-option label="羌族" value="羌族"></el-option>code>
<el-option label="布朗族" value="布朗族"></el-option>code>
<el-option label="撒拉族" value="撒拉族"></el-option>code>
<el-option label="毛难族" value="毛难族"></el-option>code>
<el-option label="仡佬族" value="仡佬族"></el-option>code>
<el-option label="锡伯族" value="锡伯族"></el-option>code>
<el-option label="阿昌族" value="阿昌族"></el-option>code>
<el-option label="普米族" value="普米族"></el-option>code>
<el-option label="塔吉克族" value="塔吉克族"></el-option>code>
<el-option label="怒族" value="怒族"></el-option>code>
<el-option label="乌孜别克族" value="乌孜别克族"></el-option>code>
<el-option label="俄罗斯族" value="俄罗斯族"></el-option>code>
<el-option label="鄂温克族" value="鄂温克族"></el-option>code>
<el-option label="德昂族" value="德昂族"></el-option>code>
<el-option label="保安族" value="保安族"></el-option>code>
<el-option label="裕固族" value="裕固族"></el-option>code>
<el-option label="京族" value="京族"></el-option>code>
<el-option label="塔塔尔族" value="塔塔尔族"></el-option>code>
<el-option label="独龙族" value="独龙族"></el-option>code>
<el-option label="鄂伦春族" value="鄂伦春族"></el-option>code>
<el-option label="赫哲族" value="赫哲族"></el-option>code>
<el-option label="门巴族" value="门巴族"></el-option>code>
<el-option label="珞巴族" value="珞巴族"></el-option>code>
<el-option label="基诺族" value="基诺族"></el-option>code>
</el-select>
</el-form-item>
<el-form-item label="健康状况" prop="healthstatus">code>
<el-cascader v-model="form.healthstatus" :options="healthOptions" placeholder="请选择健康状况" clearablecode>
size="small"></el-cascader>code>
</el-form-item>
<el-form-item label="政治面貌">code>
<el-radio-group v-model="form.politicalstatus">code>
<el-radio label="1">请选择字典生成</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="入党时间" prop="partyjoiningdate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.partyjoiningdate" type="date"code>
value-format="yyyy-MM-dd" placeholder="选择入党时间">code>
</el-date-picker>
</el-form-item>
<el-form-item label="文化程度" prop="educationlevel">code>
<el-input v-model="form.educationlevel" placeholder="请输入文化程度" />code>
</el-form-item>
<el-form-item label="宗教信仰" prop="religiousbelief">code>
<el-input v-model="form.religiousbelief" placeholder="请输入宗教信仰" />code>
</el-form-item>
<el-form-item label="婚姻状况">code>
<el-radio-group v-model="form.maritalstatus">code>
<el-radio label="1">请选择字典生成</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="籍贯" prop="nativeplace">code>
<el-input v-model="form.nativeplace" placeholder="请输入籍贯" />code>
</el-form-item>
<el-form-item label="户籍所在地" prop="registeredresidence">code>
<el-input v-model="form.registeredresidence" placeholder="请输入户籍所在地" />code>
</el-form-item>
<el-form-item label="户口类别" prop="residencetype">code>
<el-select v-model="form.residencetype" placeholder="请选择户口类别">code>
<el-option label="请选择字典生成" value="" />code>
</el-select>
</el-form-item>
<el-form-item label="现详细居住地址" prop="currentaddress">code>
<el-input v-model="form.currentaddress" placeholder="请输入现详细居住地址" />code>
</el-form-item>
<el-form-item label="住房面积" prop="housingarea">code>
<el-input v-model="form.housingarea" placeholder="请输入住房面积" />code>
</el-form-item>
<el-form-item label="社区" prop="community">code>
<el-input v-model="form.community" placeholder="请输入社区" />code>
</el-form-item>
<el-form-item label="所属支部" prop="partybranch">code>
<el-input v-model="form.partybranch" placeholder="请输入所属支部" />code>
</el-form-item>
<el-form-item label="通信地址" prop="mailingaddress">code>
<el-input v-model="form.mailingaddress" placeholder="请输入通信地址" />code>
</el-form-item>
<!-- <el-form-item label="联系电话" prop="contactnumber">code>
<el-input v-model="form.contactnumber" placeholder="请输入联系电话" />code>
</el-form-item> -->
<el-form-item label="联系电话" prop="contactnumber">code>
<el-input v-model="form.contactnumber" placeholder="请输入联系电话"></el-input>code>
</el-form-item>
<el-form-item label="邮政编码" prop="postalcode">code>
<el-input v-model="form.postalcode" placeholder="请输入邮政编码"></el-input>code>
</el-form-item>
<el-form-item label="备注" prop="remarks">code>
<el-input v-model="form.remarks" placeholder="请输入备注" />code>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 工作详情标签页 -->
<el-tab-pane label="工作详情" name="workDetails">code>
<el-form ref="formworkDetails" :model="form" :rules="rules" label-width="80px">code>
<el-form-item label="参加工作日期" prop="workstartdate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.workstartdate" type="date"code>
value-format="yyyy-MM-dd" placeholder="选择参加工作日期">code>
</el-date-picker>
</el-form-item>
<el-form-item label="认定工龄" prop="recognizedserviceyears">code>
<el-input v-model="form.recognizedserviceyears" placeholder="请输入认定工龄" />code>
</el-form-item>
<el-form-item label="服务管理二级单位" prop="secondaryserviceunit">code>
<el-input v-model="form.secondaryserviceunit" placeholder="请输入服务管理二级单位" />code>
</el-form-item>
<el-form-item label="服务管理三级单位" prop="tertiaryserviceunit">code>
<el-input v-model="form.tertiaryserviceunit" placeholder="请输入服务管理三级单位" />code>
</el-form-item>
<el-form-item label="发放待遇依据时间" prop="benefitbasisdate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.benefitbasisdate" type="date"code>
value-format="yyyy-MM-dd" placeholder="选择发放待遇依据时间">code>
</el-date-picker>
</el-form-item>
<el-form-item label="内部退养办理时间" prop="internalretirementdate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.internalretirementdate"code>
type="date" value-format="yyyy-MM-dd" placeholder="选择内部退养办理时间">code>
</el-date-picker>
</el-form-item>
<el-form-item label="解除劳动关系时间" prop="employmentterminationdate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.employmentterminationdate"code>
type="date" value-format="yyyy-MM-dd" placeholder="选择解除劳动关系时间">code>
</el-date-picker>
</el-form-item>
<el-form-item label="原职务" prop="originalposition">code>
<el-input v-model="form.originalposition" placeholder="请输入原职务" />code>
</el-form-item>
<el-form-item label="原职称" prop="originaltitle">code>
<el-input v-model="form.originaltitle" placeholder="请输入原职称" />code>
</el-form-item>
<el-form-item label="原工种" prop="originaltrade">code>
<el-input v-model="form.originaltrade" placeholder="请输入原工种" />code>
</el-form-item>
<el-form-item label="职业资格等级" prop="professionalqualificationlevel">code>
<el-input v-model="form.professionalqualificationlevel" placeholder="请输入职业资格等级" />code>
</el-form-item>
<el-form-item label="职级，离退后享受待遇级别" prop="ranktype">code>
<el-select v-model="form.ranktype" placeholder="请选择职级，离退后享受待遇级别">code>
<el-option label="请选择字典生成" value="" />code>
</el-select>
</el-form-item>
<el-form-item label="人员类别" prop="currentstaffcategory">code>
<el-input v-model="form.currentstaffcategory" placeholder="请输入人员类别" />code>
</el-form-item>
<el-form-item label="原人员类别" prop="originalstaffcategory">code>
<el-input v-model="form.originalstaffcategory" placeholder="请输入原人员类别" />code>
</el-form-item>
<el-form-item label="人员类别变化时间" prop="staffcategorychangedate">code>
<el-date-picker clearable size="small" style="width: 200px" v-model="form.staffcategorychangedate"code>
type="date" value-format="yyyy-MM-dd" placeholder="选择人员类别变化时间">code>
</el-date-picker>
</el-form-item>
<el-form-item label="人员类别变化说明" prop="staffcategorychangeexplanation">code>
<el-input v-model="form.staffcategorychangeexplanation" placeholder="请输入人员类别变化说明" />code>
</el-form-item>
</el-form>
</el-tab-pane>
<!-- 银行信息标签页 -->
<el-tab-pane label="银行信息" name="bankInfo">code>
<el-form ref="formbankInfo" :model="form" :rules="rules" label-width="80px">code>
<el-form-item label="收款人" prop="payee">code>
<el-input v-model="form.payee" placeholder="请输入收款人" />code>
</el-form-item>
<!-- <el-form-item label="开户银行1" prop="bank1">code>
<el-input v-model="form.bank1" placeholder="请输入开户银行1" />code>
</el-form-item> -->
<el-form-item label="昆仑银行" prop="bank1account">code>
<el-input v-model="form.bank1account" placeholder="请输入昆仑银行账号" />code>
</el-form-item>
<!-- <el-form-item label="开户银行2" prop="bank2">code>
<el-input v-model="form.bank2" placeholder="请输入开户银行2" />code>
</el-form-item> -->
<el-form-item label="建设银行" prop="bank2account">code>
<el-input v-model="form.bank2account" placeholder="请输入建设银行账号" />code>
</el-form-item>
<!-- <el-form-item label="开户银行3" prop="bank3">code>
<el-input v-model="form.bank3" placeholder="请输入开户银行3" />code>
</el-form-item> -->
<el-form-item label="邮政储蓄银行" prop="bank3account">code>
<el-input v-model="form.bank3account" placeholder="请输入邮政储蓄银行账号" />code>
</el-form-item>
<!-- <el-form-item label="开户银行4" prop="bank4">code>
<el-input v-model="form.bank4" placeholder="请输入开户银行4" />code>
</el-form-item> -->
<!-- <el-form-item label="开户银行4账号" prop="bank4account">code>
<el-input v-model="form.bank4account" placeholder="请输入开户银行4账号" />code>
</el-form-item>
<el-form-item label="开户银行5" prop="bank5">code>
<el-input v-model="form.bank5" placeholder="请输入开户银行5" />code>
</el-form-item>
<el-form-item label="开户银行5账号" prop="bank5account">code>
<el-input v-model="form.bank5account" placeholder="请输入开户银行5账号" />code>
</el-form-item> -->
</el-form>
</el-tab-pane>
<!-- 享受待遇页 -->
<el-tab-pane label="银行享受待遇信息" name="xiangshoudaiyu">code>
<el-form ref="formxiangshoudaiyu" :model="form" :rules="rules" label-width="80px">code>
<el-form-item label="慰问金" prop="condolencemoneystatus">code>
<el-switch v-model="form.condolencemoneystatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="降温费" prop="coolingfeestatus">code>
<el-switch v-model="form.coolingfeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="健康疗养费" prop="healthcarefeestatus">code>
<el-switch v-model="form.healthcarefeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="书报费" prop="newspaperfeestatus">code>
<el-switch v-model="form.newspaperfeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="电话费" prop="telephonefeestatus">code>
<el-switch v-model="form.telephonefeestatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="祝寿" prop="birthdaystatus">code>
<el-switch v-model="form.birthdaystatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="物业费补贴" prop="propertyfeesubsidystatus">code>
<el-switch v-model="form.propertyfeesubsidystatus" active-text="正常发放" inactive-text="停发"code>
:active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="采暖费补贴" prop="heatingsubsidystatus">code>
<el-switch v-model="form.heatingsubsidystatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="采暖费帮扶" prop="heatingsupportstatus">code>
<el-switch v-model="form.heatingsupportstatus" active-text="正常发放" inactive-text="停发" :active-value="true"code>
:inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
<el-form-item label="遗属生活费" prop="survivorlivingexpensestatus">code>
<el-switch v-model="form.survivorlivingexpensestatus" active-text="正常发放" inactive-text="停发"code>
:active-value="true" :inactive-value="false" active-color="#13ce66" inactive-color="#ff4949" />code>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<!-- <el-form-item label="慰问金 发放状态">code>
<el-radio-group v-model="form.condolencemoneystatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="降温费 发放状态">code>
<el-radio-group v-model="form.coolingfeestatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="健康疗养费 发放状态">code>
<el-radio-group v-model="form.healthcarefeestatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="书报费 发放状态">code>
<el-radio-group v-model="form.newspaperfeestatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="电话费 发放状态">code>
<el-radio-group v-model="form.telephonefeestatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="祝寿 发放状态">code>
<el-radio-group v-model="form.birthdaystatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="物业费补贴 发放状态">code>
<el-radio-group v-model="form.propertyfeesubsidystatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="采暖费补贴 发放状态">code>
<el-radio-group v-model="form.heatingsubsidystatus">code>
<el-radio label="1">请选择字典生成</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="采暖费帮扶 发放状态">code>
<el-radio-group v-model="form.heatingsupportstatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item>
<el-form-item label="遗属生活费 发放状态">code>
<el-radio-group v-model="form.survivorlivingexpensestatus">code>
<el-radio label="正常发放">正常发放</el-radio>code>
<el-radio label="停发">停发</el-radio>code>
</el-radio-group>
</el-form-item> -->
<!-- <el-form-item label="备用字符串1" prop="bakstr01">code>
<el-input v-model="form.bakstr01" placeholder="请输入备用字符串1" />code>
</el-form-item>
<el-form-item label="备用字符串2" prop="bakstr02">code>
<el-input v-model="form.bakstr02" placeholder="请输入备用字符串2" />code>
</el-form-item>
<el-form-item label="备用字符串3" prop="bakstr03">code>
<el-input v-model="form.bakstr03" placeholder="请输入备用字符串3" />code>
</el-form-item>
<el-form-item label="备用字符串4" prop="bakstr04">code>
<el-input v-model="form.bakstr04" placeholder="请输入备用字符串4" />code>
</el-form-item>
<el-form-item label="备用字符串5" prop="bakstr05">code>
<el-input v-model="form.bakstr05" placeholder="请输入备用字符串5" />code>
</el-form-item>
<el-form-item label="备用字符串6" prop="bakstr06">code>
<el-input v-model="form.bakstr06" placeholder="请输入备用字符串6" />code>
</el-form-item>
<el-form-item label="备用字符串7" prop="bakstr07">code>
<el-input v-model="form.bakstr07" placeholder="请输入备用字符串7" />code>
</el-form-item>
<el-form-item label="备用字符串8" prop="bakstr08">code>
<el-input v-model="form.bakstr08" placeholder="请输入备用字符串8" />code>
</el-form-item>
<el-form-item label="备用字符串9" prop="bakstr09">code>
<el-input v-model="form.bakstr09" placeholder="请输入备用字符串9" />code>
</el-form-item>
<el-form-item label="备用字符串10" prop="bakstr10">code>
<el-input v-model="form.bakstr10" placeholder="请输入备用字符串10" />code>
</el-form-item>
<el-form-item label="创建人" prop="creator">code>
<el-input v-model="form.creator" placeholder="请输入创建人" />code>
</el-form-item>
<el-form-item label="创建时间" prop="creatortime">code>
<el-input v-model="form.creatortime" placeholder="请输入创建时间" />code>
</el-form-item>
<el-form-item label="修改人" prop="modify">code>
<el-input v-model="form.modify" placeholder="请输入修改人" />code>
</el-form-item>
<el-form-item label="修改时间" prop="modifytime">code>
<el-input v-model="form.modifytime" placeholder="请输入修改时间" />code>
</el-form-item> -->
<!-- </el-form> -->
<div slot="footer" class="dialog-footer">code>
<el-button type="primary" @click="submitForm">确 定</el-button>code>
<el-button @click="cancel">取 消</el-button>code>
</div>
</el-dialog>
标签页基础上，新增页面表单校验
效果如图：
就是修改submitForm()里的东西
代码如下：
// 根据当前激活的标签页决定使用哪个表单引用进行验证
const formRef = this.$refs[`form${this.activeTab}`]; // 确保与你的ref命名匹配
if (formRef) {
formRef.validate(valid => {
if (valid) {
this.form.isvalid = '是';
const currentTime = new Date().toISOString();
if (!this.form.creator) {
this.form.creator = this.tmpName;
this.form.creatortime = currentTime;
} else {
this.form.modify = this.tmpName;
this.form.modifytime = currentTime;
}
const action = this.form.personnelid ? updateRetireetable : addRetireetable;
action(this.form).then(response => {
const msg = this.form.personnelid ? "修改成功" : "新增成功";
this.msgSuccess(msg);
this.open = false;
this.getList();
});
} else {
this.$message.error('表单中有数据未正确填写，请修正后再尝试提交。');
}
});
} else {
console.error('Form reference is undefined'); // 检查标签页ref是否设置错误
}
}
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。