fengdong777
2 years ago
9 changed files with 479 additions and 388 deletions
@ -1,300 +1,347 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 标题按钮部分开始 --> |
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>{{ viewTitle }}</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">返回</el-button> |
|||
</div> |
|||
<!-- end 添加修改按钮 --> |
|||
<!-- end 详情按钮 --> |
|||
</div> |
|||
<!-- 标题按钮部分结束 --> |
|||
<!-- Start 新增修改部分 --> |
|||
<div class="listconadd"> |
|||
<el-form ref="form_obj"> |
|||
<el-card class="box-card"> |
|||
<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> |
|||
<!-- 标题按钮部分开始 --> |
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>{{ viewTitle }}</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button |
|||
type="primary" |
|||
size="small" |
|||
:disabled="submitdisabled" |
|||
@click="saveOrUpdate" |
|||
>保存</el-button |
|||
> |
|||
<el-button type="info" size="small" @click="handleReturn()" |
|||
>返回</el-button |
|||
> |
|||
</div> |
|||
<!-- end 添加修改按钮 --> |
|||
<!-- end 详情按钮 --> |
|||
</div> |
|||
<!-- 标题按钮部分结束 --> |
|||
<!-- Start 新增修改部分 --> |
|||
<div class="listconadd"> |
|||
<el-form ref="form_obj"> |
|||
<el-card class="box-card"> |
|||
<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"> |
|||
<span class="item_text">分类说明：</span> |
|||
<el-input v-model="formobj.content" placeholder="分类说明" class="item_input" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">层级：</span> |
|||
<div class="info-sex"> |
|||
<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> |
|||
<!-- <el-input v-model="formobj.hierarchy" :disabled="hierarchys" placeholder="请输入层级(1/2)" @input="hierarchy($event)" class="item_input" clearable /> --> |
|||
</div> |
|||
<div class="item" v-show="viewState == 2" > |
|||
<span class="item_text">上级名称：</span> |
|||
<el-select |
|||
v-model="formobj.parentName" |
|||
class="item_input" |
|||
placeholder="请选择上级名称" |
|||
@change="getType" |
|||
> |
|||
<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> |
|||
<div class="item"> |
|||
<span class="item_text">分类说明：</span> |
|||
<el-input |
|||
v-model="formobj.content" |
|||
placeholder="分类说明" |
|||
class="item_input" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">层级：</span> |
|||
<div class="info-sex"> |
|||
<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> |
|||
<!-- <el-input v-model="formobj.hierarchy" :disabled="hierarchys" placeholder="请输入层级(1/2)" @input="hierarchy($event)" class="item_input" clearable /> --> |
|||
</div> |
|||
<div class="item" v-show="viewState == 2"> |
|||
<span class="item_text">上级名称：</span> |
|||
<el-select |
|||
v-model="formobj.parentName" |
|||
class="item_input" |
|||
placeholder="请选择上级名称" |
|||
@change="getType" |
|||
> |
|||
<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> |
|||
|
|||
<script> |
|||
import req from '@/api/Risk/index' |
|||
import req from "@/api/Risk/index"; |
|||
export default { |
|||
name: 'DispatchStandardsAdd', |
|||
data() { |
|||
return { |
|||
submitdisabled: false, |
|||
viewTitle: '', |
|||
viewState: 1, |
|||
arrLists: [], |
|||
arrList: [], |
|||
hierarchys: false, |
|||
formobj: { |
|||
name: '', |
|||
code: '', |
|||
content: '', |
|||
hierarchy: 1, |
|||
parentSid: '', |
|||
parentName: '', |
|||
remarks: '' , |
|||
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); |
|||
name: "DispatchStandardsAdd", |
|||
data() { |
|||
return { |
|||
submitdisabled: false, |
|||
viewTitle: "", |
|||
viewState: 1, |
|||
arrLists: [], |
|||
arrList: [], |
|||
hierarchys: false, |
|||
formobj: { |
|||
name: "", |
|||
code: "", |
|||
content: "", |
|||
hierarchy: 1, |
|||
parentSid: "", |
|||
parentName: "", |
|||
remarks: "", |
|||
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"); |
|||
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> |
|||
|
|||
<style scoped lang="scss"> |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
padding-bottom: 50px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
padding-bottom: 50px; |
|||
|
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
|
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
} |
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.item_left_input { |
|||
width: 20%; |
|||
} |
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
} |
|||
|
|||
.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_left_input { |
|||
width: 20%; |
|||
} |
|||
|
|||
} |
|||
.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 { |
|||
flex: 1; |
|||
justify-items: center; |
|||
.item_right { |
|||
flex: 1; |
|||
justify-items: center; |
|||
|
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item_right_list_delect { |
|||
color: #5E94FF; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
text-decoration: underline; |
|||
} |
|||
.item_right_list_delect { |
|||
color: #5e94ff; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
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> |
|||
|
|||
Loading…
Reference in new issue