<template>
|
<div>
|
<div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}">
|
<div style="margin-bottom: 20px;display: flex">
|
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
|
<el-button type="primary" icon="el-icon-delete" @click="edit('edit')">修改</el-button>
|
<el-button type="primary" icon="el-icon-delete" @click="del">删除</el-button>
|
</div>
|
|
<div style="display: flex;border: 1px solid #eee">
|
<div style="flex: 0.22">
|
<div
|
class="zzflStyle"
|
>组织分类
|
</div>
|
<el-input
|
v-model="filterText"
|
prefix-icon="el-icon-search"
|
style="margin: 30px 0 30px 50px;width:200px"
|
placeholder="请输入关键字"
|
/>
|
|
<el-tree
|
ref="tree"
|
:style="{marginLeft: 10+'px',overflowY: 'scroll',height:(tableHeight-140)+'px'}"
|
:icon-class="iconClass"
|
:data="treeData"
|
default-expand-all
|
node-key="id"
|
highlight-current
|
:props="defaultProps"
|
:filter-node-method="filterNode"
|
@node-click="nodeClick"
|
/>
|
</div>
|
|
<el-table
|
:data="tableData"
|
border
|
:style="{width: 72+'%',height:tableHeight+'px'}"
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
>
|
<!-- <el-table-column-->
|
<!-- label="组织分类"-->
|
<!-- width="300"-->
|
<!-- :resizable="false"-->
|
<!-- >-->
|
<!-- <template slot-scope="{row}">-->
|
|
<!-- <el-input v-model="filterText" placeholder="请输入内容" />-->
|
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
type="index"
|
width="50"
|
label="序号"
|
/>
|
<el-table-column
|
prop="zzbm"
|
label="组织编码"
|
/>
|
<el-table-column
|
prop="zzmc"
|
label="组织名称"
|
/>
|
<el-table-column
|
prop="zzlx"
|
label="组织类型"
|
/>
|
<el-table-column
|
prop="sjdw"
|
label="上级单位"
|
/>
|
<el-table-column
|
prop="cjry"
|
label="创建人员"
|
/>
|
<el-table-column
|
prop="cjsj"
|
label="创建时间"
|
/>
|
</el-table>
|
</div>
|
<!--分页-->
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="form.pageNum"
|
:limit.sync="form.pageSize"
|
align="right"
|
layout="prev, pager, next,sizes"
|
popper-class="select_bottom"
|
/>
|
<!-- @pagination="getManageList"-->
|
|
</div>
|
|
<el-dialog
|
:title="operation==='add'?'添加':'修改'"
|
:visible.sync="dialogVisible"
|
width="50%"
|
top="15vh"
|
@closed="handleClose"
|
>
|
<el-form ref="dialogForm" :model="dialogForm" label-width="80px">
|
<el-form-item label="组织类型" required>
|
<el-radio-group v-model="dialogForm.zzlx" style="display: flex;align-items: end;height: 29px;">
|
<el-radio :label="1">工厂</el-radio>
|
<el-radio :label="2">部门</el-radio>
|
<el-radio :label="3">车间</el-radio>
|
<el-radio :label="4">科室</el-radio>
|
<el-radio :label="5">生产线</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="组织编码" required>
|
<el-input v-model="dialogForm.zzbm" style="width: 220px" />
|
</el-form-item>
|
<el-form-item label="组织名称" required>
|
<el-input v-model="dialogForm.zzmc" style="width: 220px" />
|
</el-form-item>
|
<el-form-item label="上级单位" required>
|
<!-- <el-input v-model="dialogForm.sjdw" />-->
|
<el-select v-model="dialogForm.sjdw" style="width: 220px" placeholder="请选择">
|
<el-option
|
v-for="item in sjdw"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button @click="dialogVisibleCancel">取 消</el-button>
|
<el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
|
export default {
|
name: 'Zzjg',
|
components: {
|
Pagination
|
},
|
data() {
|
return {
|
mainHeight: 0,
|
tableHeight: 0,
|
form: {
|
pageNum: 1, // 第几页
|
pageSize: 10 // 每页多少条
|
},
|
total: 10,
|
tableData: [
|
{ id: 1, zzbm: 'SC001', zzmc: '生产一部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin1', cjsj: '2022-04-14 10:10:10' },
|
{ id: 2, zzbm: 'SC002', zzmc: '生产一部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin1', cjsj: '2022-04-14 10:11:10' },
|
{ id: 3, zzbm: 'SC003', zzmc: '生产一部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin1', cjsj: '2022-04-14 10:11:50' },
|
{ id: 4, zzbm: 'PD', zzmc: '生产二部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin2', cjsj: '2022-04-15 10:10:10' },
|
{ id: 5, zzbm: 'TD', zzmc: '财务部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-15 11:10:10' },
|
{ id: 6, zzbm: 'OD', zzmc: '销售部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin4', cjsj: '2022-04-15 10:12:10' },
|
{ id: 7, zzbm: 'OD', zzmc: '销售部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin4', cjsj: '2022-04-15 10:12:10' },
|
{ id: 8, zzbm: 'OD', zzmc: '销售部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin4', cjsj: '2022-04-15 10:12:10' },
|
{ id: 9, zzbm: 'FC', zzmc: '工程部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-16 12:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
|
{ id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' }
|
],
|
filterText: '',
|
tableTreeData: [
|
// { id: 1 ,zzfl:1}
|
],
|
treeData: [
|
{
|
id: 1,
|
label: '一级 1',
|
children: [{
|
id: 4,
|
label: '二级 1-1',
|
children: [{
|
id: 9,
|
label: '三级 1-1-1'
|
}, {
|
id: 10,
|
label: '三级 1-1-2'
|
}]
|
}]
|
}, {
|
id: 2,
|
label: '一级 2',
|
children: [{
|
id: 5,
|
label: '二级 2-1'
|
}, {
|
id: 6,
|
label: '二级 2-2'
|
}]
|
}, {
|
id: 3,
|
label: '一级 3',
|
children: [{
|
id: 7,
|
label: '二级 3-1'
|
}, {
|
id: 8,
|
label: '二级 3-2'
|
}, {
|
id: 19,
|
label: '二级 3-2'
|
}]
|
}],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
iconClass: 'el-icon-caret-right',
|
dialogVisible: true,
|
dialogForm: {
|
zzlx: '',
|
zzbm: '',
|
zzmc: '',
|
sjdw: ''
|
},
|
sjdw: [
|
// { value: '001', label: 'test1' },
|
// { value: '001', label: 'test2' },
|
// { value: '001', label: 'test3' },
|
// { value: '001', label: 'test4' }
|
],
|
operation: ''
|
|
}
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val)
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
// 新增按钮
|
add(val) {
|
this.operation = val
|
this.dialogVisible = true
|
},
|
// 修改按钮
|
edit(val) {
|
this.operation = val
|
this.dialogVisible = true
|
},
|
// 删除按钮
|
del() {
|
|
},
|
// 对话框关闭事件
|
handleClose() {
|
|
},
|
// 对话框取消
|
dialogVisibleCancel() {
|
this.dialogVisible = false
|
},
|
// 对话框确认
|
dialogVisibleConfirm() {
|
console.log(this.dialogForm.zzlx)
|
// this.dialogVisible = false
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 200
|
// this.panelHeight = this.mainHeight - 40
|
this.tableHeight = this.mainHeight - 55
|
})
|
},
|
// 树形过滤节点
|
filterNode(value, data) {
|
if (!value) return true
|
return data.label.indexOf(value) !== -1
|
},
|
// el-icon-circle-plus-outline
|
nodeClick(data, Node, conext) {
|
// console.log(data, Node, conext)
|
console.log(data.id)
|
},
|
headerCellStyle() {
|
const option = {
|
background: '#eee', padding: '5px 0'
|
// border: '1px solid #fff'
|
}
|
return option
|
},
|
cellStyle() {
|
return { padding: '5px 0' }
|
},
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0) {
|
// if (rowIndex % 2 === 0) {
|
return {
|
// rowspan: this.form.pageSize,
|
rowspan: 0,
|
colspan: 0
|
// }
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
::v-deep .el-button--primary {
|
background-color: $main_color !important;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
}
|
|
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
background-color: $main_color !important;
|
}
|
|
.zzflStyle {
|
line-height: 35px;
|
font-family: 'Helvetica Neue';
|
background-color: #eee;
|
font-weight: 400;
|
padding-left: 10px;
|
color: rgb(144, 147, 153);
|
font-size: 14px
|
}
|
|
.footerButton{
|
display: flex;
|
justify-content: end;
|
}
|
::v-deep .el-button--default{
|
background-color: #ffffff !important;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
}
|
|
::v-deep .el-button--default:hover{
|
color: #606266;
|
}
|
::v-deep .el-dialog__body{
|
padding: 20px 100px !important;
|
}
|
|
::v-deep .el-radio__input.is-checked .el-radio__inner{
|
background-color: $main_color;
|
border-color: $main_color;
|
}
|
|
::v-deep .el-radio__input.is-checked+.el-radio__label{
|
color: $main_color !important;
|
}
|
/*::v-deep*/
|
/*.el-icon-caret-right:before {*/
|
/* content: "\e722";*/
|
/*}*/
|
|
/*::v-deep .el-icon-remove-outline:before{*/
|
/* color: #000;*/
|
/* font-size: 15px;*/
|
/*}*/
|
/*::v-deep .el-icon-circle-plus-outline:before{*/
|
/* color: #000;*/
|
/* font-size: 15px;*/
|
/*}*/
|
</style>
|
