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