antissoft / antissoft.dati.admin

<template>
  <div style="padding:10px">
    <div class="seetingsDiv" style="">
      <div class="flex" style="width:75%">


        <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-item>
            <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-form-item>
        </el-form>

      </div>
      <el-upload class="upload-demo" action="/api/Account/importUsers?UserClassId=0" multiple :limit="1"
        :show-file-list="false" :on-exceed="handleExceed" :on-success="handleSuccess" :file-list="fileList">
        <el-button size="small" type="primary">上传待解析图片</el-button>
      </el-upload>
    </div>



    <el-table ref="mytable" :data="table_data" style="width: 100%" @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" :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">
        <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>
</template>

<script>
  export default {
    methods: {
      //隔行变色
      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) {
        console.log(index, row);
        row.edit = true;
      },
      //删除
      handleDelete(index, row) {

        console.log(index, row);

        this.table_data.splice(index, 1);

        this.$message({
          message: "删除成功！",
          type: "success"
        });
      },

      handleshare(index, row) {
        if (!row) {
          this.table_data = [];

        }
        else {

          console.log(index, row);
          this.table_data.splice(index, 1);
        }



        this.$message({
          message: "确认成功！",
          type: "success"
        });
      },

      //保存
      handleSave(index, row) {
        console.log(index, row);
        row.edit = false;

        delete this.table_data[index].add;

        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;

        var dataArray = [
          {
            date: "2022-03-22",
            name: "王明",
            province: "四川",
            phone: '15888888888',
            city: "成都",
            address: "四川省成都市金牛区茶店子101",
            zip: 200333,
            sex: '男',
            age: 33,
            minzu: '汉',
            zhuanye: '计算机',
            xueli: '博士'
          }, {
            date: "2022-03-22",
            name: "周超",
            province: "四川",
            phone: '15833344444',
            city: "成都",
            address: "四川省成都市金牛区茶店子102",
            zip: 200333,
            sex: '男',
            age: 30,
            minzu: '汉',
            zhuanye: '计算机',
            xueli: '博士'
          }, {
            date: "2022-03-22",
            name: "杨志",
            province: "四川",
            phone: '15827271123',
            city: "成都",
            address: "四川省成都市金牛区茶店子103",
            zip: 200333,
            sex: '男',
            age: 28,
            minzu: '汉',
            zhuanye: '计算机',
            xueli: '博士'
          },

        ];

        if (dataArray.length > 0) {
          //添加编辑事件
          for (var index in dataArray) {
            dataArray[index]["edit"] = false;
            this.table_data.push(dataArray[index]);
          }

          if (Object.keys(this.new_date_json).length === 0) {
            //新增时，初始化数据结构
            this.initAddDataJson(dataArray[0]);
          }
        }
        console.log("this.tableData:", this.table_data);
      },
      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;
      }
    },
    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 {
        query: {},
        new_date_json: {}, //数据结构
        multipleSelection: [], //复选框，数据
        is_edit: true, //是否可编辑
        is_delete: true, //是否可删除
        selection: true, //是否需要复选框
        radio: false, //单选变色
        space_color: true, //隔行变色
        //表头信息
        table_columns: [
          {
            prop: "date",
            label: "日期",
            width: "150"
          },
          {
            prop: "name",
            label: "姓名",
            width: "150"
          },
          {
            prop: "phone",
            label: "手机号",
            width: "150"
          },
          {
            prop: "age",
            label: "年龄",
            width: "80"
          },
          {
            prop: "sex",
            label: "性别",
            width: "80"
          },
          {
            prop: "minzu",
            label: "民族",
            width: ""
          },
          {
            prop: "zhuanye",
            label: "专业",
            width: ""
          },
          {
            prop: "xueli",
            label: "最高学历",
            width: ""
          },
          {
            prop: "city",
            label: "城市",
            width: "150"
          },
          {
            prop: "address",
            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>
  .seetingsDiv {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    /* height: 60px; */
    background: #efefef;
    /* line-height: 60px; */
    border-radius: 5px;
    box-shadow: 0 0 5px #cdcdcd;
    justify-content: space-between;
  }

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