<!--
 * @Author: 曹捷
 * @Date: 2019-08-13 10:49:35
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-28 11:56:06
 * @Description: 部门管理
 -->
<template>
  <obitUniversalTable name="部门管理" v-if="$fmt(['sys_normal_disable'])" class="deptIndex">
    <template #search>
      <obit-search-form :params="params" :paramList="paramList" @search="pageQuerylist(true)">
      </obit-search-form>
    </template>
    <template #btn>
      <a-button type="primary" @click="addDialog(0)">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table class="obit-atable" :columns="tableColumns" :data-source="deptList" rowKey="deptId" :expandRowByClick="true">
      <template #roles="{ record  }" :key="record.orgId">
        <span class="m-r-5" animation="line-left-bottom reverse" v-for="item in record.roles" :key="item.roleId">
          {{item.roleName}}
        </span>
      </template>
      <template #operation="{ record  }" :key="record.orgId">
        <a-button type="link" class="operation-btn" @click.stop="addDialog(record.orgId)"> 新增</a-button>
        <a-button type="link" class="operation-btn" @click.stop="editDialog(record )"> 编辑</a-button>
        <a-button type="link" class="operation-btn" @click.stop="remove(record)"> 删除</a-button>
      </template>
    </a-table>
  </obitUniversalTable>
  <orgAdd :addType="pageType" v-model:open="pageVisable" :detailsInfo="detailsInfo" @reload="pageQuerylist(true)">
  </orgAdd>
</template>

<script>
import orgAdd from './orgAdd.vue'
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'

export default {
  components: { orgAdd, },

  setup (props, contenxt) {
    let { proxy } = getCurrentInstance()
    let http = inject('http')

    let _data = reactive({
      params: {},
      pageType: 'add',
      pageVisable: false,
      detailsInfo: {},
      formData: {},
      deptList: [],
      tableColumns: [
        { dataIndex: 'deptName', title: '部门名称', width: '200px'},
        { dataIndex: 'orderNum', title: '编号' ,width: '80px'},
        { dataIndex: 'status', title: '状态', customRender: ({ text, record, index }) => proxy.$fmt('sys_normal_disable', text) ,width: '80px'},
        { dataIndex: 'createTime', title: '创建时间', width: '180px' },
        { title: '操作', slots: { customRender: 'operation' }, width: '180px' },
      ],
      paramList: [
        { name: '部门名称', key: 'deptName' },
        {
          type: 'ajax',
          key: 'status',
          name: '部门状态',
          valuename: 'dictValue',
          labelname: 'dictLabel',
          ajaxurl: 'system/dict/data/type/sys_normal_disable',
        },
      ],
    })
    let _methods = {
      // 数据加载
      pageQuerylist () {
        let params = {
          deptName: _data.params.deptName,
          status: _data.params.status,
        }
        http.sysPost("system/dept/list", params).then((res) => {
          let datas = res
          let result = []
          if (!Array.isArray(datas)) {
            return result
          }
          datas.forEach(item => {
            delete item.children;
          });
          let map = {};
          datas.forEach(item => {
            map[item.deptId] = item;
          });
          datas.forEach(item => {
            let parent = map[item.parentId];
            if (parent) {
              (parent.children || (parent.children = [])).push(item);
            } else {
              result.push(item);
            }
          });
          _data.deptList = result
        })
      },
      // 新增组件
      addDialog () {
        _data.pageVisable = !_data.pageVisable
        _data.detailsInfo = {}
        _data.pageType = 'add'
      },
      // 编辑组件
      editDialog (item) {
        _data.detailsInfo = item
        _data.pageVisable = true
        _data.pageType = 'edit'
      },
      // 删除
      remove (item) {
        proxy.$confirm({
          title: '提示',
          content: '是否删除',
          onOk () {
             let fors = {
              id: item.deptId
            }
            http.sysPost("system/dept/remove", fors).then((res) => {
              proxy.$message.success('删除成功')
              _methods.pageQuerylist()
            })
          },
        })
      },
    }
    onMounted(() => {
      _methods.pageQuerylist()
    })
    return {
      ...toRefs(_data),
      ..._methods,
    }
  },
}
</script>

<style lang="less">
.deptIndex {
  .ant-pagination {
    display: none;
  }
}
.deptnav-top {
  max-height: 75px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
  height: 75px;
  margin-right: 20px;
  .masr {
    margin-left: 15px;
    margin-right: 15px;
  }
}
.deptIndex-top {
  position: relative;
}
.deptindex-nav {
  position: absolute;
  right: 20px;
  top: 30px;
}
</style>