|
|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="menu-title">
|
|
|
+ 导入用户
|
|
|
+ <div class="icon icon-back" @click="backBtn">
|
|
|
+ <i title="返回"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="block_box" style="margin-top: 20px;padding: 20px">
|
|
|
+ <el-form ref="cmd" label-width="100px" :rules="rules" :model="cmd">
|
|
|
+ <el-form-item label="文件" prop="file">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ action="#"
|
|
|
+ :auto-upload="false"
|
|
|
+ :on-change="handleFileChange"
|
|
|
+ :limit="1"
|
|
|
+ :file-list="fileList">
|
|
|
+ <el-button size="small" type="primary">点击上传</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">只能上传csv文件</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字段分隔符" prop="field">
|
|
|
+ <el-input v-model="cmd.field" placeholder="请输入字段分隔符" style="width: 300px"
|
|
|
+ @change="refreshList"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="类别分隔符" prop="categories">-->
|
|
|
+ <!-- <el-input v-model="cmd.categories" placeholder="请输入类别分隔符" style="width: 300px"></el-input>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+ <el-form-item label="唯一ID" prop="id">
|
|
|
+ <el-select v-model="cmd.id" style="width: 300px" v-if="cmd.ifFirstHead"
|
|
|
+ @change="refreshList">
|
|
|
+ <template v-if="cmd.ifFirstHead">
|
|
|
+ <el-option :value="index" :label="item" v-for="(item,index) in columnList" :key="index"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="!cmd.ifFirstHead">
|
|
|
+ <el-option :value="index" :label="index" v-for="(item,index) in columnList" :key="index"></el-option>
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标签" prop="labels">
|
|
|
+ <el-select v-model="cmd.labels" style="width: 300px" v-if="cmd.ifFirstHead"
|
|
|
+ @change="refreshList">
|
|
|
+ <template v-if="cmd.ifFirstHead">
|
|
|
+ <el-option :value="index" :label="item" v-for="(item,index) in columnList" :key="index"></el-option>
|
|
|
+ </template>
|
|
|
+ <template v-if="!cmd.ifFirstHead">
|
|
|
+ <el-option :value="index" :label="index" v-for="(item,index) in columnList" :key="index"></el-option>
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-checkbox label="第一行为表头" v-model="cmd.ifFirstHead" @change="refreshList"></el-checkbox>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="list" style="width: 100%" height="400">
|
|
|
+ <el-table-column type="index" label="行号" width="60"></el-table-column>
|
|
|
+ <el-table-column prop="id" :label="'ID('+(cmd.ifFirstHead ? columnList[cmd.id] : cmd.id)+')'"></el-table-column>
|
|
|
+ <el-table-column prop="labels" :label="'标签('+(cmd.ifFirstHead ? columnList[cmd.labels] : cmd.labels)+')'">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <label style="color: red" v-if="scope.row.errorFlag">JSON格式化异常</label>
|
|
|
+ <label v-if="!scope.row.errorFlag">{{ scope.row.labels }}</label>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-button type="primary" class="submit-btn" @click="confirmSubmit">确认提交</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import request from '@/utils/request';
|
|
|
+
|
|
|
+var _this;
|
|
|
+export default {
|
|
|
+ name: "ImportUser",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cmd: {
|
|
|
+ field: ',',
|
|
|
+ categories: '|',
|
|
|
+ id: '',
|
|
|
+ labels: '',
|
|
|
+ ifFirstHead: true
|
|
|
+ },
|
|
|
+ fileList: [],
|
|
|
+ originList: [], // 原始的可能包含表头的数据，默认存储最多21行（如果数据不止21行的话）
|
|
|
+ list: [], // 页面table显示的数据
|
|
|
+ columnList: [],// 上传csv的表头
|
|
|
+ rules: {
|
|
|
+ fid: [
|
|
|
+ {required: true, message: '请选择文件'}
|
|
|
+ ],
|
|
|
+ field: [
|
|
|
+ {required: true, message: '字段分隔符不能为空'}
|
|
|
+ ],
|
|
|
+ categories: [
|
|
|
+ {required: true, message: '类别分隔符不能为空'}
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ _this = this;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleFileChange(file, fileList) {
|
|
|
+ const fileReader = new FileReader();
|
|
|
+ fileReader.onload = function () {
|
|
|
+ const fileData = fileReader.result;
|
|
|
+ _this.originList = fileData.split('\n').slice(0, 21);
|
|
|
+ // 提前填充一个默认的值给对应的ID列和标签列
|
|
|
+ _this.prepareFieldAndLabels();
|
|
|
+ _this.refreshList();
|
|
|
+ };
|
|
|
+ fileReader.readAsText(file.raw);
|
|
|
+ },
|
|
|
+ prepareFieldAndLabels() {
|
|
|
+ _this.columnList = _this.originList[0].split(_this.cmd.field);
|
|
|
+ _this.cmd.id = 0;
|
|
|
+ _this.cmd.labels = 1;
|
|
|
+ },
|
|
|
+ refreshList() {
|
|
|
+ // 处理原始数据，将行文本截取成数组放入list
|
|
|
+ _this.list = [];
|
|
|
+ if (_this.cmd.field.length === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ for (let i in _this.originList) {
|
|
|
+ if (_this.cmd.ifFirstHead && i == 0) {
|
|
|
+ // 第一行是表头，跳过list塞入
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ let row = _this.originList[i].split(_this.cmd.field);
|
|
|
+ let errorFlag = false;
|
|
|
+ try {
|
|
|
+ JSON.parse(row[_this.cmd.labels]);
|
|
|
+ } catch (e) {
|
|
|
+ errorFlag = true;
|
|
|
+ }
|
|
|
+ _this.list.push({
|
|
|
+ id: row[_this.cmd.id],
|
|
|
+ labels: row[_this.cmd.labels],
|
|
|
+ errorFlag: errorFlag
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmSubmit() { // 提交确认
|
|
|
+ // request({
|
|
|
+ // url: '/risk-user/query_unique',
|
|
|
+ // method: 'post',
|
|
|
+ // data: {
|
|
|
+ // EQS_fid: _this.userId
|
|
|
+ // }
|
|
|
+ // }).then(res => {
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ backBtn() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "userManage", query: {
|
|
|
+ qo: JSON.stringify({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ LIKES_fid: '',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style src="../../../css/back.css" scoped></style>
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+.block_box {
|
|
|
+ margin: 25px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 15px 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > div {
|
|
|
+ padding: 25px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ margin-left: auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
