loulijun2021
2022-06-15 edbe2964e959a334e1d9e12717bf854d89d25c92
src/views/jcsz/zzjg.vue
@@ -1,10 +1,10 @@
<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">
@@ -22,7 +22,7 @@
          <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
@@ -33,32 +33,11 @@
            @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"
        >
@@ -113,11 +92,53 @@
        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>
@@ -131,6 +152,8 @@
  },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        pageNum: 1, // 第几页
        pageSize: 10 // 每页多少条
@@ -146,6 +169,16 @@
        { 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: '',
@@ -195,7 +228,21 @@
        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: ''
    }
  },
@@ -207,8 +254,47 @@
  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
@@ -266,6 +352,32 @@
  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";*/