tnc-fe/src/views/system/modules/DeptBaseInfo.vue

<template>
  <div :visible="visible">
    <a-descriptions size="small" bordered :column="1">
      <a-descriptions-item label="机构名称">{{model.departName}}</a-descriptions-item>
      <a-descriptions-item label="上级部门"><span>{{model.parentId}}</span></a-descriptions-item>
      <a-descriptions-item label="机构编码"><span>{{model.orgCode}}</span></a-descriptions-item>
<!--      <a-descriptions-item label="机构类型"><span>{{model.orgCategory}}</span></a-descriptions-item>-->
<!--      <a-descriptions-item label="排序"><span>{{model.departOrder}}</span></a-descriptions-item>-->
      <a-descriptions-item label="手机号"><span>{{model.mobile}}</span></a-descriptions-item>
      <a-descriptions-item label="地址"><span>{{model.address}}</span></a-descriptions-item>
      <a-descriptions-item label="备注"><span>{{model.memo}}</span></a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script>
  import { queryIdTree } from '@/api/api'

  export default {
    name: 'DeptBaseInfo',
    components: {},
    data() {
      return {
        departTree: [],
        id: '',
        model: {},
        visible: false,
        disable: true,
        treeData: [],
        labelCol: {
          xs: {span: 24},
          sm: {span: 3}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
      }
    },
    created() {
      this.loadTreeData();
    },
    methods: {
      loadTreeData() {
        queryIdTree().then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i];
              this.treeData.push(temp);
            }
          }

        })
      },
      open(record) {
        this.visible = true;
        //update-begin---author:wangshuai ---date:20220211  for：[JTC-174]部门管理界面参考vue3的改改------------
        this.model = Object.assign({}, record)
        this.model.parentId = this.findTree(this.treeData,record.parentId);
        this.model.orgCategory = this.orgCategoryText(record.orgCategory)
        //update-end---author:wangshuai ---date:20220211  for：[JTC-174]部门管理界面参考vue3的改改------------
        },
      clearForm() {
        this.treeData = [];
      },
      /**
       * 通过父id查找部门名称
       * @param treeList 树数组
       * @param id 父id
       * @return id对应的部门名称
       */
      findTree(treeList,id){
        for (let i = 0; i < treeList.length; i++) {
          let item = treeList[i];
          //如果当前id和父id相同则返回部门名称
          if (item.key == id) {
            return item.title;
          }
          let children = item.children
          //存在子部门进行递归查询
          if(children){
            let findResult = this.findTree(children, id);
            //返回的数据不为空，结束递归，返回结果
            if (findResult) {
              return findResult
            }
          }
        }
      },
      /**
       * 将机构类型数值翻译成文本
       * @param orgCategory 部门类别
       * @return 部门类别对应的文本
       */
      orgCategoryText(orgCategory) {
        if(orgCategory == 1){
          return "公司";
        }else if(orgCategory == 2){
          return "部门";
        }else{
          return "岗位";
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .ant-descriptions-view{
    border: 1px solid #f0f0f0;
  }
  /deep/ .ant-descriptions-item-label{
    width:180px
  }
  /deep/ .ant-descriptions-item-content span{
    color:#000000d9;
  }
  /deep/ .ant-descriptions-bordered .ant-descriptions-row{
    border-bottom: 1px solid #f0f0f0 !important;
  }
  /deep/ .ant-descriptions-bordered .ant-descriptions-item-label{
    border-right:  1px solid #f0f0f0;
  }
</style>