<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <a-row :gutter="10" style="height: 100%">
    <a-col :md="6" :sm="24" style="height: 100%; padding-right: 15px; width: 260px">
      <a-card :bordered="false" class="aCardTree">
        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px">
          <!-- <a-button @click="handleAdd(1)" type="primary">添加部门</a-button> -->
          <!-- <a-button @click="handleAdd(2)" type="primary">添加下级</a-button> -->
          <!-- <a-button type="primary" icon="download" @click="handleExportXls('部门信息')" >导出</a-button> -->
          <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button> -->
          <!-- <a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button> -->
        </a-row>
        <div style="background: #fff; height: 100%; margin-top: 5px">
          <!-- <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前选择：<span>{{selectTreeRow.title}}</span>
              <a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
            </div>
          </a-alert> -->
          <!-- <div style="font-size: 20px;">区划树</div> -->
          <a-input-search @search="onSearch" style="width: 100%" placeholder="请输入行政区划" />
          <!-- 树-->
          <a-col :md="10" :sm="24"
            style="width: 100%; height: calc(100% - 46px); overflow-y: auto; overflow-x: hidden; margin-top: 10px">
            <template>
              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
                <span style="user-select: none">
                  <a-spin :spinning="loadingTree">
                    <!-- :load-data="onLoadTreeData"  -->
                    <a-tree :tree-data="treeData" class="treeArea parentCanClickTree" @select="selectTree"
                      :replaceFields="replaceFields" :expandedKeys.sync="expandedKeys" :selectedKeys="selectedKeys"
                      :show-line="true" />
                  </a-spin>
                </span>
                <!--新增右键点击事件,和增加添加和删除功能-->
                <!-- <a-menu slot="overlay">
                  <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
                  <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
                  <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
                </a-menu> -->
              </a-dropdown>
            </template>
          </a-col>
        </div>
      </a-card>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
      <!-- <div class="drawer-bootom-button">
        <a-dropdown :trigger="['click']" placement="topCenter">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
            <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
          </a-menu>
          <a-button>
            树操作 <a-icon type="up" />
          </a-button>
        </a-dropdown>
      </div> -->
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    </a-col>
    <a-col :md="18" :sm="24" class="tableArea" style="width: calc(100% - 260px); height: 100%; overflow: hidden">
      <div v-if="isChooseGov" style="height: 100%" ref="tableHeight" class="tableHeight">
        <!-- 查询区域 -->
        <!-- <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQueryCheck">
            <a-row :gutter="24" ref="searchArea">
              <a-col :md="7" :sm="13" v-has="'dept:search'">
                <a-form-item label="组织机构名称">
                  <j-input placeholder="请输入组织机构名称" v-model="queryParam.departName"></j-input>
                </a-form-item>
              </a-col>
              <a-col :md="7" :sm="13" v-has="'dept:search'">
                <a-form-item label="统一社会信用代码">
                  <j-input placeholder="请输入统一社会信用代码" v-model="queryParam.socialCreditCode"></j-input>
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="13" v-has="'dept:search'">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQueryCheck" icon="search">查询</a-button>
                  <a-button @click="searchResetCheck" icon="reload" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
              <a-col :md="4" :sm="13">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button
                    type="primary"
                    @click="addCurrentNode"
                    style="margin-left: 8px"
                    icon="plus"
                    v-has="'dept:add:root'"
                    >新增⼀级组织机构</a-button
                  >
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div> -->

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper search_box">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="组织机构名称">
                  <j-input placeholder="请输入组织机构名称" v-model="queryParam.departName"></j-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="统一社会信用代码">
                  <j-input placeholder="请输入统一社会信用代码" v-model="queryParam.socialCreditCode"></j-input>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQueryCheck" slot="enterButton" class="searchBut">搜索</a-button>
                  <a-button @click="searchResetCheck" class="resetBut">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 查询区域-END -->

        <a-table ref="table" size="middle" bordered rowKey="id" class="table" :loading="tableLoading"
          :columns="tableDataColumns" :dataSource="tableData" :pagination="false" @change="handleTableChange"
          :expandIcon="expandIcon" :autoExpandParent="autoExpandParent" :scroll="{ y: scrollHeight }">
          <span slot="departName" slot-scope="text, record">
            <span v-if="record.children">{{ record.departName }}</span>
            <span v-else class="noChildNodes">{{ record.departName }}</span>
          </span>
          <span slot="action" slot-scope="text, record" class="action">
            <a @click="checkRowData(text, record)" v-has="'dept:view'">查看</a>
            <a-divider type="vertical" v-has="'dept:edit'" />
            <a @click="editRowData(text, record)" v-has="'dept:edit'">编辑</a>
            <a-divider type="vertical" v-show="!record.parentId || record.parentId == '0'" v-has="'dept:add:sub'" />
            <a @click="addChildNode(text, record)" v-show="!record.parentId || record.parentId == '0'"
              v-has="'dept:add:sub'">新增下级</a>
          </span>
          <span slot="status" slot-scope="text, record">
            <span v-if="record.status == 0" style="display: flex; align-items: center; justify-content: center">
              <span style="
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background-color: #f56c6c;
                        display: inline-block;
                        margin-right: 3px;
                      "></span>
              <span>无效</span>
            </span>
            <span v-if="record.status == 1" style="display: flex; align-items: center; justify-content: center">
              <span style="
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background-color: #00a854;
                        display: inline-block;
                        margin-right: 3px;
                      "></span>
              <span>有效</span>
            </span>
          </span>
        </a-table>
        <div class="myPagination">
          <el-pagination ref="elpagination" @current-change="changeNum" :current-page="ipagination.current" background
            :page-size="ipagination.pageSize" layout="prev, pager, next,jumper, slot ,total " :total="ipagination.total">
            <el-button class="btn-sure" size="mini">确定</el-button>
          </el-pagination>
        </div>
      </div>
      <div v-else>
        <a-empty>
          <span slot="description"> 请先选择一个区划! </span>
        </a-empty>
      </div>
    </a-col>
    <depart-modal ref="departModal" @ok="loadTree" @reloadTableData="reloadTableData"
      @closeModel="closeModel"></depart-modal>
  </a-row>
