antissoft / antissoft.dati.admin

<template>
  <div style="padding: 10px">
    <div class="seetingsDiv" style="">
      <div class="flex" style="margin-top: 10px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input
              placeholder="输入关键字搜索"
              v-model="query.keyword"
            ></el-input>
          </el-form-item>

          <el-form-item label="最高学历">
            <el-select v-model="query.xueli" placeholder="最高学历">
              <el-option label="大专" value="dazhuan"></el-option>
              <el-option label="本科" value="benke"></el-option>
              <el-option label="博士" value="boshi"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="query.sex" placeholder="性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex align-center" style="margin-top: 10px">
        <el-button type="success" @click="search">搜索</el-button>
        <el-button size="mini" @click="handleshare()" type="primary"
          >批量入库</el-button
        >
        <el-button size="mini" @click="handleAdd()" type="primary"
          >新增一行</el-button
        >
        <el-upload
          class="upload-demo"
          ref="uploader"
          action="/api//UserInfo/ResumeIdentification"
          multiple
          :headers="{
            Authorization: Authorization,
          }"
          :limit="100"
          :show-file-list="false"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
        >
          <el-button size="small" type="primary">上传简历</el-button>
        </el-upload>
      </div>
    </div>
    <div class="main-box">
   
   <table class="el-table__body">
     <thead class="has-gutter">
         <th>
       <td>111</td>
       <td>大师傅</td>
       <td>的的的</td>
     </th>
     </thead>
   
     <tr>
       <td>test禄口街道杀戮空间</td>
       <td>test禄口街道杀戮空间</td>
       <td>test禄口街道杀戮空间</td>
     </tr>
   </table>
    </div>
    <!-- <div class="page-box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="queryResult.totalCount"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script>
