Foshan4A4.0/src/views/jobsManagement/list.vue

<template>
  <div class="pageBody">
    <div class="titleBox">
      <div class="status flex-wrap">
        <el-radio v-model="radio" :label="item.id" v-for="(item, index) in option" :key="index">{{ item.label }}</el-radio>
      </div>
      <Search @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isSlot="false">
      </Search>
    </div>
    <template v-if="listData.length">
      <div v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="contantBox scrollbar">
        <div class="itemBox" v-for="(item, index) in listData" :key="index">
          <div v-is="['joblist_btn_del_job']" class="del" @click="delate(item.JobId,index)">
            <i class="el-icon-close"></i>
          </div>
          <div>
            <el-row>
              <el-col :span="24" class="nameBox">
                <div class="name">{{ item.JobName }}</div>
                <div v-is="['joblist_btn_edit']" class="loger" @click="toEdit(item.JobId)"></div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24"></el-col>
            </el-row>

            <el-row class="conntent" v-if="radio == 1">
              <el-col :span="12">上级组织：<span>{{ item.OrganName }}</span></el-col>
              <el-col :span="12">拥有职员：<span>{{ item.OfficerCount }}</span></el-col>
              <!-- <el-col :span="12" class="flexLeft">权限项数：<span>{{ item.AuthCount }}</span></el-col> -->
            </el-row>
            <!-- <el-row class="conntent" v-if="radio == 1">
            <el-col :span="24">拥有职员：<span>{{ item.OfficerCount }}</span></el-col>
          </el-row> -->
            <el-row class="conntent2" v-if="radio == 2">
              <el-col :span="24"><span>{{ item.UpLink }}</span></el-col>
            </el-row>
            <el-row class="conntent">
              <el-col :span="12">
                状态：<span class="used" v-if="item.Status == 1">启用</span>
                <span class="unUsed" v-else-if="item.Status == 0">停用</span>
              </el-col>
              <el-col v-is="['joblist_btn_state_swatch']" :span="12" class="flexLeft">
                <el-switch @change="isUsedChange(item, index)" v-model="item.Flag" :active-value="true" :inactive-value="false" active-color="#6F81BC" inactive-color="#CFD6E2">
                </el-switch>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <el-empty style="padding-top:150px;" description="暂无数据"></el-empty>
    </template>
    <template v-if="total > 1">
      <p class="center" v-if="loading">加载中...</p>
      <p class="center" v-if="noMore">没有更多数据了~</p>
    </template>
    <Dialog :flag="dialogVisible">
      <div class="closeDialog">
        <div class="title">删除岗位</div>
        <div class="content">是否确定要删除该岗位？</div>
        <div class="foot right t30">
          <el-button size="medium" type="danger" class="r24" @click="del()">删除</el-button>

          <el-button size="medium" @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
