| | |
| | | <template> |
| | | <div> |
| | | <div class="body" style="background-color: #ffffff; padding: 20px 10px 0 20px;"> |
| | | <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">新增</el-button> |
| | | <el-button type="primary" icon="el-icon-delete">修改</el-button> |
| | | <el-button type="primary" icon="el-icon-delete">删除</el-button> |
| | | <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"> |
| | |
| | | |
| | | <el-tree |
| | | ref="tree" |
| | | style="margin-left: 10px;overflow-y: scroll;height: 230px" |
| | | :style="{marginLeft: 10+'px',overflowY: 'scroll',height:(tableHeight-140)+'px'}" |
| | | :icon-class="iconClass" |
| | | :data="treeData" |
| | | default-expand-all |
| | |
| | | @node-click="nodeClick" |
| | | /> |
| | | </div> |
| | | <el-table |
| | | v-if="false" |
| | | :data="tableTreeData" |
| | | border |
| | | style="flex: 0.22" |
| | | :span-method="spanMethod" |
| | | :header-cell-style="headerCellStyle" |
| | | > |
| | | |
| | | <el-table-column |
| | | label="组织分类" |
| | | width="300" |
| | | prop="zzfl" |
| | | :resizable="false" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | |
| | | <el-input v-model="filterText" placeholder="请输入内容" /> |
| | | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | | style="width: 72%" |
| | | :style="{width: 72+'%',height:tableHeight+'px'}" |
| | | :header-cell-style="this.$headerCellStyle" |
| | | :cell-style="this.$cellStyle" |
| | | > |
| | |
| | | align="right" |
| | | layout="prev, pager, next,sizes" |
| | | popper-class="select_bottom" |
| | | style="padding: 0;margin-top: 100px" |
| | | /> |
| | | <!-- @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> |
| | | |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | mainHeight: 0, |
| | | tableHeight: 0, |
| | | form: { |
| | | pageNum: 1, // 第几页 |
| | | pageSize: 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: '', |
| | |
| | | children: 'children', |
| | | label: 'label' |
| | | }, |
| | | iconClass: 'el-icon-caret-right' |
| | | 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: '' |
| | | |
| | | } |
| | | }, |
| | |
| | | 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 |
| | |
| | | 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";*/ |