feat: 新增API 权限配置

@@ -5,7 +5,7 @@ VUE_APP_BASE_ENV = "dev"
 
 
 VUE_APP_Version = '1.0.0'
 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 在线申报工具/开发环境
 # FedEx 在线申报工具/开发环境
 # http://101.132.100.41:7001/EcomExp
 # http://101.132.100.41:7001/EcomExp
 VUE_APP_BASE_API = /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>