用户导入记录

周超
1 parent cac28d75
Showing 3 changed files with 409 additions and 0 deletions
src/utils/routerList.js
src/views/user/components/picuserimport.vue
src/views/user/picuserimport.vue
@@ -192,6 +192,16 @@ export function getRoutes() {
                         }
                     },
                     {
+                        path: 'importuser',
+                        name: 'importuser',
+
+                        component: () =>
+                            import ('@/views/user/picuserimport'),
+                        meta: {
+                            title: '图片导入用户',
+                        }
+                    },
+                    {
                         path: 'admin',
                         name: 'admin',
  
+<!--   -->
 \ No newline at end of file
+<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>
 \ No newline at end of file