diantou/src_product/iam/audit/map/xm-audit-map-main.vue

<template>
  <a-layout :class="$style.mainDiv">
    <a-layout-header :class="$style.header">
      <div :class="$style.title" />
      <div :class="$style.rightDiv">
        <span :class="$style.righttitle">审计地图</span
        ><div :class="$style.year">
          <a-date-picker
            v-model="planYear"
            :class="$style.yearSelect"
            allow-clear
            mode="year"
            picker="YYYY"
            format="YYYY"
            :input-read-only="true"
            :open="yearOpen"
            placeholder="选择年份"
            @panelChange="panelChange"
            @openChange="openChange"
          />
        </div>
        <div :class="$style.group">
          <div v-show="auditOrg.length === 0" :class="$style.holder" @click="holderClick"
            >审计机构
          </div>
          <a-form-model-item :label="null" prop="auditOrg">
            <!-- <sd-group-picker v-model="auditOrg" :single="true" :root-node="rootNode" /> -->
            <audit-group-picker
              v-model="auditOrg"
              :single="true"
              :read-only="false"
              :root-node="rootNode"
            />
          </a-form-model-item>
        </div>
      </div>
    </a-layout-header>
    <a-layout-content :class="$style.contentDiv">
      <!-- 上部div -->
      <iam-audit-map-top-div
        :class="$style.topDiv"
        :unid-id="auditOrg"
        :plan-year="planYear"
      ></iam-audit-map-top-div>
      <!-- 中部div -->
      <div :class="$style.centerDiv">
        <div :class="$style.centerDivsjzq">审计周期</div>
        <xm-audit-chinamap v-if="type === 'china'"></xm-audit-chinamap>
        <xm-audit-worldmap v-if="type === 'world'"></xm-audit-worldmap>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import auditGroupPicker from '@product/iam/components/picker/audit-group-picker.vue'
import axios from '@/common/services/axios-instance'
import { getUserInfo } from '@/common/store-mixin'
// import iamAuditDscService from './components/iam-audit-dsc-service'
import components from './_import-components/xm-audit-map-main-import'

export default {
  name: 'XmAuditMapMain',
  metaInfo: {
    title: '审计地图',
  },
  components: {
    auditGroupPicker,
    ...components,
  },
  data() {
    return {
      yearOpen: false,
      key: 0,
      auditOrg: [],
      options: [],
      planYear: undefined,
      rootNode: {},
      type: '',
    }
  },
  watch: {
    // 监听数据，更新之后需要刷新图标
    planYear() {
      this.key++
    },
    auditOrg() {
      this.key++
    },
  },

  created() {
    this.type = this.$route?.query.type
    let userInfo = getUserInfo()
    const params = {
      orgId: userInfo.deptId,
    }
    axios({
      url: 'api/xcoa-mobile/v1/iamorg/getCurrentUserGroup',
      method: 'get',
    }).then((res) => {
      userInfo = res.data
      params.orgId = res.data.id
      axios({
        url: 'api/xcoa-mobile/v1/iamorg/findIamOrgId',
        method: 'post',
        params,
      }).then((res) => {
        this.id = res.data
        const deptCode = userInfo.id.toString()
        const deptName = userInfo.name
        this.rootNode = { code: deptCode, name: deptName, id: this.id }
        // bug22421 默认统计机构设置到本机构及一下
        const currNoe = {
          id: userInfo.id,
          // oldId: 0,
          text: deptName,
          name: deptName,
          title: deptName,
          code: deptCode,
          leaf: false,
          isleaf: false,
          props: {},
          children: [],
          differentDisplay: false,
          expandable: true,
          type: 'Group',
        }
        this.auditOrg.push(currNoe)
      })
    })
    // 22738 年份默认为当年
    this.planYear = new Date().getFullYear().toString()
  },
  methods: {
    /**
     * 关闭当前窗口
     */
    closeWindow() {
      window.opener = window
      const win = window.open('', '_self')
      win.close()
    },
    holderClick() {
      document.querySelector('.group_iam-audit-dsc-main_product .ant-select').click()
    },
    /**
     * 打开或关闭年度选择
     */
    openChange(open) {
      this.yearOpen = open
    },
    /**
     * 年份选择时，关闭弹窗
     */
    panelChange(value) {
      this.planYear = value.format('YYYY')
      this.yearOpen = !this.yearOpen
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$header-height: 60px;
.main-div {
  min-height: 100%;
  .header {
    display: flex;
    height: 60px;
    padding: 0 30px;
    font-size: 25px;
    line-height: 60px;
    color: #fff;
    background: url(./mapheaderxx.png) no-repeat;
    background-color: #1b365d;
    background-position: left center;
    background-size: 100%;
    // .title {
    //   float: left;
    //   width: 50%;
    // }
    .title {
      position: relative;
      left: -20px;
      display: inline-block;
      width: 200px;
      height: 100%;
      background: url('~@custom/images/logo.png') no-repeat center;
    }
    .righttitle {
      padding: 0 10px;
      font-size: 22px;
      color: #fff;
    }
    .right-div {
      display: flex;
      justify-content: flex-end;
      width: calc(100% - 220px);
      :global(.ant-form-item-control) {
        :global(.ant-select) {
          width: 200px;
          margin-top: 11px;
          vertical-align: baseline;
          cursor: pointer;
        }
        :global(.ant-select-selection--multiple) {
          cursor: pointer;
        }
        :global(.ant-select-search__field) {
          display: none;
        }
      }
      .year {
        margin-right: 15px;
        .year-select {
          display: block;
          width: 120px;
          margin-top: 15px;
          :global(.ant-calendar-picker-input) {
            color: #fff;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.102);
            border-color: rgba(0, 0, 0, 0.102);
          }
          :global(.ant-calendar-picker-icon) {
            color: #fff;
          }
        }
      }
      .group {
        position: relative;
        .holder {
          position: absolute;
          left: 10px;
          z-index: 1;
          font-size: 16px;
          color: #bfbfbf;
          cursor: pointer;
        }
        :global(.ant-select-selection) {
          overflow-y: hidden;
          background-color: rgba(0, 0, 0, 0.102);
          border-color: rgba(0, 0, 0, 0.102);
          box-shadow:none :global li {
            color: #fff;
            background: none;
            border-color: rgba(0, 0, 0, 0.102);
          }
          :global .anticon {
            color: #fff;
          }
        }
        :global(.ant-select-selection__choice) {
          color: #fff;
          background-color: rgba(0, 0, 0, 0.102);
          border-color: rgba(0, 0, 0, 0.102);
          box-shadow:none :global li {
            color: #fff;
            background: none;
            border-color: rgba(0, 0, 0, 0.102);
          }
          :global .anticon {
            color: #fff;
          }
        }
        :global(.icon_audit-value-picker_product) {
          color: #fff;
        }
      }
      .close {
        margin-left: 15px;
        font-size: 22px;
        cursor: pointer;
      }
    }
  }
  .content-div {
    margin: 20px;
  }
  .top-div {
    background: transparent;
  }
  .center-div {
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
    .center-divsjzq {
      padding: 0 20px;
      margin-left: -20px;
      font-size: 18px;
      color: #000;
      border-left: 4px solid #ec2c2c;
    }
  }
  .bottom-div {
    margin-top: 20px;
  }
}
</style>