epmet-work-pc/src/views/modules/base/organization/organization.vue

<template>
  <div class="app-container">
    <el-row>
      <el-col
        :span="24"
        style="margin-left: 10px; margin-top: 10px; margin-bottom: 20px"
      >
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="(breadcrumb, index) in breadcrumbArr"
            :key="breadcrumb.id"
          >
            <el-link
              v-if="breadcrumb.id === currentBreadcrumbKey"
              type="primary"
              @click.native="refreshThisPage(index)"
              >{{ breadcrumb.name }}</el-link
            >
            <el-link
              v-else
              type="info"
              @click.native="refreshThisPage(index)"
              >{{ breadcrumb.name }}</el-link
            >
            <el-link
              v-if="index === breadcrumbArr.length - 1"
              type="primary"
              @click.native="modifyOrgInfo"
              style="
                margin-left: 10px;
                margin-top: 0px;
                color: #3e8ef7;
                cursor: pointer;
              "
              icon="el-icon-edit"
              >修改</el-link
            >
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <!-- 组织列表 -->
    <el-table
      v-show="agencyTableFlag"
      height="250"
      :data="agencyTableListData"
      style="width: 100%"
    >
      <el-table-column prop="agencyName" label="下级组织"></el-table-column>
      <el-table-column prop="contacts" label="联系人"></el-table-column>
      <el-table-column prop="mobile" label="联系人电话"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot="header">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addAgency()"
            >新增</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-arrow-right"
            @click="entryAgency(scope.row.agencyId)"
            >进入</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 下级机关单位/基层科室列表 -->
    <el-table
      v-show="departmentTableFlag"
      height="250"
      :data="departmentTableListData"
      style="width: 100%"
    >
      <el-table-column
        prop="departmentName"
        label="下级机关单位/基层科室"
      ></el-table-column>
      <el-table-column
        prop="departmentTypeShow"
        label="部门类型"
      ></el-table-column>
      <el-table-column prop="contacts" label="联系人"></el-table-column>
      <el-table-column prop="mobile" label="联系人电话"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addCommunity(scope.row)"
            >新增</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-arrow-right"
            @click="entryDepartment(scope.row)"
            >进入</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 网格列表 -->
    <el-table
      v-show="gridTableFlag"
      height="250"
      :data="gridTableListData"
      style="width: 100%"
    >
      <el-table-column prop="gridName" label="直属网格"></el-table-column>
      <el-table-column prop="gridTypeName" label="网格类型"></el-table-column>
      <el-table-column prop="contacts" label="联系人"></el-table-column>
      <el-table-column prop="mobile" label="联系人电话"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addGrid(scope.row)"
            >新增</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-arrow-right"
            @click="entryGrid(scope.row.gridId)"
            >进入</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 本级工作人员 -->
    <el-table
      v-show="currentAgencyStaffTableFlag"
      :data="agencyStaffTableListData"
      style="width: 100%"
      height="350"
    >
      <el-table-column
        prop="name"
        label="本级工作人员名字"
        width="260"
      ></el-table-column>
      <el-table-column prop="roles" label="本级工作人员职责" width="260">
        <template slot-scope="scope">
          <el-tag
            type="primary"
            size="mini"
            v-for="(role, index) in scope.row.roles"
            :key="index"
            disable-transitions
            >{{ role }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addPeo(scope.row)"
            >新增</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="xiuPeo(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="success"
            icon="el-icon-view"
            @click="lookAngency(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="info"
            icon="el-icon-rank"
            @click="transfer(scope.row)"
            >调动</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-circle-close"
            @click="DisablePeo(scope.row)"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 下级机关单位/基层科室工作人员 -->
    <el-table
      height="350"
      v-show="departmentStaffTableFlag"
      :data="departmentStaffTableListData"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="下级机关单位/基层科室工作人员"
        width="260"
      ></el-table-column>
      <el-table-column
        prop="roles"
        label="下级机关单位/基层科室工作人员职责"
        width="260"
      >
        <template slot-scope="scope">
          <el-tag
            type="primary"
            size="mini"
            v-for="(role, index) in scope.row.roles"
            :key="index"
            disable-transitions
            >{{ role }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            v-if="selDeptType === 'duty'"
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addCommunityPeo(scope.row)"
            >新增</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="xiuCommunityPeo(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="success"
            icon="el-icon-view"
            @click="lookAngency(scope.row)"
            >查看</el-button
          >
          <el-button
            v-if="selDeptType === 'duty'"
            size="mini"
            type="info"
            icon="el-icon-rank"
            @click="transfer(scope.row)"
            >调动</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-circle-close"
            @click="DisablePeo(scope.row)"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 网格工作人员 -->
    <el-table
      v-show="gridStaffTableFlag"
      :data="gridStaffTableListData"
      style="width: 100%"
      height="350"
    >
      <el-table-column
        prop="name"
        label="网格工作人员名字"
        width="260"
      ></el-table-column>
      <el-table-column prop="roles" label="网格工作人员职责" width="260">
        <template slot-scope="scope">
          <el-tag
            type="primary"
            size="mini"
            v-for="(role, index) in scope.row.roles"
            :key="index"
            disable-transitions
            >{{ role }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="addGridPeo(scope.row)"
            >新增</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            @click="xiuGridPeo(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="success"
            icon="el-icon-view"
            @click="lookAngency(scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="info"
            icon="el-icon-rank"
            @click="transfer(scope.row)"
            >调动</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-circle-close"
            @click="DisablePeo(scope.row)"
            >禁用</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增下级机关单位/基层科室 -->
    <el-dialog
      title="新增部门"
      :visible.sync="dialogVisible"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px" :rules="rules">
        <el-form-item label="部门名称" prop="addDepartmentName">
          <el-input
            v-model="insertForm.departmentName"
            placeholder="请输入部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="组织编码" prop="code">
          <el-input
            v-model="insertForm.code"
            placeholder="请输入组织编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input
            v-model="insertForm.contacts"
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input
            v-model="insertForm.mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增网格 -->
    <div v-if="dialogVisibleGrid">
      <el-dialog
        title="新增网格"
        :visible.sync="dialogVisibleGrid"
        width="850"
        :before-close="handleClose"
      >
        <el-form label-width="120px" :rules="rules">
          <el-form-item label="网格名称" prop="gridName">
            <el-input
              v-model="GridForm.gridName"
              placeholder="请输入部门名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="网格编码" prop="GridCode">
            <el-input
              v-model="GridForm.code"
              placeholder="请输入网格编码"
            ></el-input>
          </el-form-item>

          <!-- 网格类型，下拉框 -->
          <el-form-item label="网格类型" prop="typeTag">
            <el-select
              v-model="GridForm.gridType"
              clearable
              placeholder="网格类型"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系人" prop="GridContacts">
            <el-input
              v-model="GridForm.contacts"
              placeholder="请输入联系人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="GridMobile">
            <el-input
              v-model="GridForm.mobile"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>

          <!-- 组织位置 -->
          <el-form-item label="坐标">
            <div id="con"></div>
          </el-form-item>
        </el-form>

        <div slot="footer">
          <el-button @click="cancelGrid">取 消</el-button>
          <el-button type="primary" @click="submitGrid">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 新增人员 -->
    <div v-if="dialogVisiblePeo">
      <el-dialog
        title="新增人员"
        :visible.sync="dialogVisiblePeo"
        width="850"
        :before-close="handleClose"
      >
        <el-form
          :model="peoForm"
          label-width="120px"
          ref="addPeoForm"
          :rules="rulesPeo"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="peoForm.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="peoForm.mobile"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <!-- 性别下拉框 -->
          <el-form-item label="性别" prop="gender">
            <el-select v-model="peoForm.gender" clearable placeholder="性别">
              <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 专兼职下拉框 -->
          <el-form-item label="专兼职" prop="post">
            <el-select v-model="peoForm.post" clearable placeholder="专兼职">
              <el-option
                v-for="item in postList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 职责下拉框 -->
          <el-form-item label="职责" prop="duty">
            <el-select v-model="peoForm.duty" multiple placeholder="请选择">
              <el-option
                v-for="item in dutyList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="角色" prop="newRoles">
            <el-select v-model="peoForm.newRoles" multiple placeholder="请选择">
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="cancelPeo">取 消</el-button>
          <el-button type="primary" @click="submitPeo">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 人员修改 -->
    <el-dialog
      v-if="modifyPeo"
      title="人员修改"
      :visible.sync="modifyPeo"
      width="850"
      :before-close="handleClose"
    >
      <el-form
        :model="peoForm"
        label-width="120px"
        ref="editPeoForm"
        :rules="rulesPeo"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="peoForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="peoForm.mobile"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="peoForm.gender" clearable placeholder="性别">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专兼职" prop="post">
          <el-select v-model="peoForm.post" clearable placeholder="专兼职">
            <el-option
              v-for="item in postList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职责" prop="duty">
          <el-select v-model="peoForm.duty" multiple placeholder="请选择">
            <el-option
              v-for="item in dutyList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="newRoles">
          <el-select v-model="peoForm.newRoles" multiple placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelXiugai">取 消</el-button>
        <el-button type="primary" @click="updatePeo">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 禁用弹窗 -->
    <el-dialog
      v-if="Disable"
      title="确认禁用"
      :visible.sync="Disable"
      width="850"
      :before-close="handleClose"
    >
      <span>禁用后该用户将无法登录系统，是否继续？</span>
      <div slot="footer">
        <el-button @click="cancelDisable">取 消</el-button>
        <el-button type="primary" @click="submitDisable">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 人员查看 -->
    <el-dialog
      v-if="details"
      title="人员详情"
      :visible.sync="details"
      width="850"
      :before-close="handleClosePeoView"
    >
      <el-form label-width="120px">
        <el-form-item label="姓名">
          <el-input
            v-model="peoForm.name"
            placeholder="姓名"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="peoForm.mobile"
            placeholder="手机号"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="组织/部门">
          <el-input
            v-model="peoForm.zuzhi"
            placeholder="组织/部门"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="激活时间">
          <el-input
            v-model="peoForm.activeTime"
            placeholder="激活时间"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input
            v-model="peoForm.duty"
            placeholder="职位"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-input
            v-model="peoForm.disableFlag"
            placeholder="是否禁用"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="primary"
          style="margin-right: 170px"
          @click="cancelDetails"
          >关 闭</el-button
        >
      </div>
    </el-dialog>

    <!-- 人员调动 -->
    <el-dialog
      v-if="transferPeo"
      title="人员调动"
      :visible.sync="transferPeo"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px" :model="agencyForm">
        <el-form-item label="姓名">
          <el-input v-model="transferForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="调动至">
          <el-cascader
            clearable
            :props="{ checkStrictly: true, multiple: false }"
            v-model="selectValue"
            :options="options"
            style="width: 100%"
            @change="handleChangeTransferCascader"
          >
            <template slot-scope="{ data }">
              <span>{{ data.label }}</span>
              <span
                v-if="data.type != 'agency'"
                style="color: #aaa; font-size: 12px"
                >（{{ data.typeName }}）
              </span>
            </template>
          </el-cascader>
        </el-form-item>
        <el-form-item label="调动原因">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            maxlength="500"
            show-word-limit
            v-model="transferForm.remarks"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelTransfer">取 消</el-button>
        <el-button type="primary" @click="submitTransfer">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增组织 -->
    <el-dialog
      v-if="createAgencyDialogFlag"
      title="新增组织"
      :visible.sync="createAgencyDialogFlag"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="组织名称">
          <el-input
            v-model="agencyForm.agencyName"
            placeholder="请输入组织名称"
          ></el-input>
        </el-form-item>

        <!-- 组织区划 -->
        <el-form-item label="组织区划">
          <el-select
            v-model="agencyForm.areaCode"
            placeholder="请选择组织区划"
            @change="handelZoing"
          >
            <el-option
              v-for="item in zonings"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="组织编码">
          <el-input
            v-model="agencyForm.code"
            placeholder="请输入组织编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="agencyForm.contacts"
            placeholder="请输入负责人名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="agencyForm.mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="坐标">
          <div id="con"></div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="canceladdNewAgency">取 消</el-button>
        <el-button type="primary" @click="submitaddNewAgency">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改市区级组织 -->
    <el-dialog
      v-if="modifyCityOrgPop"
      title="修改组织"
      :visible.sync="modifyCityOrgPop"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="组织名称">
          <el-input
            v-model="OrgDetailsForm.agencyName"
            placeholder="请输入组织名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="组织编码">
          <el-input
            v-model="OrgDetailsForm.code"
            placeholder="请输入组织编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="OrgDetailsForm.contacts"
            placeholder="请输入负责人名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="OrgDetailsForm.mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="坐标">
          <div id="con"></div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelModifyCityOrgPop">取 消</el-button>
        <el-button type="primary" @click="sunmitModifyCityOrgPop"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改街道/社区级组织 -->
    <el-dialog
      v-if="streetOrCommunity"
      title="修改组织"
      :visible.sync="streetOrCommunity"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="组织名称">
          <el-input
            v-model="OrgDetailsForm.agencyName"
            placeholder="请输入组织名称"
          ></el-input>
        </el-form-item>

        <!-- 组织区划 -->
        <el-form-item label="组织区划">
          <el-select
            v-model="OrgDetailsForm.areaCode"
            placeholder="请选择组织区划"
            @change="handelStreeOrCommunityZoing"
          >
            <el-option
              v-for="item in zonings"
              :key="item.areaCode"
              :label="item.areaName"
              :value="item.areaCode"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="组织编码">
          <el-input
            v-model="OrgDetailsForm.code"
            placeholder="请输入组织编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="OrgDetailsForm.contacts"
            placeholder="请输入负责人名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="OrgDetailsForm.mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="坐标">
          <div id="con"></div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelstreetOrCommunity">取 消</el-button>
        <el-button type="primary" @click="sunmitModifyCityOrgPop"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改下级机关单位 -->
    <el-dialog
      v-if="OrgUnitPop"
      title="修改部门"
      :visible.sync="OrgUnitPop"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="部门名称">
          <el-input
            v-model="OrgUnitDetailsForm.departmentName"
            placeholder="请输入组织名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="组织编码">
          <el-input
            v-model="OrgUnitDetailsForm.code"
            placeholder="请输入组织编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            v-model="OrgUnitDetailsForm.contacts"
            placeholder="请输入负责人名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="OrgUnitDetailsForm.mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelOrgUnitPop">取 消</el-button>
        <el-button type="primary" @click="sunmitOrgUnitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改网格 -->
    <el-dialog
      v-if="modifyGridPop"
      title="修改网格"
      :visible.sync="modifyGridPop"
      width="850"
      :before-close="handleClose"
    >
      <el-form label-width="120px">
        <el-form-item label="网格名称">
          <el-input
            v-model="modifyGridFrom.gridName"
            placeholder="请输入组织名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="组织编码">
          <el-input
            v-model="modifyGridFrom.code"
            placeholder="请输入组织编码"
          ></el-input>
        </el-form-item>

        <!-- 网格类型下拉框 -->
        <el-form-item label="网格类型" prop="typeTag">
          <el-select
            v-model="modifyGridFrom.gridType"
            clearable
            placeholder="网格类型"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 排序 -->
        <el-form-item label="排序">
          <el-input-number
            v-model="modifyGridFrom.gridSort"
            :min="1"
            label="排序"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="负责人">
          <el-input
            v-model="modifyGridFrom.contacts"
            placeholder="请输入负责人名字"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="modifyGridFrom.mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>

        <!-- 组织位置,地图 -->
        <el-form-item label="坐标">
          <div id="con"></div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelModifyGridPop">取 消</el-button>
        <el-button type="primary" @click="submitModifyGrid">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";

export default {
  data() {
    return {
      // 新增组织弹窗
      createAgencyDialogFlag: false,
      // 修改市区级组织弹窗
      modifyCityOrgPop: false,
      // 修改街道/社区级组织弹窗
      streetOrCommunity: false,
      // 修改下级机关单位弹窗
      OrgUnitPop: false,
      // 修改网格弹窗
      modifyGridPop: false,
      // 组织列表展示标识
      agencyTableFlag: true,
      // 组织工作人员列表展示标识
      currentAgencyStaffTableFlag: true,
      // 组织列表数据
      agencyTableListData: [],
      // 组织工作人员列表数据
      agencyStaffTableListData: [],

      // 部门列表（机关、科室列表）列表展示标识
      departmentTableFlag: true,
      // 部门人员列表展示标识
      departmentStaffTableFlag: false,
      // 部门列表数据
      departmentTableListData: [],
      // 部门工作人员列表数据
      departmentStaffTableListData: [],

      // 网格列表展示标识
      gridTableFlag: true,
      // 网格人员列表展示标识
      gridStaffTableFlag: false,
      // 网格列表数据
      gridTableListData: [],
      // 网格工作人员列表数据
      gridStaffTableListData: [],

      // 用户所属组织ID
      userAgencyId: localStorage.getItem("agencyId"),
      // 修改时操作的用户staffId
      userStaffId: "",
      // 当前被操作的组织的ID
      currentAgencyId: localStorage.getItem("agencyId"),
      // 当前被操作的部门的ID
      currentDepartmentId: "14f572e724eecf7668b655505d789cab",
      // 当前被操作的网格的ID
      currentGridOrgId: "63d5ff92ea981b1c58e4914ac894c610",

      // 当前被操作的组织的级别
      currentAgencyLevel: localStorage.getItem("level"),
      currentAreaCode: "",
      parentAreaCode: "",
      parentAgencyId: localStorage.getItem("agencyId"),
      parentAgencyLevel: localStorage.getItem("level"),

      // 经纬度坐标
      lat: "",
      lng: "",
      latitude: "",
      longitude: "",
      Navigation: "",
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      // 状态列表
      dictList: [],
      // 重新渲染表格状态
      refreshTable: true,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 表格树数据
      deptList: [],

      // 弹窗开关
      dialogVisible: false,
      dialogVisibleGrid: false,
      dialogVisiblePeo: false,
      Disable: false,
      details: false,
      transferPeo: false,
      // 社区添加表单项
      insertForm: {
        departmentName: "",
        code: "",
        contacts: "",
        mobile: "",
        agencyId: "",
        departmentDuty: "123",
      },
      // 网格添加表单项
      GridForm: {
        gridName: "",
        code: "",
        contacts: "",
        mobile: "",
        agencyId: "",
        manageDistrict: "",
        gridType: "",
        location: "", //坐标位置
        longitude: "", //经度
        latitude: "", //纬度
        centerAddress: "",
      },
      // 新增组织
      agencyForm: {
        parentAgencyId: "",
        agencyName: "",
        level: "",
        areaCodeSwitch: "",
        areaCode: "",
        areaName: "",
        contacts: "",
        mobile: "",
        code: "",
      },
      // 树
      tree: [],
      // 新增人员表单项
      peoForm: {
        name: "",
        mobile: "",
        gender: "",
        post: "",
        duty: [],
        orgType: "",
        activeTime: "",
        zuzhi: "",
        disableFlag: "",
        newRoles: [],
      },
      // 人员调动
      transferForm: {
        name: "",
        remarks: "",
        transferTo: "",
        staffId: "",
        orgId: "",
        orgType: "",
      },
      // 人员禁用
      DisableForm: {
        staffId: "",
        agencyId: "",
        customerId: "",
      },
      // 组织详细信息
      OrgDetailsForm: {
        level: "",
        agencyName: "",
        code: "",
        contacts: "",
        mobile: "",
        centerAddress: "",
        areaCode: "",
        agencyId: "",
        areaName: "",
      },
      // 下级机关单位
      OrgUnitDetailsForm: {
        code: "",
        contacts: "",
        departmentId: "",
        departmentName: "",
        mobile: "",
      },
      // 网格修改表单
      modifyGridFrom: {
        gridName: "",
        code: "",
        gridTypeName: "",
        contacts: "",
        mobile: "",
        latitude: "",
        longitude: "",
        agencyId: "",
        gridType: "",
        manageDistrict: "",
        griId: "",
        // 排序
        gridSort: 0,
      },
      judgeOrgInfoLevel: [],
      keyWords: "",
      typeList: [],
      // 性别字典
      genderList: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
        { value: 0, label: "未知" },
      ],
      // 专兼职字典
      postList: [
        { value: "fulltime", label: "专职" },
        { value: "parttime", label: "兼职" },
      ],
      // 职责字典
      dutyList: [],
      // 修改操作是否展示
      modifyPeo: false,

      roleList: [],

      // 级联数据
      options: [],
      selectValue: [],
      // 顶部 面包屑
      breadcrumbArr: [],
      // 面包屑 当前所属机构ID
      currentBreadcrumbKey: "",
      // 组织区划数据
      zonings: [],
      // 校验
      rules: {
        departmentName: [
          { required: true, message: "社区名称必填", trigger: "blur" },
        ],
        gridName: [
          { required: true, message: "网格名称必填", trigger: "blur" },
        ],
        addDepartmentName: [
          { required: true, message: "部门名称必填", trigger: "blur" },
        ],
      },

      rulesPeo: {
        name: [{ required: true, message: "姓名必填", trigger: "blur" }],
        mobile: [{ required: true, message: "手机号必填", trigger: "blur" }],
        gender: [{ required: true, message: "性别必填", trigger: "blur" }],
        post: [{ required: true, message: "专兼职必填", trigger: "blur" }],
        duty: [{ required: true, message: "职责必填", trigger: "blur" }],
        newRoles: [{ required: true, message: "角色必填", trigger: "blur" }],
      },

      selDeptType: "",
    };
  },
  created() {
    this.getAgencyList();
    this.getDepartmentList();
    this.getGridList();
    this.getAgencyStaffListData();
    this.getDutyList();
    this.getRoleList();
    // this.getNavigation()
    // 更新顶部面包屑
    this.assembleBreadcrumbArr(localStorage.getItem("agencyId"), "agency");
  },

  watch: {
    dialogVisibleGrid(val) {
      if (val) {
        setTimeout(() => {
          this.createMap();
        }, 1000);
      }
    },
    createAgencyDialogFlag(val) {
      if (val) {
        setTimeout(() => {
          this.createMap();
        }, 1000);
      }
    },
    modifyCityOrgPop(val) {
      if (val) {
        setTimeout(() => {
          this.createMap();
        }, 1000);
      }
    },
    streetOrCommunity(val) {
      if (val) {
        setTimeout(() => {
          this.createMap();
        }, 1000);
      }
    },
    modifyGridPop(val) {
      if (val) {
        setTimeout(() => {
          this.createMap();
        }, 1000);
      }
    },
  },
  mounted() {
    // this.initMap()
  },
  methods: {
    // 点击后获取id
    handleChangeTransferCascader(e) {
      console.log("*********************");
      function findItem(valueArr, coll) {
        console.log("--------------------");
        console.log(valueArr);
        let copyArr = [...valueArr];
        let firstValue = copyArr.shift();
        let item = coll.find((a) => a.value == firstValue);
        console.log(item);
        if (copyArr.length > 0) {
          return findItem(copyArr, item.children);
        } else {
          return item;
        }
      }
      let item = findItem(e, this.options);
      this.transferForm.orgId = item.value;
      this.transferForm.orgType = item.type;
    },
    /** 查询系统工作人员角色（职责） */
    async getDutyList() {
      const url = "/gov/org/staff/rolelist";
      let params = {
        agencyId: this.currentAgencyId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.dutyList = data;
      } else {
        this.$message.error(msg);
      }
    },
    /** 查询系统工作人员角色（职责） */
    async getRoleList() {
      this.tableLoading = true;

      const url = "/gov/access/govrole/list";

      let params = {};

      const { data, code, msg } = await requestGet(url, params);

      if (code === 0) {
        this.roleList = data;
      } else {
        this.$message.error(msg);
      }
      this.tableLoading = false;
    },
    /** 查询组织列表 */
    async getAgencyList() {
      const url = "/gov/org/agency/agencylist";
      let params = {
        agencyId: this.currentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.agencyTableListData = data;
      } else {
        this.$message.error(msg);
      }
    },
    /** 查询社区列表 */
    async getDepartmentList() {
      const url = "/gov/org/department/departmentlist";

      let params = {
        agencyId: this.currentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.departmentTableListData = data;

        this.departmentTableListData.forEach((element) => {
          if (element.deptType === "duty") {
            element.departmentTypeShow = "职能部门";
          } else if (element.deptType === "party_unit") {
            element.departmentTypeShow = "联建单位";
          } else if (element.deptType === "community_org") {
            element.departmentTypeShow = "社会自组织";
          } else {
            element.departmentTypeShow = "";
          }
        });
      } else {
        this.$message.error(msg);
      }
    },
    /** 查询网格列表 */
    async getGridList() {
      const url = "/gov/org/grid/allgrids";

      let params = {
        agencyId: this.currentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.gridTableListData = data;
      } else {
        this.$message.error(msg);
      }
    },

    // 查询网格人员列表
    async getGridStaffListData() {
      const url = "/data/aggregator/org/stafflist";

      let params = {
        orgId: this.currentGridOrgId,
        orgType: "grid",
        pageNo: 1,
        pageSize: 100,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.gridStaffTableListData = data.staffList;
      } else {
        this.$message.error(msg);
      }
    },
    // 查询组织工作人员
    async getAgencyStaffListData() {
      const url = "/data/aggregator/org/stafflist";

      let params = {
        orgId: this.currentAgencyId,
        orgType: "agency",
        pageNo: 1,
        pageSize: 100,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.agencyStaffTableListData = data.staffList;
      } else {
        this.$message.error(msg);
      }
    },

    // 查询部门人员
    async getDepartmentStaffListData() {
      const url = "/data/aggregator/org/stafflist";

      let params = {
        orgId: this.currentDepartmentId,
        orgType: "dept",
        pageNo: 1,
        pageSize: 100,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.departmentStaffTableListData = data.staffList;
      } else {
        this.$message.error(msg);
      }
    },
    // 添加组织
    async submit() {
      const url = "/gov/org/department/adddepartment";

      let params = {
        agencyId: this.insertForm.agencyId,
        departmentName: this.insertForm.departmentName,
        departmentDuty: this.insertForm.departmentDuty,
        contacts: this.insertForm.contacts,
        mobile: this.insertForm.mobile,
        code: this.insertForm.code,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("添加成功");
        this.dialogVisible = false;
        this.insertForm = [];
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
      } else {
        this.$message.error(msg);
      }
    },
    // 添加网格
    async submitGrid() {
      const url = "/gov/org/grid/addgrid";

      let params = {
        agencyId: this.GridForm.agencyId,
        gridName: this.GridForm.gridName,
        contacts: this.GridForm.contacts,
        mobile: this.GridForm.mobile,
        code: this.GridForm.code,
        manageDistrict: this.GridForm.manageDistrict,
        gridType: this.GridForm.gridType,
        latitude: this.lat,
        longitude: this.lng,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("添加成功");
        this.dialogVisibleGrid = false;
        this.GridForm = [];
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
      } else {
        this.$message.error(msg);
      }
    },

    async submitPeo() {
      this.$refs["addPeoForm"].validate((valid, err) => {
        if (valid) {
          this.submitPeoDo();
        } else {
          app.util.validateRule(err);
          return console.log("error submit!!", valid, err);
        }
      });
    },

    // 添加人员
    async submitPeoDo() {
      const url = "/gov/org/staff/addstaffv2";
      const {
        peoForm: { orgType },
      } = this;
      let params = {
        orgType: this.peoForm.orgType,
        name: this.peoForm.name,
        mobile: this.peoForm.mobile,
        gender: this.peoForm.gender,
        workType: this.peoForm.post,
        roles: this.peoForm.duty,
        newRoles: this.peoForm.newRoles,
        orgId:
          orgType == "agency"
            ? this.currentAgencyId
            : orgType == "dept"
            ? this.currentDepartmentId
            : this.currentGridOrgId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("添加成功");
        this.dialogVisiblePeo = false;
        this.peoForm = [];
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
        this.insertFormRest();
        if (orgType == "dept") {
          this.getDepartmentStaffListData();
        } else if (orgType == "grid") {
          this.getGridStaffListData();
        } else {
          this.getAgencyStaffListData();
        }
      } else {
        this.$message.error(msg);
      }
    },

    async updatePeo() {
      this.$refs["editPeoForm"].validate((valid, err) => {
        if (valid) {
          this.updatePeoDo();
        } else {
          app.util.validateRule(err);
          return console.log("error updatePeo!!", valid, err);
        }
      });
    },
    // 人员修改
    async updatePeoDo() {
      const url = "/gov/org/staff/editstaff";

      let params = {
        staffId: this.userStaffId,
        name: this.peoForm.name,
        mobile: this.peoForm.mobile,
        // gender: this.peoForm.gender === '男' ? 1 : 0,
        gender: this.peoForm.gender,
        workType: this.peoForm.post,
        roles: this.peoForm.duty,
        newRoles: this.peoForm.newRoles,
        agencyId: this.currentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("修改成功");
        this.modifyPeo = false;

        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
        this.getDepartmentStaffListData();
        this.getGridStaffListData();
        this.insertFormRest();
      } else {
        this.$message.error(msg);
      }
    },

    // 字典
    async getDictionaries() {
      const url = "/sys/dict/data/dictlist";

      let params = {
        dictType: "grid_type",
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.typeList = data;
      } else {
        this.$message.error(msg);
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.deptName = undefined;
      this.queryParams.status = undefined;
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.dialogVisible = true;
    },
    // 社区弹框关闭函数
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.insertFormRest();
          done();
        })
        .catch((_) => {});
    },
    // 人员查看叉号关闭
    handleClosePeoView(done) {
      this.insertFormRest();
      done();
    },
    // 社区新增弹框重置函数
    insertFormRest() {
      this.insertForm.name = "";
      this.insertForm.contacts = "";
      this.insertForm.code = "";
      this.insertForm.mobile = "";
      this.insertForm.departmentName = "";

      this.peoForm = {
        name: "",
        mobile: "",
        gender: "",
        post: "",
        duty: [],
        orgType: "",
        activeTime: "",
        zuzhi: "",
        disableFlag: "",
        newRoles: [],
      };
    },
    // 网格新增弹框重置函数
    GridFormRest() {
      (this.GridForm.gridName = ""),
        (this.GridForm.code = ""),
        (this.GridForm.centerAddress = ""),
        (this.GridForm.contacts = ""),
        (this.GridForm.mobile = ""),
        (this.GridForm.agencyId = ""),
        (this.GridForm.manageDistrict = ""),
        (this.GridForm.gridType = ""),
        (this.GridForm.location = ""),
        (this.GridForm.longitude = ""),
        (this.GridForm.latitude = "");
    },
    /** 人员清空 */
    peoFormRest() {
      (this.peoForm.name = ""),
        (this.peoForm.mobile = ""),
        (this.peoForm.gender = ""),
        (this.peoForm.post = ""),
        (this.peoForm.duty = "");
      this.peoForm.newRoles = [];
    },
    // 人员调动
    transferRest() {
      (this.transferForm.name = ""),
        (this.transferForm.remarks = ""),
        (this.transferForm.transferTo = "");
      (this.transferForm.staffId = ""),
        (this.transferForm.orgId = ""),
        (this.transferForm.orgType = "");
      this.selectValue = "";
      this.options[0] = [];
    },
    // 新增组织
    addNewAgencyRest() {
      (this.agencyForm.parentAgencyId = ""),
        (this.agencyForm.agencyName = ""),
        (this.agencyForm.level = ""),
        (this.agencyForm.areaCodeSwitch = ""),
        (this.agencyForm.areaCode = ""),
        (this.agencyForm.areaName = ""),
        (this.agencyForm.contacts = ""),
        (this.agencyForm.mobile = ""),
        (this.agencyForm.code = ""),
        (this.latitude = ""),
        (this.longitude = "");
    },
    // 修改市级组织
    cancelModifyCityOrgPopRest() {
      (this.OrgDetailsForm.level = ""),
        (this.OrgDetailsForm.agencyName = ""),
        (this.OrgDetailsForm.code = ""),
        (this.OrgDetailsForm.contacts = ""),
        (this.OrgDetailsForm.mobile = ""),
        (this.OrgDetailsForm.centerAddress = ""),
        (this.OrgDetailsForm.areaCode = "");
      this.OrgDetailsForm.agencyId = "";
      (this.latitude = ""), (this.longitude = "");
    },
    // 修改下级机关单位
    OrgUnitDetailsRest() {
      (this.OrgUnitDetailsForm.code = ""),
        (this.OrgUnitDetailsForm.contacts = ""),
        (this.OrgUnitDetailsForm.departmentId = ""),
        (this.OrgUnitDetailsForm.departmentName = ""),
        (this.OrgUnitDetailsForm.mobile = "");
    },
    // 修改网格清空
    ModifyGridPopRest() {
      (this.modifyGridFrom.gridName = ""),
        (this.modifyGridFrom.code = ""),
        (this.modifyGridFrom.gridTypeName = ""),
        (this.modifyGridFrom.contacts = ""),
        (this.modifyGridFrom.mobile = ""),
        (this.latitude = ""),
        (this.longitude = ""),
        (this.modifyGridFrom.agencyId = ""),
        (this.modifyGridFrom.gridType = ""),
        (this.modifyGridFrom.manageDistrict = ""),
        (this.modifyGridFrom.griId = "");
    },
    // 社区新增弹框取消按钮
    cancel() {
      this.dialogVisible = false;
      this.insertFormRest();
    },
    // 网格新增弹框取消按钮
    cancelGrid() {
      this.dialogVisibleGrid = false;
      this.GridFormRest();
    },
    /** 取消按钮 */
    cancelPeo() {
      this.dialogVisiblePeo = false;
      this.peoFormRest();
    },
    // 修改取消
    cancelXiugai() {
      this.modifyPeo = false;
      this.peoFormRest();
    },
    // 查看弹窗
    cancelDetails() {
      this.details = false;
    },
    /** 人员调动取消按钮 */
    cancelTransfer() {
      this.transferRest();
      this.transferPeo = false;
    },
    // 新增组织取消按钮
    canceladdNewAgency() {
      this.addNewAgencyRest();
      this.createAgencyDialogFlag = false;
    },
    // 修改市级组织取消按钮
    cancelModifyCityOrgPop() {
      this.cancelModifyCityOrgPopRest();
      this.modifyCityOrgPop = false;
    },
    // 修改街道/社区级取消按钮
    cancelstreetOrCommunity() {
      this.cancelModifyCityOrgPopRest();
      this.streetOrCommunity = false;
    },
    // 取消修改下级机关单位按钮
    cancelOrgUnitPop() {
      this.OrgUnitPop = false;
      this.OrgUnitDetailsRest();
    },
    // 取消修改网格按钮
    cancelModifyGridPop() {
      this.modifyGridPop = false;
      this.ModifyGridPopRest();
    },
    // 进入网格，查询网格所属人员
    entryGrid(gridId) {
      console.log(gridId);
      this.gridStaffTableListData = [];
      this.departmentStaffTableListData = [];
      this.agencyStaffTableListData = [];
      this.currentGridOrgId = gridId;
      this.gridStaffTableFlag = true;
      this.departmentStaffTableFlag = false;
      this.currentAgencyStaffTableFlag = false;
      this.agencyTableFlag = false;
      this.departmentTableFlag = false;
      this.gridTableFlag = false;
      this.getGridStaffListData();
      this.assembleBreadcrumbArr(gridId, "grid");
    },
    // 进入部门，查询部门所属人员
    entryDepartment(row) {
      console.log(row);
      this.gridStaffTableListData = [];
      this.departmentStaffTableListData = [];
      this.agencyStaffTableListData = [];
      this.currentDepartmentId = row.departmentId;
      this.departmentStaffTableFlag = true;
      this.currentAgencyStaffTableFlag = false;
      this.gridStaffTableFlag = false;
      this.gridTableFlag = false;
      this.agencyTableFlag = false;
      this.departmentTableFlag = false;

      this.selDeptType = row.deptType;
      this.getDepartmentStaffListData();
      this.assembleBreadcrumbArr(row.departmentId, "department");
    },

    // 进入组织，重新渲染
    entryAgency(agencyId) {
      this.currentAgencyId = agencyId;

      this.agencyTableListData = [];
      this.departmentTableListData = [];
      this.gridTableListData = [];
      this.gridStaffTableListData = [];
      this.agencyStaffTableListData = [];
      this.departmentStaffTableListData = [];

      this.getDepartmentList();
      this.getGridList();
      this.getAgencyStaffListData();
      this.getAgencyList();
      this.assembleBreadcrumbArr(agencyId, "agency");
    },
    // 新增组织
    addCommunity(row) {
      this.insertForm.agencyId = this.currentAgencyId;
      this.dialogVisible = true;
    },
    // 新增网格
    addGrid(row) {
      this.GridForm.agencyId = this.currentAgencyId;
      this.getDictionaries();
      this.dialogVisibleGrid = true;
    },

    // 新增人员
    addPeo(row) {
      this.dialogVisiblePeo = true;
      this.peoForm.orgType = "agency";
    },

    // 新增社区人员
    addCommunityPeo() {
      this.dialogVisiblePeo = true;
      this.peoForm.orgType = "dept";
    },

    // 新增网格人员
    addGridPeo() {
      this.dialogVisiblePeo = true;
      this.peoForm.orgType = "grid";
    },
    // 修改网格人员
    async xiuGridPeo(row) {
      this.modifyPeo = true;
      this.peoForm.orgType = "grid";

      this.userStaffId = row.staffId;

      const url = "/gov/org/staff/editstaffinit";
      let params = {
        staffId: row.staffId,
        agencyId: this.currentAgencyId,
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.peoForm.name = data.name;
        this.peoForm.mobile = data.mobile;
        // this.peoForm.gender = data.gender === 1 ? '男' : '女'
        this.peoForm.gender = data.gender;
        this.peoForm.post = data.workType;
        // 已有的权限（职责）
        let existedDutyArr = [];
        data.roleList.forEach(function (sysDuty) {
          if (sysDuty.selected === true) {
            existedDutyArr.push(sysDuty.roleId);
          }
        });
        this.peoForm.duty = existedDutyArr;
        // 已有的权限（角色）
        let existedRoleArr = [];
        data.newRoleList.forEach(function (sysRole) {
          if (sysRole.selected === true) {
            existedRoleArr.push(sysRole.roleId);
          }
        });
        this.peoForm.newRoles = existedRoleArr;
      } else {
        this.$message.error(msg);
      }
    },
    // 修改人员
    async xiuPeo(row) {
      this.modifyPeo = true;
      this.peoForm.orgType = "agency";

      this.userStaffId = row.staffId;

      const url = "/gov/org/staff/editstaffinit";

      let params = {
        staffId: row.staffId,
        agencyId: this.currentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.peoForm.name = data.name;
        this.peoForm.mobile = data.mobile;
        this.peoForm.post = data.workType;
        // this.peoForm.gender = data.gender === 1 ? '男' : '女'
        this.peoForm.gender = data.gender;
        // 已有的权限（职责）
        let existedDutyArr = [];
        data.roleList.forEach(function (sysDuty) {
          if (sysDuty.selected === true) {
            existedDutyArr.push(sysDuty.roleId);
          }
        });
        this.peoForm.duty = existedDutyArr;
        // 已有的权限（角色）
        let existedRoleArr = [];
        data.newRoleList.forEach(function (sysRole) {
          if (sysRole.selected === true) {
            existedRoleArr.push(sysRole.roleId);
          }
        });
        this.peoForm.newRoles = existedRoleArr;
      } else {
        this.$message.error(msg);
      }
    },
    // 修改社区人员
    async xiuCommunityPeo(row) {
      this.modifyPeo = true;
      this.peoForm.orgType = "dept";

      this.userStaffId = row.staffId;

      const url = "/gov/org/staff/editstaffinit";

      let params = {
        staffId: row.staffId,
        agencyId: this.currentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.peoForm.name = data.name;
        this.peoForm.mobile = data.mobile;
        // this.peoForm.gender = data.gender === 1 ? '男' : '女'
        this.peoForm.gender = data.gender;
        this.peoForm.post = data.workType;
        // 已有的权限（职责）
        let existedDutyArr = [];
        data.roleList.forEach(function (sysDuty) {
          if (sysDuty.selected === true) {
            existedDutyArr.push(sysDuty.roleId);
          }
        });
        this.peoForm.duty = existedDutyArr;
        // 已有的权限（角色）
        let existedRoleArr = [];
        data.newRoleList.forEach(function (sysRole) {
          if (sysRole.selected === true) {
            existedRoleArr.push(sysRole.roleId);
          }
        });
        this.peoForm.newRoles = existedRoleArr;
      } else {
        this.$message.error(msg);
      }
    },
    // 取消禁用按钮
    cancelDisable() {
      this.Disable = false;
    },
    // 人员禁用
    DisablePeo(row) {
      this.DisableForm.staffId = row.staffId;
      this.Disable = true;
    },
    // 确定禁用
    async submitDisable() {
      const url = "/epmetuser/customerstaff/disabledstaff";

      let params = {
        staffId: this.DisableForm.staffId,
        agencyId: this.DisableForm.agencyId,
        customerId: this.DisableForm.customerId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("禁用成功");
        this.Disable = false;
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
      } else {
        this.$message.error(msg);
      }
    },
    // 查看按钮
    async lookAngency(row) {
      const url = "/data/aggregator/org/staffdetailv2";

      let params = {
        staffId: row.staffId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.peoForm.name = data.name;
        this.peoForm.mobile =
          data.mobile.substr(0, 3) + "****" + data.mobile.substr(7);
        this.peoForm.activeTime = data.activeTime;
        this.peoForm.duty = data.roles;
        this.peoForm.zuzhi = data.orgName;
        if (data.enableFlag === "enable") {
          this.peoForm.disableFlag = "已启用";
        } else {
          this.peoForm.disableFlag = "已禁用";
        }
      }
      this.details = true;
    },

    // 人员调动
    async transfer(row) {
      this.transferForm.name = row.name;
      this.transferForm.staffId = row.staffId;

      this.transferPeo = true;
      const url = "/gov/org/customeragency/orgtree";

      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        function computeOption(opt) {
          return {
            label: opt.agencyName,
            value: opt.agencyId,
            type: "agency",
            children: [
              ...(opt.departmentList || []).map((item) => ({
                label: item.deptName,
                value: item.deptId,
                type: "dept",
                typeName: "部门",
              })),
              ...(opt.gridList || []).map((item) => ({
                label: item.gridName,
                value: item.gridId,
                type: "grid",
                typeName: "网格",
              })),
              ...(opt.subAgencyList || []).map((item) => computeOption(item)),
            ],
          };
        }
        if (data) {
          this.options = [computeOption(data)];
          console.log("树树树树树树树树树树", this.options[0]);
        }
      } else {
        this.$message.error("树查询失败", msg);
      }
    },
    // 人员调动确定
    async submitTransfer() {
      const url = "/gov/org/staff/stafftransferv2";

      let params = {
        staffId: this.transferForm.staffId,
        orgId: this.transferForm.orgId,
        orgType: this.transferForm.orgType,
        remarks: this.transferForm.remarks,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("调动成功");
        this.transferRest();
        this.transferPeo = false;
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
        this.getDepartmentStaffListData();
        this.getAgencyStaffListData();
        this.getGridStaffListData();
      } else {
        this.$message.error(msg);
      }
    },

    // 获取导航
    // async getNavigation(){

    //     const url = "/gov/org/customeragency/orgtree"

    //     let params = {

    //     }

    //     const { data, code, msg } = await requestPost(url,params)

    //     if(code === 0){
    //         this.Navigation = data.agencyName
    //     }
    // 组装顶部面包屑数组
    async assembleBreadcrumbArr(id, orgType) {
      this.currentBreadcrumbKey = id;
      if (orgType === "agency") {
        const url = "/gov/org/agency/agencydetail";
        let params = {
          agencyId: id,
        };
        const { data, code, msg } = await requestPost(url, params);
        if (code === 0) {
          // 社区级为最低级组织，不展示下级组织列表
          this.currentAgencyLevel = data.level;
          this.currentAreaCode = data.areaCode;
          if (data.parentList && data.parentList.length > 0) {
            this.parentAreaCode =
              data.parentList[data.parentList.length - 1].areaCode;
            this.parentAgencyId =
              data.parentList[data.parentList.length - 1].id;
            this.parentAgencyLevel =
              data.parentList[data.parentList.length - 1].level;
          }
          if (data.level === "community") {
            this.agencyTableFlag = false;
          } else {
            this.agencyTableFlag = true;
          }
          if (this.breadcrumbArr.length === 0) {
            this.breadcrumbArr = [
              { id: data.agencyId, name: data.agencyName, type: orgType },
            ];
          } else {
            let hasBreadcrumbArr = false;
            this.breadcrumbArr.forEach(function (bc) {
              if (bc.id === id) {
                hasBreadcrumbArr = true;
              }
            });
            if (hasBreadcrumbArr === false) {
              let breadcrumb = {
                id: data.agencyId,
                name: data.agencyName,
                type: orgType,
              };
              this.breadcrumbArr.push(breadcrumb);
            }
          }
        } else {
          this.$message.error(msg);
        }
      } else if (orgType === "department") {
        const url = "/gov/org/department/departmentdetail";
        let params = {
          departmentId: id,
        };
        const { data, code, msg } = await requestPost(url, params);
        if (code === 0) {
          if (this.breadcrumbArr.length === 0) {
            this.breadcrumbArr = [
              {
                id: data.departmentId,
                name: data.departmentName,
                type: orgType,
              },
            ];
          } else {
            let hasBreadcrumbArr = false;
            this.breadcrumbArr.forEach(function (bc) {
              if (bc.id === id) {
                hasBreadcrumbArr = true;
              }
            });
            if (hasBreadcrumbArr === false) {
              let breadcrumb = {
                id: data.departmentId,
                name: data.departmentName,
                type: orgType,
              };
              this.breadcrumbArr.push(breadcrumb);
            }
          }
        } else {
          this.$message.error(msg);
        }
      } else if (orgType === "grid") {
        const url = "/gov/org/grid/griddetail";
        let params = {
          gridId: id,
        };
        const { data, code, msg } = await requestPost(url, params);
        if (code === 0) {
          if (this.breadcrumbArr.length === 0) {
            this.breadcrumbArr = [
              { id: data.grid, name: data.gridName, type: orgType },
            ];
          } else {
            let hasBreadcrumbArr = false;
            this.breadcrumbArr.forEach(function (bc) {
              if (bc.id === id) {
                hasBreadcrumbArr = true;
              }
            });
            if (hasBreadcrumbArr === false) {
              let breadcrumb = {
                id: data.grid,
                name: data.gridName,
                type: orgType,
              };
              this.breadcrumbArr.push(breadcrumb);
            }
          }
        } else {
          this.$message.error(msg);
        }
      }
    },

    async refreshThisPage(index) {
      // 点击最后一级不触发响应
      if (index === this.breadcrumbArr.length - 1) {
        return;
      }

      const selectOrg = this.breadcrumbArr[index];
      this.breadcrumbArr = this.breadcrumbArr.slice(0, index + 1);

      const orgId = selectOrg.id;
      const orgType = selectOrg.type;

      if (orgType === "agency") {
        this.agencyTableListData = [];
        this.agencyStaffTableListData = [];
        this.departmentTableListData = [];
        this.departmentStaffTableListData = [];
        this.gridTableListData = [];
        this.gridStaffTableListData = [];
        this.userAgencyId = orgId;
        this.currentAgencyId = orgId;

        this.agencyTableFlag = true;
        this.currentAgencyStaffTableFlag = true;
        this.departmentTableFlag = true;
        this.departmentStaffTableFlag = false;
        this.gridTableFlag = true;
        this.gridStaffTableFlag = false;

        this.assembleBreadcrumbArr(orgId, "agency");
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
      }
      // 当点击最后一级不触发响应
      // 其父级及以上，只可能属于组织，而非部门或网格，注释以下代码即可
      // 若需要点击最后一级触发刷新，可释放以下代码
      /* else if (orgType === 'department') {
          this.agencyStaffTableListData = []
          this.departmentStaffTableListData = []
          this.gridStaffTableListData = []

          this.currentDepartmentId = orgId

          this.agencyTableFlag = false
          this.currentAgencyStaffTableFlag = false
          this.departmentTableFlag = false
          this.departmentStaffTableFlag = true
          this.gridTableFlag = false
          this.gridStaffTableFlag = false

          this.getDepartmentStaffListData()
          this.assembleBreadcrumbArr(orgId, 'department')
      } else if (orgType === 'grid') {
          this.agencyStaffTableListData = []
          this.departmentStaffTableListData =[]
          this.gridStaffTableListData = []

          this.currentGridOrgId = orgId

          this.agencyTableFlag = false
          this.currentAgencyStaffTableFlag = false
          this.departmentTableFlag = false
          this.departmentStaffTableFlag = false
          this.gridTableFlag = false
          this.gridStaffTableFlag = true
          this.getGridStaffListData()
          this.assembleBreadcrumbArr(orgId, 'grid')
      } */
    },
    // 获取组织区划信息
    async getZoning(areaCode, parentAgencyId, parentAgencyLevel) {
      const url = "/data/aggregator/org/nextlevelareacodelist";

      let params = {
        areaCode: areaCode,
        level: parentAgencyLevel,
        parentAgencyId: parentAgencyId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.zonings = data;
      } else {
        this.$message.error(msg);
      }
    },

    handelZoing(val) {
      this.zonings.forEach((item) => {
        if (item.areaCode == val) {
          this.agencyForm.level = item.level;
          this.agencyForm.areaName = item.areaName;
          this.agencyForm.areaCode = item.areaCode;
        }
      });
    },
    handelStreeOrCommunityZoing(val) {
      this.zonings.forEach((item) => {
        if (item.areaCode == val) {
          this.OrgDetailsForm.level = item.level;
          this.OrgDetailsForm.areaName = item.areaName;
          this.OrgDetailsForm.areaCode = item.areaCode;
        }
      });
    },

    addAgency() {
      this.createAgencyDialogFlag = true;
      this.addNewAgencyRest();
      this.getZoning(
        this.currentAreaCode,
        this.currentAgencyId,
        this.currentAgencyLevel
      );
    },
    // 新增组织确定按钮
    async submitaddNewAgency() {
      const url = "/gov/org/agency/addagency-v2";

      let params = {
        parentAgencyId: this.currentAgencyId,
        agencyName: this.agencyForm.agencyName,
        level: this.agencyForm.level,
        areaCodeSwitch: "closed",
        areaCode: this.agencyForm.areaCode,
        areaName: this.agencyForm.areaName,
        contacts: this.agencyForm.contacts,
        mobile: this.agencyForm.mobile,
        code: this.agencyForm.code,
        latitude: this.latitude,
        longitude: this.longitude,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("添加成功");
        this.createAgencyDialogFlag = false;
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.getAgencyStaffListData();
      } else {
        this.$message.error(msg);
      }
    },

    // 修改面包屑
    modifyOrgInfo() {
      this.judgeOrgInfoLevel =
        this.breadcrumbArr[this.breadcrumbArr.length - 1];
      if (this.judgeOrgInfoLevel.type === "agency") {
        this.getOrgDetailsById();
        setTimeout(() => {
          if (this.OrgDetailsForm.level === "district") {
            /** 修改市区级弹窗 */
            this.modifyCityOrgPop = true;
          } else {
            /** 街道级和社区级弹窗 */
            this.getZoning(
              this.parentAreaCode,
              this.parentAgencyId,
              this.parentAgencyLevel
            );
            this.streetOrCommunity = true;
          }
        }, 1000);
      } else if (this.judgeOrgInfoLevel.type === "department") {
        /** 下级机关单位修改 */
        this.OrgUnitPop = true;
        this.getOrgUnitDetailsById();
      } else {
        /** 网格修改 */
        this.getDictionaries();
        this.modifyGridPop = true;
        this.getGridDetailsById();
      }
    },

    // 根据id获取组织机构详细信息
    async getOrgDetailsById() {
      const url = "/gov/org/agency/agencydetail";

      let params = {
        agencyId: this.judgeOrgInfoLevel.id,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.currentAgencyLevel = data.level;
        this.currentAreaCode = data.areaCode;
        if (data.parentList && data.parentList.length > 0) {
          this.parentAreaCode =
            data.parentList[data.parentList.length - 1].areaCode;
          this.parentAgencyId = data.parentList[data.parentList.length - 1].id;
          this.parentAgencyLevel =
            data.parentList[data.parentList.length - 1].level;
        }

        this.OrgDetailsForm.level = data.level;
        this.OrgDetailsForm.agencyName = data.agencyName;
        this.OrgDetailsForm.code = data.code;
        this.OrgDetailsForm.contacts = data.contacts;
        this.OrgDetailsForm.centerAddress = data.centerAddress;
        this.OrgDetailsForm.areaCode = data.areaCode;
        this.OrgDetailsForm.mobile = data.mobile;
        this.latitude = data.latitude;
        this.longitude = data.longitude;
        this.OrgDetailsForm.agencyId = data.agencyId;
      } else {
        this.$message.error(msg);
      }
    },

    // 根据id获取下级机关单位详情
    async getOrgUnitDetailsById() {
      const url = "/gov/org/department/departmentdetail";

      let params = {
        departmentId: this.judgeOrgInfoLevel.id,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.OrgUnitDetailsForm.code = data.code;
        this.OrgUnitDetailsForm.contacts = data.contacts;
        this.OrgUnitDetailsForm.departmentId = data.departmentId;
        this.OrgUnitDetailsForm.departmentName = data.departmentName;
        this.OrgUnitDetailsForm.mobile = data.mobile;
      } else {
        this.$message.error(msg);
      }
    },

    // 根据id获取网格详情
    async getGridDetailsById() {
      const url = "/gov/org/grid/griddetail";

      let params = {
        gridId: this.judgeOrgInfoLevel.id,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.modifyGridFrom.gridName = data.gridName;
        this.modifyGridFrom.code = data.code;
        this.modifyGridFrom.gridTypeName = data.gridTypeName;
        this.modifyGridFrom.contacts = data.contacts;
        this.modifyGridFrom.mobile = data.mobile;
        this.modifyGridFrom.agencyId = data.agencyId;
        this.modifyGridFrom.gridType = data.gridType;
        this.modifyGridFrom.manageDistrict = data.manageDistrict;
        this.modifyGridFrom.griId = data.grid;
        this.modifyGridFrom.gridSort = data.gridSort;
      } else {
        this.$message.error(msg);
      }
    },

    // 市级/街道/社区级组织修改确定按钮
    async sunmitModifyCityOrgPop() {
      const url = "/gov/org/agency/editagency";

      let params = {
        agencyId: this.OrgDetailsForm.agencyId,
        agencyName: this.OrgDetailsForm.agencyName,
        contacts: this.OrgDetailsForm.contacts,
        mobile: this.OrgDetailsForm.mobile,
        code: this.OrgDetailsForm.code,
        latitude: this.latitude,
        longitude: this.longitude,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("修改成功");
        this.modifyCityOrgPop = false;
        this.streetOrCommunity = false;
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.agencyPeo();
      } else {
        this.$message.error(msg);
      }
    },
    // 修改下级机关单位确定按钮
    async sunmitOrgUnitForm() {
      const url = "/gov/org/department/editdepartment";

      let params = {
        code: this.OrgUnitDetailsForm.code,
        contacts: this.OrgUnitDetailsForm.contacts,
        departmentId: this.OrgUnitDetailsForm.departmentId,
        departmentName: this.OrgUnitDetailsForm.departmentName,
        mobile: this.OrgUnitDetailsForm.mobile,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("修改成功");
        this.OrgUnitPop = false;
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.agencyPeo();
      } else {
        this.$message.error(msg);
      }
    },
    // 修改网格确定按钮
    async submitModifyGrid() {
      const url = "/gov/org/grid/editgrid";

      let params = {
        gridId: this.modifyGridFrom.griId,
        gridName: this.modifyGridFrom.gridName,
        manageDistrict: this.modifyGridFrom.manageDistrict,
        contacts: this.modifyGridFrom.contacts,
        mobile: this.modifyGridFrom.mobile,
        code: this.modifyGridFrom.code,
        gridType: this.modifyGridFrom.gridType,
        sort: this.modifyGridFrom.gridSort,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.$message.success("修改成功");
        this.modifyGridPop = false;
        this.getAgencyList();
        this.getDepartmentList();
        this.getGridList();
        this.agencyPeo();
      } else {
        this.$message.error(msg);
      }
    },

    /** 地图初始化 */
    createMap() {
      let { latitude, longitude } = this;
      if (
        latitude === null ||
        latitude === "" ||
        longitude === null ||
        longitude === ""
      ) {
        let { latitude: latitude2, longitude: longitude2 } =
          this.$store.state.user;
        if (!latitude2 || latitude2 == "" || latitude2 == "0") {
          latitude = 39.9088810666821;
          longitude = 116.39743841556731;
        } else {
          latitude = latitude2;
          longitude = longitude2;
        }
      }
      var center = new window.TMap.LatLng(latitude, longitude); //设置中心点坐标

      //初始化地图
      var map = new window.TMap.Map("con", {
        center: center,
        zoom: 13, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });

      // 新建一个地点搜索类
      let markers = new window.TMap.MultiMarker({
        map: map,
        geometries: [],
      });

      map.on("panend", (e) => {
        handleMoveCenter(e);
      });

      setMarker(latitude, longitude);

      function setMarker(lat, lng) {
        console.log("setMarker", lat, lng);
        markers.setGeometries([]);

        markers.add([
          {
            id: "4",
            styleId: "marker",
            position: new window.TMap.LatLng(lat, lng),
            properties: {
              title: "marker4",
            },
          },
        ]);
      }

      function handleMoveCenter(e) {
        //修改地图中心点
        const center = map.getCenter();
        const lat = center.getLat();
        const lng = center.getLng();

        setMarker(lat, lng);
      }
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
#info {
  left: 20px;
  top: 20px;
  font-size: 14px;
  background: #fff;
  width: 270px;
  padding: 10px;
  border-radius: 3px;
}
#con {
  width: 100%;
  height: 100%;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>