458 lines
13 KiB
Vue
458 lines
13 KiB
Vue
<template>
|
|
<div class="account-apply-manage">
|
|
<div class="container">
|
|
<div class="region-box">
|
|
<el-radio-group v-model="region">
|
|
<el-radio v-for="(item, index) in userAreaRegion"
|
|
:key="index"
|
|
:label="item.value">{{ item.name }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="handle-box">
|
|
<el-form ref="searchForm"
|
|
:model="searchForm"
|
|
label-width="90px"
|
|
:disabled="tableLoading">
|
|
<div class="search-line">
|
|
<el-form-item label="MoliStar ID"
|
|
prop="erbanNo">
|
|
<el-input v-model.trim="searchForm.erbanNo"
|
|
placeholder="Please enter"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="UID"
|
|
prop="uid">
|
|
<el-input v-model.trim="searchForm.uid"
|
|
placeholder="Please enter"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="SID"
|
|
prop="sid">
|
|
<el-input v-model.trim="searchForm.sid"
|
|
placeholder="Please enter"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Region"
|
|
prop="partitionId">
|
|
<el-select v-model="searchForm.partitionId">
|
|
<el-option label="全部"
|
|
value=""></el-option>
|
|
<el-option v-for="item in partitionInfoList"
|
|
:key="item.id"
|
|
:label="item.desc"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label-width="40px">
|
|
<el-button type="primary"
|
|
@click="handSearch">Search</el-button>
|
|
<el-button plain
|
|
@click="resetSearchForm">Reset Search</el-button>
|
|
<el-upload class="file-uploader"
|
|
action="#"
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:on-change="handleExcel"
|
|
accept=".xls, .xlsx"
|
|
:auto-upload="false">
|
|
<el-button type="primary">Import</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<!-- <el-upload
|
|
class="file-uploader"
|
|
action="#"
|
|
list-type="picture-card"
|
|
:show-file-list="false"
|
|
:on-change="handleExcel"
|
|
accept=".xls, .xlsx"
|
|
:auto-upload="false"
|
|
>
|
|
<el-button type="primary" class="el-icon-upload">Import</el-button>
|
|
</el-upload> -->
|
|
</div>
|
|
<div class="table">
|
|
<el-table :data="tableData"
|
|
border
|
|
v-loading="tableLoading"
|
|
@header-click="headerCopy"
|
|
style="width: 100%">
|
|
<el-table-column align="center"
|
|
prop="id"
|
|
label="No.">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="erbanNo"
|
|
label="MoliStar ID">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="uid"
|
|
label="UID">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="level"
|
|
label="SID Level">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="nick"
|
|
label="Nickname">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="partitionInfo"
|
|
label="Region">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="createTime"
|
|
label="Apply time">
|
|
<template v-slot="scope">{{
|
|
convertTimestamp(scope.row.createTime)
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="prettyNo"
|
|
label="SID">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="status"
|
|
label="State">
|
|
<template v-slot="scope">
|
|
<el-tag :type="applyStateTag(scope.row.status)">{{
|
|
applyStateText(scope.row.status)
|
|
}}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="updateTime"
|
|
label="Review time">
|
|
<template v-slot="scope">{{
|
|
convertTimestamp(scope.row.updateTime)
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
prop="operater"
|
|
label="Operator">
|
|
</el-table-column>
|
|
<el-table-column align="center"
|
|
label="Operate">
|
|
<template v-slot="scope">
|
|
<el-button type="text"
|
|
v-if="scope.row.status == 0"
|
|
@click="handlePass(scope.$index, scope.row)">
|
|
Pass
|
|
</el-button>
|
|
<el-button type="text"
|
|
v-if="scope.row.status == 0"
|
|
@click="handleReject(scope.$index, scope.row)">
|
|
Reject
|
|
</el-button>
|
|
<el-button type="text"
|
|
v-if="scope.row.status == 1"
|
|
class="red"
|
|
@click="handleDelete(scope.$index, scope.row)">
|
|
Delete
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<table-pagination :pageParams="pageParams"
|
|
:pageTotal="pageTotal"
|
|
:ifShowSizes="true"
|
|
@handleSizeChange="handleSizeChange"
|
|
@handlePageChange="handlePageChange"></table-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getPrettyNumberExamineList,
|
|
prettyNumberExaminePass,
|
|
prettyNumberExamineDelete,
|
|
prettyNumberExamineReject,
|
|
erbanUpload,
|
|
} from "@/api/relPrivilegeManage/relPrivilegeManage.js";
|
|
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
|
|
import TablePagination from "@/components/common/TablePagination";
|
|
import { formatDate } from "@/utils/relDate";
|
|
import { ElMessageBox, ElMessage } from "element-plus"; // 正确引入 ElM
|
|
// 混入
|
|
// import Mixin from '../../mixin/mixRegion.js';
|
|
|
|
export default {
|
|
name: "accountApplyManage",
|
|
// mixins: [Mixin],
|
|
components: { TablePagination },
|
|
data () {
|
|
return {
|
|
partitionInfoList: [],
|
|
tableLoading: false, // 表格是否加载中
|
|
tableData: [], // 接口返回的表格数据
|
|
// 搜索表单相关
|
|
searchForm: {
|
|
erbanNo: null,
|
|
uid: null,
|
|
sid: null,
|
|
partitionId: null,
|
|
},
|
|
pageTotal: 0, // 接口返回的表格总条数
|
|
pageParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
},
|
|
};
|
|
},
|
|
created () {
|
|
this.initPartition();
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData () {
|
|
this.tableLoading = true;
|
|
|
|
let { pageParams, searchForm } = this;
|
|
searchForm = JSON.parse(JSON.stringify(searchForm));
|
|
pageParams = JSON.parse(JSON.stringify(pageParams));
|
|
Object.keys(searchForm).forEach((item) => {
|
|
if (
|
|
!searchForm[item] ||
|
|
(searchForm[item] !== undefined && searchForm[item] === "")
|
|
) {
|
|
delete searchForm[item];
|
|
}
|
|
});
|
|
Object.assign(pageParams, searchForm);
|
|
|
|
getPrettyNumberExamineList(pageParams).then((res) => {
|
|
this.tableLoading = false;
|
|
if (res.code == 200) {
|
|
let data = res.data;
|
|
console.log(data);
|
|
this.tableData = data.rows;
|
|
this.pageTotal = data.total;
|
|
}
|
|
});
|
|
},
|
|
//导入表格
|
|
handleExcel (file) {
|
|
let formData = new FormData(); //声明一个FormDate对象
|
|
formData.append("file", file.raw); //把文件信息放入对象中
|
|
console.log(file.raw);
|
|
erbanUpload(formData)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.getData();
|
|
this.$message.success("Operation successful");
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
// that.$message({
|
|
// type: 'error',
|
|
// message: 'Operation failed'
|
|
// });
|
|
});
|
|
},
|
|
// 通过
|
|
handlePass (index, row) {
|
|
ElMessageBox.confirm("Are you sure you want to pass?", "Prompt", {
|
|
type: "warning",
|
|
confirmButtonText: "Sure",
|
|
cancelButtonText: "Cancel",
|
|
})
|
|
.then(() => {
|
|
prettyNumberExaminePass({ id: row.id }).then((res) => {
|
|
if (res.code == 200) {
|
|
this.getData();
|
|
ElMessage({
|
|
showClose: true,
|
|
message: "Operation successful",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.catch(() => { });
|
|
},
|
|
// 拒绝
|
|
handleReject (index, row) {
|
|
ElMessageBox.confirm("Are you sure you want to refuse?", "Prompt", {
|
|
type: "warning",
|
|
confirmButtonText: "Sure",
|
|
cancelButtonText: "Cancel",
|
|
})
|
|
.then(() => {
|
|
prettyNumberExamineReject({ id: row.id }).then((res) => {
|
|
if (res.code == 200) {
|
|
this.getData();
|
|
ElMessage({
|
|
showClose: true,
|
|
message: "Operation successful",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.catch(() => { });
|
|
},
|
|
// 删除操作
|
|
handleDelete (index, row) {
|
|
// 二次确认删除
|
|
ElMessageBox.confirm("Are you sure you want to delete?", "Prompt", {
|
|
type: "warning",
|
|
confirmButtonText: "Sure",
|
|
cancelButtonText: "Cancel",
|
|
})
|
|
.then(() => {
|
|
prettyNumberExamineDelete({ id: row.id }).then((res) => {
|
|
if (res.code == 200) {
|
|
this.getData();
|
|
ElMessage({
|
|
showClose: true,
|
|
message: "Operation successful",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
ElMessage({
|
|
showClose: true,
|
|
message: res.message,
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.catch(() => { });
|
|
},
|
|
// 点击搜索
|
|
handSearch () {
|
|
this.$refs["searchForm"].validate((valid) => {
|
|
if (valid) {
|
|
this.pageParams.pageNo = 1;
|
|
this.getData();
|
|
}
|
|
});
|
|
},
|
|
// 重置搜索表单
|
|
resetSearchForm () {
|
|
this.$refs["searchForm"].resetFields();
|
|
this.pageParams.pageNo = 1;
|
|
this.getData();
|
|
},
|
|
// 分页导航
|
|
handleSizeChange (val) {
|
|
this.pageParams.pageNo = val;
|
|
this.getData();
|
|
},
|
|
handlePageChange (val) {
|
|
this.pageParams.pageNo = val;
|
|
this.getData();
|
|
},
|
|
headerCopy (column, e) {
|
|
this.$copy(column.label);
|
|
},
|
|
initPartition () {
|
|
getPartitionInfoList().then(res => {
|
|
let data = res.data;
|
|
this.partitionInfoList = data;
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
applyStateTag () {
|
|
return function (val) {
|
|
let text = "";
|
|
switch (val) {
|
|
case 0:
|
|
text = "warning";
|
|
break;
|
|
case 1:
|
|
text = "success";
|
|
break;
|
|
case 2:
|
|
text = "info";
|
|
break;
|
|
case 3:
|
|
text = "danger";
|
|
break;
|
|
}
|
|
return text;
|
|
};
|
|
},
|
|
applyStateText () {
|
|
return function (val) {
|
|
let text = "";
|
|
switch (val) {
|
|
case 0:
|
|
text = "In Review";
|
|
break;
|
|
case 1:
|
|
text = "Passed";
|
|
break;
|
|
case 2:
|
|
text = "Rejected";
|
|
break;
|
|
case 3:
|
|
text = "Deleted";
|
|
break;
|
|
}
|
|
return text;
|
|
};
|
|
},
|
|
convertTimestamp () {
|
|
return function (time) {
|
|
let date = new Date(time);
|
|
return formatDate(date);
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.red {
|
|
color: rgb(241, 19, 19);
|
|
}
|
|
|
|
// ::v-deep {
|
|
// .el-upload--picture-card {
|
|
// background-color: transparent;
|
|
// border: 0;
|
|
// border-radius: 0;
|
|
// box-sizing: border-box;
|
|
// width: 0;
|
|
// height: 45px;
|
|
// line-height: 0;
|
|
// vertical-align: top;
|
|
// }
|
|
// }
|
|
.file-uploader {
|
|
display: block;
|
|
margin-left: 51px;
|
|
input {
|
|
display: none;
|
|
}
|
|
.el-upload {
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
width: 0;
|
|
height: 45px;
|
|
line-height: 0;
|
|
vertical-align: top;
|
|
}
|
|
span {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|