• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

15

开发技术 开发技术 2周前 (09-12) 19次浏览
<template>
<div>
<el-dialog
:show.sync="visible"
:title="title"
:visible.sync="visible"
width="620px"
@close="$emit('update:dialogShow', false)"
>
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="100px"
class="demo-ruleForm"
:class="{'form-rules-show':seeType}"
>
<el-row>
<el-col :span="24">
<el-form-item label="角色名称:" prop="name">
<el-input
:disabled="seeType"
maxlength="20"
v-model="ruleForm.name"
placeholder="请输入角色名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="角色描述:" prop="describes">
<el-input
:disabled="seeType"
type="textarea"
resize='none'
maxlength="200"
v-model="ruleForm.describes"
placeholder="请输入角色描述"
show-word-limit
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('ruleForm')">取 消</el-button>
<el-button v-if="!seeType" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>

<script type="text/ecmascript-6">

export default {
props: {
status: {
type: String,
default: 'create'
},
tabledata: {
type: [Object, String, Array],
default: ()=> {}
},
dialogShow: {
type: Boolean,
default: false
},
title: {
type: String,
default: '添加'
},
},
data() {
return {
visible: this.dialogShow,
ruleForm: {
name: '', // 角色名称
describes: '', // 角色描述
},
areaAnalysis: [],
// 查看状态,禁止修改
seeType: false,

rules: {
name: [
{ required: true, message: '请选择角色名称', trigger: 'change' },
],
describes: [
{ required: true, message: '请输入角色描述', trigger: 'blur' },
]

}
};
},
created() {
// 判断是编辑就赋值
if (this.status != 'create') {
const oid = {
id: this.tabledata.id || ''
}
this.$api.SystemRole.getRole(oid).then(res=> {
this.ruleForm = res.data
}).catch(err=> {
console.log(err)
})
}
// 如果是查看就禁止输入
if (this.status == 'see') {
this.seeType = true
}
},
methods: {
// 新增||修改
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
const odata = {
name: this.ruleForm.name, // 角色id
describes: this.ruleForm.describes, // 账号
id: this.ruleForm.id || ''
}
if (this.status == 'create') {
this.$api.SystemRole.saveRole(odata).then((res)=> {
if (res.code == 200) {
this.$message({
type: 'success',
message: res.msg
})
}
this.$emit('CloseClick')
})
} else {
this.$api.SystemRole.saveRole(odata).then((res)=> {
if (res.code == 200) {
this.$message({
type: 'success',
message: res.msg
})
}
this.$emit('CloseClick')
})
}
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
// 执行完毕关闭窗口
this.$emit('CloseClick')
}
}
}
</script>

<style scoped lang="scss">
.demo-ruleForm {
margin: 0 auto;
/*padding-top: 45px;*/
padding-right: 10px;

.el-col {
margin-bottom: 24px;
}
}
/deep/.el-scrollbar__wrap {
height: calc(100vh - 251px);
}
/* 下拉框 */
/deep/.el-select {
display: block;
}
</style>

程序员灯塔 , 版权所有
转载请注明原文链接:https://www.wangt.cc/2020/09/15-2/
喜欢 (0)