Foshan4A4.0/src/views/systemManagement/addSystem/index.vue

<template>
  <div class="Box">
    <el-form
      :model="FormData"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="topBox">
        <div class="titleBtn">
          <span class="titleStyle">策略信息新增 </span>
          <el-button @click="save()">保存</el-button>
        </div>
        <!-- 第一排 -->
        <div class="fristLine">
          <div class="inputBox">
            <el-form-item label="策略名称" prop="TacName">
              <el-input
                placeholder="请输入"
                v-model.trim="FormData.TacName"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="IP类型" prop="IpType">
              <el-select v-model="FormData.IpType" placeholder="请选择类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="block inputBox1">
            <el-form-item label="登录日期" prop="Date">
              <el-date-picker
                v-model="FormData.Date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dataChange"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="block inputBox1">
            <el-form-item label="登录时间" prop="Time">
              <el-time-picker
                is-range
                v-model="FormData.Time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                @change="timeChange"
                value-format="HH:mm:ss"
              >
              </el-time-picker>
            </el-form-item>
          </div>
        </div>
        <!-- 第二排 -->
        <div class="fristLine" style="margin-top: 24px">
          <div class="inputBox2">
            <el-form-item prop="IpList" label="IP段">
              <el-input
                placeholder="请输入IP,并以‘；’号隔开"
                v-model.trim="FormData.IpList"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputBox3">
            <el-form-item label="描述" prop="TacDesc">
              <el-input
                placeholder="请输入"
                v-model.trim="FormData.TacDesc"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div class="centerBox">
      <div class="leftB">
        <div class="titleBtn">
          <span class="titleStyle">已分配职员 </span>
          <div class="searchBox">
            <el-input
              placeholder="请输入内容"
              clearable
              v-model.trim="keyWordsUp"
              @keyup.enter.native="queryDatas"
            ></el-input>
            <el-button @click="queryDatas">搜索</el-button>
          </div>
        </div>
        <div class="center-box fpBox">
          <el-row class="scCont" :gutter="16">
            <el-col
              :span="4"
              v-for="(item, index) in FormData.UseList"
              :key="index"
            >
              <el-card class="box-card">
                <div class="lineTop"></div>
                <div class="text item">
                  <div class="header-top flex">
                    <div class="header-mid">
                      <span :title="item.UserName" class="titles">{{
                        item.UserName
                      }}</span>
                    </div>
                    <el-checkbox-group
                      v-model="UncheckList"
                      @change="UnchangeChecked(item, index)"
                    >
                      <el-checkbox checked></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-empty
            v-if="FormData.UseList.length == 0"
            description="没有选取"
            style="margin: 0 auto"
          ></el-empty>
        </div>
      </div>

      <div class="rightB">
        <div class="titleBtn">
          <span class="titleStyle">选择职员 </span>
          <div class="searchBox">
            <el-input
              placeholder="请输入内容"
              clearable
              v-model.trim="keyWords"
              @keyup.enter.native="getUserData"
            ></el-input>
            <el-button @click="getUserData">搜索</el-button>
          </div>
        </div>
        <div
          class="center-box scrollbar"
          v-infinite-scroll="load"
          :infinite-scroll-distance="20"
          infinite-scroll-disabled="disabled"
        >
          <el-row class="scCont" :gutter="16">
            <el-col
              :span="6"
              v-for="(item, index) in FormData.Unuselist"
              :key="index"
            >
              <el-card class="box-card">
                <div class="lineTop"></div>
                <div class="text item">
                  <div class="header-top flex">
                    <div class="header-mid">
                      <span :title="item.UserName" class="title">{{
                        item.UserName
                      }}</span>
                    </div>
                    <el-checkbox-group
                      v-model="checkList"
                      @change="changeChecked(item, index)"
                    >
                      <el-checkbox></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <template v-if="total > 1">
            <p class="center" v-if="loading">加载中...</p>
            <p class="center" v-if="noMore">没有更多数据了~</p>
          </template>
          <el-empty
            v-if="FormData.Unuselist.length == 0"
            description="没有内容"
            style="margin: 0 auto"
          ></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetUserList } from "@/api/apiAuthority";
