parent
a8695fd8bd
commit
c660a7fd67
5 changed files with 91 additions and 647 deletions
@ -1,362 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div> |
|
||||||
<lctree :data="majorList" |
|
||||||
@addMajor="addMajor" @editMajor="editMajor" @delMajor="delMajor" |
|
||||||
@addDepartment="addDepartment" @editDepartment="editDepartment" @delDepartment="delDepartment" |
|
||||||
@fircheckitem="fircheckitem" @twocheckitem="twocheckitem" |
|
||||||
></lctree> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 添加专业 --> |
|
||||||
<el-dialog :title="Form.MajorId ? '编辑专业' : '新增专业'" :visible.sync="isaddMajor" width="24%" center @close="closeAdd" :close-on-click-modal="false"> |
|
||||||
<el-form ref="Form" :model="Form" :rules="rules"> |
|
||||||
<el-form-item prop="majorName"> |
|
||||||
<el-input placeholder="请输入专业名称" v-model="Form.majorName" @change="majorChange"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<span slot="footer" class="dialog-footer"> |
|
||||||
<el-button @click="isaddMajor = false">取 消</el-button> |
|
||||||
<el-button type="primary" @click="sure('Form')">确 定</el-button> |
|
||||||
</span> |
|
||||||
</el-dialog> |
|
||||||
|
|
||||||
<!-- 添加部门 --> |
|
||||||
<el-dialog :title="Form.departmentId ? '编辑部门' : '新增部门'" :visible.sync="isAddDepartment" width="24%" center @close="closeAdd" :close-on-click-modal="false"> |
|
||||||
<el-form ref="Form" :model="Form" :rules="rules"> |
|
||||||
<el-form-item prop="departmentName"> |
|
||||||
<el-input placeholder="请输入部门名称" v-model="Form.departmentName"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<span slot="footer" class="dialog-footer"> |
|
||||||
<el-button @click="isAddDepartment = false">取 消</el-button> |
|
||||||
<el-button type="primary" @click="sureDepartment('Form')">确 定</el-button> |
|
||||||
</span> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import lctree from './Stafftree'; |
|
||||||
export default { |
|
||||||
props:["Data"], |
|
||||||
data() { |
|
||||||
return { |
|
||||||
majorList: [], |
|
||||||
firactive: 0, |
|
||||||
twoactive: 0, |
|
||||||
isaddMajor: false, |
|
||||||
isAddDepartment: false, |
|
||||||
schoolId: 2105, |
|
||||||
Form: { |
|
||||||
MajorId: '', |
|
||||||
majorName: '', |
|
||||||
departmentId: '', |
|
||||||
departmentName: '' |
|
||||||
}, |
|
||||||
rules: { |
|
||||||
majorName: [ |
|
||||||
{ required: true, message: '请输入专业名称', trigger: 'blur' } |
|
||||||
], |
|
||||||
departmentName: [ |
|
||||||
{ required: true, message: '请输入部门名称', trigger: 'blur' } |
|
||||||
] |
|
||||||
}, |
|
||||||
staffstateProfessId: '', |
|
||||||
staffstateId: '', |
|
||||||
majorNoAdd: true |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: { |
|
||||||
lctree |
|
||||||
}, |
|
||||||
mounted(){ |
|
||||||
this.getStaff() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getStaff(){ |
|
||||||
let data = { |
|
||||||
schoolId: this.schoolId |
|
||||||
} |
|
||||||
this.$get(this.api.queryStaffPro,data).then(res => { |
|
||||||
if(res.message){ |
|
||||||
res.message.map(e => { |
|
||||||
(e.ifVisible = false), (e.ischeck = false), (e.label = e.staffProfessionalArchitectureName); |
|
||||||
let data = { |
|
||||||
staffProfessionalArchitectureId: e.staffProfessionalArchitectureId |
|
||||||
} |
|
||||||
this.$get(this.api.queryStaffGrade,data).then(res => { |
|
||||||
res.message.map(e => { |
|
||||||
(e.ischeck = false), (e.label = e.staffGradeName); |
|
||||||
}) |
|
||||||
e.children = res.message |
|
||||||
}).catch(res => {}); |
|
||||||
}) |
|
||||||
} |
|
||||||
setTimeout(() => { |
|
||||||
this.majorList = res.message |
|
||||||
}, 500); |
|
||||||
}).catch(res => {}); |
|
||||||
}, |
|
||||||
// 选择专业 |
|
||||||
fircheckitem(item){ |
|
||||||
this.$emit("fircheck",item,this.majorList) |
|
||||||
}, |
|
||||||
// 选择部门 |
|
||||||
twocheckitem(item){ |
|
||||||
this.$emit("twocheck",item,this.majorList) |
|
||||||
}, |
|
||||||
closeAdd(){ |
|
||||||
this.$refs.Form.resetFields() |
|
||||||
}, |
|
||||||
// 新增编辑专业 |
|
||||||
addMajor(){ |
|
||||||
this.Form.MajorId = '' |
|
||||||
this.Form.majorName = '' |
|
||||||
this.isaddMajor = true |
|
||||||
}, |
|
||||||
editMajor(item){ |
|
||||||
this.Form.MajorId = item.staffProfessionalArchitectureId, |
|
||||||
this.Form.majorName = item.staffProfessionalArchitectureName |
|
||||||
this.isaddMajor = true |
|
||||||
}, |
|
||||||
async majorChange(){ |
|
||||||
let res = await this.$get(this.api.queryStaffPAN, { name: this.Form.majorName,schoolId: this.schoolId }); |
|
||||||
if(res.message.length != 0){ |
|
||||||
this.$message.warning('该一级部门已存在'); |
|
||||||
this.majorNoAdd = false |
|
||||||
}else{ |
|
||||||
this.majorNoAdd = true |
|
||||||
} |
|
||||||
}, |
|
||||||
sure(Form){ |
|
||||||
this.$refs[Form].validate((valid) => { |
|
||||||
if (valid) { |
|
||||||
if(!this.majorNoAdd) return this.$message.warning('该一级部门已存在'); |
|
||||||
let data = { |
|
||||||
staffProfessionalArchitectureName: this.Form.majorName, |
|
||||||
staffProfessionalArchitectureId: this.Form.MajorId, |
|
||||||
schoolId: this.schoolId, |
|
||||||
} |
|
||||||
if(this.Form.MajorId){ |
|
||||||
this.$post(this.api.updateStaffPro,data).then(res => { |
|
||||||
this.$message.success('编辑成功'); |
|
||||||
this.isaddMajor = false |
|
||||||
this.majorList.map(e =>{ |
|
||||||
if(e.staffProfessionalArchitectureId == this.Form.MajorId){ |
|
||||||
e.staffProfessionalArchitectureName = this.Form.majorName |
|
||||||
e.label = this.Form.majorName |
|
||||||
} |
|
||||||
}) |
|
||||||
this.$emit('getData') |
|
||||||
}).catch(res => {}); |
|
||||||
}else{ |
|
||||||
this.$post(this.api.addStaffPro,data).then(res => { |
|
||||||
this.$message.success('添加成功'); |
|
||||||
this.isaddMajor = false |
|
||||||
let newData = { |
|
||||||
staffProfessionalArchitectureId: res.message, |
|
||||||
staffProfessionalArchitectureName: this.Form.majorName, |
|
||||||
label: this.Form.majorName, |
|
||||||
ifVisible: false, |
|
||||||
ischeck: false, |
|
||||||
children: [] |
|
||||||
} |
|
||||||
this.majorList.push(newData) |
|
||||||
}).catch(res => {}); |
|
||||||
} |
|
||||||
}else{ |
|
||||||
return false; |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
// 新增编辑部门 |
|
||||||
addDepartment(item){ |
|
||||||
this.Form.departmentId = '' |
|
||||||
this.Form.departmentName = '' |
|
||||||
this.isAddDepartment = true |
|
||||||
this.Form.MajorId = item.staffProfessionalArchitectureId |
|
||||||
}, |
|
||||||
editDepartment(item){ |
|
||||||
this.Form.departmentId = item.staffGradeId, |
|
||||||
this.Form.departmentName = item.staffGradeName |
|
||||||
this.isAddDepartment = true |
|
||||||
for (let j = 0; j < this.majorList.length; j++) { |
|
||||||
for (let k = 0; k < this.majorList[j].children.length; k++) { |
|
||||||
if(this.majorList[j].children[k].staffGradeName == item.staffGradeName){ |
|
||||||
this.Form.MajorId = this.majorList[j].staffProfessionalArchitectureId |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
sureDepartment(Form){ |
|
||||||
this.$refs[Form].validate((valid) => { |
|
||||||
if (valid) { |
|
||||||
let data = { |
|
||||||
staffGradeName: this.Form.departmentName, |
|
||||||
staffProfessionalArchitectureId: this.Form.MajorId, |
|
||||||
staffGradeId: this.Form.departmentId |
|
||||||
} |
|
||||||
if(this.Form.departmentId){ |
|
||||||
this.$post(this.api.updateStaffGrade,data).then(res => { |
|
||||||
this.$message.success('编辑成功'); |
|
||||||
this.isAddDepartment = false |
|
||||||
this.majorList.map(e =>{ |
|
||||||
e.children.map(r =>{ |
|
||||||
if(r.staffGradeId == this.Form.departmentId){ |
|
||||||
r.staffGradeName = this.Form.departmentName |
|
||||||
r.label = this.Form.departmentName |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
}).catch(res => {}); |
|
||||||
}else{ |
|
||||||
this.$post(this.api.addStaffGrade,data).then(res => { |
|
||||||
this.$message.success('添加成功'); |
|
||||||
this.isAddDepartment = false |
|
||||||
let newData = { |
|
||||||
staffGradeId: res.message, |
|
||||||
staffGradeName: this.Form.departmentName, |
|
||||||
label: this.Form.departmentName, |
|
||||||
ifVisible: false, |
|
||||||
ischeck: false |
|
||||||
} |
|
||||||
this.majorList.map(e =>{ |
|
||||||
if(e.staffProfessionalArchitectureId == this.Form.MajorId){ |
|
||||||
e.ifVisible = true |
|
||||||
e.children.push(newData) |
|
||||||
} |
|
||||||
}) |
|
||||||
}).catch(res => {}); |
|
||||||
} |
|
||||||
}else{ |
|
||||||
return false; |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
delMajor(item,index){ |
|
||||||
this.$confirm('确定要删除该专业吗？该操作将会删除该组织下的用户账号。', '提示', { |
|
||||||
type: 'warning' |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
let data = { |
|
||||||
staffProfessionalArchitectureId: item.staffProfessionalArchitectureId |
|
||||||
} |
|
||||||
this.$post(this.api.deleteStaffPro,data).then(res => { |
|
||||||
this.$message.success('删除成功'); |
|
||||||
this.majorList.splice(index, 1) |
|
||||||
this.$emit('getData') |
|
||||||
this.$get(`${this.api.dalStaffByProfessionalId}?staffProfessionalArchitectureId=${item.staffProfessionalArchitectureId}`).then(res => {}).catch(res => {}) |
|
||||||
}).catch(res => {}); |
|
||||||
}) |
|
||||||
.catch(() => {}); |
|
||||||
}, |
|
||||||
delDepartment(item,indx){ |
|
||||||
this.$confirm('确定要删除该部门吗？该操作将会删除该组织下的用户账号。', '提示', { |
|
||||||
type: 'warning' |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
let data = { |
|
||||||
staffGradeId: item.staffGradeId |
|
||||||
} |
|
||||||
this.$post(this.api.deleteStaffGrade,data).then(res => { |
|
||||||
this.$message.success('删除成功'); |
|
||||||
this.majorList.map(e =>{ |
|
||||||
e.children.map(r =>{ |
|
||||||
if(r.staffGradeId == item.staffGradeId){ |
|
||||||
e.children.splice(indx,1) |
|
||||||
if(e.children.length == 0){ |
|
||||||
e.ifVisible = false |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
this.$emit("delDep",item,this.majorList) |
|
||||||
this.$emit('getData') |
|
||||||
this.$get(`${this.api.dalStaffByStaffGradeId}?staffGradeId=${item.staffGradeId}`).then(res => {}).catch(res => {}) |
|
||||||
}).catch(res => {}); |
|
||||||
}) |
|
||||||
.catch(() => {}); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
<style scoped> |
|
||||||
.side_view{ |
|
||||||
height: 800px; |
|
||||||
padding: 40px 20px; |
|
||||||
background-color: #fff; |
|
||||||
box-shadow:-2px 0px 57px 0px rgba(192,189,216,0.39); |
|
||||||
} |
|
||||||
.side_icon{ |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
.side_icon i{ |
|
||||||
cursor:pointer; |
|
||||||
font-size: 20px; |
|
||||||
color: #9278FF; |
|
||||||
} |
|
||||||
.side_tree{ |
|
||||||
width: 100%; |
|
||||||
font-size: 14px; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
.side_tree i{ |
|
||||||
color: #9278FF; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
.fir_back{ |
|
||||||
width: 100%; |
|
||||||
padding: 15px 0; |
|
||||||
background:rgba(255,255,255,1); |
|
||||||
/* box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); */ |
|
||||||
border-radius:10px; |
|
||||||
text-align: left; |
|
||||||
} |
|
||||||
.fir_back:first-child{ |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
.fir_back:hover{ |
|
||||||
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
|
||||||
cursor:pointer; |
|
||||||
} |
|
||||||
.fir_back span{ |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
.two_active{ |
|
||||||
color: #9278FF; |
|
||||||
} |
|
||||||
/* .two_active:hover{ |
|
||||||
color: #9278FF; |
|
||||||
cursor:pointer; |
|
||||||
} */ |
|
||||||
.two_back:hover{ |
|
||||||
cursor:pointer; |
|
||||||
color: #9278FF; |
|
||||||
} |
|
||||||
.mar_top{ |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
.back_active{ |
|
||||||
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
|
||||||
} |
|
||||||
.bor_lef{ |
|
||||||
padding: 20px 0 0 0; |
|
||||||
margin-left: 40px; |
|
||||||
} |
|
||||||
.three_lef{ |
|
||||||
margin-left: 60px; |
|
||||||
padding: 20px 0; |
|
||||||
} |
|
||||||
.three_text{ |
|
||||||
font-size: 14px; |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
.teacher_tab{ |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
.icon_select:before{ |
|
||||||
transform: rotate(180deg); |
|
||||||
} |
|
||||||
.list-enter-active, .list-leave-active { transition: all 1s; } |
|
||||||
.list-enter, .list-leave-to { opacity: 0; transform: translateY(-30px); } |
|
||||||
</style> |
|
||||||
@ -1,253 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="side_view"> |
|
||||||
<p class="side_icon mab20"> |
|
||||||
<i class="icon-jiahao mar20" @click="addMajor"></i> |
|
||||||
<!-- <i class="icon-delete"></i> --> |
|
||||||
</p> |
|
||||||
<div class="side_tree" v-for="(item,index) in data" :key="index"> |
|
||||||
<div class="item" @click.stop="open(item,1)"> |
|
||||||
<!-- <i :class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" class="icon-shixiangyoujiantou-"></i> --> |
|
||||||
<img |
|
||||||
v-if="item.children&&item.children.length!=0" |
|
||||||
:class="{ 'arrowTransform': !item.ifVisible, 'arrowTransformReturn': item.ifVisible}" |
|
||||||
src="../../assets/img/icon-xiangyou.png" |
|
||||||
alt |
|
||||||
/> |
|
||||||
<i v-else class="empty"></i> |
|
||||||
<i :class="item.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="fircheckitem(item)"></i> |
|
||||||
<span>{{item.label}}</span> |
|
||||||
<svg t="1604370117041" class="icon edit ft" @click.stop="editMajor(item)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg> |
|
||||||
<i class="el-icon-circle-plus ft fz" @click.stop="addDepartment(item)"></i> |
|
||||||
<i class="icon-delete ft" @click.stop="delMajor(item,index)"></i> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div v-show="item.ifVisible" v-if="item.children&&item.children.length!=0"> |
|
||||||
<div v-for="(item1,index1) in item.children" :key="index1"> |
|
||||||
<div class="item2" @click.stop="open(item1,2)"> |
|
||||||
<i :class="item1.ischeck ? 'icon-yigouxuan' : 'icon-weigouxuan'" @click.stop="twocheckitem(item1)"></i> |
|
||||||
<span>{{item1.label}}</span> |
|
||||||
<svg t="1604370117041" class="icon edit ft" @click.stop="editDepartment(item1)" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" width="16" height="16"><path d="M511.979 30.125c-266.13 0-481.871 215.741-481.871 481.871s215.741 481.871 481.871 481.871S993.85 778.126 993.85 511.996 778.109 30.125 511.979 30.125zM459.644 693.015c-15.876 18.135-22.818 22.486-44.972 30.657-34.111 12.787-96.687 36.27-137.374 51.515-7.706 3.056-36.735 1.495-24.578-27.036 13.784-39.757 34.045-98.414 45.636-131.894 8.436-23.615 11.758-29.76 28.73-45.603l175.271-175.271 124.055 124.088C626.413 519.471 508.469 642.264 459.644 693.015zM653.084 492.867 528.996 368.779l26.605-26.605 124.088 124.121L653.084 492.867zM759.469 386.482l-53.176 53.209L582.205 315.569l53.209-53.176c19.596-19.596 51.316-19.596 70.912 0l53.209 53.176C779.065 335.166 779.065 366.919 759.469 386.482z" p-id="9030" fill="#9076ff"></path></svg> |
|
||||||
<i class="icon-delete ft" @click.stop="delDepartment(item1,index1)"></i> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
Array.prototype.removeByValue = function (val) { |
|
||||||
for (var i = 0; i < this.length; i++) { |
|
||||||
if (JSON.stringify(this[i]).indexOf(JSON.stringify(val)) != -1) { |
|
||||||
this.splice(i, 1); |
|
||||||
break; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
chooseList: [] |
|
||||||
}; |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
chooseList(n, o) { |
|
||||||
this.$emit('chooseNode', n); |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
props: { |
|
||||||
data: { |
|
||||||
type: Array |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
//点击节点时伸展或收缩列表 |
|
||||||
open(item,type) { |
|
||||||
item.ifVisible = !item.ifVisible; |
|
||||||
type == 1 ? this.$emit('fircheckitem',item) : this.$emit('twocheckitem',item) |
|
||||||
}, |
|
||||||
|
|
||||||
//选中叶子节点时将选中的叶子节点添加进数组，如果叶子节点存在则删除，removeByvalue函数定义在main.js中 |
|
||||||
choose(item) { |
|
||||||
item.ifVisible = !item.ifVisible; |
|
||||||
if (item.ifVisible) { |
|
||||||
this.chooseList.push(item); |
|
||||||
} else { |
|
||||||
this.chooseList.removeByValue(item); |
|
||||||
} |
|
||||||
}, |
|
||||||
fircheckitem(item){ |
|
||||||
this.$emit('fircheckitem',item); |
|
||||||
}, |
|
||||||
twocheckitem(item){ |
|
||||||
this.$emit('twocheckitem',item); |
|
||||||
}, |
|
||||||
// 专业 |
|
||||||
addMajor(){ |
|
||||||
this.$emit('addMajor'); |
|
||||||
}, |
|
||||||
editMajor(item){ |
|
||||||
this.$emit('editMajor',item); |
|
||||||
}, |
|
||||||
delMajor(item,index){ |
|
||||||
this.$emit('delMajor',item,index); |
|
||||||
}, |
|
||||||
// 年级 |
|
||||||
addDepartment(item){ |
|
||||||
this.$emit('addDepartment',item); |
|
||||||
}, |
|
||||||
editDepartment(item){ |
|
||||||
this.$emit('editDepartment',item); |
|
||||||
}, |
|
||||||
delDepart(item,index){ |
|
||||||
this.$emit('delDepart',item,index); |
|
||||||
}, |
|
||||||
// 班级 |
|
||||||
addClass(item){ |
|
||||||
this.$emit('addClass',item); |
|
||||||
}, |
|
||||||
editDepartment(item){ |
|
||||||
this.$emit('editDepartment',item); |
|
||||||
}, |
|
||||||
delDepartment(item,index){ |
|
||||||
this.$emit('delDepartment',item,index); |
|
||||||
}, |
|
||||||
//判断数组中是否包含某个对象 |
|
||||||
isHasObj(arr, val) { |
|
||||||
var flag = 0; //1为有 0为没有 |
|
||||||
for (var i = 0; i < arr.length; i++) { |
|
||||||
if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) { |
|
||||||
flag = 1; |
|
||||||
} |
|
||||||
} |
|
||||||
if (flag == 1) { |
|
||||||
return true; |
|
||||||
} else { |
|
||||||
return false; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色 |
|
||||||
$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色 |
|
||||||
|
|
||||||
//混合代码,提取item共同样式 |
|
||||||
@mixin public { |
|
||||||
cursor: pointer; |
|
||||||
font-size: 18px; |
|
||||||
color: #333333; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
img { |
|
||||||
height: 20px; |
|
||||||
width: 20px; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.main { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.item { |
|
||||||
@include public; |
|
||||||
width: 100%; |
|
||||||
padding: 15px 0; |
|
||||||
background:rgba(255,255,255,1); |
|
||||||
box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); |
|
||||||
border-radius:10px; |
|
||||||
text-align: left; |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
.item:first{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.item .empty{ |
|
||||||
width: 20px; |
|
||||||
} |
|
||||||
.edit{ |
|
||||||
width: 18px !important; |
|
||||||
height: 18px !important; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
.item2 { |
|
||||||
@include public; |
|
||||||
margin-top: 20px; |
|
||||||
margin-left:60px |
|
||||||
} |
|
||||||
.item2:hover{ |
|
||||||
color: #9278FF; |
|
||||||
} |
|
||||||
|
|
||||||
//清除ul,li的默认样式 |
|
||||||
ul, |
|
||||||
li { |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
list-style: none; |
|
||||||
} |
|
||||||
|
|
||||||
// 使三角形旋转动画 |
|
||||||
.arrowTransform { |
|
||||||
transition: 0.4s; |
|
||||||
transform-origin: center; |
|
||||||
transform: rotateZ(0deg); |
|
||||||
} |
|
||||||
.arrowTransformReturn { |
|
||||||
transition: 0.4s; |
|
||||||
transform-origin: center; |
|
||||||
transform: rotateZ(90deg); |
|
||||||
} |
|
||||||
|
|
||||||
//复选框样式 |
|
||||||
.checkBox { |
|
||||||
width: 14px; |
|
||||||
height: 14px; |
|
||||||
border-radius: 7px; |
|
||||||
margin-left: 10px; |
|
||||||
margin-right: 10px; |
|
||||||
border: 2px solid rgba(146, 120, 255, 1); |
|
||||||
} |
|
||||||
|
|
||||||
//当点击复选框时候切换背景图片 |
|
||||||
.isActive { |
|
||||||
background: url('../../assets/img/icon-yigouxuan.png'); |
|
||||||
background-size: 14px 14px; /*按比例缩放*/ |
|
||||||
} |
|
||||||
|
|
||||||
.side_view{ |
|
||||||
// height: 800px; |
|
||||||
padding: 40px 20px; |
|
||||||
background-color: #fff; |
|
||||||
box-shadow:-2px 0px 57px 0px rgba(192,189,216,0.39); |
|
||||||
i { |
|
||||||
color: #9278FF; |
|
||||||
} |
|
||||||
} |
|
||||||
.side_icon{ |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
.side_icon i{ |
|
||||||
cursor:pointer; |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.side_tree{ |
|
||||||
width: 100%; |
|
||||||
font-size: 14px; |
|
||||||
color: #333; |
|
||||||
i{ |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
span{ |
|
||||||
margin-left: 5px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
} |
|
||||||
.fz{ |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue