zhgdyun/src/views/projectFront/configManage/groupStructureManagement.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form :inline="true" size="medium">
        <el-form-item label="组织名称">
          <el-input
            v-model="queryInfo.name"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryInfo.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!--          查询-->
          <el-button type="primary" plain @click="query">{{
            $t("message.alarmWarning.query")
          }}</el-button>
          <!--          //刷新-->
          <el-button type="warning" plain @click="refresh">{{
            $t("message.alarmValueSet.refresh")
          }}</el-button>
          <!--          新增-->
          <el-button type="primary" @click="add">{{
            $t("message.videoManage.add")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
        <el-table
          class="tables"
          :data="tabelList"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            prop="deptName"
            label="组织名称"
            align="left"
          >
        </el-table-column>
          <el-table-column
            prop="orderNum"
            label="排序"
            align="center"
          ></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0">正常</el-tag>
              <el-tag type="danger" v-else>停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            width="600px"
            :label="$t('message.alarmValueSet.operation')"
            align="center"
          >
            <template slot-scope="scope">
              <div class="tableBtns">
                <div @click="addChildrenGroup(scope.row)" class="operationText">
                  <i
                    class="el-icon-plus"
                    style="width: 15px;height: 15px;color: #3F93FF;margin-right: 2px;"
                  ></i>
                  <span>新增</span>
                </div>
                <div @click="edit(scope.row)" class="operationText">
                  <img
                    src="@/assets/images/icon-edit.png"
                    width="15px"
                    height="15px"
                  />
                  <span>{{ $t("message.alarmValueSet.edit") }}</span>
                </div>
                <div @click="deleteDev(scope.row)" class="operationText">
                  <img
                    src="@/assets/images/icon-delete.png"
                    width="15px"
                    height="15px"
                  />
                  <span>{{ $t("message.alarmValueSet.delete") }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      <el-pagination
          style="margin-top: 40px;"
          class="pagerBox"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pagInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pagInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="pagInfo.total"
          background
        ></el-pagination>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="groupDialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="addEditForm"
          ref="addEditForm"
          label-width="80px"
          class="dialogFormBox"
          :rules="formRules"
        >
          <el-form-item
            v-if="title == '添加子组织' || (addEditForm.parentId && addEditForm.parentId !='0')"
            label="选择父级"
            prop="parentId"
          >
            <el-select
              v-model="selectVal"
              placeholder="请选择"
            >
              <el-option style="height:auto" :value="[]">
                <el-tree
                  :data="List"
                  node-key="id"
                  ref="groupTree"
                  highlight-current
                  :default-expanded-keys="defaultExpandArr"
                  :props="defaultProps"
                  :default-expand-all="false"
                  @node-click="treeClick"
                >
                </el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <div class="row-flex">
            <el-form-item label="组织名称" prop="deptName">
              <el-input
                v-model="addEditForm.deptName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number
                v-model="addEditForm.orderNum"
                controls-position="right"
                :max="100"
              ></el-input-number>
            </el-form-item>
          </div>
          <div class="row-flex">
            <el-form-item label="负责人" prop="leader">
              <el-input
                v-model="addEditForm.leader"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="addEditForm.phone"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="row-flex">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="addEditForm.email"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="组织状态" prop="status">
              <el-radio-group v-model="addEditForm.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="groupDialogVisible = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.alarmValueSet.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submitAdd"
              size="medium"
              >{{ $t("message.alarmValueSet.save") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addProjectUserApi,
  editProjectUserApi,
  getProjectChilderSystemUserListApi,
  getTreeGroupApi,
  getTreeGroupPageApi,
  addTreeGroupApi,
  editTreeGroupApi,
  deleteTreeGroupApi,
} from "@/assets/js/api/configManage";
import {
  getEnterpriseInfoList,
  ufaceDevList,
} from "@/assets/js/api/laborPerson";
import { deleteSystemUserApi } from "@/assets/js/api/account";
export default {
  data() {
    return {
        defaultExpandArr: [],
      selectVal: "",
      selectTreeData: {},
      dateList: [], // 遍历用
      value1: [], // select绑定的值
      // 对应的字段
      defaultProps: {
        children: "children",
        label: "deptName",
      },
      groupDialogVisible: false,
      title: "添加组织",
      statusList: [
        { name: "正常", value: 0 },
        { name: "停用", value: 1 },
      ],
      addEditForm: {
        deptName: "",
        orderNum: 0,
        leader: "",
        phone: "",
        email: "",
        status: 0,
        parentId: "",
      },
      formRules: {
        parentId: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        deptName: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        orderNum: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        phone: [
          {
            message: "请输入正确的手机号码",
            trigger: "blur",
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱格式",
            trigger: "blur",
          },
        ],
      },
      tabelList: [],
      List: [],
      Popup: {
        type: "add",
        show: false,
      },
      queryInfo: {
        name: "",
        status: null,
      },
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      personList: [],
      roleList: [],
      enterpriseListData: [],
      selectCompanyData: [],
      companyDialog: false,
      checkAll: false,
      isIndeterminate: false,
      editComapnyDataId: "",
      //配置可查看或管理的设备相关参数
      allUfaceDev: [],
      allVideoDev: [],
      configDevDialog: false,
      configDevType: 1, //1人脸设备，2视频监控
    };
  },
  created() {
    this.getTableList();
    this.getList();
  },
  methods: {
    // 树形控件点击
    treeClick(data) {
      console.log(data);
      this.selectVal = data.deptName;
      this.selectTreeData = data;
      this.addEditForm.parentId = data.id;
      this.$refs.addEditForm.validateField("parentId");
    },
    //获取企业 || 劳务公司 列表
    getProjectList() {
      let data = {
        projectSn: this.$store.state.projectSn,
        // enterpriseName: this.enterpriseName,
      };
      getEnterpriseInfoList(data).then((res) => {
        this.enterpriseListData = res.result;
        // console.log(res.result);
      });
    },
    //获取所有的闸机设备
    getMachineList() {
      ufaceDevList({ projectSn: this.$store.state.projectSn }).then((list) => {
        this.allUfaceDev = list.result;
      });
    },
    handle(type, show) {
      //打开弹窗前的统一处理
      this.Popup = {
        type: type,
        show: show,
      };
    },
    query() {
      console.log("查询的参数", this.queryInfo);
      this.getTableList();
    },
    add() {
      this.title = "添加组织";
      this.selectVal = "";
      this.selectTreeData = {};
      this.addEditForm = {
        deptName: "",
        orderNum: 0,
        leader: "",
        phone: "",
        email: "",
        status: 0,
        parentId: "",
      }
      this.groupDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate();
      });
    },
    // 添加子组织
    addChildrenGroup(obj) {
      this.title = "添加子组织";
      this.selectVal = "";
      this.selectTreeData = {};
      this.addEditForm = {
        deptName: "",
        orderNum: 0,
        leader: "",
        phone: "",
        email: "",
        status: 0,
        parentId: obj.id,
      }
      this.selectVal = obj.deptName;
      this.groupDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate();
        this.$refs.groupTree.setCurrentKey(this.addEditForm.parentId);
      });
    },
    edit(obj) {
      console.log("编辑", obj);
      this.title = "编辑组织";
      this.addEditForm = JSON.parse(JSON.stringify(obj));
      if (this.addEditForm.parentObj) {
        this.selectTreeData = JSON.parse(this.addEditForm.parentObj);
        this.selectVal = this.selectTreeData.deptName;
        this.defaultExpandArr = [this.selectTreeData.id];
      } else {
        this.selectTreeData = {};
        this.selectVal = "";
        this.defaultExpandArr = [];
      }
      this.groupDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate();
        if (this.addEditForm.parentObj) {
            this.$refs.groupTree.setCurrentKey(this.addEditForm.parentId);
        }
      });
    },
    deleteDev(obj) {
      console.log("删除", obj);
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.deptName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      )
        .then(() => {
          deleteTreeGroupApi({ id: obj.id }).then((result) => {
            if (result.success) {
              this.$message.success(result.message);
              this.getTableList();
    this.getList();
            }
          });
        })
        .catch(() => {});
    },
    submitAdd() {
      this.$refs["addEditForm"].validate((valid) => {
        if (valid) {
          let params = this.addEditForm;
          // params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',');
          params.projectSn = this.$store.state.projectSn;
          if (this.title == "添加子组织") {
            params.parentObj = JSON.stringify(this.selectTreeData);
          }
          if (this.title == "添加组织" || this.title == "添加子组织") {
            addTreeGroupApi(params).then((result) => {
              if (result.success) {
                this.$message.success(result.message);
                this.getTableList();
    this.getList();
                this.groupDialogVisible = false;
              }
            });
          } else if (this.title == "编辑组织" || this.title == "编辑子组织") {
            console.log("编辑信息", this.addEditForm);
            editTreeGroupApi(params).then((result) => {
              if (result.success) {
                this.$message.success(result.message);
                this.getTableList();
    this.getList();
                this.groupDialogVisible = false;
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    refresh() {
      this.queryInfo = {
        name: "",
        status: null,
      };
      this.getTableList();
    },
    getTableList(){
      let requestData = {
        projectSn: this.$store.state.projectSn,
        deptName: this.queryInfo.name,
        status: this.queryInfo.status,
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize
      }
      getTreeGroupPageApi(requestData).then((res) => {
        if (res.success) {
          this.tabelList = res.result.records;
          this.pagInfo.total = +res.result.total;
          console.log("列表", result);
        }
      });
    },
    getList() {
      getTreeGroupApi({
        projectSn: this.$store.state.projectSn,
        deptName: this.queryInfo.name,
        status: this.queryInfo.status,
      }).then((result) => {
        if (result.success) {
          this.List = result.result;
          console.log("列表", result);
        }
      });
    },
    close() {
      this.addEditForm = {};
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate();
      });
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val;
      this.getTableList();
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val;
      this.getTableList();
    },
  },
};
</script>
<style lang="less" scoped>
.flex() {
  display: flex;
  align-items: center;
}
// 添加/编辑组织弹框样式
.dialog_content {
  padding: 0px;
  .dialogFormBox {
    width: 100%;
    .el-input {
      width: 100% !important;
    }
    .el-input-number {
      /deep/.el-input {
        width: 100% !important;
      }
    }
    .el-select {
      width: 100% !important;
      /deep/.el-input {
        width: 100% !important;
      }
    }
    .row-flex {
      .flex();
      justify-content: space-between;
      .el-form-item {
        width: 49%;
      }
    }
  }
}
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
.el-checkbox-widthOne {
  width: 260px;
  height: 50px;
  white-space: pre-wrap;
}
.el-checkbox-width {
  width: 250px;
  white-space: pre-wrap;
  display: flex;
  align-items: center;
}
.el-checkbox-widthTwo {
  width: 260px;
  height: 50px;
  white-space: pre-wrap;
}
.searchBox > div {
  margin-right: 15px;
}

.tableBtns {
  display: flex;
  justify-content: center;
}

::v-deep .el-checkbox__label {
  width: 260px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 22px;
  line-height: 15px;
}
// 下拉框样式修改
/deep/.el-select-dropdown__item.hover,.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: transparent;
}
</style>