Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhanbo.xu
fa4a9e82 1 parent f30b2a6e

feat: 新增API 权限配置

Inline Side-by-side
Showing 4 changed files with 592 additions and 1 deletions
......@@ -5,7 +5,7 @@ VUE_APP_BASE_ENV = "dev"
VUE_APP_Version = '1.0.0'
VUE_APP_BASE_URL = 'http://101.132.100.41:7008/EcomExp'
VUE_APP_BASE_URL = 'http://101.132.100.41:7001/EcomExp'
# FedEx 在线申报工具/开发环境
# http://101.132.100.41:7001/EcomExp
VUE_APP_BASE_API = /EcomExp
......
import request from "@/utils/request";
// 删除用户key
// POST
// /applyKey/deleteKey/{id}
export function deleteKey(id) {
return request({
url: "/bus-customer/applyKey/deleteKey/" + id,
method: "post",
});
}
// 申请key
// /applyKey/generateKey
export function generateKey(params) {
return request({
url: `/bus-customer/applyKey/generateKey`,
method: "post",
data: params.toString(),
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
});
}
// 获取用户key列表
// POST
// /applyKey/queryKeyList
export function queryKeyList(data) {
return request({
url: "/bus-customer/applyKey/queryKeyList",
method: "post",
data: data,
});
}
// 修改用户key相关信息
// POST
// /applyKey/updateKeyInfo
export function updateKeyInfo(data) {
return request({
url: "/bus-customer/applyKey/updateKeyInfo",
method: "post",
data: data,
});
}
<template>
<el-dialog
class="entryDialog classCUploadDialog"
:title="title"
:visible.sync="outerVisible"
:show-close="false"
width="30%"
:close-on-click-modal="false"
v-loading="loadings.dialogLoading"
@close="close(false)"
>
<div class="modelItem">
<el-form
class="fedexFormStyle"
ref="formData"
:model="formData"
:rules="type == 'roleChange' ? {} : rules"
label-position="top"
:disabled="type == 'roleChange'"
size="small"
>
<el-row :gutter="5">
<!-- 用户ID -->
<el-col :span="24">
<Formitem label="用户ID" prop="userId" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-userId"
resize="none"
v-model="formData.userId"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<!-- key -->
<!-- <el-col :span="12">
<Formitem label="KEY" prop="key" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-key"
resize="none"
v-model="formData.key"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col> -->
<!-- 说明 -->
<el-col :span="24">
<Formitem label="说明" prop="description" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-description"
resize="none"
v-model="formData.description"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
</el-row>
</el-form>
</div>
<div class="dialogOption entrySave">
<el-button
class="entrySaveButton"
:disabled="loadings.submitLoading"
@click="submit"
>确 定</el-button
>
<el-button
class="entrySaveButton"
:disabled="loadings.uploadLoading"
@click="close(false)"
>关 闭</el-button
>
</div>
</el-dialog>
</template>
<script>
import { generateKey, updateKeyInfo } from "@/api/api-key.js";
export default {
props: {
outerVisible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "新增密码机",
},
type: {
type: String,
default: "",
},
active: {
type: Object,
default: null,
},
},
data() {
return {
formData: {
description: "",
userId: "",
key: "",
id: undefined,
},
rules: {
key: [
{
required: true,
trigger: "blur",
message: "用户ID不能为空！",
},
],
userId: [
{
required: true,
trigger: "blur",
message: "KEY不能为空！",
},
],
},
loadings: {
dialogLoading: false,
uploadLoading: false,
submitLoading: false,
},
loadingText: "",
};
},
watch: {
outerVisible(val) {
if (val) {
this.loadings.dialogLoading = false;
if (this.type == "update") {
this.formData = this.active;
}
}
},
},
methods: {
//数据保存
submit() {
this.loadings.dialogLoading = true;
let obj = {};
if (this.type == "add") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj = this.formData;
this.addApi(obj);
} else {
this.loadings.dialogLoading = false;
}
});
} else if (this.type == "update") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj.description = this.formData.description;
obj.userId = this.formData.userId;
obj.key = this.formData.key;
obj.id = this.formData.id;
this.updateapi(obj);
} else {
this.loadings.dialogLoading = false;
}
});
}
},
//新增
addApi(val) {
const { description = "", userId = "", key = "" } = val;
const params = new URLSearchParams();
params.append("description", description);
params.append("userId", userId);
generateKey(params)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close(true);
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//修改
updateapi(val) {
updateKeyInfo(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close(true);
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
close(flag) {
this.formData = {
description: "",
userId: "",
key: "",
};
this.$emit("close", flag);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
</style>
<template>
<div class="entrySreach">
<el-form
class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
>
<el-row class="row-border">
<!-- 角色名称 -->
<el-col :span="5">
<Formitem label="用户ID" prop="userId">
<el-input
type="text"
class="inputShadow"
id="inputInner--userId"
resize="none"
v-model="sreachFormData.userId"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
class="entrySreachButton"
type="text"
icon="el-icon-search"
:loading="loadings.searchLoading"
@click="search(0)"
></el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<!-- 清空查询条件-->
<el-form-item class="textLeft textCenter">
<el-button
type="text"
size="small"
icon="el-icon-refresh"
@click="clear"
>
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="optionButton">
<el-button
class="entrySaveButton"
icon="el-icon-plus"
size="small"
@click="addcipherMachine"
>
新 增
</el-button>
</div>
<Table
class="fedexDetialTable fedexSreachTable"
ref="entryTable"
:data="tableData"
:headerData="headerData"
:maxHeight="tableMaxheight"
:border="true"
:pagination="true"
:order="true"
noLabel="序号"
:loading="loadings.searchLoading"
:page="page.pageIndex"
:totalCount="page.total"
@sizeChange="sizeChange"
@currentChange="currentChange"
:selection="false"
:selectFixed="false"
:rowSelectDataType="false"
>
<template v-slot:key="scope">
<template v-if="!scope.row.show">
{{ scope.row.key.replace(/(?<=.{4}).(?=.{4})/g, "*") }}
<span style="margin-left: 8px; cursor: pointer"" @click="scope.row.show = true">
<svg-icon
class="el-icon-user-solid"
icon-class="eye-open"
></svg-icon
></span>
</template>
<template v-else
>{{ scope.row.noKey }}
<span
style="margin-left: 8px; cursor: pointer"
@click="scope.row.show = false"
>
<svg-icon class="el-icon-user-solid" icon-class="eye"></svg-icon
></span>
</template>
</template>
<template slot="optionColumn">
<el-table-column align="left" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" @click="update(scope.row)"> 修改 </el-button>
<el-button type="text" @click="deleteRow(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</template>
</Table>
<DialogVue
:outerVisible="outerVisible"
:title="dialogTitle"
:type="editType"
:active="activeData"
@close="dialogClose"
/>
</div>
</template>
<script>
import { queryKeyList, deleteKey } from "@/api/api-key.js";
import DialogVue from "./dialog.vue";
export default {
name: "ApiKey",
components: {
DialogVue,
},
data() {
return {
sreachFormData: {
userId: "",
},
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
activeData: null,
tableData: [], // 用户ID KEY 说明 操作（新增、删除、修改） key 控制显示，点击眼睛可查看全部
headerData: [
{
name: "用户ID",
value: "userId",
width: "",
align: "left",
},
{
name: "KEY",
value: "key",
width: "",
align: "left",
slot: true,
},
{
name: "说明",
value: "description",
width: "",
align: "left",
},
],
loadings: {
searchLoading: false,
},
tableMaxheight: null,
outerVisible: false,
dialogTitle: "",
editType: "",
};
},
created() {
this.search(0);
},
mounted() {
this.tableMaxheight = window.innerHeight - 300;
},
methods: {
//查询
search(val) {
this.loadings.searchLoading = true;
if (val == 0) {
this.page.pageIndex = 1;
}
let obj = this.sreachFormData;
obj.pageIndex = this.page.pageIndex;
obj.pageSize = this.page.pageSize;
queryKeyList(obj)
.then((res) => {
if (res.code === "200") {
this.page.total = res.data.totalItems;
this.tableData = res.data.value.map((item, index) => {
item.index = index;
item.noKey = item.key;
item.show = false;
return item;
});
} else {
this.alertWarningMsg(res.message);
}
this.loadings.searchLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.searchLoading = false;
});
},
addcipherMachine() {
this.dialogTitle = "新增";
this.editType = "add";
this.outerVisible = true;
},
update(val) {
this.dialogTitle = "修改";
this.editType = "update";
this.outerVisible = true;
this.activeData = val;
},
deleteRow(row) {
this.$confirm("是否确认删除?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteKey(row.id).then((res) => {
if (+res.code === 200) {
this.alertSuccessMsg(res.message);
this.search(0);
} else {
this.alertWarningMsg(res.message);
}
});
})
.catch((e) => {
console.log(e);
});
},
dialogClose(flag = false) {
this.outerVisible = false;
this.activeData = null;
if (flag) {
this.search(0);
}
},
//分页
currentChange(val) {
this.page.pageIndex = val.page;
this.search(1);
},
sizeChange(val) {
this.page.pageSize = val;
this.search(1);
},
input() {
this.$forceUpdate();
},
dateChange(val) {
if (val == "" || val == null) {
this.$nextTick(() => {
this.sreachFormData.creationTime = [];
});
}
},
clear() {
this.sreachFormData = {
userId: "",
};
},
},
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
height: 100%;
background-color: $menuLightBg;
.entrySreachButton {
display: inline-block;
font-size: 20px;
color: $fedexButton !important;
}
.optionButton {
padding: 10px;
text-align: left;
.el-button {
color: $fedexButton;
border-color: $fedexButton !important;
svg {
display: inline-block;
margin-right: 5px;
fill: $fedexButton;
}
}
.entrySaveButton:hover,
.entrySaveButton:focus {
color: $menuLightBg !important;
background-color: $fedexButton !important;
}
}
}
.texttareaTip {
position: absolute;
top: 52%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
</style>