supervise/supervise-risk-ui/src/views/risk/RiskManage/addBlack.vue

<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 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>
                <el-input v-model="formobj.hierarchy" :disabled="hierarchys" placeholder="请输入层级(1/2)" @input="hierarchy($event)" class="item_input" clearable />
              </div>
			  <div class="item" >
                <span class="item_text">上级名称：</span>
                <el-select
                    v-model="formobj.parentName"
                    class="item_input"
                    placeholder="请选择上级名称"
                  >
                    <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'
export default {
	name: 'DispatchStandardsAdd',
	data() {
		return {
			submitdisabled: false,
			viewTitle: '',
			viewState: 1,
			arrList: [],
			hierarchys: false,
			formobj: {
				name: '', 
				code: '', 
				content: '', 
				hierarchy: '', 
				parentSid: '', 
				parentName: '', 
				remarks: '' ,
				sid:''
			},
		}
	},
	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= '', 
			this.formobj.parentSid= ''
			this.formobj.parentName= ''
			this.formobj.remarks= ''
			
			this.$refs['form_obj'].resetFields()
			this.$emit('doback')
		},
		showAdd() {
			this.$nextTick(() => {
				this.$refs['form_obj'].clearValidate()
			})
			this.viewTitle = '【新增】风险等级'
			this.hierarchys= false
		},
		showEdit(row) {
			this.$nextTick(() => {
				this.$refs['form_obj'].clearValidate()
			})
			this.viewTitle = '【修改】风险等级'
			this.hierarchys= true
			const _this = this
			const vdata = row
			_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 
		},
		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(() => {
			})
		},
        hierarchy(e){
           if(e==2){
            this.viewState=2
			this.superior()
           }else{
            this.viewState=1
			this.sid=null
			this.parentSid=null
			this.parentName=null
           }
        },
		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 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;

      .item_text {
        flex: 0.8;
        font-size: 18px;
        text-align: right;
      }

      .item_input {
        flex: 4;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 80px;
      }

      .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_list_text {
          font-size: 16px;
        }

        .item_right_list_delect {
          color: #5E94FF;
          margin-left: 20px;
          font-size: 16px;
          text-decoration: underline;
        }
      }

    }

  }
</style>