src/views/user/picuserimport.vue

<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>
    <el-table
      ref="mytable"
      :data="table_data"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="radio" type="index" width="50"></el-table-column>
      <!-- <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="key" v-for="(item,key) in props.row.DataJsonObj.result" :key="key">
              <span>{{ item }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        align="center"
        v-for="(item, index, key) in table_columns"
        :item="item"
        :key="key"
        :index="index"
        :label="item.label"
      >
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.edit"
            size="small"
            v-model="scope.row[item.prop]"
            :placeholder="'请输入' + item.label"
          >
          </el-input>
          <span v-if="!scope.row.edit">{{ scope.row[item.prop] }}{{ scope.row.edit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <!-- 全局控制的编辑 -->
          <div
            v-if="is_edit && scope.row.add == undefined"
            style="display: inline-block"
          >
            <!-- 编辑 -->
            <el-button
              size="mini"
              v-if="!scope.row.edit"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              >编辑
            </el-button>
            <!-- 保存 -->
            <el-button
              size="mini"
              type="success"
              :plain="true"
              v-if="scope.row.edit"
              @click="handleSave(scope.$index, scope.row)"
              >保存</el-button
            >
          </div>
          <!-- 添加控制 -->
          <div
            v-if="scope.row.add != undefined && scope.row.add"
            style="display: inline-block"
          >
            <!-- 保存 -->
            <el-button
              size="mini"
              type="success"
              :plain="true"
              v-if="scope.row.edit"
              @click="handleSave(scope.$index, scope.row)"
              >保存</el-button
            >
          </div>
          <!-- 全局控制删除 -->
          <el-button
            size="mini"
            v-if="is_delete && scope.row.add == undefined"
            :plain="true"
            type="warning"
            style="margin-left: 10px"
            @click="handleshare(scope.$index, scope.row)"
            >确认入库</el-button
          >
          <el-button
            size="mini"
            v-if="is_delete && scope.row.add == undefined"
            :plain="true"
            type="danger"
            style="margin-left: 10px"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <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 {
  methods: {
    handleExceed() {},
    handleSuccess(res) {
      this.$refs.uploader.clearFiles();
      this.search();
    },
    search(){
      this.queryModel.pageIndex = 1;
      this.getList();
    },
    getList() {
      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) {
      this.table_data[index].edit = true;
      this.table_data.push(this.table_data.pop());
      this.$forceUpdate();
    },
    //删除
    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",
      });
    },
    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();
      });
    },
  },
  data() {
    return {
      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: "150",
        },
        {
          prop: "Gender",
          label: "性别",
          width: "80",
        },
        {
          prop: "GraduationSchool",
          label: "毕业学校",
          width: "",
        },
        {
          prop: "GraduationMajor",
          label: "专业",
          width: "",
        },
        {
          prop: "Education",
          label: "最高学历",
          width: "",
        },
        {
          prop: "IntendedCity",
          label: "城市",
          width: "150",
        },
      ],
      //表格数据
      table_data: [
        // {
        //   date: "2016-05-03",
        //   name: "王小虎",
        //   province: "上海",
        //   city: "普陀区",
        //   address: "上海市普陀区金沙江路 1518 弄",
        //   zip: 200333,
        //   sex: 18
        // },
        // {
        //   date: "2016-05-02",
        //   sex: 18,
        //   name: "王小虎",
        //   province: "上海",
        //   city: "普陀区",
        //   address: "上海市普陀区金沙江路 1518 弄",
        //   zip: 200333
        // },
        // {
        //   date: "2016-05-04",
        //   name: "王小虎",
        //   sex: 18,
        //   province: "上海",
        //   city: "普陀区",
        //   address: "上海市普陀区金沙江路 1518 弄",
        //   zip: 200333
        // }
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.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,.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>