parent
2e880f52f2
commit
a8695fd8bd
14 changed files with 1528 additions and 10 deletions
|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,110 @@ |
||||
<template> |
||||
<div class="Achievement-container"> |
||||
<div class="tabs" v-if="showTabs"> |
||||
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{item}}</a> |
||||
</div> |
||||
|
||||
<div class="score-table" v-if="active == 'first'"> |
||||
<Product></Product> |
||||
</div> |
||||
<div class="score-table" v-else-if="active == 'second'"> |
||||
<Framework></Framework> |
||||
</div> |
||||
<div class="score-table" v-else> |
||||
<Introduce></Introduce> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Product from './Product.vue'; |
||||
import Framework from './Framework.vue'; |
||||
import Introduce from './Introduce.vue'; |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: 'first', |
||||
userId: this.$store.state.userId, |
||||
tabs: { |
||||
first: '产品管理', |
||||
second: '数据架构', |
||||
third: '数据简介', |
||||
}, |
||||
showTabs: true |
||||
}; |
||||
}, |
||||
components: { |
||||
Product, |
||||
Framework, |
||||
Introduce |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
methods: { |
||||
tabChange(index){ |
||||
this.active = index |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scopted> |
||||
.Achievement-container { |
||||
width: 100%; |
||||
box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1); |
||||
text-align: center; |
||||
overflow: hidden; |
||||
.header { |
||||
width: 97%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin: 0 auto; |
||||
margin-top: 16px; |
||||
p { |
||||
margin-top: 14px; |
||||
font-size: 20px; |
||||
font-family: MicrosoftYaHeil; |
||||
color: #333333; |
||||
} |
||||
} |
||||
.score-table { |
||||
margin: 0 auto; |
||||
margin-top: 18px; |
||||
position: relative; |
||||
.block { |
||||
position: absolute; |
||||
right: 0px; |
||||
bottom: -50px; |
||||
} |
||||
} |
||||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
||||
background-color: #9278ff; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.tabs{ |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 20px 1.5% 20px; |
||||
margin: 0; |
||||
z-index: 999; |
||||
background-color: #fff; |
||||
.item{ |
||||
padding: 12px 20px; |
||||
margin-right: 10px; |
||||
color:#606266; |
||||
line-height: 1; |
||||
border-radius: 4px; |
||||
background-color: #fff; |
||||
border: 1px solid #dcdfe6; |
||||
cursor: pointer; |
||||
|
||||
&.active{ |
||||
color: #fff; |
||||
background-color: #9278ff; |
||||
border-color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,351 @@ |
||||
<template> |
||||
<div> |
||||
<el-container> |
||||
<el-aside width="300px"> |
||||
<div class="plus"> |
||||
<i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i> |
||||
</div> |
||||
<el-tree ref="type" :data="typeList" node-key="id" :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @current-change="typeClick"> |
||||
<span class="custom-tree-node" slot-scope="{ node, data }"> |
||||
<span>{{ node.label }}</span> |
||||
<span class="actions"> |
||||
<i v-if="!data.isThird" class="el-icon-circle-plus-outline" @click.stop="addType(node)"></i> |
||||
<i class="el-icon-edit" @click.stop="editType(node)"></i> |
||||
<i class="el-icon-delete" @click.stop="delType(node)"></i> |
||||
</span> |
||||
</span> |
||||
</el-tree> |
||||
</el-aside> |
||||
|
||||
<el-main style="padding-top: 0"> |
||||
<el-card shadow="hover"> |
||||
<el-form label-width="80px" class="flex-between mgb20"> |
||||
<div class="flex-center"> |
||||
<el-form-item label="创建日期" style="margin: 0 20px 0 0"> |
||||
<el-date-picker v-model="updateTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="initData"></el-date-picker> |
||||
</el-form-item> |
||||
<el-input placeholder="请输入数据表名称" v-model="keyword" prefix-icon="el-icon-search" clearable></el-input> |
||||
</div> |
||||
<div> |
||||
<el-button type="primary" size="small" round @click="batchImport">导入数据</el-button> |
||||
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||
</div> |
||||
</el-form> |
||||
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="showName" label="数据表名称" align="center"></el-table-column> |
||||
<el-table-column prop="dataTotal" label="数据总量" align="center"></el-table-column> |
||||
<el-table-column prop="dataSize" label="数据大小" align="center"></el-table-column> |
||||
<el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column> |
||||
<el-table-column label="操作" width="220" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="preview(scope.row)">预览</el-button> |
||||
<el-button type="text" @click="delTable(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-card> |
||||
</el-main> |
||||
</el-container> |
||||
|
||||
<el-dialog title="导入" :visible.sync="importVisible" width="80%" center @close="closeImport" class="dialog" :close-on-click-modal="false"> |
||||
<el-container style="padding: 20px 0 20px 20px;background-color: #f0f0f0;"> |
||||
<el-aside width="300px"> |
||||
<el-tree style="margin: 10px;" ref="typeTree" :data="importTypeList" node-key="id" :default-expanded-keys="defaultTypeActive" show-checkbox :current-node-key="categoryId" :props="defaultProps" highlight-current @node-click="importTypeClick"></el-tree> |
||||
</el-aside> |
||||
<el-main style="padding-top: 0;padding-bottom: 0;"> |
||||
<el-table :data="fieldData" stripe header-align="center"> |
||||
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||
<el-table-column v-for="(item,index) in fieldHead" :prop="item.field" :key="index" :label="item.comment" align="center"></el-table-column> |
||||
</el-table> |
||||
</el-main> |
||||
</el-container> |
||||
|
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="importVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="confirmImport">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog :title="id ? '编辑分类' : '新增分类'" :visible.sync="typeVisible" width="24%" center @close="closeType" :close-on-click-modal="false"> |
||||
<el-input placeholder="请输入分类名称" v-model="categoryName"></el-input> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="typeVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="confirmType">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
typeList: [], |
||||
defaultProps: { |
||||
children: 'children', |
||||
label: 'label' |
||||
}, |
||||
defaultActive: [], |
||||
typeVisible: false, |
||||
categoryName: '', |
||||
categoryId: '', |
||||
id: 0, |
||||
levelId: 0, |
||||
updateTime: '', |
||||
importVisible: false, |
||||
defaultTypeActive: [], |
||||
listData: [], |
||||
keyword: '', |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
multipleSelection: [], |
||||
importTypeList: [], |
||||
fieldData: [], |
||||
fieldHead: [], |
||||
tableName: '', |
||||
categoryIndex: 0 |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData() |
||||
},500) |
||||
} |
||||
}, |
||||
mounted(){ |
||||
this.getType() |
||||
}, |
||||
methods: { |
||||
getType(){ |
||||
this.$post(this.api.getTableByClassification).then(res => { |
||||
res.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.children.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.children.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.isThird = true |
||||
}) |
||||
}) |
||||
}) |
||||
this.typeList = res |
||||
if(res[0].children.length){ |
||||
this.categoryId = res[0].children[0].id |
||||
this.defaultActive = [res[0].children[0].id] |
||||
}else{ |
||||
this.categoryId = res[0].id |
||||
this.defaultActive = [res[0].id] |
||||
} |
||||
|
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}, |
||||
getData(){ |
||||
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.categoryId}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=${this.updateTime ? this.updateTime : ''}`).then(res => { |
||||
this.listData = res.list |
||||
this.total = res.totalCount |
||||
}).catch(res => {}) |
||||
}, |
||||
initData(){ |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
typeClick(data,node){ |
||||
this.categoryId = data.id |
||||
this.getData() |
||||
}, |
||||
addType(row){ |
||||
this.typeVisible = true |
||||
this.levelId = row ? row.data.id : 0 |
||||
}, |
||||
editType(row){ |
||||
this.typeVisible = true |
||||
this.id = row.data.id |
||||
this.categoryName = row.data.categoryName |
||||
}, |
||||
delType(row){ |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => { |
||||
this.$message.success('删除成功') |
||||
this.getType() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
confirmType(){ |
||||
if(this.id){ |
||||
this.$post(this.api.updateCategory,{ |
||||
id: this.id, |
||||
categoryName: this.categoryName |
||||
}).then(res => { |
||||
this.$message.success('编辑成功') |
||||
this.getType() |
||||
this.typeVisible = false |
||||
}).catch(res => {}) |
||||
}else{ |
||||
this.$post(this.api.saveCategory,{ |
||||
levelId: this.levelId, |
||||
categoryName: this.categoryName |
||||
}).then(res => { |
||||
this.$message.success('添加成功') |
||||
this.getType() |
||||
this.typeVisible = false |
||||
}).catch(res => {}) |
||||
} |
||||
}, |
||||
closeType(){ |
||||
this.id = 0 |
||||
this.levelId = 0 |
||||
this.categoryName = '' |
||||
}, |
||||
closeImport(){ |
||||
|
||||
}, |
||||
confirmImport(){ |
||||
if(!this.$refs.typeTree.getCheckedKeys().length) return this.$message.warning('请选择数据') |
||||
let permissionIds = [...this.$refs.typeTree.getHalfCheckedKeys(),...this.$refs.typeTree.getCheckedKeys()] |
||||
// this.$post(`${this.api.saveTable}?name=${}&show_name=${}&category_id=${}`).then(res => { |
||||
// this.$message.success('导入成功') |
||||
// this.getType() |
||||
// this.importVisible = false |
||||
// }).catch(res => {}) |
||||
}, |
||||
preview(row){ |
||||
|
||||
}, |
||||
delTable(row){ |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(this.api.daleteBatchStaff,[row.userId]).then(res => { |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
delAllSelection() { |
||||
if(this.multipleSelection.length != ''){ |
||||
let newArr = this.multipleSelection |
||||
let delList = newArr.map(item => { |
||||
return `tableIds=${item.id}` |
||||
}) |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteTable}?${delList.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}else{ |
||||
this.$message.error('请先选择数据') |
||||
} |
||||
}, |
||||
async getTable(n,i){ |
||||
let res = await this.$post(`${this.api.getIdQueryTable}?categoryId=${n.id}&showName=&pageNum=1&pageSize=10000&updateTime=`) |
||||
res.list.map(n => { |
||||
n.label = n.showName |
||||
n.id = String(n.id) |
||||
}) |
||||
n.children = res.list |
||||
if(!i && !this.tableName){ |
||||
this.defaultTypeActive = res.list[0].id |
||||
this.tableName = res.list[0].name |
||||
} |
||||
}, |
||||
batchImport(){ |
||||
let list = JSON.parse(JSON.stringify(this.typeList)) |
||||
list.map((n,i) => { |
||||
if(n.children.length){ |
||||
n.children.map(n => { |
||||
if(n.children.length){ |
||||
n.children.map(n => this.getTable(n,i)) |
||||
}else{ |
||||
this.getTable(n,i) |
||||
} |
||||
}) |
||||
}else{ |
||||
this.getTable(n,i) |
||||
} |
||||
}) |
||||
setTimeout(() => { |
||||
this.importTypeList = list |
||||
console.log(11,this.importTypeList) |
||||
this.getFields() |
||||
},500) |
||||
this.importVisible = true |
||||
}, |
||||
getFields(){ |
||||
this.$get(`${this.api.previewData}?tableName=${this.tableName}`).then(res => { |
||||
let comment = res.comment |
||||
let fieldHead = [] |
||||
comment.map(n => { |
||||
n.field != 'id' && n.field != 'operation_time' && fieldHead.push(n) |
||||
}) |
||||
this.fieldHead = fieldHead |
||||
|
||||
let data = res.data |
||||
data.map(n => { |
||||
for(let i in n){ |
||||
if(typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = this.formatDate('yyyy-MM-dd hh:mm:ss',new Date(n[i])) |
||||
} |
||||
}) |
||||
this.fieldData = data |
||||
console.log(33,this.fieldHead,this.fieldData) |
||||
}).catch(res => {}) |
||||
this.importVisible = true |
||||
}, |
||||
importTypeClick(data){ |
||||
if(data.name){ |
||||
this.tableName = data.name |
||||
this.getFields() |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.el-container{ |
||||
.el-aside{ |
||||
padding: 15px; |
||||
background-color: #fff; |
||||
.plus{ |
||||
text-align: right; |
||||
color: #9278FF; |
||||
cursor: pointer; |
||||
} |
||||
.custom-tree-node{ |
||||
flex: 1; |
||||
display: inline-flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.actions{ |
||||
i{ |
||||
margin-left: 5px; |
||||
color: #9278FF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,127 @@ |
||||
<template> |
||||
<div> |
||||
<el-container> |
||||
<el-aside width="350px"> |
||||
<el-tree style="margin: 10px;" ref="type" :data="typeList" node-key="id" :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @node-click="typeClick"></el-tree> |
||||
</el-aside> |
||||
|
||||
<el-main style="padding-top: 0"> |
||||
<el-col :span="24"> |
||||
<el-card shadow="hover" class="mgb20 teacher_tab"> |
||||
<div class="intro" v-if="!editing"> |
||||
<p class="text">{{introduceText}}</p> |
||||
<div class="btn"> |
||||
<el-button type="primary" size="small" @click="edit">{{introduceText ? '编辑简介' : '添加简介'}}</el-button> |
||||
</div> |
||||
</div> |
||||
<div v-else> |
||||
<el-input placeholder="请输入简介" v-model="introduce" type="textarea" rows="5"></el-input> |
||||
<div class="btns"> |
||||
<el-button @click="editing = false">取 消</el-button> |
||||
<el-button type="primary" @click="confirmEdit">确 定</el-button> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-main> |
||||
</el-container> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
typeList: [], |
||||
defaultProps: { |
||||
children: 'children', |
||||
label: 'label' |
||||
}, |
||||
defaultActive: [], |
||||
editing: false, |
||||
introduce: '', |
||||
introduceText: '', |
||||
categoryId: '' |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData() |
||||
},500) |
||||
} |
||||
}, |
||||
mounted(){ |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData(){ |
||||
this.$post(this.api.getTableByClassification).then(res => { |
||||
res.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.children.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.children.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
}) |
||||
}) |
||||
}) |
||||
this.typeList = res |
||||
if(res[0].children.length){ |
||||
let item = res[0].children[0] |
||||
this.categoryId = item.id |
||||
this.defaultActive = [item.id] |
||||
this.introduceText = item.introduce |
||||
}else{ |
||||
this.categoryId = res[0].id |
||||
this.defaultActive = [res[0].id] |
||||
this.introduceText = res[0].introduce |
||||
} |
||||
console.log(11,this.defaultActive) |
||||
}).catch(res => {}) |
||||
}, |
||||
typeClick(data,node){ |
||||
this.categoryId = data.id |
||||
this.introduceText = data.introduce |
||||
}, |
||||
edit(){ |
||||
this.editing = true |
||||
this.introduce = this.introduceText |
||||
}, |
||||
confirmEdit(){ |
||||
this.$post(this.api.updateCategory,{ |
||||
id: this.categoryId, |
||||
introduce: this.introduce |
||||
}).then(res => { |
||||
this.$message.success(this.introduceText ? '编辑成功' : '新增成功') |
||||
this.getData() |
||||
this.editing = false |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.el-container{ |
||||
background-color: #f0f0f0; |
||||
.intro{ |
||||
padding: 20px; |
||||
margin: 20px; |
||||
border: 1px solid #dcdcdc; |
||||
border-radius: 4px; |
||||
.text{ |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
.btns{ |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
.mag{ |
||||
margin-right: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,253 @@ |
||||
<template> |
||||
<div> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div> |
||||
<div class="flex-center mgb20"> |
||||
<p class="hr_tag"></p> |
||||
<span>筛选</span> |
||||
</div> |
||||
<div> |
||||
<el-form label-width="80px" class="flex-between"> |
||||
<div class="flex-center"> |
||||
<el-form-item label="创建日期"> |
||||
<el-date-picker v-model="date" align="right" unlink-panels type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="getData" clearable></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="状态"> |
||||
<el-select v-model="status" clearable placeholder="请选择状态" @change="getData"> |
||||
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</div> |
||||
<el-form-item> |
||||
<el-input placeholder="请输入产品名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
|
||||
<el-col :span="24"> |
||||
<el-card shadow="hover" class="mgb20"> |
||||
<div class="flex-between mgb20"> |
||||
<div class="flex-center"> |
||||
<p class="hr_tag"></p> |
||||
<span>订单列表</span> |
||||
</div> |
||||
<div> |
||||
<el-button type="primary" size="small" round @click="add">新增</el-button> |
||||
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="orderData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderNumber" label="订单编号" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="customerName" label="产品名称" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderAmount" label="数据量（表）" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderDate" label="创建人" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderType" label="订单数量" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderStatus" label="市场价" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderNature" label="创建时间" align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="orderNature" label="状态" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-switch |
||||
v-model="scope.row.enable" |
||||
:active-text="scope.row.enable ? '上架' : '下架'" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 10px 0 10px" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="preview(scope.row)">预览</el-button> |
||||
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="pageNo" :total="totals"> |
||||
</el-pagination> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<el-dialog :title="isDetail ? '查看产品' : (id ? '编辑产品' : '新增产品')" :visible.sync="productVisible" width="30%" center @close="closeProduct" class="dialog" :close-on-click-modal="false"> |
||||
<el-form ref="form" label-width="120px" :disabled="isDetail"> |
||||
<el-form-item prop="userAccount" label="数据产品名称"> |
||||
<el-input v-model="userAccount" placeholder="请输入数据产品名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="市场价格"> |
||||
<el-input v-model="userName" placeholder="请输入市场价格"> |
||||
<span slot="suffix">元/账号</span> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="已选数据"> |
||||
<el-button type="primary" size="small">配置数据权限</el-button> |
||||
<el-tree ref="type" :data="typeList" node-key="id" show-checkbox :props="defaultProps" highlight-current></el-tree> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
||||
<el-button @click="productVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="saveSure('teacherForm')">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
keyword: '', |
||||
searchTimer: null, |
||||
date: [], |
||||
status: '', |
||||
orderData:[], |
||||
multipleSelection: [], |
||||
statusList: [{ |
||||
name: '不限', |
||||
value: '' |
||||
},{ |
||||
name: '已上架', |
||||
value: 1 |
||||
}, |
||||
{ |
||||
name: '已下架', |
||||
value: 2 |
||||
}], |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 1, |
||||
productVisible: false, |
||||
typeList: [], |
||||
defaultProps: { |
||||
children: 'children', |
||||
label: 'label' |
||||
}, |
||||
defaultActive: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
},500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
// this.$get(this.api.queryOrder,data).then(res => { |
||||
// res.message.rows.forEach(e => { |
||||
// e.orderType = this.orderTypeFn(e.orderType) |
||||
// e.orderStatus = this.orderStatusFn(e.orderStatus) |
||||
// e.orderNature = this.orderNatureFn(e.orderNature) |
||||
// }) |
||||
// this.orderData = res.message.rows |
||||
// this.totals = res.message.total |
||||
// }).catch(res => {}); |
||||
}, |
||||
initData(){ |
||||
this.pageNo = 1 |
||||
this.getData() |
||||
}, |
||||
getType(){ |
||||
this.$post(this.api.getTableByClassification).then(res => { |
||||
res.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.children.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.children.map(n => { |
||||
n.id = String(n.id) |
||||
n.label = n.categoryName |
||||
n.isThird = true |
||||
}) |
||||
}) |
||||
}) |
||||
this.typeList = res |
||||
this.productVisible = true |
||||
}).catch(res => {}) |
||||
}, |
||||
add(){ |
||||
this.getType() |
||||
}, |
||||
edit(row){ |
||||
this.getType() |
||||
}, |
||||
preview(row){ |
||||
this.isDetail = true |
||||
this.getType() |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
let result = row.orderId |
||||
var arr = [] |
||||
arr.push(result) |
||||
let data = arr |
||||
this.$post(this.api.deleteOrder,data).then(res => { |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}); |
||||
}) |
||||
.catch(() => {}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
delAllSelection() { |
||||
if(this.multipleSelection.length != ''){ |
||||
let arr = this.multipleSelection |
||||
let result = arr.map(e => e.orderId) |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}) |
||||
.then(() => { |
||||
let data = result |
||||
this.$post(this.api.deleteOrder,data).then(res => { |
||||
this.multipleSelection = [] |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}else{ |
||||
this.$message.error('请先选择订单 ！') |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val |
||||
this.getData() |
||||
}, |
||||
closeProduct(){ |
||||
this.isDetail = false |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,362 @@ |
||||
<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> |
||||
@ -0,0 +1,253 @@ |
||||
<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