demo/demo-web-ui/src/views/organizationManage/organizationManage.vue

<template>
  <div class="container" style="display: flex;">
    <div class="org-tree">
      <el-tree :data="treedata" node-key="sid" :props="props" :default-expanded-keys="['fd6435f2-0005-11ec-a033-48452053aa33']" @node-click="handleNodeClick">
				<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" @click.stop.native>
					<span>{{ node.label || $store.getters.userInfo.Orgname }}</span>
					<span v-show="data.del" class="handle">
						<el-tooltip class="item" effect="dark" content="新增" placement="top-start">
              <el-button type="text" size="mini" @click.stop="() => append(data)" icon="el-icon-circle-plus-outline">
              </el-button>
            </el-tooltip>
            <!--            <el-tooltip v-show="data.sid" class="item" effect="dark" content="修改" placement="top-start">-->
            <!--              <el-button type="text" size="mini" @click.stop="() => deit(data)" icon="el-icon-edit">-->
            <!--              </el-button>-->
            <!--            </el-tooltip>-->
            <!--            <el-tooltip v-show="data.sid" class="item" effect="dark" content="删除" placement="top-start">-->
            <!--              <el-button type="text" size="mini" @click.stop="() => remove(data)" icon="el-icon-delete">-->
            <!--              </el-button>-->
            <!--            </el-tooltip>-->
					</span>
				</span>
      </el-tree>
    </div>
    <el-dialog title="编辑节点" :visible.sync="dialogVisible" width="50%" class="edit">
      <table class="e-table" cellspacing="0">
        <tr>
          <td>组织名称</td>
          <td>
            <el-input v-model="form.name" style="width:300px"></el-input>
          </td>
          <td>组织编码</td>
          <td>
            <el-input v-model="form.orgCode" style="width:300px"></el-input>
          </td>
        </tr>
        <tr>
          <td>主管人员</td>
          <td>
            <el-select v-model="form.zgStaffSid" style="width:300px" filterable>
              <el-option v-for="item in staffdata" :key="item.sid" :label="item.name" :value="item.sid"/>
            </el-select>
          </td>
          <td>分管人员</td>
          <td>
            <el-select v-model="fgStaffSid" style="width:300px" filterable multiple>
              <el-option v-for="item in staffdata2" :key="item.sid" :label="item.name" :value="item.sid"/>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>组织简称</td>
          <td :colspan="3">
            <el-input v-model="form.orgAbbre" style="width: 30%"></el-input>
          </td>
        </tr>
        <tr>
          <td>管理层级</td>
          <td>
            <el-select v-model="form.orgLevelValue" style="width:300px" placeholder="请选择" filterable @change="changeOrgLevel">
              <el-option v-for="item in orgLevel_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
            </el-select>
          </td>
          <td>其他编码</td>
          <td>
            <el-input v-model="form.otherCode" style="width:300px" placeholder="与财务中客户编码相同"></el-input>
          </td>
        </tr>
        <tr>
          <td>组织地址</td>
          <td>
            <el-input v-model="form.addrs" style="width:300px"></el-input>
          </td>
          <td>组织属性</td>
          <td>
            <el-select v-model="form.orgAttributeValue" placeholder="请选择" filterable @change="changeOrgAttribute">
              <el-option v-for="item in orgAttribute_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>组织联系人</td>
          <td>
            <el-input v-model="form.linkPerson" style="width:300px"></el-input>
          </td>

          <td>联系电话</td>
          <td>
            <el-input v-model="form.linkPhone" style="width:300px"></el-input>
          </td>
        </tr>
        <tr>
          <td>是否独立法人</td>
          <td>
            <el-radio v-model="form.isDept" :label="0">是</el-radio>
            <el-radio v-model="form.isDept" :label="1">否</el-radio>
          </td>
          <td>排序号</td>
          <td>
            <el-input v-model="form.sort" style="width:300px"></el-input>
          </td>
        </tr>
      </table>
      <div slot="footer" class="text-center">
        <el-button type="primary" @click="nodeSave()">保 存</el-button>
        <el-button @click="dialogVisible = false">返 回</el-button>
      </div>
    </el-dialog>
    <div class="org-table" v-show="isshow == 'table'">
      <div class="tab-header">
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="组织名称">
                <el-input v-model="page.params.name" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="onSearch()">查询</el-button>
                <el-button @click="resetSearch()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- table -->
      <el-table :data="tableData" default-expand-all border style="width: 100%;">
        <el-table-column label="操作" align="center" width="160px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editRow(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="mini" @click.native.prevent="remove(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="组织名称" align="center"></el-table-column>
        <el-table-column prop="orgCode" label="组织编码" align="center"></el-table-column>
<!--        <el-table-column prop="zgNames" label="主管" align="center"></el-table-column>-->
        <el-table-column prop="fgNames" label="分管" align="center"></el-table-column>
        <!--<el-table-column prop="contactMan" label="联系人" align="center" width="100px"></el-table-column>-->
        <el-table-column prop="linkPhone" label="联系人手机号" width="110" align="center">
        </el-table-column>
        <el-table-column prop="addrs" label="地址" align="center">
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="50px">
        </el-table-column>
        <el-table-column prop="qrText" label="二维码" align="center" width="80px">
          <template slot-scope="scope">
            <el-button @click.native.prevent="lookRow(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
    </div>

    <div class="org-table" v-show="isshow == 'ewm'">
      <div class="tab-header">
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="16">
              <h4 style="margin: 0;line-height: 32px;">组织二维码</h4>
            </el-col>
            <el-col :span="8">
              <el-form-item style="float: right;">
                <el-button type="primary" @click="Printewm">打 印</el-button>
                <el-button @click="isshow = 'table'">返 回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- center -->
      <div class="ewm" style="display: flex;justify-content: center; align-items: center;" ref="print">
        <img style="width: 200px; height: 200px;" :src="ewmForm.qrFilePath" alt="">
        <ul style="list-style:none; line-height: 32px; font-size: 16px;">
          <li><label>组织名称: </label><span>{{ ewmForm.departmentName }}</span></li>
        </ul>
      </div>
    </div>
    <!-- 新增、编辑页面 -->
    <div class="org-table" v-show="isshow == 'edit'">
      <div class="tab-header">
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="16">
              <h4 style="margin: 0;line-height: 32px;"> {{ dialogTitle }}组织信息</h4>
            </el-col>
            <el-col :span="8">
              <el-form-item style="float: right;">
                <el-button type="primary" @click="save()">保 存</el-button>
                <el-button @click="isshow = 'table'">返 回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- center -->
      <div class="ediut">
        <table class="e-table" cellspacing="0">
          <tr>
            <td>组织名称</td>
            <td>
              <el-input v-model="form.name" style="width:300px"></el-input>
            </td>
            <td>组织编码</td>
            <td>
              <el-input v-model="form.orgCode" style="width:300px"></el-input>
            </td>
          </tr>
          <tr>
            <td>主管人员</td>
            <td>
              <el-select v-model="form.zgStaffSid" style="width:300px" filterable>
                <el-option v-for="item in staffdata" :key="item.sid" :label="item.name" :value="item.sid"/>
              </el-select>
            </td>
            <td>分管人员</td>
            <td>
              <el-select v-model="fgStaffSid" style="width:300px" filterable multiple>
                <el-option v-for="item in staffdata2" :key="item.sid" :label="item.name" :value="item.sid"/>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>组织简称</td>
            <td :colspan="3">
              <el-input v-model="form.orgAbbre" style="width: 300px"></el-input>
            </td>
          </tr>
          <tr>
            <td>管理层级</td>
            <td>
              <el-select v-model="form.orgLevelValue" style="width:300px" placeholder="请选择" filterable @change="changeOrgLevel">
                <el-option v-for="item in orgLevel_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
              </el-select>
            </td>
            <td>其他编码</td>
            <td>
              <el-input v-model="form.otherCode" style="width:300px" placeholder="与财务中客户编码相同"></el-input>
            </td>
          </tr>
          <tr>
            <td>组织地址</td>
            <td>
              <el-input v-model="form.addrs" style="width:300px"></el-input>
            </td>
            <td>组织属性</td>
            <td>
              <el-select v-model="form.orgAttributeValue" placeholder="请选择" filterable @change="changeOrgAttribute">
                <el-option v-for="item in orgAttribute_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>组织联系人</td>
            <td>
              <el-input v-model="form.linkPerson" style="width:300px"></el-input>
            </td>
            <td>联系电话</td>
            <td>
              <el-input v-model="form.linkPhone" style="width:300px"></el-input>
            </td>
          </tr>
          <tr>
            <td>是否独立法人</td>
            <td>
              <el-radio v-model="form.isDept" :label="0">是</el-radio>
              <el-radio v-model="form.isDept" :label="1">否</el-radio>
            </td>
            <td>排序号</td>
            <td>
              <el-input v-model="form.sort" style="width:300px"></el-input>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!--  <Position v-if="mapDialog" :address.sync="form.addrs" :maker-position.sync="form.jwd"
                :dialog-visible.sync="mapDialog"/>-->
  </div>
</template>

<script>
import {
  addOrgTree,
  delOrgtree,
  getQrCode, getStaff,
  getStaffName,
  orgList,
  pageList,
  postOrgtree,
  putOrgtree,
  selectBySid
} from '@/api/system/departments/departments.js'
import { typeValues } from '@/api/system/roleAdminister/index'
import Position from '@/components/amap/amap.vue'

export default {
  components: { Position },
  data() {
    return {
      dialogVisible: false,
      mapDialog: false,
      dialogTitle: '',
      props: {
        label: 'name',
        children: 'children'
      },
      nodeForm: {
        sid: '',
        name: '',
        sortNo: ''
      },
      ewmForm: {
        qrFilePath: '',
        organizationName: '',
        departmentName: '',
        address: ''
      },
      orgAttribute_list: [],
      orgLevel_list: [],
      form: {
        sid: '',
        name: '',
        orgCode: '',
        /*  jwd: '',*/
        addrs: '',
        zgStaffSid: '',
        zgStaffName: '',
        fgStaffSid: '',
        fgStaffName: '',
        linkPerson: '',
        linkPhone: '',
        sort: '',
        isDept: '',
        orgAbbre: '',
        orgAttributeValue: '',
        orgAttributeKey: '',
        orgLevelValue: '',
        orgLevelKey: '',
        otherCode: ''
      },
      fgStaffSid: [],
      formBackup: Object.assign({}, this.form),
      isshow: 'table',
      page: {
        total: 0, // 默认数据总数
        current: 1, // 默认开始页面
        size: 10, // 每页的数据条数
        params: {
          name: '',
          organizationSid: '',
          psid: ''
        }
      },
      tableData: [],
      treedata: [],
      staffdata: [],
      staffdata2: [],
      rules: {}
    }
  },
  mounted() {
    this.getOrgTree()
    this.init()
  },
  methods: {
    init() {
      typeValues({ type: 'orgAttribute' }).then((res) => {
        if (res.success) {
          this.orgAttribute_list = res.data
        }
      })
      typeValues({ type: 'orgLevel' }).then((res) => {
        if (res.success) {
          this.orgLevel_list = res.data
        }
      })
    },
    changeOrgLevel(value) {
      let bb = null
      this.orgLevel_list.forEach((e) => {
        if (e.dictValue === value) {
          bb = {
            value: e.dictValue,
            key: e.dictKey
          }
        }
      })
      this.form.orgLevelValue = bb.value
      this.form.orgLevelKey = bb.key
    },
    changeOrgAttribute(value) {
      let bb = null
      this.orgAttribute_list.forEach((e) => {
        if (e.dictValue === value) {
          bb = {
            key: e.dictKey,
            value: e.dictValue
          }
        }
      })
      this.form.orgAttributeKey = bb.key
    },
    pagination(val) { // 分页
      this.page.current = val.pageNum
      this.page.size = val.pageSize
      this.getPageList(this.page)
    },
    handleNodeClick(data) {
      this.isshow = 'table'
      this.page.params.organizationSid = this.$store.getters.userInfo.orgSid
      this.page.params.psid = data.sid || 0

      this.getPageList(this.page)
    },
    getPageList(data) { // 获取树形列表
      pageList(data).then(res => {
        console.log('返回子级:',res)
        this.tableData = res.data.records
        this.page.total = res.data.total
      })
    },
    getOrgTree() { // 获取树形列表
      orgList({}).then(res => {
        this.treedata = res.data
      })
    },
    save() {
      if (this.fgStaffSid.length > 0) {
        this.form.fgStaffSid = this.fgStaffSid.join()
      } else {
        this.form.fgStaffName = ''
        this.form.fgStaffSid = ''
      }
      this.form.organizationSid = this.$store.getters.userInfo.orgSid
//      this.form.dlxx = typeof(this.form.dlxx) == 'string' ? this.form.dlxx : this.form.dlxx.join()
      if (this.form.sid) {
//      	console.log(this.form)
        putOrgtree(this.form).then(res => {
          if (res.success) {
            this.isshow = 'table'
            this.getOrgTree()
            this.handleNodeClick({ sid: this.form.psid })
            this.$message({
              message: res.msg,
              type: 'success'
            })
          }
        })
      } else {
        addOrgTree(this.form).then(res => {
          if (res.success) {
            this.isshow = 'table'
            this.getOrgTree()
            this.handleNodeClick({ sid: this.form.psid })
            this.$message({
              message: res.msg,
              type: 'success'
            })
          }
        })
      }
    },
    append(data) {
      console.log(123456789, data)
      this.dialogTitle = '新增'
      this.isshow = 'edit'
      this.fgStaffSid = []
      this.form = Object.assign({}, this.formBackup)
      this.form.psid = data.sid || 0
      this.form.organizationSid = this.$store.getters.userInfo.orgSid
      this.form.address = data.orgAddress || data.address
      this.form.dlxx = data.gisInfo || data.dlxx
      this.getStaff(data.sid)
      this.getStaff2(data.sid)
    },
    editRow(row) {
      this.getStaff(row.sid)
      this.getStaff2(row.sid)
      this.dialogTitle = '编辑'
      this.isshow = 'edit'
      this.fgStaffSid = []
      selectBySid(row.sid).then((response) => {
        if (response.success) {
          this.form = response.data
          this.form.fgStaffName = response.data.fgNames
          this.form.fgStaffSid = response.data.fgStaffSid
          if (this.form.fgStaffSid) {
            this.fgStaffSid = response.data.fgStaffSid.split(',')
          }
          this.form.zgStaffName = response.data.zgNames
          this.form.zgStaffSid = response.data.zgStaffSid
          console.log('编辑回显的数据', this.form)
        }
      })
    },
    deit(data) { // 节点编辑保存
      this.getStaff(data.sid)
      this.getStaff2(data.sid)
      console.log(data, 8888)
      this.dialogVisible = true
      this.form.sid = data.sid
      // this.form.psid = null
      this.form.name = data.name
      this.form.orgCode = data.orgCode
      /* this.form.jwd = data.jwd*/
      this.form.addrs = data.addrs
      this.form.linkPerson = data.linkPerson
      this.form.linkPhone = data.linkPhone
      this.form.sort = data.sort
      this.form.zgStaffSid = data.zgSids
      this.form.fgStaffSid = data.fgSids.split(',')
    },
    nodeSave() { // 节点编辑保存
      console.log('这是保存nodeSave(0')
      this.form.fgStaffSid = this.form.fgStaffSid.join()
      postOrgtree(this.form).then(res => {
        this.getOrgTree()
        this.dialogVisible = false
        this.$message({
          message: res.msg,
          type: 'success'
        })
      })
    },
    remove(data) {
      this.$confirm('确定要删除该组织吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOrgtree({ sid: data.sid }).then(res => {
          this.getOrgTree()
          this.handleNodeClick({ sid: data.psid })
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      })
    },
    lookRow(row) { // 查看二维码
      this.isshow = 'ewm'
      getQrCode({ sid: row.sid }).then(res => {
        this.ewmForm = res.data
      })
    },
    Printewm() {
      this.$print(this.$refs.print) // 使用
    },
    mouseenter(data) {
      this.$set(data, 'del', true)
    },
    mouseleave(data) {
      this.$set(data, 'del', false)
    },
    onSearch() {
      this.getPageList(this.page)
    },
    resetSearch() {
      this.page.params.name = ''
      this.getPageList(this.page)
    },
    // 主管人员
    getStaff(orgSid) {
      getStaff({ deptSid: orgSid }).then((res) => {
        if (res.success) {
          this.staffdata = res.data
        }
      })
    },
    // 分管人员
    getStaff2(orgSid) {
      getStaffName({ deptSid: orgSid }).then(res => {
        this.staffdata2 = res.data
        console.log('分管人员', this.staffdata2)
      })
    }
  }
}
</script>

<style>
.el-icon-arrow-right:before {
  content: '\e6e0';
  color: #727272;
}
</style>

<style scoped="scoped" lang="scss">
.org-tree {
  width: 240px;
  min-height: 100%;
  box-sizing: border-box;
  /*padding-right: 10px;*/
  border: 1px solid #edf1f7;
  overflow: scroll;
}

.org-table {
  flex: 1;
  // padding-left: 10px;
  margin: 0 10px;
  border: 1px solid #edf1f7;
  min-height: 100%;
  overflow-y: scroll;

  .ewm {
    margin: 30px auto 0;
    width: 560px;
  }

  .ediut {
    margin: 30px auto 0;
    /*width:750px;*/
  }
}

.custom-tree-node {
  position: relative;
  overflow: hidden;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.handle {
  position: absolute;
  right: 0;

  .el-button--text {
    font-size: 15px;
    background-color: #FFFFFF;
  }
}

.my-tabs {
  margin-top: 10px;
}

.edit {
  .el-form-item__label {
    width: 100px !important;
    display: inline-block !important;
  }

  .el-input {
    width: 70%;
  }
}

.td_left {
  border-left: 0 solid #e6e9f0;
}
</style>