wan/recom-gorse
Public Access
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

用户导入，物品导入

Browse Source
This commit is contained in:
wxxwjef
2023-11-14 10:16:19 +08:00
parent dc1b11155a
commit a038772795
11 changed files with 563 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/menus/EntrysManage.vue
View File

@@ -19,6 +19,7 @@
</div>
<div style="margin: 0px 0 20px 0">
<el-button type="primary" @click="createRow()" icon="el-icon-plus">添 加</el-button>
<el-button type="primary" @click="showImportItemPage()" icon="el-icon-upload2">导入条目</el-button>
</div>
<div>
<el-table :data="result.records" style="width: 100%">
@@ -217,6 +218,11 @@ export default {
}
});
},
showImportItemPage() {
_this.$router.push({
path: "importItem"
});
},
removeRow(item) {
_this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
confirmButtonText: '确定',

8
web/src/components/menus/UserManage.vue
View File

@@ -16,6 +16,7 @@
</div>
<div style="margin: 0px 0 20px 0">
<el-button type="primary" @click="createRow()" icon="el-icon-plus">添 加</el-button>
<el-button type="primary" @click="downloadUser()" icon="el-icon-download">导出用户</el-button>
<el-button type="primary" @click="showImportUserPage()" icon="el-icon-upload2">导入用户</el-button>
</div>
<div>
@@ -137,6 +138,13 @@ export default {
path: "importUser"
});
},
downloadUser() {
request({
url: '/gorse/get_bulk_user',
method: 'get'
}).then(res => {
});
},
linkUser(item) {
_this.$router.push({
path: "linkUser", query: {

322
web/src/components/menus/item/ImportItem.vue Normal file
View File

@@ -0,0 +1,322 @@
<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" :inline="true">
<el-form-item label="文件" prop="file">
<el-upload
class="upload-demo"
action="#"
:auto-upload="false"
accept=".csv"
:on-change="handleFileChange"
:limit="1"
:show-file-list="false">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传csv文件</div>
</el-upload>
</el-form-item>
<br/>
<el-form-item label="字段分隔符" prop="field">
<el-input v-model="cmd.field" placeholder="请输入字段分隔符" style="width: 300px"
@change="handleFieldChange"></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>
<br/>
<el-form-item label="唯一ID" prop="id">
<el-select v-model="cmd.id" style="width: 300px" @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.hidden" style="width: 300px" @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.categoriesColumn" style="width: 300px" @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.timestamp" style="width: 300px" @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" @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.description" style="width: 300px" @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>
<br/>
<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" v-show="list.length > 0">
<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="hidden"
:label="'是否隐藏('+(cmd.ifFirstHead ? columnList[cmd.hidden] : cmd.hidden)+')'"></el-table-column>
<el-table-column prop="categoriesColumn"
:label="'类别('+(cmd.ifFirstHead ? columnList[cmd.categoriesColumn] : cmd.categoriesColumn)+')'">
<template v-slot="scope">
<el-tag v-for="item in scope.row.categoriesColumn" :key="item" v-show="item.length > 0">{{ item }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="timestamp"
:label="'日期('+(cmd.ifFirstHead ? columnList[cmd.timestamp] : cmd.timestamp)+')'"></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-column prop="description"
:label="'描述('+(cmd.ifFirstHead ? columnList[cmd.description] : cmd.description)+')'"></el-table-column>
</el-table>
<el-button type="primary" class="submit-btn" @click="confirmSubmit" :disabled="list.length === 0">确认提交
</el-button>
</div>
</div>
</template>
<script>
import request from '@/utils/request';
var _this;
export default {
name: "ImportUser",
data() {
return {
config: /* Papa Parse config object */ {
delimiter: "", // auto-detect
newline: "", // auto-detect
quoteChar: '"',
escapeChar: '"',
header: true,
dynamicTyping: true,
preview: 0,
encoding: "",
delimitersToGuess: [',']
// ?? callback function ??
},
cmd: {
field: ',',
categories: '|',
id: '',
hidden: '',
timestamp: '',
categoriesColumn: '',
description: '',
labels: '',
ifFirstHead: true
},
file: [],
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) {
_this.file = file.raw;
if(_this.cmd.field.length > 0) {
_this.handleFieldChange();
}
},
handleFieldChange() {
this.$papa.parse(_this.file, {
delimiter: _this.cmd.field,
complete: (results) => {
_this.originList = results.data.slice(0, 21);
// 提前填充一个默认的值给对应的ID列和标签列
_this.prepareFieldAndLabels();
_this.refreshList();
}
})
},
prepareFieldAndLabels() {
_this.columnList = _this.originList[0];
_this.cmd.id = 0;
_this.cmd.hidden = 1;
_this.cmd.categoriesColumn = 2;
_this.cmd.timestamp = 3;
_this.cmd.labels = 4;
_this.cmd.description = 5;
},
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];
let errorFlag = false;
let _labels = row[_this.cmd.labels].replaceAll('""', "'");
try {
JSON.parse(_labels);
} catch (e) {
errorFlag = true;
}
let categoriesArr = row[_this.cmd.categoriesColumn].split(_this.cmd.categories);
_this.list.push({
id: row[_this.cmd.id],
labels: _labels,
hidden: row[_this.cmd.hidden],
categoriesColumn: categoriesArr,
timestamp: row[_this.cmd.timestamp],
description: row[_this.cmd.description],
errorFlag: errorFlag
});
}
},
confirmSubmit() { // 提交确认
this.$refs.cmd.validate((valid) => {
let formData = new FormData();
formData.append("sep", _this.cmd.field);
formData.append("has-header", _this.cmd.ifFirstHead);
formData.append("label-sep", _this.cmd.categories);
formData.append("file", _this.file);
let idIndex = _this.cmd.id;
let labelIndex = _this.cmd.labels;
let hiddenIndex = _this.cmd.hidden;
let categoriesColumnIndex = _this.cmd.categoriesColumn;
let timestampIndex = _this.cmd.timestamp;
let descriptionIndex = _this.cmd.description;
let _format = '';
for (let i = 0; i <= Math.max(idIndex, labelIndex, hiddenIndex, categoriesColumnIndex, timestampIndex, descriptionIndex); i++) {
if (i == idIndex) {
_format += "i";
} else if (i == hiddenIndex) {
_format += "h";
} else if (i == categoriesColumnIndex) {
_format += "c";
} else if (i == timestampIndex) {
_format += "t";
} else if (i == labelIndex) {
_format += "l";
} else if (i == descriptionIndex) {
_format += "d";
} else {
_format += "_";
}
}
console.log(_format)
formData.append("format", _format);
// request({
// url: '/gorse/bulk/items',
// method: 'put',
// data: formData
// }).then(res => {
// if(res.data && res.data.RowAffected) {
// _this.$message.success(`成功导入${res.data.RowAffected}条记录`);
// } else {
// _this.$message.warning("导入异常");
// }
// });
});
},
backBtn() {
this.$router.push({
path: "entrysManage", 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>

97
web/src/components/menus/user/ImportUser.vue
View File

@@ -7,29 +7,31 @@
</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 ref="cmd" label-width="100px" :rules="rules" :model="cmd" :inline="true">
<el-form-item label="文件" prop="file">
<el-upload
class="upload-demo"
action="#"
:auto-upload="false"
accept=".csv"
:on-change="handleFileChange"
:limit="1"
:file-list="fileList">
:show-file-list="false">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传csv文件</div>
</el-upload>
</el-form-item>
<br/>
<el-form-item label="字段分隔符" prop="field">
<el-input v-model="cmd.field" placeholder="请输入字段分隔符" style="width: 300px"
@change="refreshList"></el-input>
@change="handleFieldChange"></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="类别分隔符" prop="categories">
<el-input v-model="cmd.categories" placeholder="请输入类别分隔符" style="width: 300px"></el-input>
</el-form-item>
<br/>
<el-form-item label="唯一ID" prop="id">
<el-select v-model="cmd.id" style="width: 300px" v-if="cmd.ifFirstHead"
@change="refreshList">
<el-select v-model="cmd.id" style="width: 300px" @change="refreshList">
<template v-if="cmd.ifFirstHead">
<el-option :value="index" :label="item" v-for="(item,index) in columnList" :key="index"></el-option>
</template>
@@ -39,8 +41,7 @@
</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">
<el-select v-model="cmd.labels" style="width: 300px" @change="refreshList">
<template v-if="cmd.ifFirstHead">
<el-option :value="index" :label="item" v-for="(item,index) in columnList" :key="index"></el-option>
</template>
@@ -49,11 +50,12 @@
</template>
</el-select>
</el-form-item>
<el-form-item label="">
<br/>
<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 :data="list" style="width: 100%" height="400" v-show="list.length > 0">
<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)+')'">
@@ -63,7 +65,7 @@
</template>
</el-table-column>
</el-table>
<el-button type="primary" class="submit-btn" @click="confirmSubmit">确认提交</el-button>
<el-button type="primary" class="submit-btn" @click="confirmSubmit" :disabled="list.length === 0">确认提交</el-button>
</div>
</div>
</template>
@@ -83,7 +85,7 @@ export default {
labels: '',
ifFirstHead: true
},
fileList: [],
file: [],
originList: [], // 原始的可能包含表头的数据，默认存储最多21行（如果数据不止21行的话）
list: [], // 页面table显示的数据
columnList: [],// 上传csv的表头
@@ -105,18 +107,24 @@ export default {
},
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);
_this.file = file.raw;
if(_this.cmd.field.length > 0) {
_this.handleFieldChange();
}
},
handleFieldChange() {
this.$papa.parse(_this.file, {
delimiter: _this.cmd.field,
complete: (results) => {
_this.originList = results.data.slice(0, 21);
// 提前填充一个默认的值给对应的ID列和标签列
_this.prepareFieldAndLabels();
_this.refreshList();
}
})
},
prepareFieldAndLabels() {
_this.columnList = _this.originList[0].split(_this.cmd.field);
_this.columnList = _this.originList[0];
_this.cmd.id = 0;
_this.cmd.labels = 1;
},
@@ -131,7 +139,7 @@ export default {
// 第一行是表头，跳过list塞入
continue;
}
let row = _this.originList[i].split(_this.cmd.field);
let row = _this.originList[i];
let errorFlag = false;
try {
JSON.parse(row[_this.cmd.labels]);
@@ -146,14 +154,37 @@ export default {
}
},
confirmSubmit() { // 提交确认
// request({
// url: '/risk-user/query_unique',
// method: 'post',
// data: {
// EQS_fid: _this.userId
// }
// }).then(res => {
// });
this.$refs.cmd.validate((valid) => {
let formData = new FormData();
formData.append("sep", _this.cmd.field);
formData.append("has-header", _this.cmd.ifFirstHead);
formData.append("label-sep", _this.cmd.categories);
formData.append("file", _this.file);
let idIndex = _this.cmd.id;
let labelIndex = _this.cmd.labels;
let _format = '';
for (let i = 0; i <= Math.max(idIndex, labelIndex); i++) {
if (i == idIndex) {
_format += "u";
} else if (i == labelIndex) {
_format += "l";
} else {
_format += "_";
}
}
formData.append("format", _format);
request({
url: '/gorse/bulk/users',
method: 'put',
data: formData
}).then(res => {
if(res.data && res.data.RowAffected) {
_this.$message.success(`成功导入${res.data.RowAffected}条记录`);
} else {
_this.$message.warning("导入异常");
}
});
});
},
backBtn() {
this.$router.push({