fengdong777
2 years ago
9 changed files with 479 additions and 388 deletions
@ -1,300 +1,347 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<!-- 标题按钮部分开始 --> |
<!-- 标题按钮部分开始 --> |
||||
<div class="tab-header webtop"> |
<div class="tab-header webtop"> |
||||
<!-- 标题 --> |
<!-- 标题 --> |
||||
<div>{{ viewTitle }}</div> |
<div>{{ viewTitle }}</div> |
||||
<!-- start 添加修改按钮 --> |
<!-- start 添加修改按钮 --> |
||||
<div> |
<div> |
||||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> |
<el-button |
||||
<el-button type="info" size="small" @click="handleReturn()">返回</el-button> |
type="primary" |
||||
</div> |
size="small" |
||||
<!-- end 添加修改按钮 --> |
:disabled="submitdisabled" |
||||
<!-- end 详情按钮 --> |
@click="saveOrUpdate" |
||||
</div> |
>保存</el-button |
||||
<!-- 标题按钮部分结束 --> |
> |
||||
<!-- Start 新增修改部分 --> |
<el-button type="info" size="small" @click="handleReturn()" |
||||
<div class="listconadd"> |
>返回</el-button |
||||
<el-form ref="form_obj"> |
> |
||||
<el-card class="box-card"> |
</div> |
||||
<div class="wlInfo"><span>风险类别</span></div> |
<!-- end 添加修改按钮 --> |
||||
<div class="item"> |
<!-- end 详情按钮 --> |
||||
<span class="item_text">类别名称：</span> |
</div> |
||||
<el-input v-model="formobj.name" placeholder="类别名称" class="item_input" clearable /> |
<!-- 标题按钮部分结束 --> |
||||
</div> |
<!-- Start 新增修改部分 --> |
||||
<div class="item"> |
<div class="listconadd"> |
||||
<span class="item_text">类别编号：</span> |
<el-form ref="form_obj"> |
||||
<el-input v-model="formobj.code" placeholder="类别编号" class="item_input" clearable /> |
<el-card class="box-card"> |
||||
</div> |
<div class="wlInfo"><span>风险类别</span></div> |
||||
|
<div class="item"> |
||||
|
<span class="item_text">类别名称：</span> |
||||
|
<el-input |
||||
|
v-model="formobj.name" |
||||
|
placeholder="类别名称" |
||||
|
class="item_input" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<span class="item_text">类别编号：</span> |
||||
|
<el-input |
||||
|
v-model="formobj.code" |
||||
|
placeholder="类别编号" |
||||
|
class="item_input" |
||||
|
clearable |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
<div class="item"> |
<div class="item"> |
||||
<span class="item_text">分类说明：</span> |
<span class="item_text">分类说明：</span> |
||||
<el-input v-model="formobj.content" placeholder="分类说明" class="item_input" clearable /> |
<el-input |
||||
</div> |
v-model="formobj.content" |
||||
<div class="item"> |
placeholder="分类说明" |
||||
<span class="item_text">层级：</span> |
class="item_input" |
||||
<div class="info-sex"> |
clearable |
||||
<el-radio v-model="formobj.hierarchy" :disabled="hierarchys" @input="hierarchy($event)" :label="1">一级</el-radio> |
/> |
||||
<el-radio v-model="formobj.hierarchy" :disabled="hierarchys" @input="hierarchy($event)" :label="2">二级</el-radio> |
</div> |
||||
</div> |
<div class="item"> |
||||
<!-- <el-input v-model="formobj.hierarchy" :disabled="hierarchys" placeholder="请输入层级(1/2)" @input="hierarchy($event)" class="item_input" clearable /> --> |
<span class="item_text">层级：</span> |
||||
</div> |
<div class="info-sex"> |
||||
<div class="item" v-show="viewState == 2" > |
<el-radio |
||||
<span class="item_text">上级名称：</span> |
v-model="formobj.hierarchy" |
||||
<el-select |
:disabled="hierarchys" |
||||
v-model="formobj.parentName" |
@input="hierarchy($event)" |
||||
class="item_input" |
:label="1" |
||||
placeholder="请选择上级名称" |
>一级</el-radio |
||||
@change="getType" |
> |
||||
> |
<el-radio |
||||
<el-option |
v-model="formobj.hierarchy" |
||||
v-for="(item, i) in arrList" |
:disabled="hierarchys" |
||||
:key="i" |
@input="hierarchy($event)" |
||||
:label="item.name" |
:label="2" |
||||
:value="item.sid" |
>二级</el-radio |
||||
/> |
> |
||||
</el-select> |
</div> |
||||
</div> |
<!-- <el-input v-model="formobj.hierarchy" :disabled="hierarchys" placeholder="请输入层级(1/2)" @input="hierarchy($event)" class="item_input" clearable /> --> |
||||
<div class="item" style="height: 110px;"> |
</div> |
||||
<span class="item_text">备注信息：</span> |
<div class="item" v-show="viewState == 2"> |
||||
<el-input type="textarea" |
<span class="item_text">上级名称：</span> |
||||
:autosize="{ minRows: 4, maxRows: 6 }" v-model="formobj.remarks" class="item_input" placeholder="备注信息" /> |
<el-select |
||||
</div> |
v-model="formobj.parentName" |
||||
</el-card> |
class="item_input" |
||||
</el-form> |
placeholder="请选择上级名称" |
||||
</div> |
@change="getType" |
||||
<!-- End 添加修改部分 --> |
> |
||||
</div> |
<el-option |
||||
|
v-for="(item, i) in arrList" |
||||
|
:key="i" |
||||
|
:label="item.name" |
||||
|
:value="item.sid" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="item" style="height: 110px"> |
||||
|
<span class="item_text">备注信息：</span> |
||||
|
<el-input |
||||
|
type="textarea" |
||||
|
:autosize="{ minRows: 4, maxRows: 6 }" |
||||
|
v-model="formobj.remarks" |
||||
|
class="item_input" |
||||
|
placeholder="备注信息" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<!-- End 添加修改部分 --> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import req from '@/api/Risk/index' |
import req from "@/api/Risk/index"; |
||||
export default { |
export default { |
||||
name: 'DispatchStandardsAdd', |
name: "DispatchStandardsAdd", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
submitdisabled: false, |
submitdisabled: false, |
||||
viewTitle: '', |
viewTitle: "", |
||||
viewState: 1, |
viewState: 1, |
||||
arrLists: [], |
arrLists: [], |
||||
arrList: [], |
arrList: [], |
||||
hierarchys: false, |
hierarchys: false, |
||||
formobj: { |
formobj: { |
||||
name: '', |
name: "", |
||||
code: '', |
code: "", |
||||
content: '', |
content: "", |
||||
hierarchy: 1, |
hierarchy: 1, |
||||
parentSid: '', |
parentSid: "", |
||||
parentName: '', |
parentName: "", |
||||
remarks: '' , |
remarks: "", |
||||
sid:'' |
sid: "", |
||||
}, |
|
||||
rules: { |
|
||||
name: [{ required: true, message: '风险等级名称不能为空', trigger: 'blur' }], |
|
||||
code: [{ required: true, message: '风险等级代码不能为空', trigger: 'blur' }], |
|
||||
content: [{ required: true, message: '分类说明不能为空', trigger: 'blur' }], |
|
||||
reportTarget: [{ required: true, message: '报送单位不能为空', trigger: 'blur' }], |
|
||||
}, |
|
||||
} |
|
||||
}, |
|
||||
created() {}, |
|
||||
methods: { |
|
||||
handleReturn(isreload) { |
|
||||
if (isreload === 'true') this.$emit('reloadlist') |
|
||||
this.formobj.sid = '' |
|
||||
this.formobj.name= '', |
|
||||
this.formobj.code= '', |
|
||||
this.formobj.content= '', |
|
||||
this.formobj.hierarchy= 1, |
|
||||
this.formobj.parentSid= '' |
|
||||
this.formobj.parentName= '' |
|
||||
this.formobj.remarks= '' |
|
||||
this.viewState=1 |
|
||||
this.$refs['form_obj'].resetFields() |
|
||||
this.$emit('doback') |
|
||||
}, |
|
||||
showAdd() { |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs['form_obj'].clearValidate() |
|
||||
}) |
|
||||
this.viewTitle = '【新增】风险等级' |
|
||||
this.hierarchys=false |
|
||||
this.formobj.hierarchy= 1 |
|
||||
}, |
|
||||
showEdit(row) { |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs['form_obj'].clearValidate() |
|
||||
}) |
|
||||
this.viewTitle = '【修改】风险等级' |
|
||||
const _this = this |
|
||||
const vdata = row |
|
||||
_this.hierarchys=true |
|
||||
_this.formobj.id = vdata.id |
|
||||
_this.formobj.sid = vdata.sid |
|
||||
_this.formobj.name = vdata.name |
|
||||
_this.formobj.code = vdata.code |
|
||||
_this.formobj.content = vdata.content |
|
||||
_this.formobj.hierarchy = vdata.hierarchy |
|
||||
_this.formobj.parentName = vdata.parentName |
|
||||
_this.formobj.parentSid = vdata.parentSid |
|
||||
_this.formobj.remarks = vdata.remarks |
|
||||
if(vdata.hierarchy==1){ |
|
||||
_this.viewState=1 |
|
||||
}else{ |
|
||||
_this.viewState=2 |
|
||||
} |
|
||||
}, |
|
||||
saveOrUpdate() { |
|
||||
req |
|
||||
.saveRiskType(this.formobj) |
|
||||
.then(resp => { |
|
||||
if (resp.success) { |
|
||||
this.$message({ showClose: true, type: 'success', message: resp.msg }) |
|
||||
this.handleReturn('true') |
|
||||
} else { |
|
||||
// 根据resp.code进行异常情况处理 |
|
||||
} |
|
||||
}) |
|
||||
.catch(() => { |
|
||||
}) |
|
||||
}, |
|
||||
superior(){ |
|
||||
req |
|
||||
.selectRiskTypeFirst() |
|
||||
.then(resp => { |
|
||||
if(resp.code==200){ |
|
||||
this.arrLists=resp.data |
|
||||
for (var i = 0; i < this.arrLists.length; i++) { |
|
||||
|
|
||||
let item = { |
|
||||
name: this.arrLists[i].name, |
|
||||
sid: this.arrLists[i].sid, |
|
||||
|
|
||||
} |
|
||||
this.arrList.push(item) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
hierarchy(e){ |
|
||||
if(e==2){ |
|
||||
this.viewState=2 |
|
||||
this.arrList=[] |
|
||||
this.superior() |
|
||||
}else{ |
|
||||
this.viewState=1 |
|
||||
this.sid=null |
|
||||
this.parentSid=null |
|
||||
this.parentName=null |
|
||||
this.arrList=[] |
|
||||
} |
|
||||
}, |
|
||||
getType(value) { |
|
||||
const choose = this.arrLists.filter((item) => item.sid === value) |
|
||||
this.formobj.parentName = choose[0].name |
|
||||
this.formobj.parentSid = value |
|
||||
console.log( this.formobj.parentSid); |
|
||||
}, |
}, |
||||
} |
rules: { |
||||
} |
name: [ |
||||
|
{ required: true, message: "风险等级名称不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
code: [ |
||||
|
{ required: true, message: "风险等级代码不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true, message: "分类说明不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
reportTarget: [ |
||||
|
{ required: true, message: "报送单位不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() {}, |
||||
|
methods: { |
||||
|
handleReturn(isreload) { |
||||
|
if (isreload === "true") this.$emit("reloadlist"); |
||||
|
this.formobj.sid = ""; |
||||
|
(this.formobj.name = ""), |
||||
|
(this.formobj.code = ""), |
||||
|
(this.formobj.content = ""), |
||||
|
(this.formobj.hierarchy = 1), |
||||
|
(this.formobj.parentSid = ""); |
||||
|
this.formobj.parentName = ""; |
||||
|
this.formobj.remarks = ""; |
||||
|
this.viewState = 1; |
||||
|
this.$refs["form_obj"].resetFields(); |
||||
|
this.$emit("doback"); |
||||
|
this.arrList = []; |
||||
|
}, |
||||
|
showAdd() { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs["form_obj"].clearValidate(); |
||||
|
}); |
||||
|
this.viewTitle = "【新增】风险等级"; |
||||
|
this.hierarchys = false; |
||||
|
this.formobj.hierarchy = 1; |
||||
|
}, |
||||
|
showEdit(row) { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs["form_obj"].clearValidate(); |
||||
|
}); |
||||
|
this.viewTitle = "【修改】风险等级"; |
||||
|
const _this = this; |
||||
|
const vdata = row; |
||||
|
_this.hierarchys = true; |
||||
|
this.superior(); |
||||
|
_this.formobj.id = vdata.id; |
||||
|
_this.formobj.sid = vdata.sid; |
||||
|
_this.formobj.name = vdata.name; |
||||
|
_this.formobj.code = vdata.code; |
||||
|
_this.formobj.content = vdata.content; |
||||
|
_this.formobj.hierarchy = vdata.hierarchy; |
||||
|
_this.formobj.parentName = vdata.parentName; |
||||
|
_this.formobj.parentSid = vdata.parentSid; |
||||
|
_this.formobj.remarks = vdata.remarks; |
||||
|
if (vdata.hierarchy == 1) { |
||||
|
_this.viewState = 1; |
||||
|
} else { |
||||
|
_this.viewState = 2; |
||||
|
} |
||||
|
}, |
||||
|
saveOrUpdate() { |
||||
|
req |
||||
|
.saveRiskType(this.formobj) |
||||
|
.then((resp) => { |
||||
|
if (resp.success) { |
||||
|
this.$message({ |
||||
|
showClose: true, |
||||
|
type: "success", |
||||
|
message: resp.msg, |
||||
|
}); |
||||
|
this.handleReturn("true"); |
||||
|
} else { |
||||
|
// 根据resp.code进行异常情况处理 |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
superior() { |
||||
|
req.selectRiskTypeFirst().then((resp) => { |
||||
|
if (resp.code == 200) { |
||||
|
this.arrLists = resp.data; |
||||
|
for (var i = 0; i < this.arrLists.length; i++) { |
||||
|
let item = { |
||||
|
name: this.arrLists[i].name, |
||||
|
sid: this.arrLists[i].sid, |
||||
|
}; |
||||
|
this.arrList.push(item); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
hierarchy(e) { |
||||
|
if (e == 2) { |
||||
|
this.viewState = 2; |
||||
|
this.arrList = []; |
||||
|
this.superior(); |
||||
|
} else { |
||||
|
this.viewState = 1; |
||||
|
this.sid = null; |
||||
|
this.parentSid = null; |
||||
|
this.parentName = null; |
||||
|
this.arrList = []; |
||||
|
} |
||||
|
}, |
||||
|
getType(value) { |
||||
|
const choose = this.arrLists.filter((item) => item.sid === value); |
||||
|
this.formobj.parentName = choose[0].name; |
||||
|
this.formobj.parentSid = value; |
||||
|
console.log(this.formobj.parentSid); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.box-card { |
.box-card { |
||||
margin-left: 60px; |
margin-left: 60px; |
||||
margin-right: 60px; |
margin-right: 60px; |
||||
min-width: 70%; |
min-width: 70%; |
||||
margin-top: 20px; |
margin-top: 20px; |
||||
padding-bottom: 50px; |
padding-bottom: 50px; |
||||
|
|
||||
.item { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
margin-top: 15px; |
|
||||
height: 40px; |
|
||||
line-height: 40px; |
|
||||
|
|
||||
.item_text { |
.item { |
||||
flex: 0.8; |
display: flex; |
||||
font-size: 18px; |
flex-direction: row; |
||||
text-align: right; |
align-items: center; |
||||
} |
margin-top: 15px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
|
||||
.item_input { |
.item_text { |
||||
flex: 4; |
flex: 0.8; |
||||
font-size: 16px; |
font-size: 18px; |
||||
margin-left: 10px; |
text-align: right; |
||||
margin-right: 80px; |
} |
||||
} |
|
||||
|
|
||||
.item_left_input { |
.item_input { |
||||
width: 20%; |
flex: 4; |
||||
} |
font-size: 16px; |
||||
|
margin-left: 10px; |
||||
|
margin-right: 80px; |
||||
|
} |
||||
|
|
||||
.item_left_text { |
.item_left_input { |
||||
height: 30px; |
width: 20%; |
||||
margin-left: 20px; |
} |
||||
line-height: 30px; |
|
||||
color: #018AD2; |
|
||||
padding: 0px 15px; |
|
||||
border: 1.5px solid #018AD2; |
|
||||
border-radius: 5px; |
|
||||
|
|
||||
} |
.item_left_text { |
||||
|
height: 30px; |
||||
|
margin-left: 20px; |
||||
|
line-height: 30px; |
||||
|
color: #018ad2; |
||||
|
padding: 0px 15px; |
||||
|
border: 1.5px solid #018ad2; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
.item_right { |
.item_right { |
||||
flex: 1; |
flex: 1; |
||||
justify-items: center; |
justify-items: center; |
||||
|
|
||||
.item_right_list_text { |
.item_right_list_text { |
||||
font-size: 16px; |
font-size: 16px; |
||||
} |
} |
||||
|
|
||||
.item_right_list_delect { |
.item_right_list_delect { |
||||
color: #5E94FF; |
color: #5e94ff; |
||||
margin-left: 20px; |
margin-left: 20px; |
||||
font-size: 16px; |
font-size: 16px; |
||||
text-decoration: underline; |
text-decoration: underline; |
||||
} |
|
||||
} |
} |
||||
.info-sex { |
|
||||
flex: 4; |
|
||||
font-size: 16px; |
|
||||
margin-left: 10px; |
|
||||
margin-right: 80px; |
|
||||
::v-deep.el-radio__input.is-checked .el-radio__inner { |
|
||||
border-color: #48d18a; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
::v-deep.el-radio__input.is-checked + .el-radio__label { |
|
||||
color: #424346; |
|
||||
} |
|
||||
::v-deep.el-radio__input.is-checked .el-radio__inner:after { |
|
||||
transform: rotate(45deg) scaleY(1); |
|
||||
} |
|
||||
::v-deep.el-radio__label { |
|
||||
color: #80838a; |
|
||||
} |
|
||||
::v-deep.el-radio__inner::after { |
|
||||
box-sizing: content-box; |
|
||||
content: ""; |
|
||||
border: 1px solid #48d18a; |
|
||||
border-left: 0; |
|
||||
border-top: 0; |
|
||||
height: 7px; |
|
||||
left: 4px; |
|
||||
position: absolute; |
|
||||
top: 1px; |
|
||||
transform: rotate(45deg) scaleY(0); |
|
||||
width: 3px; |
|
||||
transition: transform 0.15s ease-in 0.05s; |
|
||||
transform-origin: center; |
|
||||
border-radius: unset; |
|
||||
background-color: transparent; |
|
||||
} |
} |
||||
} |
.info-sex { |
||||
|
flex: 4; |
||||
|
font-size: 16px; |
||||
|
margin-left: 10px; |
||||
|
margin-right: 80px; |
||||
|
::v-deep.el-radio__input.is-checked .el-radio__inner { |
||||
|
border-color: #48d18a; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
::v-deep.el-radio__input.is-checked + .el-radio__label { |
||||
|
color: #424346; |
||||
|
} |
||||
|
::v-deep.el-radio__input.is-checked .el-radio__inner:after { |
||||
|
transform: rotate(45deg) scaleY(1); |
||||
|
} |
||||
|
::v-deep.el-radio__label { |
||||
|
color: #80838a; |
||||
|
} |
||||
|
::v-deep.el-radio__inner::after { |
||||
|
box-sizing: content-box; |
||||
|
content: ""; |
||||
|
border: 1px solid #48d18a; |
||||
|
border-left: 0; |
||||
|
border-top: 0; |
||||
|
height: 7px; |
||||
|
left: 4px; |
||||
|
position: absolute; |
||||
|
top: 1px; |
||||
|
transform: rotate(45deg) scaleY(0); |
||||
|
width: 3px; |
||||
|
transition: transform 0.15s ease-in 0.05s; |
||||
|
transform-origin: center; |
||||
|
border-radius: unset; |
||||
|
background-color: transparent; |
||||
|
} |
||||
} |
} |
||||
|
|
||||
} |
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue