<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <div class="org_header">
          <span class="subject">组织管理</span>
          <div class="header_btn_box">
            <el-button size="mini" @click="getListOrg()">刷新列表</el-button>
            <el-dropdown class="m20" @command="orgAdd">
              <el-button type="primary" size="mini">
                添加一级组织<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">单个添加</el-dropdown-item>
                <el-dropdown-item command="2">批量添加</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <el-table
          :data="tableList"
          style="width: 100%; margin-bottom: 20px; margin-top: 20px"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" align="left" label="组织名称" sortable>
          </el-table-column>
          <el-table-column prop="managerList" label="组织负责人" align="left">
            <template slot-scope="scope">
              <div v-for="val in scope.row.managerList" :key="val.adminId">
                {{ val.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="left" width="200">
            <template slot-scope="scope">
              <div>
                <el-button
                  @click.native.prevent="editRow(scope.row)"
                  type="text"
                  size="mini"
                >
                  编辑
                </el-button>
                <!-- <el-button
                  @click.native.prevent="delRow(scope.row)"
                  type="text"
                  size="mini"
                  >
                  删除
                </el-button> -->
                <el-button
                  v-if="scope.row.children == null && scope.row.userCount == 0"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click.native.prevent="delRow(scope.row)"
                  >删除</el-button
                >
                <el-tooltip
                  v-else
                  effect="dark"
                  content="该组织已有部门或关联员工，不允许删除"
                  placement="bottom"
                >
                  <span style="margin-left: 10px">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click.native.prevent="delRow(scope.row)"
                      :disabled="true"
                      >删除</el-button
                    >
                  </span>
                </el-tooltip>
              </div>
              <div id="select_action">
                <el-dropdown
                  class="m20"
                  @command="
                    (command) => {
                      orgDownAdd(command, scope.row);
                    }
                  "
                >
                  <el-button type="text" size="mini">
                    添加下级组织<i
                      class="el-icon-arrow-down el-icon--right"
                    ></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="2">单个添加</el-dropdown-item>
                    <el-dropdown-item command="3">批量添加</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 弹窗 -->
        <el-dialog
          :title="title"
          :visible.sync="dialogFormVisible"
          :width="width"
          @close="closeDialog"
          :close-on-click-modal="false"
        >
          <div slot="title" class="dialog-title">
            <div class="dialog-icon mr20"></div>
            <span class="dialog-tip mr20">{{ title }}</span>
          </div>
          <div>
            <!-- 添加单个组织 -->
            <el-form
              :model="forms"
              v-if="isAddOrg || isAddDownOrg"
              ref="form"
              style="margin: 0 auto; width: 600px"
            >
              <el-form-item
                label="上级组织"
                :label-width="formLabelWidth"
                style="font-weight: bold"
              >
                <span style="font-weight: normal">{{ parentName }}</span>
              </el-form-item>
              <el-form-item
                label="名称"
                prop="name"
                :rules="[
                  {
                    required: true,
                    message: '请输入组织名称',
                    trigger: 'blur',
                  },
                ]"
                required
                :label-width="formLabelWidth"
                style="font-weight: bold"
              >
                <el-input
                  v-model="forms.name"
                  autocomplete="off"
                  placeholder="请输入组织名称"
                  size="small"
                  style="width: 450px"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="组织负责人"
                :label-width="formLabelWidth"
                style="font-weight: bold; margin-top: 70px"
              >
                <el-select
                  multiple
                  v-model="forms.manager"
                  placeholder="请选择"
                  @focus="onOpeUser('org')"
                  style="font-weight: bold; width: 450px"
                  size="small"
                  @remove-tag="onTag()"
                >
                  <el-option
                    v-for="item in toData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <!-- 多个组织 -->
            <el-form
              :model="formList"
              v-if="isBatchAddDownOrg || isBatchAddOrg"
              ref="forms"
              style="margin: 0 auto; width: 680px"
            >
              <el-form-item
                label="上级组织"
                :label-width="formLabelWidth"
                style="font-weight: bold"
              >
                <span style="font-weight: normal">{{ parentName }}</span>
              </el-form-item>
              <el-form-item
                :rules="[
                  {
                    required: index == 0 ? true : false,
                    message: '请输入组织名称',
                    trigger: 'blur',
                  },
                ]"
                label="子组织"
                :label-width="formLabelWidth"
                style="font-weight: bold"
                v-for="(i, index) in formList.orgList"
                :key="index"
              >
                <el-input
                  v-model="i.name"
                  autocomplete="off"
                  class="input_width mr10"
                  style="width: 450px"
                ></el-input>
                <el-button plain @click="delItemOrg(i)" v-if="index != 0"
                  >删除</el-button
                >
              </el-form-item>
              <el-form-item label="">
                <i
                  class="el-icon-circle-plus-outline"
                  style="font-size: 16px; color: #1e5aff; margin-left: 20px"
                ></i
                ><el-button type="text" @click="dadItemOrg()"
                  >添加一条</el-button
                >
              </el-form-item>
            </el-form>

            <!-- 编辑组织 -->
            <el-form
              :model="editForm"
              v-if="isEditOrg"
              ref="editForm"
              style="margin: 0 auto; width: 600px"
            >
              <el-form-item
                label="上级组织"
                :label-width="formLabelWidth"
                style="font-weight: bold"
              >
                <span style="font-weight: normal">{{ parentName }}</span>
              </el-form-item>
              <el-form-item
                label="名称"
                prop="name"
                :rules="[
                  {
                    required: true,
                    message: '请输入组织名称',
                    trigger: 'blur',
                  },
                ]"
                required
                :label-width="formLabelWidth"
                style="font-weight: bold"
              >
                <el-input
                  v-model="editForm.name"
                  autocomplete="off"
                  placeholder="请输入组织名称"
                  size="small"
                  style="width: 450px"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="组织负责人"
                :label-width="formLabelWidth"
                style="font-weight: bold"
              >
                <el-select
                  multiple
                  v-model="editForm.manager"
                  placeholder="请选择"
                  @focus="onOpeUser('org')"
                  style="font-weight: bold; width: 450px"
                  size="small"
                  @remove-tag="onTag()"
                >
                  <el-option
                    v-for="item in toData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <!-- 添加用户穿梭框 -->
          <div class="chooseBox" v-if="isManager">
            <div class="dialog_box">
              <el-row :gutter="10">
                <el-col :span="12">
                  <h3>选择:</h3>
                  <div class="side_left">
                    <div class="mb10">
                      <el-input
                        prefix-icon="el-icon-search"
                        v-model="filterObj.filter"
                        placeholder="输入关键字搜索"
                        clearable
                        @keyup.enter.native="searchManager()"
                      ></el-input>
                    </div>
                    <div class="mb10">
                      <el-breadcrumb class="breadcrumb" separator="/">
                        <el-breadcrumb-item
                          style="cursor: pointer"
                          @click.native="breadcrumbAll"
                        >
                          一级组织
                        </el-breadcrumb-item>
                        <el-breadcrumb-item
                          v-for="item in breadArr"
                          :key="item.id"
                          style="cursor: pointer"
                          @click.native="breadcrumb(item)"
                        >
                          {{ item.name }}
                        </el-breadcrumb-item>
                      </el-breadcrumb>
                    </div>
                    <div class="leftData mb10">
                      <div>
                        <el-checkbox
                          :indeterminate="isIndeterminate"
                          v-model="allChecked"
                          @change="handleCheckAllChange"
                          >全选</el-checkbox
                        >
                      </div>
                      <div class="overflowBox">
                        <ul v-for="i in root" :key="i.id" class="over-ul">
                          <li class="flexDiv">
                            <div @click="showLower(i)">
                              <div>
                                <i class="iconfont icon-wenjianjia-shouqi"></i
                                >{{ i.name }}
                              </div>
                            </div>
                          </li>
                        </ul>
                        <ul v-for="i in userList" :key="i.id" class="over-ul">
                          <li class="flexDiv">
                            <div>
                              <el-checkbox-group
                                class="flexDiv"
                                v-model="checkedList"
                              >
                                <el-checkbox
                                  :key="i.id"
                                  :label="i.id"
                                  @change="
                                    (val) => handleCheckedUserChange(val, i)
                                  "
                                  >{{ i.name }}</el-checkbox
                                >
                              </el-checkbox-group>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <h3>己选:</h3>
                  <div class="side_right">
                    <ul v-if="toData.length != 0">
                      <li v-for="(n, j) in toData" :key="j">
                        <div class="userlist">
                          <div>{{ n.name }}</div>
                          <div @click="removeUser(n.id)">
                            <i class="el-icon-error"></i>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div slot="footer" class="dialog-footer pt5" v-if="isManager">
            <el-button type="primary" size="mini" @click="confirmForm()"
              >确 定</el-button
            >
            <el-button size="mini" @click="closeDialog()">取 消</el-button>
          </div>
          <div
            slot="footer"
            class="dialog-footer pt5"
            v-if="isAddOrg || isAddDownOrg"
          >
            <el-button type="primary" size="mini" @click="addForm()"
              >确 定</el-button
            >
            <el-button size="mini" @click="closeDialog()">取 消</el-button>
          </div>
          <div slot="footer" class="dialog-footer pt5" v-if="isEditOrg">
            <el-button type="primary" size="mini" @click="editForms()"
              >确 定</el-button
            >
            <el-button size="mini" @click="closeDialog()">取 消</el-button>
          </div>
          <div
            slot="footer"
            class="dialog-footer pt5"
            v-if="isBatchAddDownOrg || isBatchAddOrg"
          >
            <el-button type="primary" size="mini" @click="addForms()"
              >确 定</el-button
            >
            <el-button size="mini" @click="closeDialog()">取 消</el-button>
          </div>
        </el-dialog>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { listDepartments, listUser } from "@/api/jobs";
import {
  delDepartments,
  getDeptListUsers,
  addDepartments,
  editDepartments,
} from "@/api/org";
import treeTransfer from "el-tree-transfer"; // 引入
export default {
  components: {
    treeTransfer,
  },
  data() {
    return {
      tableList: [],
      parentName: "",
      filterObj: {},
      ManagerFilter: "",
      departmentsList: [], // 编辑用户管理员
      isEdit: false,
      userList: [],
      editData: {},
      // 组织添加部门
      id: 0,
      //选中用户列表
      checkedList: [],
      root: [],
      toData: [],
      isIndeterminate: true,

      breadArr: [],
      allChecked: false,
      // 组织table列表
      orgList: [],
      jobsList: [],
      // 查询参数
      queryParams: {
        filter: "",
        sort_by: "id",
        sort: "desc",
        offset: 1,
        limit: 10,
      },
      multiple: 0, // 1 添加单个组织  2 批量添加组织  3添加下级单个组织  4 批量添加下级组织  5 删除组织  6编辑组织  7管理人员弹窗
      isAddOrg: false, // 1 添加单个组织
      isBatchAddOrg: false, // 2 批量添加组织
      isEditOrg: false, // 6 编辑组织
      isAddDownOrg: false, // 3添加下级单个组织
      isBatchAddDownOrg: false, //4 批量添加下级组织
      isManager: false, // 7管理人员弹窗
      dialogFormVisible: false,
      forms: {
        name: "",
        manager: [],
      },
      editForm: {
        name: "",
        manager: [],
      },
      formList: {
        orgList: [
          {
            name: "",
          },
        ],
      },
      formLabelWidth: "86px",
      value: "",
      loading: false,
      total: 0,
      userOpen: false,
      width: "890px",
      title: "添加组织",
    };
  },
  created() {
    this.getListOrg();
  },
  mounted() {},
  methods: {
    searchManager() {
      listUser(this.filterObj).then((res) => {});
    },
    closeDialog() {
      this.isEdit = false;
      this.sAddOrg = false; // 1 添加单个组织
      this.isBatchAddOrg = false; // 2 批量添加组织
      this.isEditOrg = false; // 6 编辑组织
      this.isAddDownOrg = false; // 3添加下级单个组织
      this.isBatchAddDownOrg = false; //4 批量添加下级组织
      this.isManager = false; // 7管理人员弹窗
      this.dialogFormVisible = false;
      this.toData = [];
      this.userList = [];
      this.forms.manager = [];
    },
    addForms() {
      this.$refs["forms"].validate((valid) => {
        if (valid) {
          let data = {
            departmentItemList: [],
          };
          this.formList.orgList.forEach((val, index) => {
            if (val.name != "") {
              data.departmentItemList.push({
                name: val.name,
                managerAdminIDList: [],
              });
            }
          });
          addDepartments(JSON.stringify(data), this.id).then((res) => {
            if (res.code && res.code != 0) {
              this.msgError(res.msg);
            } else {
              this.msgSuccess("添加成功");
              this.id = 0;
              this.formList = {
                orgList: [
                  {
                    name: "",
                  },
                ],
              };
              this.dialogFormVisible = false;
              this.isBatchAddOrg = false; // 2 批量添加组织
              this.isBatchAddDownOrg = false; //4 批量添加下级组织
              this.allChecked = false;
              this.getListOrg();
            }
          });
        }
      });
    },
    editForms() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          let data = {
            adminIDList: this.editForm.manager,
            name: this.editForm.name,
            parentID: this.editData.parentID,
          };
          editDepartments(JSON.stringify(data), this.editData.id).then(
            (res) => {
              if (res.code && res.code != 0) {
                this.msgError(res.msg);
              } else {
                this.msgSuccess("编辑成功!");
                this.dialogFormVisible = false;
                this.multiple = 0;
                this.allChecked = false;
                this.getListOrg();
              }
            }
          );
        }
      });
    },
    addForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = {
            departmentItemList: [
              {
                managerAdminIDList: this.forms.manager,
                name: this.forms.name,
              },
            ],
          };
          addDepartments(JSON.stringify(data), this.id).then((res) => {
            if (res.code && res.code != 0) {
              this.msgError(res.msg);
            } else {
              this.msgSuccess("新增成功!");
              this.id = 0;
              this.forms.name = "";
              this.forms.manager = [];
              this.dialogFormVisible = false;
              this.isAddOrg = false;
              this.getListOrg();
            }
          });
        }
      });
    },
    onTag() {},
    handleCheckAllChange(val) {
      if (this.userList.length > 0) {
        if (val == true) {
          this.toData = this.toData.concat(this.userList);
          if (this.toData.length != 0) {
            this.checkedList = this.toData.map((i) => {
              return i.id;
            });
            this.toData = this.toData.concat(this.userList);
            let deWeightThree = () => {
              let map = new Map();
              for (let item of this.toData) {
                if (!map.has(item.id)) {
                  map.set(item.id, item);
                }
              }
              return [...map.values()];
            };
            this.toData = deWeightThree();
          } else {
            this.toData = this.toData.concat(this.userList);
            this.checkedList = this.toData.map((i) => {
              return i.id;
            });
          }
        } else {
          if (this.toData.length != 0) {
            this.toData = this.toData.filter(
              (x) => !this.userList.some((item) => x.id === item.id)
            );
            this.checkedList = this.toData.filter(
              (x) => !this.userList.some((item) => x === item.id)
            );
          } else {
            this.toData = this.userList;
          }
        }
      }
      this.isIndeterminate = false;
    },
    handleCheckedUserChange(flag, val) {
      if (this.isEdit) {
        if (!flag) {
          this.deleteItem(val.id, this.toData);
        } else {
          this.toData.push(val);
          if (this.toData.length != 0) {
            let deWeightThree = () => {
              let map = new Map();
              for (let item of this.toData) {
                if (!map.has(item.id)) {
                  map.set(item.id, item);
                }
              }
              return [...map.values()];
            };
            this.toData = deWeightThree();
          } else {
            this.deleteItem(val.id, this.toData);
          }
        }
      } else {
        if (flag == true) {
          this.toData.push(val);
          if (this.toData.length != 0) {
            let deWeightThree = () => {
              let map = new Map();
              for (let item of this.toData) {
                if (!map.has(item.id)) {
                  map.set(item.id, item);
                }
              }
              return [...map.values()];
            };
            this.toData = deWeightThree();
          } else {
            this.deleteItem(val.id, this.toData);
          }
        } else {
          this.toData = this.toData.concat(val);
        }
      }
    },
    deleteItem(item, list) {
      for (var key in list) {
        if (list[key].id === item) {
          list.splice(key, 1);
        }
      }
    },
    removeUser(id) {
      this.toData = this.toData.filter((item) => {
        return item.id != id;
      });
      this.allChecked = false;
      this.checkedList = this.checkedList.filter((item) => {
        return item != id;
      });
    },
    //关联用户弹窗，点击面包屑导航组织架构
    breadcrumbAll() {
      //获取全部组件数据
      this.root = this.tableList
      this.breadArr = [];
    },
    //关联用户弹窗，点击面包屑导航
    breadcrumb(item) {
      this.filterObj.deptID = item.id;
      this.root = item.children;
      var index = this.breadArr.indexOf(item);
      if (index !== -1) {
        this.breadArr.splice(index + 1);
      }
      this.userList = [];
      let queryParams = {
        deptID: item.id,
      };
      getDeptListUsers(queryParams).then((res) => {
        res.departments.forEach((val, index) => {
          if (val.users != null) {
            val.users.forEach((va, index) => {
              this.userList.push(va);
            });
          }
        });
      });
    },
    //点击下级
    showLower(item) {
      // if (item.children != null) {
      this.filterObj.deptID = item.id;
      this.userList = [];
      let queryParams = {
        deptID: item.id,
      };
      getDeptListUsers(queryParams).then((res) => {
        res.departments.forEach((val, index) => {
          if (val.users != null) {
            val.users.forEach((va, index) => {
              this.userList.push(va);
            });
          } else {
            this.msgWarning("该部门下暂无人员");
          }
        });
      });
      this.root = item.children;
      this.isIndeterminate = true;
      this.allChecked = false;
      if (this.breadArr.length == 0) {
        this.breadArr.push(item);
      } else {
        let index = this.breadArr.indexOf(item);
        if (index == -1) {
          this.breadArr.push(item);
        }
      }
      // } else {
      //   this.msgWarning("该部门下暂无人员");
      // }
    },
    /**获取组织 */
    getListOrg() {
      this.loading = true;
      this.orgList = [];
      this.tableList = [];

      listDepartments().then((res) => {
        this.parentName = res.root.name;
        this.orgList.push(res.root);
        this.tableList = res.root.children;
        this.root = res.root.children;
        this.loading = false;
      });
    },
    /**开始组织人员架构表 */
    onOpeUser() {
      this.breadArr = [];
      this.root = [];
      this.userList = [];
      this.root = this.tableList;
      this.isManager = true;
      if (this.isEdit) {
        this.isEditOrg = false;
        this.isBatchAddDownOrg = false;
        this.checkedList = this.editForm.manager;
      } else {
        this.isAddOrg = false;
        this.isAddDownOrg = false;
      }
    },
    /**删除当前组织 */
    delRow(index) {
      const id = index.id;
      this.$confirm("此操作将永久删除该部门, 是否继续?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delDepartments(id).then((res) => {
            if (res.code && res.code != 0) {
              this.msgError(res.msg)
            }else{
              this.msgSuccess("删除成功!");
              this.getListOrg();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    editRow(index) {
      let data = index;
      if (data.managerList != null) {
        data.managerList.forEach((val, index) => {
          this.toData.push({ id: val.adminId, name: val.name });
          this.editForm.manager.push(val.adminId);
        });
      } else {
        this.toData = [];
        this.editForm.manager = [];
      }

      this.isEdit = true;
      this.isAddOrg = false;
      this.editData = index;
      this.editForm.name = index.name;
      this.editID = index.id;
      this.title = "编辑组织";
      this.dialogFormVisible = true; // 控制弹窗
      this.isEditOrg = true;
    },
    /**添加下级组织 */
    orgDownAdd(index, data) {
      this.id = data.id;
      this.parentName = data.name;
      this.dialogFormVisible = true; // 控制弹窗
      if (index == 2) {
        this.isAddDownOrg = true;
        this.title = "添加下级组织";
      } else {
        this.isBatchAddDownOrg = true;
        this.title = "批量添加下级组织";
      }
    },
    /**添加一条信息 */
    dadItemOrg() {
      this.formList.orgList.push({
        name: "",
      });
    },
    /** 添加组织 */
    orgAdd(index) {
      this.forms.manager = [];
      this.dialogFormVisible = true; // 控制弹窗
      if (index == 1) {
        this.isBatchAddOrg = false;
        this.isAddOrg = true;
        this.title = "添加一级组织";
        this.toData = [];
        this.checkedList = [];
        this.parentName = this.orgList[0].name;
      } else {
        this.parentName = this.orgList[0].name;
        this.isAddOrg = false;
        this.isBatchAddOrg = true;
        this.multiple = 2;
        this.title = "添加批量组织";
      }
    },
    /**取消添加 */
    closeDialog() {
      this.isEdit = false;
      this.sAddOrg = false; // 1 添加单个组织
      this.isBatchAddOrg = false; // 2 批量添加组织
      this.isEditOrg = false; // 6 编辑组织
      this.isAddDownOrg = false; // 3添加下级单个组织
      this.isBatchAddDownOrg = false; //4 批量添加下级组织
      this.isManager = false; // 7管理人员弹窗
      this.dialogFormVisible = false;
      // 7 穿梭框 /6 编辑 /1 3 以及&&下级添加 /2 4 批量添加
      this.toData = [];
      this.userList = [];
      this.editForm.name = "";
      this.editForm.manager = [];
      this.dialogFormVisible = false;
      this.formList.name = "";
      this.dialogFormVisible = false;
      this.forms.name = "";
      this.forms.manager = [];
      this.dialogFormVisible = false;
      this.toData = [];
    },
    /**确定添加 */
    confirmForm() {
      this.isManager = false;
      if (this.isEdit) {
        this.forms.manager = [];
        this.editForm.manager = [];
        this.isEditOrg = true;
        this.toData.forEach((val, index) => {
          this.editForm.manager.push(val.id);
        });
      } else {
        this.editForm.manager = [];
        this.isAddOrg = true;
        this.toData.forEach((val, index) => {
          this.forms.manager.push(val.id);
        });
      }
    },
    /**删除添加某个子组织 */
    delItemOrg(item) {
      var index = this.formList.orgList.indexOf(item);
      if (index !== -1) {
        this.formList.orgList.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.el-breadcrumb {
  line-height: 1.8;
}
.over-y {
  height: 230px;
  overflow-y: auto;
}
ul,
li {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
li {
  height: 30px;
  line-height: 30px;
}
.userlist {
  display: flex;
  justify-content: space-between;
}
.overflowBox {
  height: 230px;
  overflow-y: auto;
}
.over-ul {
  height: 32px;
  margin: 0;
  cursor: pointer;
}
.org_header {
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -26px;
}
.subject {
  color: $titleBlue;
  font-weight: bold;
}
.header_btn_box {
  padding: 10px 0 10px;
  display: flex;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.input_width {
  width: 240px;
}
.chooseBox ::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 192px;
}
::v-deep .dialog-footer {
  text-align: center;
}
.side_left,
.side_right {
  background: #f2f6fc;
  padding: 15px;
  height: 350px;
  box-sizing: border-box;
}
.side_right {
  overflow-y: scroll;
}
.flexDiv {
  width: 100%;
  height: 30px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

@media only screen and (max-width: 470px) {
  .message-delete {
    width: 300px;
  }
  .el-message {
    min-width: 300px;
  }
  .el-dialog {
    margin-top: 54vh !important;
  }
}
</style>
