<template>
|
<win-sm :title="setting.title" @close="close" :width="'800px'">
|
<el-form v-loading="loading" ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
|
<el-form-item label="节点名称" prop="nodeName">
|
<el-input v-model="formData.nodeName" clearable maxlength="32" show-word-limit style="width: 100%"/>
|
</el-form-item>
|
<el-form-item label="展示顺序" prop="sort">
|
<el-input-number v-model="formData.sort" clearable :min="1"/>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="formData.status">
|
<el-radio :label="1" border>启用</el-radio>
|
<el-radio :label="0" border>禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
v-model="formData.remark"
|
type="textarea"
|
:rows="3"
|
maxlength="200"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" align="center" class="dialog-footer">
|
<my-button name="取消" site="form" @click="close"/>
|
<my-button name="保存" site="form" @click="save"/>
|
</div>
|
</win-sm>
|
</template>
|
|
<script>
|
import winSm from '@/components/win/win-sm'
|
import myButton from '@/components/myButton/myButton'
|
import * as node from "@/api/projectConfig/stageNode";
|
|
export default {
|
name: 'edit',
|
components: {winSm, myButton},
|
props: {
|
// setting 中须至少包含控制dialog显示或隐藏的属性,其余属性可拓展
|
// 将添加/修改的大量数据及逻辑从列表页面中分离出来,避免列表页面代码过多,审查困难
|
// 若此页面须回传数据至父页面,可在引用组件时添加事件,本页面使用this.$emit('事件名',参数1,参数2...)回传数据
|
setting: {
|
type: Object,
|
default: () => {
|
}
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
formData: {
|
nodeName: '',
|
sort: 1,
|
status: 1,
|
remark: '',
|
},
|
rules: {
|
nodeName: [
|
{required: true, message: '请输入节点名称', trigger: 'blur'}
|
],
|
}
|
}
|
},
|
created() {
|
this.loading = true
|
this.getInfo()
|
},
|
methods: {
|
getInfo() {
|
this.title = this.setting.title
|
if (this.setting.id != null) {
|
// 查询数据
|
node.getDetail({id: this.setting.id}).then(res => {
|
this.loading = false
|
this.formData = Object.assign(this.formData, res)
|
})
|
}else{
|
this.loading = false
|
}
|
},
|
close() {
|
this.formData = {
|
nodeName: '',
|
sort: 1,
|
status: 1,
|
remark: '',
|
}
|
this.$emit('close')
|
},
|
save() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
const params = Object.assign({}, this.formData)
|
params.stageId = this.setting.stageId
|
this.loading = true
|
node[params.id?'upd':'add'](params).then(res => {
|
this.loading = false
|
if (res) {
|
this.$message.success('保存成功！')
|
this.close()
|
this.$emit('search')
|
} else {
|
this.$message.error('保存失败')
|
}
|
}).catch(()=>{
|
this.loading = false
|
})
|
} else {
|
this.$message.error('校验未通过，请检查。')
|
}
|
})
|
}
|
}
|
}
|
</script>
|
