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>
    <div class="main-box">
      <div class="doc-view" v-if="currentFilePath">
        <iframe
          style="width: 100%; height: 100%"
          v-if="currentFilePath  && currentFilePath.indexOf('.pdf') !=-1"
          :src="
            BASE_ROOT_DOMAIN + '/pdf/web/viewer.html?file=' + BASE_ROOT_DOMAIN +currentFilePath
          "
          frameborder="0"
        ></iframe>
        <el-image  v-else :src=" BASE_ROOT_DOMAIN +currentFilePath">
        </el-image>
      </div>
      <el-table
        ref="mytable"
        :data="table_data"
        style="width: 100%;height:calc(100vh - 260px)"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="radio" type="index" width="50"></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"
          :width="item.width"
          :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] }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300" fixed="right">
          <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
              >
              <el-button
                size="mini"
                :plain="true"
                v-if="scope.row.edit"
                @click="handleCancelSave(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>
    <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() {
      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) {
      if (row.ViewPath) {
        this.currentFilePath =  row.ViewPath;
      }else{
        this.currentFilePath = '';
      }
      // debugger;
      // if(this.table_data)
      // this.table_data = this.table_data.map(t=>{
      //   t.edit = false;
      //   return t;
      // })
      this.table_data.forEach((o,i)=>{
        this.$set(this.table_data[i],'edit',i==index)
      });
      // this.table_data = Object.assign({},this.table_data);
      // this.table_data[index].edit = true;
      // this.table_data.push(this.table_data.pop());
      // this.$forceUpdate();
      // 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);
        
      }
      UserInfo_BatchToUser(row.id).then(res=>{
        this.table_data.splice(index, 1);
      });
    },
    //保存
    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 scoped>
 /deep/.el-table__body-wrapper{
    height:92% !important;
  }
</style>
<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>