| | |
| | | <div class="createUser"> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right"> |
| | | <!-- 违规事项编号 --> |
| | | <el-form-item class="optionItem" label="违规事项编号:" prop="number"> |
| | | <el-input v-model="things.number" placeholder="请填写违规事项编号"></el-input> |
| | | <el-form ref="user" :rules="createThings" label-width="140px" autoComplete="on" :model="things" |
| | | label-position="right"> |
| | | <!-- 新增的类型或大类或小类 --> |
| | | <el-form-item class="optionItem" label="新增名称:" prop="name"> |
| | | <el-input v-model="things.name" placeholder="请输入新增名称"></el-input> |
| | | </el-form-item> |
| | | <!-- 所属类型 --> |
| | | <el-form-item class="optionItems" label="所属类型:" prop="typeThird"> |
| | | <el-select v-model="things.typeThird" placeholder="请选择所属类型" > |
| | | <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name" |
| | | :value="item.id"> |
| | | <!-- 请选择级别 --> |
| | | <el-form-item class="optionItem" label="级别:" prop="level"> |
| | | <el-select v-model="things.level" placeholder="请选择所属类型" @change="resetParentList"> |
| | | <el-option v-for="item in levelList" :key="item.value" :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 所属大类 --> |
| | | <el-form-item class="optionItem" label="所属大类:" prop="typeSecond"> |
| | | <el-select v-model="things.typeSecond" placeholder="请选择所属类型" > |
| | | <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 所属小类 --> |
| | | <el-form-item class="optionItem" label="所属小类:" prop="typeFirst"> |
| | | <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled> |
| | | <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name" |
| | | :value="item.id"> |
| | | <!-- 父级id --> |
| | | <el-form-item class="optionItem" label="父级:" prop="parentId"> |
| | | <el-select ref="projectApplicant" v-model="things.parentId" placeholder="请选择所属类型" :disabled="things.level===1"> |
| | | <el-option :value="mylabel"> |
| | | <el-tree ref="tree" |
| | | :check-strictly="true" |
| | | :data="parentList" |
| | | :props="defaultProps" |
| | | @node-click="handleCheck" |
| | | @check-change="handleCheck" |
| | | default-expand-all |
| | | node-key="id"> |
| | | </el-tree> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- 案由 --> |
| | | <el-form-item class="optionItem" label="案由:" prop="type"> |
| | | <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容" |
| | | :disabled="!updateFlag" disabled></el-input> |
| | | <el-input type="textarea" :rows="2" v-model="things.type" placeholder="请输入案由描述内容" |
| | | :disabled="things.level!==4"></el-input> |
| | | </el-form-item> |
| | | <el-form-item v-if="updateFlag"> |
| | | <el-form-item> |
| | | <div class="optionBtn"> |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">确认 |
| | | <el-button type="primary" class="btn submit" @click.native.prevent="handleSubmit">确认 |
| | | </el-button> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | </div> |
| | | </main> |
| | | </div> |
| | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | const checkName = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | } else { |
| | | callback(new Error('新增违规类型不能为空')); |
| | | } |
| | | } |
| | | const checkLevel = (rule, value, callback) => { |
| | | if (value) { |
| | | callback(); |
| | | } else { |
| | | callback(new Error('新增违规等级不能为空')); |
| | | } |
| | | } |
| | | return { |
| | | things: { |
| | | number: 0, |
| | | type: '', |
| | | typeFirst: '', |
| | | typeSecond: '', |
| | | typeThird: '', |
| | | name: '', |
| | | parentId: '', |
| | | level: '', |
| | | }, |
| | | roleList: [], |
| | | typeThirdList:[], |
| | | typeSecondList:[], |
| | | typeFirstList:[], |
| | | createThings: { |
| | | name: [ |
| | | { |
| | | required: true, trigger: 'blur', validator: checkName |
| | | } |
| | | ], |
| | | level: [ |
| | | { |
| | | required: true, trigger: 'change', validator: checkLevel |
| | | } |
| | | ], |
| | | // parentId:[ |
| | | // { |
| | | // required:true,trigger:'change',validator:checkId |
| | | // } |
| | | // ] |
| | | }, |
| | | levelList: [ |
| | | { |
| | | label: "违规类型", |
| | | value: 1, |
| | | }, |
| | | { |
| | | label: "大类", |
| | | value: 2, |
| | | }, |
| | | { |
| | | label: "小类", |
| | | value: 3, |
| | | }, |
| | | { |
| | | label: "案由", |
| | | value: 4, |
| | | }, |
| | | ], |
| | | parentList: [], |
| | | selectOrg: { |
| | | orgsid: [] |
| | | }, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'name', |
| | | disabled:(data,node)=>{ |
| | | if (data.level<this.things.level-1) { |
| | | return !data.leaf |
| | | } |
| | | } |
| | | }, |
| | | mylabel:'' |
| | | } |
| | | }, |
| | | created() { |
| | | console.log(this.userInfo); |
| | | this.things = JSON.parse(JSON.stringify(this.userInfo)); |
| | | // 获取所属类型列表 |
| | | this.getTypeThird(); |
| | | this.getTypeSecond(); |
| | | this.getTypeFirst(); |
| | | }, |
| | | methods: { |
| | | // handleUser() { |
| | | // this.$refs.user.validate((valid) => { |
| | | // if (valid) { |
| | | // const { role } = this; |
| | | // console.log(role); |
| | | // this.$axios.post('/sccg/role/update/' + role.id, { |
| | | // id: role.id, |
| | | // status: role.status, |
| | | // description: role.description, |
| | | // name: role.name, |
| | | // sort: 0 |
| | | // }).then(res => { |
| | | // this.$emit('changeDialog', { dialogUpdate: false }); |
| | | // this.getUserList(); |
| | | // }) |
| | | // } else { |
| | | // return false; |
| | | // } |
| | | // }) |
| | | // }, |
| | | // 查询所属类型 |
| | | getTypeThird() { |
| | | this.$axios({ |
| | | async getTypeThird() { |
| | | let arr = []; |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: "sccg/violations/query/type_first", |
| | | }) |
| | | .then(res => { |
| | | this.typeThirdList = res.data; |
| | | arr = res.data; |
| | | // this.parentList = res.data; |
| | | }) |
| | | return arr |
| | | }, |
| | | // 查询所属大类 |
| | | getTypeSecond(){ |
| | | this.$axios({ |
| | | async getTypeSecond() { |
| | | let arr = []; |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: "sccg/violations/query/type_second", |
| | | }) |
| | | .then(res => { |
| | | this.typeSecondList = res.data; |
| | | arr = res.data; |
| | | // this.parentList = res.data; |
| | | }) |
| | | return arr |
| | | }, |
| | | // 查询所属小类 |
| | | getTypeFirst(){ |
| | | this.$axios({ |
| | | async getTypeFirst() { |
| | | let arr = []; |
| | | await this.$axios({ |
| | | method: 'get', |
| | | url: "sccg/violations/query/type_third", |
| | | }) |
| | | .then(res => { |
| | | this.typeFirstList = res.data; |
| | | arr = res.data; |
| | | // this.parentList = res.data; |
| | | }) |
| | | } |
| | | return arr |
| | | }, |
| | | // 查询所属案由 |
| | | getEventLevel() { |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/violations/query/type_four' |
| | | }) |
| | | .then(res => { |
| | | this.parentList = res.data; |
| | | }) |
| | | }, |
| | | // 提交新增违规类型 |
| | | handleSubmit() { |
| | | console.log(this.things); |
| | | this.$refs.user.validate((valid) => { |
| | | console.log(valid); |
| | | if (valid) { |
| | | const { things, selectOrg} = this; |
| | | console.log(things,selectOrg.orgsid[0]); |
| | | this.$axios({ |
| | | method: 'post', |
| | | url: 'sccg/violations/addition/type', |
| | | data: { |
| | | code: '1111', |
| | | level: things.level, |
| | | name: things.name, |
| | | parentId: things.parentId === '' ? 0 : selectOrg.orgsid[0], |
| | | typeCode: '01', |
| | | typeName: '问题类型', |
| | | remark: things.type, |
| | | } |
| | | }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '添加成功' |
| | | }) |
| | | this.$emit('changeDialog', { flag: false }); |
| | | } else { |
| | | this.$message({ |
| | | type: 'error', |
| | | message: "添加失败" |
| | | }) |
| | | } |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }) |
| | | }, |
| | | // 案件级别变化 |
| | | async resetParentList(index) { |
| | | this.things.parentId='' |
| | | this.selectOrg.orgsid = []; |
| | | if (index === 1) { |
| | | // this.getTypeThird(); |
| | | } else if (index === 2) { |
| | | // console.log(this.getTypeThird()); |
| | | this.parentList = await this.getTypeThird(); |
| | | this.parentList.forEach(item=>{ |
| | | item.children = []; |
| | | }) |
| | | } else if (index === 3) { |
| | | |
| | | this.parentList = this.addChildren(await this.getTypeThird(), await this.getTypeSecond()); |
| | | console.log(this.parentList); |
| | | } else { |
| | | let arr1 = this.addChildren(await this.getTypeSecond(), await this.getTypeFirst()); |
| | | this.parentList = this.addChildren(await this.getTypeThird(), arr1); |
| | | } |
| | | }, |
| | | addChildren(parentArr, childArr) { |
| | | // console.log(parentArr.length,childArr); |
| | | parentArr.forEach(item => { |
| | | item.children = []; |
| | | childArr.forEach(child => { |
| | | if (item.id === child.parentId) { |
| | | item.children.push(child); |
| | | } |
| | | }) |
| | | }) |
| | | console.log(parentArr); |
| | | return parentArr; |
| | | }, |
| | | handleCheck(data, checked) { |
| | | console.log(this.selectOrg.orgsid,data,checked); |
| | | //只能点击最后一级 |
| | | if(checked.childNodes.length == 0){ |
| | | this.things.parentId = data.name; |
| | | let _this = this; |
| | | _this.$refs.projectApplicant.blur(); |
| | | this.selectOrg.orgsid = [] |
| | | this.selectOrg.orgsid.push(data.id) |
| | | }else { |
| | | return |
| | | } |
| | | // // 获取当前选择的id在数组中的索引 |
| | | // const indexs = this.selectOrg.orgsid.indexOf(data.id) |
| | | // // 如果不存在数组中,并且数组中已经有一个id并且checked为true的时候,代表不能再次选择。 |
| | | // if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) { |
| | | // this.$message({ |
| | | // message: '只能选择一个区域!', |
| | | // type: 'error', |
| | | // showClose: true |
| | | // }) |
| | | // // 设置已选择的节点为false 很重要 |
| | | // this.$refs.tree.setChecked(data, false) |
| | | // } else if (this.selectOrg.orgsid.length === 0 && checked) { |
| | | // // 发现数组为空 并且是已选择 |
| | | // // 防止数组有值,首先清空,再push |
| | | // let _this = this; |
| | | // _this.$refs.projectApplicant.blur(); |
| | | // this.selectOrg.orgsid = [] |
| | | // this.selectOrg.orgsid.push(data.id) |
| | | // } else if ( |
| | | // indexs >= 0 && |
| | | // this.selectOrg.orgsid.length === 1 && |
| | | // !checked |
| | | // ) { |
| | | // // 再次直接进行赋值为空操作 |
| | | // this.selectOrg.orgsid = [] |
| | | // } |
| | | }, |
| | | }, |
| | | props: ['getUserList'] |
| | | props: ['changeDialog'] |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .createUser { |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | background-color: #fff; |
| | | |
| | | main { |
| | | // border: 1px solid #fff; |
| | | text-align: left; |
| | | padding: 0 55px; |
| | | background-color: #09152f; |
| | | background-color: #fff; |
| | | padding-bottom: 50px; |
| | | |
| | | .mainContent { |
| | |
| | | } |
| | | } |
| | | |
| | | &::v-deep .el-textarea__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | // &::v-deep .el-textarea__inner { |
| | | // // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // font-size: 10px; |
| | | // } |
| | | |
| | | ::v-deep .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | // ::v-deep .el-form-item__label { |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | ::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | } |
| | | // ::v-deep .el-input__inner { |
| | | // // background-color: #09152f; |
| | | // border: 1px solid #17324c; |
| | | // font-size: 10px; |
| | | // } |
| | | } |
| | | </style> |
| | | </style> |