</template>
<script>
import DepartModal from './modules/DepartModal'
import { getAction } from '@/api/manage'
import { queryDepartTreeList, searchByKeywords, deleteByDepartId, queryByKey } from '@/api/api'
import { httpAction, deleteAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import DepartAuthModal from './modules/DepartAuthModal'
// 表头
const columns = [
  {
    title: '组织机构名称',
    dataIndex: 'departName',
  },
  {
    title: '机构类型',
    align: 'center',
    dataIndex: 'orgType',
  },
  {
    title: '机构编码',
    dataIndex: 'orgCode',
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '传真',
    dataIndex: 'fax',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '排序',
    align: 'center',
    dataIndex: 'departOrder',
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'DepartList',
  mixins: [JeecgListMixin],
  components: {
    DepartAuthModal,
    DepartModal,
  },
  data () {
    return {
      iExpandedKeys: [],
      loadingTree: false,
      autoExpandParent: true,
      currFlowId: '',
      currFlowName: '',
      disable: true,
      treeData: [],
      // 是否自动展开父节点
      autoExpandParent: true,
      // 展开的节点
      expandedKeys: [],
      // 要展开的的区划ID
      expandedDistrictId: '10',
      // 递归数组获取初始化加载部门的数据对象
      loadGovTableObj: {},
      visible: false,
      departTree: [],
      rightClickSelectedKey: '',
      rightClickSelectedOrgCode: '',
      hiding: true,
      model: {},
      dropTrigger: '',
      depart: {},
      columns: columns,
      disableSubmit: false,
      checkedKeys: [],
      selectedKeys: [],
      selectedKeysBefore: [],
      autoIncr: 1,
      currSelected: {},
      allTreeKeys: [],
      checkStrictly: true,
      // 第一次加载
      firstLoadTree: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      graphDatasource: {
        nodes: [],
        edges: [],
      },
      validatorRules: {
        departName: [{ required: true, message: '请输入机构/部门名称!' }],
        orgCode: [{ required: true, message: '请输入机构编码!' }],
        orgCategory: [{ required: true, message: '请输入机构类型!' }],
        mobile: [{ validator: this.validateMobile }],
      },
      url: {
        list: '/gtSysArea/departAllList',
        searchList: 'sys/sysDepart/queryByNameAndCode',
        delete: '/sys/sysDepart/delete',
        edit: '/sys/sysDepart/edit',
        deleteBatch: '/sys/sysDepart/deleteBatch',
        exportXlsUrl: 'sys/sysDepart/exportXls',
        importExcelUrl: 'sys/sysDepart/importExcel',
        tableList: '/sys/sysDepart/queryByAreaId',
        getParentList: '/sys/user/getParentList',
      },
      orgCategoryDisabled: false,
      isChooseGov: false,
      selectTreeRow: {},
      tableLoading: false,
      selectAreaId: '',
      tableData: [],
      tablePagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      tableDataColumns: [
        {
          title: '组织机构名称',
          align: 'left',
          dataIndex: 'departName',
          scopedSlots: { customRender: 'departName' },
        },
        {
          title: '统一社会信用代码',
          align: 'center',
          dataIndex: 'socialCreditCode',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          width: '150px',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      replaceFields: { children: 'children', title: 'areaName', key: 'id' },
      // table滚动条高度
      scrollHeight: 0,
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  mounted () {
    let _this = this
    // _this.onLoadTreeData();
    _this.loadTreeData()
    // 根据浏览器大小确定表格大小
    window.onresize = () => {
      _this.tableHeightResize()
    }
    _this.ipagination.pageSize = 30
  },
  methods: {
    tableHeightResize () {
      let _this = this
      if (_this.$refs.searchArea) {
        _this.scrollHeight = _this.$refs.tableHeight.offsetHeight - 56 - 45 - 50
      } else {
        _this.scrollHeight = _this.$refs.tableHeight.offsetHeight - 0 - 45 - 50
      }
    },
    loadTreeData () {
      let _this = this
      _this.loadingTree = true
      getAction(this.url.list, {}).then((resTree) => {
        if (resTree.code == 200) {
          _this.treeData = resTree.result
          let id = ''
          getAction(this.url.getParentList, {}).then((resParent) => {
            let res = resParent.parentIdPath
            // 判断是不是只是普通用户，只是普通用户就不加载右侧部门
            let role = resParent.role
            if (res.length != 0) {
              id = res[res.length - 1]
              // 根据expandedDistrictId找到最后一级的数据,然后向上重新寻找父级，祖父级节点...
              let lastItem = {}
              // 展开ID的数组
              let IDArr = []
              for (let x = 0; x < _this.treeData.length; x++) {
                if (_this.treeData[x]['id'] == id) {
                  // if(role != "isAverageUser"){
                  _this.loadGovTable(id, _this.treeData[x])
                  // }
                  break
                } else {
                  if (_this.treeData[x]['children'] && _this.treeData[x]['children'].length != 0) {
                    _this.cycChildren(_this.treeData[x]['children'], id)
                  } else {
                    // _this.$message.warning('未找到部门信息')
                  }
                }
              }
              if (JSON.stringify(_this.loadGovTableObj) == '{}') {
                // _this.$message.warning('未找到部门信息')
              } else {
                // if(role != "isAverageUser"){
                _this.loadGovTable(id, _this.loadGovTableObj)
                // }
              }
              _this.expandedKeys = res.slice(0, res.length - 1)
            }
          })
        } else {
          _this.$message.error('初始化区划树失败')
        }
        _this.loadingTree = false
        _this.firstLoadTree = false
      })
    },
    // 递归数组获取初始化加载部门的数据
    cycChildren (data, id) {
      let _this = this
      for (let x = 0; x < data.length; x++) {
        if (data[x]['id'] == id) {
          _this.loadGovTableObj = data[x]
          return
        } else {
          if (data[x]['children'] && data[x]['children'].length != 0) {
            _this.cycChildren(data[x]['children'], id)
          }
        }
      }
    },
    // 加载右侧表格
    loadGovTable (selectedKeys, treeNode) {
      let _this = this
      _this.isChooseGov = true
      _this.selectTreeRow = treeNode
      _this.selectAreaId = treeNode.id
      _this.selectedKeys = [selectedKeys]
      _this.selectedKeysBefore = [selectedKeys]
      _this.tableLoading = true
      getAction(_this.url.tableList, { areaId: treeNode.id }).then((res) => {
        if (res.code == 0) {
          _this.tableData = res.result
          _this.ipagination.current = 1
          // res.result[0]['children']['isLeaf'] = true;
          // _this.tableData[0]['children']['isLeaf'] = true;
          _this.$nextTick(() => {
            _this.tableHeightResize()
          })
        } else {
          _this.$message.error('获取部门失败')
        }
        _this.tableLoading = false
      })
    },
    // 点击文本触发
    selectTree (selectedKeys, treeNode) {
      console.log(selectedKeys, treeNode)
      let _this = this
      if (selectedKeys.length == 0) {
        // _this.selectedKeys = treeNode.node;
        _this.selectedKeys = _this.selectedKeysBefore
      } else {
        _this.isChooseGov = true
        _this.selectTreeRow = treeNode.node.dataRef
        _this.selectAreaId = treeNode.node.dataRef.id
        _this.selectedKeys = selectedKeys
        _this.selectedKeysBefore = selectedKeys
        _this.tableLoading = true
        getAction(_this.url.tableList, { areaId: treeNode.node.dataRef.id }).then((res) => {
          if (res.code == 0) {
            _this.tableData = res.result
            _this.ipagination.current = 1
            _this.ipagination.total = res.result.length
            _this.queryParam = {}
            // res.result[0]['children']['isLeaf'] = true;
            // _this.tableData[0]['children']['isLeaf'] = true;
            _this.$nextTick(() => {
              _this.tableHeightResize()
            })
          } else {
            _this.$message.error('获取部门失败')
          }
          _this.tableLoading = false
        })
      }
    },
    // 编辑
    editRowData (text, record) {
      let _this = this
      _this.$refs.departModal.edit(record)
      _this.$refs.departModal.title = '编辑组织机构'
      _this.$refs.departModal.disableSubmit = false
    },
    // 查看
    checkRowData (text, record) {
      let _this = this
      _this.$refs.departModal.check(record)
      _this.$refs.departModal.title = '查看组织机构'
      _this.$refs.departModal.disableSubmit = true
    },
    // 删除
    deleteRowData (id) {
      let _this = this
      deleteByDepartId({ id: id }).then((res) => {
        if (res.success) {
          _this.$message.success('删除成功')
          _this.reloadTableData()
        } else {
          _this.$message.error('删除失败')
        }
      })
    },
    // 新增部门
    addNewGov () {
      let _this = this
      _this.$refs.departModal.add(_this.selectTreeRow)
      _this.$refs.departModal.title = '新增组织机构'
      _this.$refs.departModal.disableSubmit = false
    },
    // 新增子节点
    addChildNode (text, record) {
      let _this = this
      _this.$refs.departModal.addChildNode(record, this.selectTreeRow)
      _this.$refs.departModal.title = '新增组织机构'
      _this.$refs.departModal.disableSubmit = false
    },
    // 新增本级
    addCurrentNode () {
      let _this = this
      _this.$refs.departModal.title = '新增组织机构'
      _this.$refs.departModal.addCurrentNode(_this.selectTreeRow)
      _this.$refs.departModal.disableSubmit = false
    },
    handleTableChange (pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      // if (Object.keys(sorter).length > 0) {
      //   this.isorter.column = sorter.field;
      //   this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      // }
      this.ipagination = pagination
      this.reloadTableData()
    },
    reloadTableData () {
      let _this = this
      _this.tableLoading = true
      var params = this.getQueryParams() //查询条件
      this.tableLoading = true
      console.log(this.queryParam)
      if (JSON.stringify(this.queryParam) == '{}') {
        getAction(_this.url.tableList, { areaId: this.selectTreeRow.id, ...this.ipagination }).then((res) => {
          if (res.code == 0) {
            _this.tableData = res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
          } else {
            _this.$message.error('获取部门失败')
          }
          _this.tableLoading = false
        })
      } else {
        let paramCopy = JSON.parse(JSON.stringify(params))
        if (params['departName'] || params['departName'] == '0') {
          paramCopy['departName'] = params['departName'].replace(/\*/g, '')
        }
        if (params['socialCreditCode'] || params['socialCreditCode'] == '0') {
          paramCopy['socialCreditCode'] = params['socialCreditCode'].replace(/\*/g, '')
        }
        paramCopy['areaId'] = this.selectTreeRow.id
        getAction(this.url.searchList, paramCopy)
          .then((res) => {
            if (res.code == '200') {
              this.tableData = res.result.records
              if (res.result.total) {
                this.ipagination.total = res.result.total
              } else {
                this.ipagination.total = 0
              }
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.tableLoading = false
          })
      }
    },
    loadTree () {
      // var that = this
      // that.treeData = []
      // that.departTree = []
      // that.loading = true;
      // getAction(that.url.list,{}).then(res => {
      //   if(res.code == 200){
      //   }
      // })
      // queryDepartTreeList().then((res) => {
      //   if (res.success) {
      //     //部门全选后，再添加部门，选中数量增多
      //     this.allTreeKeys = [];
      //     for (let i = 0; i < res.result.length; i++) {
      //       let temp = res.result[i]
      //       that.treeData.push(temp)
      //       that.departTree.push(temp)
      //       that.setThisExpandedKeys(temp)
      //       that.getAllKeys(temp);
      //     }
      //     this.loading = false
      //   }
      // })
    },
    setThisExpandedKeys (node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh () {
      this.loadingTree = true
      this.loadTree()
    },
    // 右键操作方法
    rightHandle (node) {
      this.dropTrigger = 'contextmenu'
      this.rightClickSelectedKey = node.node.eventKey
      this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
    },
    onExpand (expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    backFlowList () {
      this.$router.back(-1)
    },
    // 右键点击下拉框改变事件
    dropStatus (visible) {
      if (visible == false) {
        this.dropTrigger = ''
      }
    },
    // 右键下拉关闭下拉框
    closeDrop () {
      this.dropTrigger = ''
    },
    addRootNode () {
      this.$refs.nodeModal.add(this.currFlowId, '')
    },
    batchDel: function () {
      if (this.checkedKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
      } else {
        var ids = ''
        for (var a = 0; a < this.checkedKeys.length; a++) {
          ids += this.checkedKeys[a] + ','
        }
        var that = this
        this.$confirm({
          class: 'delete_qx',
          title: '确认删除',
          content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
          onOk: function () {
            deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadTree()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            })
          },
        })
      }
    },
    onSearch (value) {
      let that = this
      that.loadingTree = true
      if (value) {
        queryByKey({ areaName: value }).then((res) => {
          if (res.success) {
            // that.selectedKeys
            that.treeData = []
            that.tableData = []
            // for (let i = 0; i < res.result.length; i++) {
            //   let temp = res.result[i]
            //   that.treeData.push(temp)
            // }
            // res.result.forEach(item => {
            //   item['areaName'] = item['departName']
            // })
            that.treeData = res.result
          } else {
            that.$message.warning(res.message)
          }
          that.loadingTree = false
        })
      } else {
        that.loadTreeData()
      }
    },
    nodeModalOk () {
      this.loadTree()
    },
    nodeModalClose () { },
    hide () {
      this.visible = false
    },
    onCheck (checkedKeys, info) {
      this.hiding = false
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked
      } else {
        this.checkedKeys = checkedKeys
      }
      //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    },
    onSelect (selectedKeys, e) {
      this.hiding = false
      let record = e.node.dataRef
      this.currSelected = Object.assign({}, record)
      this.model = this.currSelected
      this.selectedKeys = [record.key]
      this.model.parentId = record.parentId
      this.setValuesToForm(record)
      this.$refs.departAuth.show(record.id)
    },
    // 触发onSelect事件时,为部门树右侧的form表单赋值
    setValuesToForm (record) {
      if (record.orgCategory == '1') {
        this.orgCategoryDisabled = true
      } else {
        this.orgCategoryDisabled = false
      }
    },
    getCurrSelectedTitle () {
      return !this.currSelected.title ? '' : this.currSelected.title
    },
    onClearSelected () {
      this.hiding = true
      this.checkedKeys = []
      this.currSelected = {}
      this.selectedKeys = []
      this.$refs.departAuth.departId = ''
    },
    handleNodeTypeChange (val) {
      this.currSelected.nodeType = val
    },
    notifyTriggerTypeChange (value) {
      this.currSelected.notifyTriggerType = value
    },
    receiptTriggerTypeChange (value) {
      this.currSelected.receiptTriggerType = value
    },
    submitCurrForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.currSelected.id) {
            this.$message.warning('请点击选择要修改部门!')
            return
          }

          httpAction(this.url.edit, this.currSelected, 'put').then((res) => {
            if (res.success) {
              this.$message.success('保存成功!')
              this.loadTree()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    emptyCurrForm () {
      this.$refs.form.resetFields()
      this.model = {}
    },
    nodeSettingFormSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
        }
      })
    },
    openSelect () {
      this.$refs.sysDirectiveModal.show()
    },
    handleAdd (num) {
      if (num == 1) {
        this.$refs.departModal.add()
        this.$refs.departModal.title = '新增'
      } else if (num == 2) {
        let key = this.currSelected.key
        if (!key) {
          this.$message.warning('请先点击选中上级部门！')
          return false
        }
        this.$refs.departModal.add(this.selectedKeys)
        this.$refs.departModal.title = '新增'
      } else {
        this.$refs.departModal.add(this.rightClickSelectedKey)
        this.$refs.departModal.title = '新增'
      }
    },
    handleDelete () {
      var that = this
      this.$confirm({
        class: 'delete_qx',
        title: '确认删除',
        content: '确定要删除此部门以及子节点数据吗?',
        onOk: function () {
          deleteByDepartId({ id: that.rightClickSelectedKey }).then((resp) => {
            if (resp.success) {
              //删除成功后，去除已选中中的数据
              that.checkedKeys.splice(
                that.checkedKeys.findIndex((key) => key === that.rightClickSelectedKey),
                1
              )
              that.$message.success('删除成功!')
              that.loadTree()
              //删除后同步清空右侧基本信息内容
              let orgCode = that.model.orgCode
              if (orgCode && orgCode === that.rightClickSelectedOrgCode) {
                that.onClearSelected()
              }
            } else {
              that.$message.warning('删除失败!')
            }
          })
        },
      })
    },
    selectDirectiveOk (record) {
      this.nodeSettingForm.setFieldsValue({ directiveCode: record.directiveCode })
      this.currSelected.sysCode = record.sysCode
    },
    getFlowGraphData (node) {
      this.graphDatasource.nodes.push({
        id: node.id,
        text: node.flowNodeName,
      })
      if (node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          let temp = node.children[a]
          this.graphDatasource.edges.push({
            source: node.id,
            target: temp.id,
          })
          this.getFlowGraphData(temp)
        }
      }
    },
    // ---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    expandAll () {
      this.iExpandedKeys = this.allTreeKeys
    },
    closeAll () {
      this.iExpandedKeys = []
    },
    checkALL () {
      this.checkStriccheckStrictlytly = false
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL () {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    switchCheckStrictly (v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    getAllKeys (node) {
      this.allTreeKeys.push(node.key)
      if (node.children && node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          this.getAllKeys(node.children[a])
        }
      }
    },
    //---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    // table收起展开图标
    expandIcon (props) {
      let _this = this
      if (props.record.children && props.record.children.length > 0) {
        if (props.expanded) {
          return (
            <a
              style="color:'black',margin-right:5px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="caret-down" class="tableIcon" />
            </a>
          )
        } else {
          return (
            <a
              style="color:'black',margin-right:5px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="caret-right" class="tableIcon" />
            </a>
          )
        }
      } else {
        return <span style="margin-right:0px" class="tableIcon"></span>
      }
    },
    searchQueryCheck () {
      this.searchLoadData(1)
    },
    searchResetCheck () {
      this.queryParam = {}
      this.searchLoadData(1)
    },
    searchLoadData (arg) {
      if (!this.url.tableList) {
        this.$message.error('请设置url.tableList属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      console.log(this.queryParam)
      this.tableLoading = true
      if (this.selectedKeys != '') {
        if (JSON.stringify(this.queryParam) == '{}') {
          getAction(this.url.tableList, { areaId: this.selectTreeRow.id }).then((res) => {
            if (res.success) {
              //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
              this.tableData = res.result
              if (res.result.total) {
                this.ipagination.total = res.result.total
              } else {
                this.ipagination.total = 0
              }
              //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            }
            if (res.code === 510) {
              this.$message.warning(res.message)
            }
            this.tableLoading = false
          })
        } else {
          let paramCopy = JSON.parse(JSON.stringify(params))
          if (params['departName'] || params['departName'] == '0') {
            paramCopy['departName'] = params['departName'].replace(/\*/g, '')
          }
          if (params['socialCreditCode'] || params['socialCreditCode'] == '0') {
            paramCopy['socialCreditCode'] = params['socialCreditCode'].replace(/\*/g, '')
          }
          paramCopy['areaId'] = this.selectTreeRow.id
          getAction(this.url.searchList, paramCopy)
            .then((res) => {
              if (res.code == '200') {
                this.tableData = res.result.records
                if (res.result.total) {
                  this.ipagination.total = res.result.total
                } else {
                  this.ipagination.total = 0
                }
              } else {
                this.$message.warning(res.message)
              }
            })
            .finally(() => {
              this.tableLoading = false
            })
        }
      }
    },
    closeModel () { },
    changeNum (val) {
      // console.log('2');
      this.ipagination.current = val
      this.reloadTableData()
    },
  },
  created () {
    this.currFlowId = this.$route.params.id
    this.currFlowName = this.$route.params.name
    // this.loadTree()
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/shaDow.less';
@import '~@assets/less/tableCommon.less';

// 搜索框
.search_box {
  ::v-deep .ant-input-group .ant-input {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    border-radius: 2px;
  }

  .searchBut {
    
    border-radius: 0px 2px 2px 0px;
    opacity: 1;
    

    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }

  .resetBut {
    width: 60px;
    height: 38px;
    line-height: 38px;
    background: #dbdbdb;
    border-radius: 2px;
    color: #000;
    opacity: 1;
    padding: 0;
    border: 1px solid #b6b6b6;
  }
}

.ant-row>.ant-col:last-child {
  .table-page-search-submitButtons {
    &>button:first-child {
      margin-right: 20px;
    }
  }
}

::v-deep .ant-table-tbody>tr:hover>td {
  background: #f2f5f965 !important;

}

.myPagination {
  margin-top: 40px;
  display: flex;
  justify-content: end;

  ::v-deep .el-pagination {
    font-weight: 600;

    .btn-sure {
      background: #dbdbdb;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #b6b6b6;
      padding: 0;
      color: #000;
      margin: 0 20px 0 10px;
      width: 50px;

      // &:hover {
      //   // background: none;
      // }

      // &:focus {
      //   // background: none;
      // }
    }

    .el-select .el-input .el-input__inner {
      color: #000;
      font-size: 14px;
      padding-right: 17px;
      font-weight: 400;
      border-radius: 2px;
    }

    .el-pager li {
      font-size: 16px;
      color: #888888;
      width: 34px;

      &:hover {
        opacity: 0.9;
      }
    }

    .el-pagination span:not([class*='suffix']) {
      font-size: 14px;
      color: #888888;
    }

    .el-pager li:not(.disabled).active {
      color: #fff;
    }
  }

  .ant-pagination {
    color: #888888;
  }

  ::v-deep .ant-select-selection--single {
    height: 28px !important;
  }

  ::v-deep .ant-select-selection__rendered {
    line-height: 28px !important;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-options-quick-jumper input {
    height: 28px;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-item {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    width: 34px;
  }
}

::v-deep ::-webkit-scrollbar-thumb {
  
  border-radius: 9px 9px 9px 9px;
}

</style>
<style scoped>
@import '~@assets/less/modal.less';
@import '~@assets/less/tableStyle.less';

.ant-card-body .table-operator {
  margin: 15px;
}

.aCardTree {
  height: 100%;
}

.aCardTree>>>.ant-card-body {
  padding: 15px;
  height: 100%;
  overflow: hidden;
}

.anty-form-btn {
  width: 100%;
  text-align: center;
}

.anty-form-btn button {
  margin: 0 5px;
}

.anty-node-layout .ant-layout-header {
  padding-right: 0;
}

.header {
  padding: 0 8px;
}

.header button {
  margin: 0 3px;
}

.ant-modal-cust-warp {
  height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}

#app .desktop {
  height: auto !important;
}

/** Button按钮间距 */
.ant-btn {
  margin-left: 3px;
}

.drawer-bootom-button {
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.treeArea {
  min-height: 680px;
}

.tableArea {
  background-color: #ffffff;
  padding: 24px !important;
}

.table {
  height: calc(100% - 56px);
  overflow-y: hidden;
}

.table>>>.indent-level-1 {
  padding-left: 28px !important;
}

.aCardTree>>>.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .parentCanClickTree >>> .ant-tree-node-content-wrapper.ant-tree-node-selected{
    background-color: #338EFF !important;
    color: #FFFFFF;
    width: inherit;
  } */
/* .parentCanClickTree >>> .ant-tree-node-content-wrapper{
    width: inherit;
  } */
.table>>>.indent-level-1 {
  padding-left: 14px !important;
}

.table>>>.indent-level-2 {
  padding-left: 28px !important;
}

.table>>>.indent-level-3 {
  padding-left: 40px !important;
}

.table>>>.noChildNodes {
  padding-left: 13px !important;
}

.table>>>.ant-table-row>td:first-child {
  max-width: 230px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.table>>>.ant-table-row>td:nth-child(3) {
  max-width: 220px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.table>>>.ant-table-thead>tr>th:first-child {
  text-align: center;
}
</style>