import Dialog from "@/layout/components/Dialog";
import { GetJobList, ChangeJobStatus, DeleteJob } from "@/api/jobApi";
export default {
  data () {
    return {
      dialogVisible: false,
      GroupUpid: "",
      serachinfo: "", //搜索内容
      delId: "",//删除项ID
      listData: [], //列表数据
      radio: 1,
      option: [
        {
          label: "信息概览",
          id: 1,
        },
        {
          label: "组织路径",
          id: 2,
        },
      ],
      pageSize: 20,
      pageNum: 1,
      total: '',
      loading: false,
      dataList: [],
      index: null
    };
  },
  components: { Search, Dialog },
  created () {
    if (this.$route.query.keyWords) {
      this.serachinfo = this.$route.query.keyWords;
    }
    this.AccountList({
      QueryName: this.serachinfo,
      PageSize: this.pageSize,
      PageIndex: this.pageNum
    });
  },
  computed: {
    noMore () {
      return this.pageNum >= this.total;
    },
    disabled () {
      return this.loading || this.noMore;
    }
  },
  methods: {
    //查询
    getSearchData (val) {
      this.listData = [];
      this.dataList = [];
      this.pageNum = 1;
      this.serachinfo = val;
      this.AccountList({
        QueryName: this.serachinfo,
        PageSize: this.pageSize,
        PageIndex: this.pageNum
      });
    },

    //清除查询
    clearSearchData () {
      this.listData = [];
      this.dataList = [];
      this.pageNum = 1;
      this.serachinfo = '';
      this.AccountList({
        QueryName: this.serachinfo,
        PageSize: this.pageSize,
        PageIndex: this.pageNum
      });
    },
    //修改状态
    async isUsedChange (value, index) {
      let item = _.cloneDeep(value);
      const { JobId, Flag } = item
      const Status = Flag ? 1 : 0
      try {
        let data = null;
        let str = "";
        if (item.Flag == false) {
          data = {
            JobId: item.JobId,
            Status: 0,
          };
          str = "停用" + item.JobName + "成功";
        } else {
          data = {
            JobId: item.JobId,
            Status: 1,
          };
          str = "启用" + item.JobName + "成功";
        }
        ChangeJobStatus(data).then((result) => {
          if (result.code == 0) {
            this.$message.success(str);
            this.listData.forEach(item => {
              if (item.JobId == JobId) {
                item.Flag = Flag
                item.Status = Status
              }
            })
          }
        });
      } catch (error) {
        this.$message.error("操作" + item.JobName + "失败");
        item.Flag = !item.Flag;
        this.listData[index] = _.cloneDeep(item);
        console.log("出错了", error);
      }
    },

    delate (id, index) {
      this.dialogVisible = true;
      this.delId = id;
      this.index = index;
    },

    toEdit (id) {
      this.$router.push({
        path: "jobs/edit",
        query: { JobId: id },
      });
    },
    //获取列表
    async AccountList (obj) {
      try {
        this.loading = true;
        const result = await GetJobList(obj);
        if (result.code === 0) {
          const datas = result.returnData.records;
          datas.forEach((element, index) => {
            if (element.Status == 1) {
              element["Flag"] = true;
            } else {
              element["Flag"] = false;
            }
            datas[index] = element;
          });
          this.dataList.push(datas);
          const arrs = this.dataList.flat();
          const msgs = _.unionBy(arrs, "JobId");
          this.listData = msgs;
          this.total = result.returnData.pages;
          this.loading = false;
        } else {
          this.$message.error(result.message);
          this.loading = false;
        }
      } catch (error) {
        console.log("出错了", error);
        this.loading = false;
      }
    },

    //删除接口
    async del () {
      try {
        const result = await DeleteJob({
          JobId: this.delId,
        });
        if (result.code === 0) {
          this.dialogVisible = false;
          this.$message.success(result.message);
          this.listData.splice(this.index, 1);
          this.index = null
        }
      } catch (error) {
        this.dialogVisible = false;
        // this.$message.error("删除失败");
        console.log("出错了", error);
      }

    },
    //滚动加载数据
    load () {
      this.pageNum += 1;
      this.AccountList({
        QueryName: this.serachinfo,
        PageSize: this.pageSize,
        PageIndex: this.pageNum
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.pageBody {
  width: 100%;
  padding: 0 64px;
  position: relative;
  .titleBox {
    position: fixed;
    width: 100%;
    padding: 30px 64px;
    padding-left: 156px;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #f5f7fa;
    z-index: 100;
    .addBtn {
      width: 120px;
      height: 48px;
      background: #f5f7fa;
      border: 1px solid #b4b7cb;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      color: #6f81bc;
    }
    .status {
      align-items: center;

      & > div {
        margin-right: 28px;
        .icon {
          width: 16px;
          height: 16px;
          background: #6f81bc;
          border-radius: 2px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
          position: relative;
          top: -2px;
        }
        &:last-child {
          margin-right: 0;
        }
      }
      .status2 {
        .icon {
          background: #f25555;
        }
      }
      .status3 {
        .icon {
          background: #cfd6e2;
        }
      }
    }
  }
  .contantBox {
    padding-top: 110px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: calc(100% + 10px);
    height: 79vh;
    overflow-y: auto;
    overflow-x: hidden;
    .itemBox {
      width: calc(25% - 20px);
      margin: 10px;
      position: relative;
      padding: 23px 32px;
      background: #ffffff;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      overflow: hidden;
      max-height: 200px;
      .headLine {
        width: 100%;
        height: 4px;
        background: #f25555;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .onlneHead {
        background: #6f81bc;
        width: 100%;
        height: 4px;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .onlneHead2 {
        background: #cfd6e2;
        width: 100%;
        height: 4px;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 16px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .el-row {
        margin: 8px 0;
      }
      .flexLeft {
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
      }

      .del {
        position: absolute;
        right: 24px;
        top: 32px;
        cursor: pointer;
        z-index: 1;
      }
      .nameBox {
        display: flex;
        .name {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
          width: 150px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .loger {
          width: 24px;
          height: 24px;
          background: url("../../assets/status/ic_edit.png") no-repeat;
          background-size: 100% 100%;
          border: 1px solid #e4e7ec;
          border-radius: 50%;
          margin-left: 24px;
          cursor: pointer;
        }
        .loger:hover {
          background: url("../../assets/status/ic_edit_hovar.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .conntent {
        margin-top: 14px;
      }
      .conntent2 {
        margin-top: 14px;
        height: 40px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .used {
        font-size: 16px;
        font-weight: 400;
        color: #6f81bc;
      }
      span {
        font-size: 16px;
        font-weight: 400;
        color: #909399;
      }
    }
  }
}
</style>