import { SaveTac } from "@/api/systemConfiguration";
import { findarrays } from "@/utils/validate";
import { lengthValidator } from "@/utils/validate";
export default {
  data() {
    return {
      keyWordsUp: "",
      keyWords: "",
      checkList: [],
      UncheckList: true,
      options: [
        {
          value: 0,
          label: "黑名单",
        },
        {
          value: 1,
          label: "白名单",
        },
      ],
      boxArr: [],
      boxArr1: [],
      FormData: {
        TacName: "",
        TacDesc: "",
        DateBegin: "",
        DateEnd: "",
        TimeBegin: "",
        TimeEnd: "",
        IpType: 1,
        IpList: "",
        UseList: [],
        UseLists: [],
        Unuselist: [],
        Unuselists: [],
        Date: null,
        Time: null,
      },
      rules: {
        TacName: [
          { required: true, message: "请输入策略名称", trigger: "blur" },
          {
            validator: lengthValidator,
            max: 128,
            message: "长度在 1 到 128 个字符",
            trigger: ["change", "blur"],
          },
        ],
        Date: [
          { required: true, message: "请选择登录日期", trigger: "change" },
        ],
        Time: [
          { required: true, message: "请选择登录时间", trigger: "change" },
        ],
        TacDesc: [
          {
            validator: lengthValidator,
            max: 256,
            message: "长度在 1 到 256 个字符",
            trigger: ["change", "blur"],
          },
        ],
        IpList: [
          {
            validator: lengthValidator,
            max: 256,
            message: "长度在 1 到 256 个字符",
            trigger: ["change", "blur"],
          },
        ],
      },
      pageNum: 1,
      PageSize: 40,
      loading: false,
      total: null,
      arrList: [],
      dataList: [],
      checkData: [],
      copyList: [],
    };
  },
  created: function () {
    this.getUserList({
      QueryName: this.keyWords,
      PageSize: this.PageSize,
      PageIndex: this.pageNum,
    });
  },
  computed: {
    noMore() {
      return this.pageNum >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {
    keyWords(val) {
      if (this.keyWords.length == 0) {
        this.arrList = [];
        this.getUserList({
          QueryName: this.keyWords,
          PageSize: this.PageSize,
          PageIndex: 1,
        });
      }
    },
    keyWordsUp() {
      if (this.keyWordsUp.length == 0) {
        const res = this.FormData.UseLists;
        this.FormData.UseList = JSON.parse(JSON.stringify(res));
      }
    },
  },
  methods: {
    nuew() {
      let arr = "";
      arr = this.isValidseg(this.FormData.IpList);
      console.log(this.FormData.IpList);
      console.log(arr, "1111111");
    },
    isValidIP: function (ip) {
      let reg =
        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      return reg.test(ip);
    },
    isValidseg(ip) {
      let reg =
        /^((?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5]))\.){2}(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))(?:(?:\.(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))(\/(?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5]))))?|(\/(?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))\.(?:(?:[01]?\d?\d|2(?:[0-4]\d|5[0-5])))))$/;
      return reg.test(ip);
    },
    save() {
      let that = this;
      let ipArr = [];
      if (this.FormData.IpList) {
        ipArr = this.FormData.IpList.split(";");
      }
      let isSave = true;
      if (ipArr.length >= 2) {
        ipArr.forEach((item) => {
          if (this.isValidIP(item) == true || this.isValidseg(item) == true) {
            // this.$message.error("请输入正确IP段，并以;号隔开");
            isSave = true;
          } else {
            this.$message.error("请输入正确IP段，并以;号隔开");
            isSave = false;
          }
        });
      } else {
        if (
          this.isValidIP(ipArr[0]) == true ||
          this.isValidseg(ipArr[0]) == true
        ) {
          isSave = true;
        } else {
          if (ipArr.length != 0) {
            this.$message.error("请输入正确IP段，并以;号隔开");
            isSave = false;
          }
        }
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid && isSave) {
          return new Promise((resolve, reject) => {
            SaveTac(this.FormData)
              .then((response) => {
                if (response.code === 0) {
                  this.FormData = {
                    TacName: "",
                    TacDesc: "",
                    DateBegin: "",
                    DateEnd: "",
                    TimeBegin: "",
                    TimeEnd: "",
                    IpType: 1,
                    IpList: "",
                    UseList: [],
                    Unuselist: [],
                    Date: null,
                    Time: null,
                  };
                  this.$message.success("新增成功");
                  this.$store.dispatch("tagsView/delView", this.$route);
                  that.$router.push("/LoginPolicy");
                } else {
                  this.$message.error(response.message);
                }
                resolve();
              })
              .catch((error) => {
                reject(error);
              });
          });
        } else {
          return false;
        }
      });
    },
    getUserList(obj) {
      return new Promise((resolve, reject) => {
        this.loading = true;
        GetUserList(obj)
          .then((res) => {
            if (res.code === 0) {
              const datas = res.returnData.records;
              const num = res.returnData.pages;
              this.arrList.push(datas);
              const arrs = this.arrList.flat();
              const msgs = _.unionBy(arrs, "UserId");
              this.FormData.Unuselist = msgs;
              // this.FormData.Unuselists = msgs;
              this.copyList = msgs;
              this.FormData.Unuselist = this.FormData.Unuselist.filter(
                (i) => i.UserName
              );
              this.FormData.Unuselist.forEach((res, index) => {
                res.indexname = index;
              });
              if (this.FormData.UseLists.length > 0) {
                this.FormData.UseLists.forEach((element) => {
                  this.FormData.Unuselist.forEach((res, index) => {
                    if (element.UserId == res.UserId) {
                      this.FormData.Unuselist.splice(index, 1);
                    }
                  });
                });
              }
              this.dataList = msgs;
              this.total = num;
              this.loading = false;
            }
            resolve();
          })
          .catch((error) => {
            reject(error);
            this.loading = false;
          });
      });
    },
    changeChecked(val, index) {
      this.checkList = false;
      this.FormData.UseList.push(val);
      this.FormData.UseLists.push(val);
      // const res = this.FormData.UseList;
      // this.FormData.UseLists = res;
      this.FormData.Unuselist.splice(index, 1);
      // this.FormData.Unuselists.splice(index, 1);
      this.FormData.Unuselists = this.FormData.Unuselists.filter(
        (i) => i.UserId !== val.UserId
      );
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    UnchangeChecked(val, index) {
      this.UncheckList = true;
      this.FormData.Unuselist.push(val);
      // this.FormData.Unuselists.push(val);
      this.FormData.Unuselist = this.FormData.Unuselist.sort(
        this.compare("indexname")
      );
      this.FormData.Unuselists = this.FormData.Unuselists.sort(
        this.compare("indexname")
      );
      this.FormData.UseList = this.FormData.UseList.filter(
        (i) => i.UserId !== val.UserId
      );
      // this.FormData.UseLists.splice(index, 1);
      this.FormData.UseLists = this.FormData.UseLists.filter(
        (i) => i.UserId !== val.UserId
      );
    },
    dataChange: function (data) {
      this.FormData.DateBegin = data[0];
      this.FormData.DateEnd = data[1];
    },
    timeChange: function (data) {
      this.FormData.TimeBegin = data[0];
      this.FormData.TimeEnd = data[1];
    },
    load() {
      this.pageNum += 1;
      this.getUserList({
        QueryName: this.keyWords,
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
    queryDatas() {
      this.keyWordsUp = this.keyWordsUp.replace(/\s+/g, "");
      const search = this.keyWordsUp;
      if (search) {
        let res = this.FormData.UseLists;
        this.FormData.UseList = res;
        this.FormData.UseList = findarrays(
          this.FormData.UseList,
          "UserName",
          search
        );
      } else {
        this.FormData.UseList = this.FormData.UseLists;
      }
    },
    getUserData(val) {
      this.keyWords = this.keyWords.replace(/\s+/g, "");
      const search = this.keyWords;
      this.arrList = [];
      this.getUserList({
        QueryName: this.keyWords,
        PageSize: this.PageSize,
        PageIndex: 1,
      });
      // if (search) {
      //   this.FormData.Unuselist = findarrays(
      //     this.FormData.Unuselist,
      //     "UserName",
      //     search
      //   );
      // }
    },
    clearData() {
      this.arrList = [];
      this.FormData.Unuselist = [];
      this.pageNum = 1;
      this.getUserList({
        QueryName: "",
        PageSize: this.PageSize,
        PageIndex: this.pageNum,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  height: 100%;
  padding: 0 64px;
  padding-top: 32px;
}
::v-deep .el-row {
  width: 100%;
}
.topBox {
  width: 100%;
  height: 240px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
}
.fpBox {
  display: block;
}
.fristLine {
  display: flex;
  margin-left: 33px;
}
.inputBox {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.inputBox1 {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.inputBox2 {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.inputBox3 {
  display: flex;
  height: 32px;
  line-height: 32px;
}
.SystemName {
  width: 108px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
}
.SystemName1 {
  width: 70px;
  text-align: right;
  margin-left: -10px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  cursor: pointer;
}
::v-deep .topBox {
  .el-button--default {
    width: 80px;
    height: 40px;
    background: #6e81bc;
    color: #ffffff;
    border-radius: 6px;
    border: none;
  }
  .inputBox .el-input__inner {
    width: 184px;
    height: 32px;
    background: #f5f7fa;
    // border: 1px solid #dcdfe6;
    border-radius: 6px;
  }
  .el-select__caret {
    text-align: center;
    height: 32px;
    line-height: 32px;
  }
  .inputBox1 .el-date-editor {
    width: 322px;
    height: 32px;
    line-height: 32px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    .el-range-separator {
      height: 32px;
      line-height: 32px;
    }
    .el-range-input {
      background: #f5f7fa;
    }
  }
  .inputBox2 .el-input__inner {
    width: 468px;
    height: 32px;
    background: #f5f7fa;
    // border: 1px solid #dcdfe6;
    border-radius: 6px;
  }
  .inputBox3 .el-input__inner {
    width: 500px;
    height: 32px;
    background: #f5f7fa;
    // border: 1px solid #dcdfe6;
    border-radius: 6px;
  }
}
.titleBtn {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.titleStyle {
  width: 200px;
  height: 24px;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-left: 10px;
}
.centerBox {
  display: flex;
  margin-top: 23px;
  position: relative;
}
.leftB {
  width: 1242px;
  height: 760px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: auto;
  > .titleBtn {
    width: 63%;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    background: #ffffff;
  }
  > .center-box {
    margin-top: 70px;
  }
  .searchBox {
    display: flex;
  }
}
.center-box {
  // max-height: calc(100% - 105px);
  // margin-top: 12px;
  padding: 0 24px 24px 24px;
  // overflow: auto;
}
.colorTitle {
  margin-top: 20px;
  width: 195px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  float: left;
}
::v-deep .box-card {
  margin-top: 16px;
  height: 80px;
  background: #f5f7fa;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  .el-checkbox__label {
    display: none;
  }
}

// .center-box :hover {
//   box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
//   transform: translate(0, -5px);
//   transition-delay: 0s !important;
// }

.title {
  max-width: 60px;
  min-width: 60px;
  height: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #303133;
  // margin-right: 20px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.titles {
  max-width: 101px;
  min-width: 101px;
  height: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #303133;
  // margin-right: 20px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
// .box-card :hover {
//   box-shadow: none;
//   transform: none;
// }
.rightB {
  width: 670px;
  height: 760px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  margin-left: 40px;
  // overflow: auto;
  // position: relative;
  .searchBox {
    display: flex;
  }
  > .titleBtn {
    width: 34%;
    position: absolute;
    z-index: 99;
    top: 0;
    right: 0;
    background: #ffffff;
  }
  > .center-box {
    margin-top: 72px;
  }
  .searchBox {
    display: flex;
  }
  > .scrollbar {
    height: calc(100% - 91px);
    overflow-y: auto;
    overflow-x: hidden;
    > p {
      margin: 12px 0 0;
    }
  }
}
::v-deep .leftB {
  .el-input__inner {
    width: 200px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #c0c4cc;
    border-radius: 6px;
  }
  .el-button--default {
    width: 64px;
    height: 32px;
    line-height: 8px;
    background: linear-gradient(0deg, #6983be, #777dba);
    border-radius: 6px;
    color: #ffffff;
    border: none;
    margin-left: 10px;
  }
}
::v-deep .rightB {
  .el-input__inner {
    width: 200px;
    height: 32px;
    background: #f5f7fa;
    border: 1px solid #c0c4cc;
    border-radius: 6px;
  }
  .el-button--default {
    width: 64px;
    height: 32px;
    line-height: 8px;
    background: linear-gradient(0deg, #6983be, #777dba);
    border-radius: 6px;
    color: #ffffff;
    border: none;
    margin-left: 10px;
  }
}
::-webkit-scrollbar-track-piece {
  background: #d3dce6;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: 20px;
}
</style>