Newer
Older
operation_web / src / components / ConfigManager / project.vue
@田松 田松 on 21 Jan 2021 35 KB +++
<template>
  <div class="page-data">
    <!--搜素框-->
    <div class="page-filter">
      <page-filter
        :query.sync="projectFilterInfo.query"
        :filter-list="projectFilterInfo.list"
        @handleClick="handleClick"
      />
    </div>
    <div class="page-content">
      <!--表格-->
      <div class="h-100">
        <page-table
          tabIndex
          pagination
          :api-url="projectTableInfo.url"
          :refresh="projectTableInfo.refresh"
          :data.sync="projectTableInfo.data"
          :query="projectFilterInfo.query"
          :page-query="projectTableInfo.pageQuery"
          :list-type-info="listTypeInfo"
          :init-curpage="projectTableInfo.initCurpage"
          :field-list="projectTableInfo.fieldList"
          :handle="projectTableInfo.handle"
          @handleClick="handleClick"
        >
          <template v-slot:col-status="scope">
            <el-button type="text" size="small" :class="[scope.row.status === 1 ? '' : 'red']">
              {{ scope.row.status === 1 ? "管理中" : "未管理" }}
            </el-button>
          </template>
        </page-table>
      </div>
    </div>
    <!--弹窗-->
    <el-dialog
      class="page-data-dialog"
      :width="dialogInfo.width"
      append-to-body
      :title="dialogInfo.title[dialogInfo.type]"
      :visible.sync="dialogInfo.visible"
      :before-close="handleClose"
    >
      <!--项目关联站点-->
      <template v-if="dialogInfo.type === 'relate'">
        <div class="page-filter">
          <el-form :inline="true" :model="siteQuery" ref="siteQuery" size="medium">
            <el-form-item label="">
              <el-input v-model="siteQuery.searchStr" placeholder="请输入站点编号/名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="medium" @click="handleClick('siteSearch')">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-content">
          <el-row :gutter="20" class="h-100">
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">未关联站点列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="unRelate"
                :api-url="siteTableInfo.url"
                :refresh="siteTableInfo.refresh"
                :data.sync="UnRelateSiteTableInfo.data"
                :query="UnRelateSiteTableInfo.query"
                :init-curpage="siteTableInfo.initCurpage"
                :field-list="siteTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
            <el-col :span="4" class="h-100">
              <div class="btn-group">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-right"
                  :disabled="isCanInsertSite"
                  @click="handleClick('insert')"
                  >添加</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-d-arrow-left"
                  :disabled="isCanRemoveSite"
                  @click="handleClick('remove')"
                  >移除</el-button
                >
              </div>
            </el-col>
            <el-col :span="10" class="h-100 flex flex-d">
              <div class="table-title">已关联站点列表</div>
              <page-table
                class="flex-1"
                checkBox
                pagination
                type="isRelate"
                :api-url="siteTableInfo.url"
                :refresh="siteTableInfo.refresh"
                :data.sync="RelatedSiteTableInfo.data"
                :query="RelatedSiteTableInfo.query"
                :init-curpage="siteTableInfo.initCurpage"
                :field-list="siteTableInfo.fieldList"
                @handleClick="handleClick"
                @handleEvent="handleEvent"
              />
            </el-col>
          </el-row>
        </div>
      </template>
      <!--修改/添加项目-->
      <template v-if="dialogInfo.type === 'update' || dialogInfo.type === 'create' ">
        <div class="page-form">
          <page-form
            :ref-obj.sync="projectFormInfo.ref"
            :data="projectFormInfo.data"
            :field-list="projectFormInfo.fieldList"
            :rules="projectFormInfo.rules"
            :list-type-info="listTypeInfo"
            :limit-time="projectFormInfo.limitTime"
            :label-width="projectFormInfo.labelWidth"
            :need-clear-nodes="projectFormInfo.needClearNodes"
            :cascader-options="projectFormInfo.cascaderOptions"
            @currentAreaJwd="currentAreaJwd"
            @handleClick="handleClick"
          />
        </div>
      </template>
      <!--分配权限-->
      <template v-if="dialogInfo.type === 'permission'">
        <div class="page-filter">
          <page-filter
            :query.sync="permissionFilterInfo.query"
            :filter-list="permissionFilterInfo.list"
            @handleClick="handleClick"
          />
        </div>
        <div class="page-content">
          <page-table
            tabIndex
            pagination
            :api-url="permissionTableInfo.url"
            :refresh="permissionTableInfo.refresh"
            :data.sync="permissionTableInfo.data"
            :query="permissionFilterInfo.query"
            :init-curpage="permissionTableInfo.initCurpage"
            :field-list="permissionTableInfo.fieldList"
            :handle="permissionTableInfo.handle"
            @handleClick="handleClick"
            @handleEvent="handleEvent"
          />
        </div>
      </template>
      <div class="dialot-footer" slot="footer">
        <template v-if="dialogInfo.type !== 'relate' && dialogInfo.type !== 'permission'">
          <el-button type="primary" size="small" @click="handleClick('submit')" :loading="btnLoading">保存</el-button>
        </template>
        <el-button size="small" @click="handleClick('close')">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="userDialog"
      append-to-body
      width="550px"
      :title="userDialogInfo.title[userDialogInfo.type]"
      :visible.sync="userDialogInfo.visible"
      :before-close="handleUserClose"
    >
      <!--添加用户-->
      <template v-if="userDialogInfo.type === 'addUser'">
        <div class="page-form">
          <page-form
            :ref-obj.sync="userFormInfo.ref"
            size="medium"
            :data="userFormInfo.data"
            :field-list="userFormInfo.fieldList"
            :rules="userFormInfo.rules"
            :list-type-info="listTypeInfo"
            @handleClick="handleClick"
          />
        </div>
      </template>
      <!--添加用户组-->
      <template v-else-if="userDialogInfo.type === 'addGroup'">
        <div class="page-form">
          <page-form
            :ref-obj.sync="groupFormInfo.ref"
            :data="groupFormInfo.data"
            :field-list="groupFormInfo.fieldList"
            :rules="groupFormInfo.rules"
            @handleClick="handleClick"
          />
        </div>
      </template>
      <!--查看用户-->
      <template v-else>
        <div class="h-100">
          <page-table
            tabIndex
            pagination
            :api-url="groupUserTableInfo.url"
            :refresh="groupUserTableInfo.refresh"
            :data.sync="groupUserTableInfo.data"
            :query="groupUserFilterInfo.query"
            :init-curpage="groupUserTableInfo.initCurpage"
            :field-list="groupUserTableInfo.fieldList"
            :handle="groupUserTableInfo.handle"
            @handleClick="handleClick"
            @handleEvent="handleEvent"
          />
        </div>
      </template>
      <div slot="footer">
        <el-button size="small" type="primary" v-if="userDialogInfo.type !== 'detail'" @click="handleClick('save')" :loading="btnLoading">提交</el-button>
        <el-button size="small" @click="handleClick('closeUserDialog')">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { message } from "./../../util/item";