import {
  UserInfo_BatchToUser,
  UserInfo_Delete,
  UserInfo_Update,
  UserInfo_List,
} from "@/api/user";
export default {
  data() {
    return {
      currentFilePath: "",
      queryResult: {},
      queryModel: {
        pageIndex: 1,
        pageSize: 10,
      },
      query: {},
      new_date_json: {}, //数据结构
      multipleSelection: [], //复选框，数据
      is_edit: true, //是否可编辑
      is_delete: true, //是否可删除
      selection: true, //是否需要复选框
      radio: false, //单选变色
      space_color: true, //隔行变色
      //表头信息
      table_columns: [
        {
          prop: "FullName",
          label: "技术",
          width: "150",
        },
        {
          prop: "PhoneNumber",
          label: "手机号",
          width: "150",
        },
        {
          prop: "DateBirth",
          label: "出生日期",
          width: "180",
        },
        {
          prop: "Gender",
          label: "性别",
          width: "80",
        },
        {
          prop: "GraduationSchool",
          label: "毕业学校",
          width: "200",
        },
        {
          prop: "GraduationMajor",
          label: "专业",
          width: "200",
        },
        {
          prop: "Education",
          label: "最高学历",
          width: "",
        },
        {
          prop: "IntendedCity",
          label: "城市",
          width: "150",
        },
      ],
      //表格数据
      table_data: [],
    };
  },
  methods: {
    handleExceed() {},
    handleSuccess(res) {
      this.$refs.uploader.clearFiles();
      this.search();
    },
    search() {
      this.queryModel.pageIndex = 1;
      this.getList();
    },
    getList() {
      table_data = [];
      // UserInfo_List(this.queryModel).then((res) => {
      //   this.queryResult = res.data;
      //   if (res.data.data && res.data.data.length) {
      //     res.data.data = res.data.data.map((t) => {
      //       t.DataJsonObj = JSON.parse(t.DataJson);
      //       return t;
      //     });
      //   }
      //   this.table_data = res.data.data;
      // });
    },
    //隔行变色
    tableRowClassName() {
      //选取DOM节点
      var trs = this.$refs.mytable.$el
        .getElementsByTagName("tbody")[0]
        .getElementsByTagName("tr");
      for (var i in trs) {
        if (i % 2 == 0) {
          //当隔行变色未true时改变颜色
          if (this.space_color) {
            trs[i].style.backgroundColor = "#f0f9eb";
          } else {
            trs[i].style.backgroundColor = "";
          }
        }
      }
    },

    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("selection:", this.multipleSelection);
    },
    //编辑
    handleEdit(index, row) {
     var model ;
      this.table_data = this.table_data.map(t=>{
        delete t.edit;
        return t;
      })  
      this.$set(this.table_data[index],'edit',true)
      

    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);

      this.table_data.splice(index, 1);
      // UserInfo_Delete(row.id);
      // this.$message({
      //   message: "删除成功！",
      //   type: "success",
      // });
    },

    handleshare(index, row) {
      if (!row) {
        this.table_data = [];
      } else {
        console.log(index, row);
        this.table_data.splice(index, 1);
      }
      UserInfo_BatchToUser(row.id);
      this.$message({
        message: "入库成功！",
        type: "success",
      });
    },

    //保存
    handleSave(index, row) {
      delete this.table_data[index].edit;
      let formData = { ...row };
      delete formData.DataJsonObj;
      UserInfo_Update(row);
      this.table_data.push(this.table_data.pop());
      this.$forceUpdate();
      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
    handleCancelSave(index, row){
      delete this.table_data[index].edit;
      if(this.currentFilePath == row.ViewPath){
        this.currentFilePath = '';
      }
      this.table_data.push(this.table_data.pop());
    },
    handleAdd() {
      var addDataJson = {};
      for (var key in this.new_date_json) {
        if (key === "edit") {
          delete addDataJson[key];
        } else if (key === "add") {
          delete addDataJson[key];
        } else {
          addDataJson[key] = "";
        }
      }
      addDataJson.edit = true;
      addDataJson.add = true;
      this.table_data.push(addDataJson);
    },
    //初始化编辑属性
    initEditAttribute() {
      var self = this;
      var edit = self.edit;
    },
    initAddDataJson(dataArray) {
      //新增时，初始化数据结构
      var dataJson = dataArray;
      var newDateJson = {};
      for (var key in dataJson) {
        if (key === "edit") {
          newDateJson[key] = "true";
        } else {
          newDateJson[key] = "";
        }
      }
      newDateJson["add"] = true;
      this.new_date_json = newDateJson;
    },
  },
  created() {
    this.getList();
  },
  mounted: function () {
    this.initEditAttribute();
    //确保方法在页面渲染后调用
    this.$nextTick(function () {
      /////方法
      this.tableRowClassName();
    });
  },
  watch: {
    space_color: function () {
      //监听数据变化
      this.$nextTick(function () {
        /////方法
        this.tableRowClassName();
      });
    },
    table_data: function () {
      //监听数据变化f
      this.$nextTick(function () {
        /////方法
        this.tableRowClassName();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main-box{
  display: flex;
}
.doc-view {
  margin-left: 10px;
  width: 100%;
  flex: 1;
  overflow: hidden;
}
.el-table__expanded-cell {
  padding: 10px;
}
.demo-table-expand {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 10px;
}
.demo-table-expand .el-form-item {
  margin-bottom: 10px !important;
  min-width: 20%;
  max-width: 50%;
}
.demo-form-inline {
  display: flex;
  align-items: center;
}
.el-form--inline .el-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.aligin-center {
  align-items: center;
}
.seetingsDiv {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 30px;
  background: #efefef;
  /* line-height: 60px; */
  border-radius: 5px;
  box-shadow: 0 0 5px #cdcdcd;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.seetingsDiv button {
  height: 40px;
  background-color: #304156;
  border: 0px;
  margin-left: 10px;
  box-shadow: 0 0 5px #cdcdcd;
  float: none;
  margin-right: 10px;
  margin-top: 0;
}
</style>