export default {
  data() {
    // 验证电话
    let checkPhone = (rule, value, callback) => {
      let check = this.$validate({ label: "手机号", value, rules: ["phone"] });
      if (!check.result) {
        callback(new Error(check.message));
      } else {
        callback();
      }
    };
    return {
      //项目搜索相关
      projectFilterInfo: {
        query: {
          searchStr: "",
          startDate: "",
          endDate: ""
        },
        list: [
          {type: "input", label: "项目名称/编号", value: "searchStr", hideLabel: true },
          {type: "date", label: "开始时间", value: "startDate", dateType: "date", datePickerOptions: "pickerOptionsStart", hideLabel: true},
          {type: "date", label: "结束时间", value: "endDate", dateType: "date", datePickerOptions: "pickerOptionsEnd", hideLabel: true},
          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "searchProject", show: true},
          {type: "button", label: "添加项目", btType: "primary", icon: "el-icon-circle-plus-outline", event: "create", show: true, has: "m11-1-4"}
        ]
      },
      //项目表格相关
      projectTableInfo: {
        url: this.nozzle.sysPlatformList, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "项目编号", value: "platformCode", width: 100 },
          { label: "项目名称", value: "name", minWidth: 150, tooltip: true },
          { label: "项目添加时间", value: "createTime", minWidth: 150, tooltip: true },
          { label: "项目上线时间", value: "onlineTime", minWidth: 150, tooltip: true },
          { label: "操作人", value: "operator", width: 120 },
          { label: "状态", value: "status", width: 100, type: "slot" },
          { label: "项目类型", value: "sysGroup", minWidth: 100, tooltip: true, list: "xmlxList" }
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "240",
          btList: [
            { label: "分配权限", size: "small", type: "text", event: "permission", show: true, has: 'm11-1-1' },
            { label: "关联站点", size: "small", type: "text", event: "relate", show: true, has: 'm11-1-2' },
            { label: "修改", size: "small", type: "text", event: "update", show: true, has: 'm11-1-3' },
            { label: "删除", size: "small", type: "text", event: "delete", show: true, has: 'm11-1-5' }
          ]
        }
      },
      //分配权限表格相关
      permissionTableInfo: {
        url: this.nozzle.userGroupList, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "分组名称", value: "groupName", minWidth: 150, tooltip: true },
          { label: "分组描述", value: "description", minWidth: 150, tooltip: true }
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "240",
          btList: [
            { label: "添加用户", size: "small", type: "text", event: "addUser", show: true },
            { label: "查看用户", size: "small", type: "text", event: "detail", show: true },
            { label: "删除用户组", size: "small", type: "text", event: "delGroup", show: true }
          ]
        }
      },
      //分配权限过滤相关
      permissionFilterInfo: {
        query: {
          searchStr: "",
          platformCode: ""
        },
        list: [
          { type: "input", label: "分组名称", value: "searchStr", hideLabel: true },
          { type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "searchPermission", show: true },
          { type: "button", label: "添加用户组", btType: "primary", icon: "el-icon-plus", event: "addGroup", show: true }
        ]
      },
      //分配权限选中表格数据
      permissionSelectData: [],
      //需要进行绑定操作的项目ID
      needHandleProjectId: "",
      //按钮loading
      btnLoading: false,
      //弹窗相关
      dialogInfo: {
        title: {
          update: "编辑项目",
          create: "添加项目"
        },
        type: "",
        visible: false,
        width: "80%"
      },
      //列表相关
      listTypeInfo: {
        xmlxList: [{ key: "合同项目", value: "0" }, { key: "临测项目", value: "1" }],
        groupList: [],
        deptTree: [],
        userType: [{ key: "普通用户", value: 0 }, { key: "超级管理员", value: 1 }],
        statusList: [{ key: "未管理", value: 0 }, { key: "管理中", value: 1 }],
        roleList: [],
      },
      //用户弹窗相关
      userDialogInfo: {
        title: {
          addUser: "添加用户",
          addGroup: "添加用户组",
          detail: "用户列表"
        },
        type: "",
        visible: false
      },
      //用户表单相关
      userFormInfo: {
        ref: null,
        data: {
          id: undefined,
          login: "",
          realName: "",
          userType: 0,
          orgId: undefined,
          groupId: undefined,
          groupName: "",
          roleId: undefined,
          mobile: "",
          roleType: 0,
        },
        fieldList: [
          { label: "用户名", value: "login", type: "input", required: true },
          { label: "姓名", value: "realName", type: "input", required: true },
          { label: "手机号", value: "mobile", type: "input", required: true, validator: checkPhone },
          { label: "用户类型", value: "userType", type: "select", list: "userType", disabled: true },
          { label: "所属部门", value: "orgId", type: "treeselect", list: "deptTree", required: true },
          { label: "所属分组", value: "groupName", type: "input", disabled: true },
          { label: "所属角色", value: "roleId", type: "select", list: "roleList", required: true }
        ],
        rules: {},
        treeOptions: []
      },
      //用户组表单相关
      groupFormInfo: {
        ref: null,
        data: {
          id: undefined,
          groupName: "",
          description: ""
        },
        fieldList: [
          { label: "用户组名称", value: "groupName", type: "input", required: true },
          { label: "用户组描述", value: "description", type: "textarea", limit: true }
        ],
        rules: {}
      },
      //用户组下用户过滤相关
      groupUserFilterInfo: {
        query: {
          id: undefined
        },
      },
      //用户组下用户表格相关
      groupUserTableInfo: {
        url: this.nozzle.userGroupUserList, //接口地址
        refresh: 1,
        initCurpage: 1,
        data: [],
        fieldList: [
          { label: "用户名", value: "login", minWidth: 120, tooltip: true },
          { label: "姓名", value: "realName", minWidth: 100, tooltip: true },
          { label: "电话", value: "mobile", minWidth: 120, tooltip: true },
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "80",
          btList: [
            { label: "删除", size: "small", type: "text", event: "delUser", show: true }
          ]
        }
      },
      //站点表格相关
      siteTableInfo: {
        url: this.nozzle.sysStationBaseList, //接口地址
        refresh: 1,
        initCurpage: 1,
        fieldList: [
          { label: "站点编号", value: "stCode", minWidth: 150, tooltip: true },
          { label: "站点名称", value: "stName", minWidth: 150, tooltip: true }
        ]
      },
      //已关联站点表格相关
      RelatedSiteTableInfo: {
        data: [],
        query: {
          sign: ""
        },
        selectList: []
      },
      //未关联站点表格相关
      UnRelateSiteTableInfo: {
        data: [],
        query: {
          sign: "unbound"
        },
        selectList: []
      },
      //站点过滤相关
      siteQuery: {
        searchStr: "",
        platformCode: ""
      },
      //项目表单相关
      projectFormInfo: {
        ref: null,
        data: {
          id: undefined,
          name: "",
          sysGroup: "",
          operator: "",
          area: "",
          platformCode: "",
          status: undefined,
          startTime: "",
          endTime: "",
          onlineTime: ""
        },
        fieldList: [
          { label: "项目名称", value: "name", type: "input", required: true },
          { label: "项目类型", value: "sysGroup", type: "select", list: "xmlxList", required: true },
          { label: "临测开始时间", value: "startTime", type: "date", dateType: "date", datePickerOptions: "pickerOptionsStart", required: true, show: false },
          { label: "临测结束时间", value: "endTime", type: "date", dateType: "date", datePickerOptions: "pickerOptionsEnd", required: true, show: false },
          { label: "上线时间", value: "onlineTime", type: "date", dateType: "date", required: true },
          { label: "项目编号", value: "platformCode", type: "input", disabled: true },
          { label: "项目状态", value: "status", type: "select", list: "statusList", required: true },
          { label: "操作人", value: "operator", type: "input", disabled: true },
          { label: "所属区域", value: "area", type: "cascader", required: true }
        ],
        rules: {},
        labelWidth: "110px",
        cascaderOptions: [], //区域级联数据源
        needClearNodes: false, //是否清除级联上次数据高亮
        limitTime: true,  //是否开启选择时间区段限制
      },
      //保存当前选中城市信息以便获取经纬度
      currentCity: {},
    };
  },
  watch: {
    "dialogInfo.visible"(val) {
      if (!val) {
        this.permissionTableInfo.data = [];
        this.RelatedSiteTableInfo.data = [];
        this.UnRelateSiteTableInfo.data = [];
        this.siteQuery = {
          searchStr: ""
        };
        if (this.projectFormInfo.ref) {
          this.projectFormInfo.ref.resetFields();
          this.projectFormInfo.ref.clearValidate();
        }
        const type = this.dialogInfo.type;
        this.projectFormInfo.needClearNodes = true;
        this.resetForm(type);
      }
    },
    "dialogInfo.type"(val) {
      const projectFormInfo = this.projectFormInfo;
      switch(val) {
        case "update":
          for(let item of projectFormInfo.fieldList) {
            if(item.value === "platformCode") {
              item.show = true;
            }
          }
          this.dialogInfo.width = "500px";
          break;
        case "create":
          for(let item of projectFormInfo.fieldList) {
            if(item.value === "platformCode") {
              item.show = false;
            }
          }
          this.dialogInfo.width = "500px";
          break;
        default:
          this.dialogInfo.width = "80%";
          break;
      }
    },
    "userDialogInfo.visible"(val) {
      if (!val) {
        if (this.groupFormInfo.ref) {
          this.groupFormInfo.ref.resetFields();
        }
        if (this.userFormInfo.ref) {
          this.userFormInfo.ref.resetFields();
        }
        const type = this.userDialogInfo.type;
        this.resetForm(type);
      }
    },
    "siteQuery.searchStr"(val) {
      Object.assign(this.RelatedSiteTableInfo.query, this.siteQuery);
      Object.assign(this.UnRelateSiteTableInfo.query, this.siteQuery);
    },
    "projectFormInfo.data.sysGroup"(val) {
      if(val) {
        if(val === "1") {//临测项目
          for(let item of this.projectFormInfo.fieldList) {
            if(item.value === "endTime" || item.value === "startTime") {
              item.show = true;
            }
          }
        }else{//合同项目
          for(let item of this.projectFormInfo.fieldList) {
            if(item.value === "endTime" || item.value === "startTime") {
              item.show = false;
            }
          }
        }
        this.projectFormInfo.rules = this.$initRules(this.projectFormInfo.fieldList);
        setTimeout(() => {
          this.projectFormInfo.ref.clearValidate();
        }, 0);
      }else{
        this.resetForm(this.dialogInfo.type);
        if(this.projectFormInfo.ref) {
          this.projectFormInfo.ref.resetFields();
        }
        for(let item of this.projectFormInfo.fieldList) {
            if(item.value === "endTime" || item.value === "startTime") {
              item.show = false;
            }
          }
      }
      
    }
  },
  computed: {
    //移除按钮是否可点击
    isCanRemoveSite() {
      return this.RelatedSiteTableInfo.selectList.length ? false : true;
    },
    //添加按钮是否可点击
    isCanInsertSite() {
      return this.UnRelateSiteTableInfo.selectList.length ? false : true;
    },
    ...mapGetters(["allDept", "allRole", "allCity"])
  },
  mounted() {
    this.initRules();
    this.projectTableInfo.refresh = Math.random();
    this.initRoles();
  },
  methods: {
    // 初始化验证
    initRules() {
      const userFormInfo = this.userFormInfo;
      const groupFormInfo = this.groupFormInfo;
      const projectFormInfo = this.projectFormInfo;
      userFormInfo.rules = this.$initRules(userFormInfo.fieldList);
      groupFormInfo.rules = this.$initRules(groupFormInfo.fieldList);
      projectFormInfo.rules = this.$initRules(projectFormInfo.fieldList);
    },
    // 初始化角色
    initRoles() {
      this.$http.post(this.nozzle.roleGetRoles, {
        current: 0,
        size: 0,
        data: {
          searchStr: "",
          type: 0
        }
      }).then(res => {
        if(res.data.code === 1) {
          this.listTypeInfo.roleList = res.data.data.map(item => {
            return{
              key: item.roleName,
              value: item.roleId
            }
          })
        }
      })
    },
    //点击事件
    handleClick(event, data) {
      switch (event) {
        //项目搜索
        case "searchProject":
          this.projectTableInfo.initCurpage = Math.random();
          this.projectTableInfo.refresh = Math.random();
          break;
        //项目添加按钮
        case "create":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          this.projectFormInfo.needClearNodes = false;
          this.projectFormInfo.cascaderOptions = this.removeEmptyChild(this.allCity);
          this.projectFormInfo.data["operator"] = this.$fn.getLocalStore("USERNO");
          break;
        //编辑项目按钮
        case "update":
          this.dialogInfo.type = event;
          this.dialogInfo.visible = true;
          this.projectFormInfo.needClearNodes = false;
          this.projectFormInfo.cascaderOptions = this.removeEmptyChild(this.allCity);
          for (let key in data) {
            if (key in this.projectFormInfo.data) {
              this.projectFormInfo.data[key] = data[key];
              this.projectFormInfo.data["operator"] = this.$fn.getLocalStore("USERNO");
              this.projectFormInfo.rules = this.$initRules(this.projectFormInfo.fieldList);
            }
          }
          setTimeout(() => {
            this.initRules();
          }, 0);
          break;
        //提交数据
        case "submit":
          let submitType = this.dialogInfo.type;
          let submitApi, submitParams;
          const { lat, lon } = this.currentCity;
          this.projectFormInfo.data.longitude = lon;
          this.projectFormInfo.data.latitude = lat;
          if(submitType === "update" || submitType === "create") {
            this.projectFormInfo.rules = this.$initRules(this.projectFormInfo.fieldList);
            this.projectFormInfo.ref.validate(valid => {
              if (valid) {
                this.btnLoading = true;
                submitApi = this.nozzle.sysPlatformAddOrUpdate;
                submitParams = {
                  data: this.projectFormInfo.data
                };
                this.handleAjax(submitApi, submitParams);
              }else{
                return false;
              }
            });
          }
          break;
        //项目删除按钮
        case "delete":
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(res =>{
            this.$http.post(this.nozzle.sysPlatformDelete,{data:{platformCode:data.platformCode}}).then(res =>{
              if(res.data.code === 1 || res.data.code === 200) {
                this.projectTableInfo.refresh = Math.random();
                this.projectTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? 'success' : 'error',
                showClose: true,
              })
            }).catch(e =>{
              message(e);
            })
          }).catch(() =>{})
          break;
        //项目关联站点按钮
        case "relate":
          this.dialogInfo.type = event;
          this.siteQuery.platformCode = data.platformCode;
          this.dialogInfo.visible = true;
          setTimeout(() => {
            Object.assign(this.RelatedSiteTableInfo.query, this.siteQuery);
            Object.assign(this.UnRelateSiteTableInfo.query, this.siteQuery);
            this.siteTableInfo.refresh = Math.random();
          }, 0);
          break;
        //分配权限按钮
        case "permission":
          this.dialogInfo.visible = true;
          this.dialogInfo.type = event;
          this.listTypeInfo.deptTree = this.allDept;
          this.needHandleProjectId = data.platformCode;
          this.permissionFilterInfo.query.platformCode = data.platformCode;
          setTimeout(() => {
            this.permissionTableInfo.refresh = Math.random();
          }, 0);
          break;
        //站点搜索
        case "siteSearch":
          this.siteTableInfo.initCurpage = Math.random();
          this.siteTableInfo.refresh = Math.random();
          break;
        //分配权限搜索
        case "searchPermission":
          this.permissionTableInfo.initCurpage = Math.random();
          this.permissionTableInfo.refresh = Math.random();
          break;
        //添加用户按钮
        case "addUser":
          this.userDialogInfo.type = event;
          this.userFormInfo.data["groupName"] = data.groupName;
          this.userFormInfo.data["groupId"] = data.id;
          this.userDialogInfo.visible = true;
          break;
        //添加用户组按钮
        case "addGroup":
          this.userDialogInfo.type = event;
          this.userDialogInfo.visible = true;
          break;
        //查看用户按钮
        case "detail":
          this.userDialogInfo.type = event;
          this.userDialogInfo.visible = true;
          this.groupUserFilterInfo.query['id'] = data.id;
          setTimeout(() => {
            this.groupUserTableInfo.refresh = Math.random();
          }, 0);
          break;
        //删除用户组按钮
        case "delGroup":
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(res =>{
            this.$http.post(this.nozzle.userGroupDelete,{data:{id:data.id}}).then(res =>{
              if(res.data.code === 1 || res.data.code === 200) {
                this.permissionTableInfo.refresh = Math.random();
                this.permissionTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? 'success' : 'error',
                showClose: true,
              })
            }).catch(e =>{
              message(e);
            })
          }).catch(() =>{})
          break;
        //从用户组中删除用户
        case "delUser":
          this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(res =>{
            this.$http.post(this.nozzle.userGroupRemoveUser,{data:{userIds:[data.id]}}).then(res =>{
              if(res.data.code === 1 || res.data.code === 200) {
                this.groupUserTableInfo.refresh = Math.random();
                this.groupUserTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? 'success' : 'error',
                showClose: true,
              })
            }).catch(e =>{
              message(e);
            })
          }).catch(() =>{})
          break;
        //添加站点到项目
        case "insert":
          if (this.UnRelateSiteTableInfo.selectList.length) {
            const siteIdArr = this.UnRelateSiteTableInfo.selectList.map( item => item.id);
            const insertData = {
              platCode: this.RelatedSiteTableInfo.query.platformCode,
              siteList: siteIdArr
            };
            this.$http.post(this.nozzle.sysStationBaseUpdate, { data: insertData }).then(res => {
              if (res.data.code === 1) {
                this.siteQuery.searchStr = "";
                this.siteTableInfo.refresh = Math.random();
                this.siteTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? "success" : "error",
                showClose: true
              });
            });
          } else {
            this.$message({
              message: "请选择需要绑定的站点",
              type: "warning",
              showClose: true
            });
          }
          break;
        //从项目中移除站点
        case "remove":
          if (this.RelatedSiteTableInfo.selectList.length) {
            const siteIdArr = this.RelatedSiteTableInfo.selectList.map(item => item.id);
            const removeData = {
              platCode: this.RelatedSiteTableInfo.query.platformCode,
              siteList: siteIdArr
            };
            this.$http.post(this.nozzle.sysStationBaseRemove, { data: removeData }).then(res => {
              if (res.data.code === 1) {
                this.siteQuery.searchStr = "";
                this.siteTableInfo.refresh = Math.random();
                this.siteTableInfo.initCurpage = Math.random();
              }
              this.$message({
                message: res.data.msg,
                type: res.data.code === 1 ? "success" : "error",
                showClose: true
              });
            });
          } else {
            this.$message({
              message: "请选择需要移除的站点",
              type: "warning",
              showClose: true
            });
          }
          break;
        //关闭
        case "close":
          this.resetForm(this.dialogInfo.type);
          if(this.projectFormInfo.ref) {
            this.projectFormInfo.ref.resetFields();
            this.projectFormInfo.ref.clearValidate();
          }
          setTimeout(() => {
            this.dialogInfo.visible = false;
          }, 0);
          break;
        case "closeUserDialog":
          this.userDialogInfo.visible = false;
          break;
        //保存用户组/用户
        case "save":
          const type = this.userDialogInfo.type;
          const formName = type === "addUser" ? this.userFormInfo : this.groupFormInfo;
          let params, api;
          formName.ref.validate(valid => {
            if (valid) {
              this.btnLoading = true;
              if (type === "addUser") {
                //添加用户绑定到用户组
                api = this.nozzle.addUserToGroup;
                const data = {...this.userFormInfo.data, ...{platformCode:this.needHandleProjectId}};
                params = data;
              }
              if (type === "addGroup") {
                //添加保存用户组
                api = this.nozzle.userGroupAdd;
                const data = {...this.groupFormInfo.data, ...{platformCode:this.needHandleProjectId}};
                params = { data: data };
              }
              this.$http.post(api, params).then(res => {
                if (res.data.code === 1 || res.data.code === 200) {
                  this.userDialogInfo.visible = false;
                  this.permissionTableInfo.refresh = Math.random();
                }
                this.$message({
                  message: res.data.msg,
                  type: res.data.code === 1 ? "success" : "error",
                  showClose: true
                });
                this.btnLoading = false;
              })
              .catch(e => {
                console.log(e);
                this.btnLoading = false;
              });
            }
          });
          break;
      }
    },
    //关闭弹窗
    handleClose() {
      this.dialogInfo.visible = false;
    },
    handleUserClose() {
      this.userDialogInfo.visible = false;
    },
    //表格checkbox选择事件
    handleEvent(event, data) {
      switch (event) {
        case "all":
          this.permissionSelectData = data;
          break;
        case "isRelate":
          this.RelatedSiteTableInfo.selectList = data;
          break;
        case "unRelate":
          this.UnRelateSiteTableInfo.selectList = data;
          break;
      }
    },
    //重置表单
    resetForm(type) {
      switch (type) {
        case "addUser":
          this.userFormInfo.data = {
            id: undefined,
            login: "",
            realName: "",
            userType: 0,
            orgId: undefined,
            groupId: undefined,
            groupName: "",
            roleId: undefined,
            mobile: ""
          };
          break;
        case "addGroup":
          this.groupFormInfo.data = {
            id: undefined,
            groupName: "",
            description: ""
          };
          break;
        case "update":
        case "create":
          this.projectFormInfo.data = {
            id: undefined,
            name: "",
            sysGroup: "",
            operator: "",
            area: "",
            platformCode: "",
            status: undefined,
            startTime: "",
            endTime: "",
            onlineTime: ""
          };
          break;
      }
    },
    //请求接口处理结果
    handleAjax(url, params) {
      this.$http.post(url, params).then(res => {
        if (res.data.code === 1 || res.data.code === 200) {
          this.dialogInfo.visible = false;
          this.projectTableInfo.refresh = Math.random();
        }
        this.$message({
          message: res.data.msg,
          type: res.data.code === 1 ? "success" : "error",
          showClose: true
        });
        this.btnLoading = false;
      })
      .catch(e => {
        console.log(e);
        this.btnLoading = false;
      });
    },
    //将空的children置为undefined,避免在没有下一级数据的情况下显示暂无数据
    removeEmptyChild(arr) {
      arr.forEach(item => {
        if (!item.children || item.children.length < 1) {
          item.children = undefined;
        } else {
          this.removeEmptyChild(item.children);
        }
      });
      return arr;
    },
    //获取子组件传来的所选城市节点
    currentAreaJwd(data) {
      this.currentCity = data.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-group {
  height: 100%;
  @include fdaj(center, center);
  /deep/ .el-button + .el-button {
    margin-left: 0;
    margin-top: 10px;
  }
}
/deep/ .el-dialog {
  @include fd();
  @include wh(80%, 60%);
  max-height: 60%;
  margin-top: 10vh !important;
  .el-dialog__body {
    @include fd();
    flex: 1;
    padding-bottom: 0;
    overflow-y: auto;
  }
}
.table-title{
  @include hl(30px,30px);
  color: #409EFF;
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}
.userDialog {
  /deep/ .el-form-item {
    .el-form-item__label {
      width: 120px;
      padding-right: 15px;
    }
  }
}
</style>