项目分类档案 NIFI档案 应用增加账号配置

src/components/base/BaseNewDialog/index.vue

@@ -9,7 +9,7 @@
 				<el-button type="primary" @click="handleReset" v-if="resetButton">重 置</el-button>
 				<el-button @click="handleClose">取 消</el-button>
 				<!-- <el-button v-if="orderCenter" @click="handleCancel">取消下单</el-button> -->
-				<el-button type="primary" @click="handleConfirmClick">确 定</el-button>
+				<el-button type="primary" v-if="submitButton" @click="handleConfirmClick">确 定</el-button>
 			</span>
 		</el-dialog>
 	</div>
@@ -87,6 +87,11 @@ export default {
 			type: String,
 			default: '30%',
 		},
+		// 重置按钮
+    submitButton: {
+      type: Boolean,
+      default: true,
+    },
 	},
 	data() {
 		return {

src/store/modules/permission.js

@@ -59,6 +59,14 @@ const permission = {
                     hidden: true
                   }
                 },
+                {
+                  path: 'accountAdmin',
+                  name: 'accountAdmin',
+                  component: () => import('@/views/applicationList/accountList/accountAdmin'),
+                  meta: {
+                    hidden: true
+                  }
+                },
                 {
                   path: 'inserterAdmin',
                   name: 'inserterAdmin',

src/utils/request.js

@@ -8,6 +8,7 @@ import {
 import store from '@/store'
 import {
   getToken,
+  setMenuNode,
   setToken,
   removeCompanyId,
   removeToken,
@@ -147,6 +148,10 @@ service.interceptors.response.use(
           type: 'error'
         })
           .then(() => {
+            store.commit("REMOVE_ROUTER");
+            store.dispatch("tagsView/delAllViews");
+            setMenuNode("/index");
+            store.commit("SET_CURRENT_MENU_NODE", "/index");
             store.dispatch('LogOut').then(() => {
               route.replace({
                 path: '/login'
@@ -298,7 +303,7 @@ export function download(url, params, filename, config) {
       responseType: 'blob',
       ...config
     })
-    .then(async(data) => {
+    .then(async (data) => {
       const isLogin = await blobValidate(data)
       if (isLogin) {
         const blob = new Blob([data])

src/utils/util.js

@@ -761,3 +761,18 @@ export function delTreeChildren(data){
 	delChilren(data)
 	return data
 }
+
+// 动态宽 boxWidth 最大的div盒子大小,minWidth最小宽度,marginSize间距
+export function dynamicWidth(boxWidth, minWidth, marginSize = 0) {
+	let num = Math.floor(boxWidth / (minWidth + marginSize))
+	return boxWidth / num - marginSize
+}
+
+// 动态高度
+export function dynamicHeight(boxWidth, minWidth, marginSize = 0, boxHeight, listHeight, heightMargin = 0) {
+	let num = Math.floor(boxWidth / (minWidth + marginSize))
+	// console.log(,'几行')
+
+	return Math.ceil(boxHeight / (listHeight + heightMargin)) * num
+	// return boxWidth / num - marginSize
+}

src/views/NIFIConstant/configData.js

@@ -0,0 +1,149 @@
+/**
+ * @desc NIFI常量
+ * @date 2023-07-10
+ */
+// 表头
+const tableColumnData = [
+  {
+    label: 'key',
+    prop: 'nifiKey'
+  },
+  {
+    label: 'value',
+    prop: 'nifiValue'
+  },
+  {
+    label: '显示值',
+    prop: 'showValue'
+  },
+  {
+    label: '描述',
+    prop: 'description'
+  },
+  {
+    label: '类型',
+    prop: 'type'
+  }
+]
+
+// 基本信息内容
+const formRow = [
+  {
+    elCol: [{
+      label: 'key',
+      prop: 'nifiKey',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: 'value',
+      prop: 'nifiValue',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '显示值',
+      prop: 'showValue',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '描述',
+      prop: 'description',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '类型',
+      prop: 'type',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+]
+
+const basicsRules = {
+  nifiKey: [{
+    required: true,
+    message: '请输入key',
+    trigger: 'blur'
+  }],
+  nifiValue: [{
+    required: true,
+    message: '请输入value',
+    trigger: 'blur'
+  }],
+  showValue: [{
+    required: true,
+    message: '请输入显示值',
+    trigger: 'blur'
+  }],
+  description: [{
+    required: true,
+    message: '请输入描述',
+    trigger: 'blur'
+  }],
+  type: [{
+    required: true,
+    message: '请输入类型',
+    trigger: 'blur'
+  }],
+}
+
+// 查看
+const formRowShow = [
+  {
+    elCol: [{
+      label: 'key',
+      prop: 'nifiKey',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: 'value',
+      prop: 'nifiValue',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '显示值',
+      prop: 'showValue',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '描述',
+      prop: 'description',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+  {
+    elCol: [{
+      label: '类型',
+      prop: 'type',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+]
+export default {
+  tableColumnData,
+  formRow,
+  basicsRules,
+  formRowShow,
+}

src/views/NIFIConstant/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <base-layout
+      ref="baseLayout"
+      :buttonList="buttonList"
+      @onFuncBtn="onFuncBtn"
+      :querySwitch="true"
+      :searchList="requirementList"
+      @search="handleSearchEvent"
+      :isPage="true"
+      @pageChange="handlePageChange"
+    >
+      <div slot="main" slot-scope="{ tableHeight }">
+        <base-table
+          ref="baseTable"
+          :showIndex="true"
+          :funWidth="180"
+          :funData="funData"
+          @onFunc="onFunc"
+          :tabLoading.sync="tabLoading"
+          :tableHeight="tableHeight"
+          :tableData="tableData"
+          :tableColumn="tableColumnData"
+          @onCellClick="onCellClick"
+        >
+          <template #state="{row}">
+            {{ row.state == 0 ? '启用' : '停用'}}
+          </template>
+        </base-table>
+      </div>
+    </base-layout>
+    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
+  </div>
+</template>
+
+<script>
+import baseLayout from "@/components/base/baseLayout";
+import baseTable from "@/components/base/baseTable";
+import rightDialog from "./rightDialog";
+import configData from "./configData";
+import { authApi } from "@/api/apis/auth";
+export default {
+  components: {
+    baseLayout,
+    baseTable,
+    rightDialog,
+  },
+  data() {
+    return {
+      buttonList: [
+        {
+          menuName: "新增",
+          icon: "el-icon-plus",
+          btnFunction: "add",
+        },
+        {
+          menuName: "刷新",
+          icon: "el-icon-refresh",
+          btnFunction: "resetLoad",
+        },
+      ], //按钮组
+      requirementList: [
+        {
+          placeholder: "key",
+          prop: "nifiKey",
+          tag: "elInput",
+        },
+        {
+          placeholder: "value",
+          prop: "nifiValue",
+          tag: "elInput",
+        },
+      ], //查询模板list
+      tabLoading: false,
+      tableColumnData: configData.tableColumnData, //表头数据
+      funData: [
+        {
+          color: "#6a9af1",
+          text: "编辑",
+        },
+        {
+          color: "#d67a74",
+          text: "删除",
+        },
+      ],
+      tableData: [], //表格数据
+      pageModel: {
+        pageNum: 1,
+        pageSize: 100,
+      },
+      queryModel: {
+        name: "",
+      },
+    };
+  },
+  mounted() {
+    this.GetProductionTableData();
+  },
+  methods: {
+    onCellClick(row){
+      this.openLoading("detail");
+      this.$refs.rightDialog.openDialog("show", row);
+    },
+    // 表格数据
+    async GetProductionTableData() {
+      this.tabLoading = true;
+      let param = {
+        ...this.pageModel,
+        ...this.queryModel,
+      };
+      let res = await authApi(
+        "sysFlowNifiConstantService",
+        "",
+        "queryPagedJson",
+        "",
+        param
+      );
+      this.tabLoading = false;
+      if (res.status == "200") {
+        this.tableData = res.attribute.list;
+        this.$refs.baseLayout.setPageTotal(res.attribute.total);
+      }
+    },
+    // 分页变化
+    handlePageChange(val) {
+      this.pageModel.pageNum = val.pageIndex;
+      this.pageModel.pageSize = val.pageSize;
+      this.GetProductionTableData();
+    },
+    // 按钮组
+    onFuncBtn(btn) {
+      this[btn.btnFunction]();
+    },
+    // 新增
+    add() {
+      this.$refs.rightDialog.openDialog("add");
+    },
+    // 表格操作事件 查看 重推 删除
+    onFunc(index, row,item) {
+      // 查看
+      if (item.text==='查看') {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("show", row);
+      }
+      // 重推
+      if (item.text==='编辑') {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("edit", row);
+      }
+      // 删除
+      if (item.text==='删除') {
+        this.$delConfirm().then(() => {
+          this.openLoading("del");
+          this.productionDeleteById(row.id);
+        });
+      }
+    },
+    async productionDeleteById(id) {
+      let param = {
+        id: id,
+      };
+      let res = await authApi(
+        "sysFlowNifiConstantService",
+        "",
+        "deleteNifiConstant",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功", "success");
+        this.resetTable();
+      }
+    },
+    // 重置表格
+    resetTable() {
+      this.pageModel.pageNum = 1;
+      this.$refs.baseLayout.pageClear();
+      this.GetProductionTableData();
+    },
+    // 搜索
+    handleSearchEvent() {
+      let data = this.$refs.baseLayout.ruleForm;
+      this.queryModel = data;
+      this.resetTable();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clickTitle {
+  color: #409eff;
+  cursor: pointer;
+}
+</style>

src/views/NIFIConstant/rightDialog.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <base-right-dialog
+      size="1000px"
+      ref="baseRightDialog"
+      :footerShow="true"
+      :dialogVisible.sync="dialogVisible"
+      :title="dialogTitle + ' 项目分类管理'"
+      @handleClose="handleDialogClose"
+      :type="dialogType"
+      :submitShow="submitShow"
+      @handleConfirmClick="handleConfirmClick"
+    >
+      <base-form
+        ref="basicsForm"
+        :formRow="formRow"
+        :isFunBtn="false"
+        :rules="basicsRules"
+        class="dialog_form"
+        :spanWidth="`120px`"
+        :loading="vLoading"
+      >
+      </base-form>
+
+    </base-right-dialog>
+  </div>
+</template>
+
+<script>
+import baseRightDialog from '@/components/base/baseRightDialog'
+import baseForm from '@/components/base/baseNewForm'
+import baseTable from '@/components/base/baseTable'
+import configData from './configData'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  components: {
+    baseRightDialog,
+    baseForm,
+    baseTable,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogType: '',
+      formRow: configData.formRow,
+      basicsRules: configData.basicsRules,
+      vLoading: false,
+      newMarryOptions: [],
+      submitShow: true,
+      loadingType: true,
+      tableVersionData: [],
+      funData: [],
+      isEdit: false,
+      select_dist: {},
+      plugNameOptions: [],
+      tableColumn: configData.operationTableColumn,//操作记录
+      tableData: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    openDialog(type, row) {
+
+      this.formRow = configData.formRow
+      this.submitShow = true
+
+      this.isEdit = false
+      this.funData = []
+
+      // 编辑
+      if (type == 'edit') {
+        this.isEdit = true
+        this.dialogTitle = '编辑'
+        this.dialogType = 'edit'
+        this.productGetById(row.id)
+      }
+      // 查看
+      if (type == 'show') {
+        this.funData = Object.assign([], [])
+        this.submitShow = false
+        this.formRow = configData.formRowShow
+        this.dialogTitle = '查看'
+        this.dialogType = 'show'
+        this.productGetById(row.id)
+
+      }
+      this.dialogVisible = true
+      // 新增
+      if (type == 'add') {
+        this.dialogTitle = '新增'
+        this.dialogType = 'add'
+        this.$nextTick(() => {
+          this.$set(this.$refs.basicsForm.ruleForm, 'state', '0')
+        })
+      }
+
+    },
+    // 编辑详情
+    async productGetById(id) {
+      let params = {
+        id: id
+      }
+      let res = await authApi(
+        'sysFlowNifiConstantService',
+        '',
+        'getNifiConstant',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.$nextTick(() => {
+          this.$refs.basicsForm.incomingParameters(res.attribute)
+        })
+      }
+    },
+    addVersionDialog() {
+      let obj = {
+        argName: '',
+        argCode: '',
+        argType: '1',
+        remark: ''
+      }
+      this.tableVersionData.push(obj)
+    },
+    // 删除
+    onFunc(index, row) {
+      if (index == 0) {
+        this.$delConfirm().then(() => {
+          this.tableVersionData.forEach((item, itemIndex) => {
+            if (item.id === row.id) {
+              this.tableVersionData.splice(itemIndex, 1)
+            }
+          })
+        })
+      }
+    },
+    // 弹窗关闭
+    handleDialogClose() {
+      this.tableVersionData = Object.assign([], [])
+      this.$refs.basicsForm.resetFields()
+      this.dialogVisible = false
+    },
+    // 弹窗确认按钮
+    handleConfirmClick() {
+      this.$refs.basicsForm.$refs['ruleForm'].validate((valid) => {
+        if (!valid) {
+          return
+        } else {
+          let params = {
+            ...this.$refs.basicsForm.ruleForm
+          }
+          if (this.dialogType == 'add') {
+            this.openLoading('submit')
+            this.productSaveDto(params)
+          }
+          if (this.dialogType == 'edit') {
+            this.openLoading('submit')
+            this.productUpdateDto(params)
+          }
+        }
+      })
+    },
+    // 新增保存
+    async productSaveDto(params) {
+      let res = await authApi(
+        'sysFlowNifiConstantService',
+        '',
+        'saveNifiConstant',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('新增成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+    // 编辑保存
+    async productUpdateDto(params) {
+      let res = await authApi(
+        'sysFlowNifiConstantService',
+        '',
+        'updateNifiConstant',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('更新成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.small_title {
+  margin: 10px 0;
+  font-size: 16px;
+}
+
+.dialogList {
+  padding: 16px 0;
+  border-top: 1px solid #dcdfe6;
+  display: flex;
+  flex-direction: column;
+}
+
+.updateBtn {
+  border: 1px solid #ebedf1;
+  padding: 5px 0;
+  border-radius: 3px;
+  text-align: center;
+  font-size: 14px;
+  cursor: pointer;
+  width: 100px;
+}
+
+.updateBtn:hover {
+  color: #1890ff;
+  border-color: #badeff;
+  background-color: #e8f4ff;
+}
+
+::v-deep .el-table__body-wrapper.is-scrolling-none {
+  height: auto !important;
+}
+
+::v-deep .app-container {
+  height: auto !important;
+}
+</style>

src/views/applicationList/accountList/accountAdmin.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="apiWrap">
+    <div class="tablebox">
+      <div class="tablebox">
+        <div class="tablebtn">
+          <div class="search">
+            <el-input
+              placeholder="账号名称"
+              v-model="searchForm.name"
+              @keyup.enter.native="queryAccountList(searchForm)"
+            >
+              <i
+                slot="suffix"
+                class="el-input__icon el-icon-search"
+                @click="queryAccountList(searchForm)"
+              ></i>
+            </el-input>
+          </div>
+          <div class="btn">
+            <el-button
+              icon="el-icon-back"
+              @click="
+                $router.replace({
+                  path: '/applicationList/applicationListAdmin',
+                })
+              "
+              >返回
+            </el-button>
+            <el-button type="primary" @click="goAddHandle" icon="el-icon-plus">
+              添加账号
+            </el-button>
+          </div>
+        </div>
+
+        <!-- 应用账号表格 -->
+        <div class="main">
+          <div class="left">
+            <baseTable
+              ref="mainTable"
+              :tableData="mainTableData"
+              :tableColumn="mainTableColumn"
+              :funData="mainFunData"
+              :funWidth="funWidth"
+              :showIndex="true"
+              :tabLoading="mainTabLoading"
+              @onFunc="tableButtonHandle"
+              @view="viewHandle"
+              :border="false"
+              :tableHeight="'77.5vh'"
+            ></baseTable>
+          </div>
+        </div>
+      </div>
+    </div>
+    <addAccount
+      ref="addAccount"
+      @handleConfirmClick="searchBtnHandle"
+    ></addAccount>
+  </div>
+</template>
+
+<script>
+import baseTable from "@/views/applicationList/apiList/compoments/baseTable.vue";
+import { authApi } from "@/api/apis/auth";
+import addAccount from "./addAccount.vue";
+export default {
+  components: {
+    baseTable,
+    addAccount,
+  },
+  data() {
+    return {
+      // 表格数据
+      mainTableData: [],
+      mainTabLoading: false,
+      // 搜索框输入数据
+      searchForm: {
+        name: "",
+      },
+      // 表格框架
+      mainTableColumn: [
+        {
+          id: "name",
+          title: "账号名称",
+        },
+        {
+          id: "userName",
+          title: "登录账号",
+        },
+        {
+          id: "password",
+          title: "登录密码",
+          width: 180,
+        },
+        {
+          id: "dbType",
+          title: "数据库类型",
+        },
+        {
+          id: "dbName",
+          title: "数据库名称",
+        },
+        {
+          id: "ipAddress",
+          title: "ip地址",
+        },
+        {
+          id: "port",
+          title: "端口",
+        },
+      ],
+      // 表格操作按钮
+      mainFunData: [
+        {
+          type: "edit",
+          text: "编辑",
+          color: "#5a9cf8",
+        },
+        {
+          type: "dele",
+          text: "删除",
+          color: "#e47470",
+        },
+      ],
+    };
+  },
+  computed: {
+    // 操作框的宽度
+    funWidth() {
+      return this.mainFunData.length * 90;
+    },
+  },
+  mounted() {
+    this.queryAccountList();
+  },
+  methods: {
+    // 点击新增
+    goAddHandle() {
+      this.$refs.addAccount.openDialog(this.$route.query.id, "", "add");
+    },
+    // 点击查看
+    viewHandle(row) {
+      this.$refs.addAccount.openDialog(this.$route.query.id, row.id, "show");
+    },
+    // 搜索框按钮
+    searchBtnHandle() {
+      this.$nextTick(() => {
+        this.queryAccountList(this.searchForm);
+      });
+    },
+    // 主表的操作按钮方法
+    tableButtonHandle(val, item) {
+      if (item.type === "dele") {
+        this.$confirm("确认删除？")
+          .then(() => {
+            this.deleteAccount(val.id);
+          })
+          .catch(() => {});
+      } else if (item.type === "edit") {
+        this.$refs.addAccount.openDialog(this.$route.query.id, val.id, "edit");
+      }
+    },
+    // 删除行
+    async deleteAccount(id) {
+      let params = {
+        id,
+      };
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "deleteAccount",
+        "",
+        params
+      );
+      if (res.status == 200) {
+        this.$nextTick(() => {
+          this.queryAccountList(this.searchForm);
+        });
+      }
+    },
+    // 获取app模块
+    async queryAccountList(obj = {}) {
+      this.mainTabLoading = true;
+      let params = {
+        appId: this.$route.query.id,
+        ...obj,
+      };
+      const res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "queryAccountList",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.mainTableData = res.attribute;
+        this.$nextTick(() => {
+          this.$refs.mainTable.setTableKey();
+        });
+      }
+      this.mainTabLoading = false;
+    },
+  },
+};
+</script>
+
+
+<style scoped lang='scss'>
+::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.apiWrap {
+  background-color: #fbfbfb;
+  overflow: scroll;
+  width: 100%;
+
+  .searchBox {
+    margin: 10px;
+    padding: 15px;
+    background-color: #fff;
+    border-radius: 20px;
+
+    .searchbtn {
+      margin-left: 80%;
+    }
+  }
+
+  .tablebox {
+    .tablebtn {
+      padding: 10px 15px;
+      border-radius: 16px;
+      margin-bottom: 5px;
+      background: #fff;
+      display: flex;
+      justify-content: space-between;
+
+      > .search {
+        margin-left: 10px;
+      }
+    }
+
+    .main {
+      display: flex;
+      .left {
+        background-color: #fff;
+        border-radius: 16px;
+        width: 100%;
+        padding: 15px;
+      }
+    }
+  }
+}
+
+.shareDialog {
+  display: flex;
+  justify-content: space-around;
+
+  .left,
+  .right {
+    flex: 0.48;
+    position: relative;
+
+    > .title {
+      text-align: center;
+      font-size: 18px;
+      padding: 10px;
+      background-color: #f7f7f7;
+      border-radius: 16px;
+      margin-bottom: 10px;
+    }
+
+    > .list {
+      height: 50vh;
+      padding: 15px;
+      height: 40vh;
+      overflow: auto;
+
+      .item {
+        cursor: pointer;
+        padding: 15px;
+        border-radius: 16px;
+        font-size: 14px;
+
+        &:hover {
+          background-color: #fafafa;
+        }
+      }
+
+      .actived {
+        background-color: #fafafa !important;
+      }
+    }
+  }
+}
+
+.addressChunk {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  .label {
+    flex: 0.1;
+  }
+
+  .input {
+    flex: 0.9;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+.code-json-editor {
+  /* jsoneditor右上角默认有一个链接,加css去掉 */
+
+  /deep/ .jsoneditor-poweredBy {
+    display: none !important;
+  }
+
+  /deep/ .jsoneditor-menu {
+    background-color: #fff !important;
+    color: #000 !important;
+
+    button {
+      background-color: #4c81f2 !important;
+    }
+  }
+
+  /deep/ .ace_gutter {
+    background-color: #fff;
+    border-right: 1px solid gainsboro;
+  }
+
+  /deep/ .ace-jsoneditor {
+    height: 200px !important;
+  }
+}
+</style>

src/views/applicationList/accountList/addAccount.vue

@@ -0,0 +1,286 @@
+<template>
+  <base-right-dialog
+    @handleClose="examineHandleClose"
+    @handleConfirmClick="handleConfirmClick"
+    :dialogVisible="dialogVisible"
+    size="500px"
+    :appendBody="true"
+    :loading="true"
+    :footerShow="true"
+    :submitShow="true"
+    :submitTitle="'保存'"
+    :title="title + '应用账号'"
+  >
+    <div class="rightDialogClass_main" style="background: #fff; padding: 10px">
+      <base-form
+        style="padding-top: 0 !important"
+        spanWidth="130px"
+        ref="customForm"
+        :formRow="accountFormRow"
+        :isFunBtn="false"
+        :rules="accountRules"
+        alignAt="block"
+        :span="24"
+      >
+      </base-form>
+    </div>
+  </base-right-dialog>
+</template>
+
+<script>
+import baseRightDialog from "@/components/base/baseRightDialog/index.vue";
+import { authApi } from "@/api/apis/auth";
+import baseForm from "@/components/base/baseNewForm";
+export default {
+  components: {
+    baseForm,
+    baseRightDialog,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      accountFormRow: [
+        {
+          elCol: [
+            {
+              label: "账号名称",
+              prop: "name",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "登录账号",
+              prop: "userName",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "登录密码",
+              prop: "password",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "数据库类型",
+              prop: "dbType",
+              tag: "elSelect",
+              options: [],
+              optionValue:"columnContent",
+              optionLabel:"columnValue",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "数据库名称",
+              prop: "dbName",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "ip地址",
+              prop: "ipAddress",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+        {
+          elCol: [
+            {
+              label: "端口",
+              prop: "port",
+              tag: "elInput",
+              span: 24,
+            },
+          ],
+        },
+      ],
+      accountRules: {
+        name: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        userName: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        dbType: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change, blur",
+          },
+        ],
+        dbName: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        ipAddress: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+        port: [
+          {
+            required: true,
+            message: "请输入",
+            trigger: "change, blur",
+          },
+        ],
+      },
+      title: "",
+      appID: "",
+    };
+  },
+  methods: {
+    openDialog(appID, accountId, type) {
+      this.queryDictionaryList()
+      this.appID = appID;
+      this.dialogVisible = true;
+      this.dialogType = type;
+      this.$nextTick(() => {
+        this.$refs.customForm?.resetFields("ruleForm");
+        if (type == "add") {
+          this.title = "新增";
+        }
+        if (type == "edit") {
+          this.title = "编辑";
+          this.GetSceneDetail(accountId);
+        }
+        if (type == "show") {
+          this.title = "查看";
+          this.GetSceneDetail(accountId);
+        }
+      });
+    },
+    async queryDictionaryList() {
+      let params = {
+        tabName: "sys_flow_step_account",
+        columnName: "db_type",
+      };
+      let res = await authApi(
+        "sysdictionaryshopnewService",
+        "",
+        "queryDictionaryList",
+        "",
+        params
+      );
+      if (res.status == 200) {
+        this.accountFormRow[3].elCol[0].options = res.attribute;
+      }
+    },
+    async GetSceneDetail(accountId) {
+      let params = {
+        id: accountId,
+      };
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "getAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$refs.customForm.choiceAssignment(res.attribute);
+      }
+    },
+    handleConfirmClick() {
+      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          let params = {
+            ...this.$refs.customForm.ruleForm,
+            appId: this.appID,
+          };
+          if (this.dialogType == "add") {
+            this.SaveAccountData(params);
+          } else if (this.dialogType == "edit") {
+            this.editAccountData(params);
+          }
+        } else {
+          this.$message({ message: "请选择必填项", type: "warning" });
+          return;
+        }
+      });
+    },
+
+    async SaveAccountData(params) {
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "saveAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("新增账号成功", "success");
+        this.dialogVisible = false;
+        this.$emit("handleConfirmClick");
+      }
+    },
+    async editAccountData(params) {
+      let res = await authApi(
+        "sysApplicationAccountService",
+        "",
+        "updateAccount",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("修改账号成功", "success");
+        this.dialogVisible = false;
+        this.$emit("handleConfirmClick");
+      }
+    },
+    examineHandleClose() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-form-item__content {
+  width: 100% !important;
+}
+
+::v-deep .label {
+  text-align: left !important;
+}
+</style>

src/views/applicationList/accountList/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="wrap">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang='scss'>
+</style>

src/views/applicationList/configData.js

@@ -116,6 +116,10 @@ const addForm = [
             id: "8",
             label: "用友NCC",
           },
+          {
+            id: "9",
+            label: "数据库",
+          },
         ],
         fontSize: 16,
       },
@@ -211,6 +215,11 @@ const settingMenu = [
     icon: "appMenu03",
     path: "appApiAdmin"
   },
+  {
+    title: "应用账号授权",
+    icon: "appMenu03",
+    path: "accountAdmin"
+  },
   {
     title: "安全与监控",
     icon: "appMenu04"

src/views/projectClassification/authorizationDialog.vue

@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <base-dialog
+      :closeEscape="true"
+      :showClose="true"
+      :closeModal="false"
+      @handleClose="handleDialogClose"
+      @handleConfirmClick="handleConfirmClick"
+      :dialogVisible="dialogVisible"
+      :title="'权限分配'"
+      width="95%"
+      top="8vh"
+      :footerShow="true"
+    >
+      <div style="height: 50vh; display: flex;    overflow: auto;">
+        <div style="width: calc(50% - 5px);">
+          <div class="small_title">
+            已分配权限用户 {{ authorizedMembers.length }}
+          </div>
+          <base-table
+            ref="authorizedMemberstable"
+            :border="true"
+            :showIndex="true"
+            :tableHeight="'45vh'"
+            :tableData="authorizedMembers"
+            :tableColumn="tableAssColumn"
+            :slotrow="false"
+            :funData="funData"
+            @onFunc="onFunc"
+          ></base-table>
+        </div>
+        <div style="width: calc(50% - 5px); margin-left: 10px">
+          <div
+            class="small_title"
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <span>未分配权限用户</span>
+            <span>已选择 {{ SelectionData.length }} 人 </span>
+          </div>
+          <base-table
+            ref="customtable"
+            :border="true"
+            :showIndex="true"
+            :tableHeight="'45vh'"
+            :tableData="tableData"
+            :tableColumn="tableColumn"
+            :slotrow="false"
+            :showSelect="true"
+            @onSelectionChange="onSelectionChange"
+          ></base-table>
+        </div>
+      </div>
+    </base-dialog>
+  </div>
+</template>
+
+<script>
+import baseDialog from "@/components/base/BaseNewDialog/index.vue";
+import baseTable from "@/components/base/baseTable";
+import { authApi } from "@/api/apis/auth";
+
+export default {
+  components: {
+    baseDialog,
+    baseTable,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      tableColumn: [
+        {
+          label: "用户名称",
+          prop: "personName",
+        },
+        {
+          label: "用户编码",
+          prop: "personCode",
+        },
+      ],
+      tableAssColumn: [
+        {
+          label: "用户名称",
+          prop: "userName",
+        },
+        {
+          label: "用户编码",
+          prop: "userCode",
+        },
+      ],
+      funData: [
+        {
+          color: "#ff0000",
+          text: "删除",
+        },
+      ],
+      tableData: [],
+      activeTab: "first",
+      proClassID: "", //项目分类的id
+      authorizedMembers: [], //权限成员
+      SelectionData: [], //已选择
+    };
+  },
+  mounted() {},
+  methods: {
+    openDialog(row) {
+      this.proClassID = row.id;
+      this.activeTab = "first";
+      this.dialogVisible = true;
+      this.queryRuleList();
+      this.queryUserList();
+    },
+    // 查询未分配权限的用户
+    async queryUserList() {
+      let params = {
+        flowClassId:this.proClassID,
+      };
+      this.openLoading("detail");
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "queryUserList",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.tableData = res.attribute;
+      }
+    },
+    // 流程分类权限列表查询
+    async queryRuleList() {
+      let params = {
+        flowClassId: this.proClassID,
+      };
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "queryRuleList",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.authorizedMembers = res.attribute.ruleList;
+      }
+    },
+    // 表格操作事件 复制 删除
+    onFunc(index, row, item) {
+      // 删除
+      if (item.text == "删除") {
+        this.$confirm("确认删除该内容吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.openLoading("del");
+            this.userDelete(row);
+          })
+          .catch(() => {
+            this.$vmNews("取消操作", "info");
+          });
+      }
+    },
+    async userDelete(row) {
+      let params = {
+        flowClassId:this.proClassID,
+        userId: row.userId,
+      };
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "deleteFlowClassRule",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功！", "success");
+        this.queryRuleList();
+        this.queryUserList();
+        this.SelectionData = [];
+        this.$refs.customtable.clearSelect();
+      }
+    },
+    // 确定分配权限
+    async handleConfirmClick() {
+      if (this.SelectionData.length <= 0) {
+        this.$vmNews("请选择需要分配权限的用户！");
+        return;
+      }
+      let userList = [];
+
+      this.SelectionData.forEach((item) => {
+        let obj = {
+          userId: item.personId, //用户id
+          userName: item.personName, //用户名
+          userCode: item.personCode, //用户编码
+        };
+        userList.push(obj);
+      });
+      let params = {
+        flowClassId: this.proClassID,
+        ruleList: userList,
+      };
+      let res = await authApi(
+        "sysFlowClassRuleService",
+        "",
+        "saveFlowClassRule",
+        "",
+        params
+      );
+      if (res.status == "200") {
+        this.$vmNews("分配权限成功", "success");
+        this.handleDialogClose();
+        this.$emit('resetTable')
+      }
+    },
+    // 多选事件
+    onSelectionChange(value) {
+      this.SelectionData = value;
+    },
+    // 弹窗关闭
+    handleDialogClose() {
+      this.$refs.customtable.clearSelect();
+      this.tableData = [];
+      this.authorizedMembers = [];
+      this.SelectionData = [];
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.small_title {
+  font-size: 14px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.authBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #dcdfe6;
+  border-radius: 6px;
+  padding: 10px;
+
+  .content {
+    display: flex;
+    align-items: center;
+  }
+
+  .arrow {
+    display: flex;
+    align-items: center;
+    i {
+      margin: 0 5px;
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/views/projectClassification/configData.js

@@ -0,0 +1,49 @@
+/**
+ * @desc 项目分类
+ * @date 2023-07-10
+ */
+// 表头
+const tableColumnData = [
+  {
+    label: '项目分类名称',
+    prop: 'name'
+  }
+]
+
+// 基本信息内容
+const formRow = [
+  {
+    elCol: [{
+      label: '项目分类名称',
+      prop: 'name',
+      tag: 'elInput',
+      span: 24
+    }]
+  },
+]
+
+const basicsRules = {
+  name: [{
+    required: true,
+    message: '请输入项目分类名称',
+    trigger: 'blur'
+  }],
+}
+
+// 查看
+const formRowShow = [
+  {
+    elCol: [{
+      label: '项目分类名称',
+      prop: 'name',
+      tag: 'elLook',
+      span: 24
+    }]
+  },
+]
+export default {
+  tableColumnData,
+  formRow,
+  basicsRules,
+  formRowShow,
+}

src/views/projectClassification/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <base-layout
+      ref="baseLayout"
+      :buttonList="buttonList"
+      @onFuncBtn="onFuncBtn"
+      :querySwitch="true"
+      :searchList="requirementList"
+      @search="handleSearchEvent"
+      :isPage="true"
+      @pageChange="handlePageChange"
+    >
+      <div slot="main" slot-scope="{ tableHeight }">
+        <base-table
+          ref="baseTable"
+          :showIndex="true"
+          :funWidth="220"
+          :funData="funData"
+          @onFunc="onFunc"
+          :tabLoading.sync="tabLoading"
+          :tableHeight="tableHeight"
+          :tableData="tableData"
+          :tableColumn="tableColumnData"
+          @onCellClick="onCellClick"
+        >
+        </base-table>
+      </div>
+    </base-layout>
+    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
+    <authorizationDialog ref="authorizationDialog" @resetTable="resetTable"></authorizationDialog>
+  </div>
+</template>
+
+<script>
+import baseLayout from "@/components/base/baseLayout";
+import baseTable from "@/components/base/baseTable";
+import rightDialog from "./rightDialog";
+import authorizationDialog from "./authorizationDialog";
+import configData from "./configData";
+import { authApi } from "@/api/apis/auth";
+export default {
+  components: {
+    baseLayout,
+    baseTable,
+    rightDialog,
+    authorizationDialog,
+  },
+  data() {
+    return {
+      buttonList: [
+        {
+          menuName: "新增",
+          icon: "el-icon-plus",
+          btnFunction: "add",
+        },
+        {
+          menuName: "刷新",
+          icon: "el-icon-refresh",
+          btnFunction: "resetLoad",
+        },
+      ], //按钮组
+      requirementList: [
+        {
+          placeholder: "项目分类名称",
+          prop: "name",
+          tag: "elInput",
+        },
+      ], //查询模板list
+      tabLoading: false,
+      tableColumnData: configData.tableColumnData, //表头数据
+      funData: [
+        {
+          color: "#6a9af1",
+          text: "编辑",
+        },
+        {
+          color: "#d67a74",
+          text: "删除",
+        },
+        {
+          color: "#6a9af1",
+          text: "权限管理",
+        },
+      ],
+      tableData: [], //表格数据
+      pageModel: {
+        pageNum: 1,
+        pageSize: 100,
+      },
+      queryModel: {
+        name: "",
+      },
+    };
+  },
+  mounted() {
+    this.GetProductionTableData();
+  },
+  methods: {
+    onCellClick(row) {
+      this.openLoading("detail");
+      this.$refs.rightDialog.openDialog("show", row);
+    },
+    // 表格数据
+    async GetProductionTableData() {
+      this.tabLoading = true;
+      let param = {
+        ...this.pageModel,
+        ...this.queryModel,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "queryPagedJson",
+        "",
+        param
+      );
+      this.tabLoading = false;
+      if (res.status == "200") {
+        this.tableData = res.attribute.list;
+        this.$refs.baseLayout.setPageTotal(res.attribute.total);
+      }
+    },
+    // 分页变化
+    handlePageChange(val) {
+      this.pageModel.pageNum = val.pageIndex;
+      this.pageModel.pageSize = val.pageSize;
+      this.GetProductionTableData();
+    },
+    // 按钮组
+    onFuncBtn(btn) {
+      this[btn.btnFunction]();
+    },
+    // 新增
+    add() {
+      this.$refs.rightDialog.openDialog("add");
+    },
+    // 表格操作事件 查看 重推 删除
+    onFunc(index, row, item) {
+      // 查看
+      if (item.text === "查看") {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("show", row);
+      }
+      // 重推
+      if (item.text === "编辑") {
+        this.openLoading("detail");
+        this.$refs.rightDialog.openDialog("edit", row);
+      }
+      // 权限管理
+      if (item.text === "权限管理") {
+        // this.openLoading("detail");
+        this.$refs.authorizationDialog.openDialog(row);
+      }
+      // 删除
+      if (item.text === "删除") {
+        this.$delConfirm().then(() => {
+          this.openLoading("del");
+          this.productionDeleteById(row.id);
+        });
+      }
+    },
+    async productionDeleteById(id) {
+      let param = {
+        id: id,
+      };
+      let res = await authApi(
+        "sysFlowClassService",
+        "",
+        "deleteFlowClass",
+        "",
+        param
+      );
+      if (res.status == "200") {
+        this.$vmNews("删除成功", "success");
+        this.resetTable();
+      }
+    },
+    // 重置表格
+    resetTable() {
+      this.pageModel.pageNum = 1;
+      this.$refs.baseLayout.pageClear();
+      this.GetProductionTableData();
+    },
+    // 搜索
+    handleSearchEvent() {
+      let data = this.$refs.baseLayout.ruleForm;
+      this.queryModel = data;
+      this.resetTable();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clickTitle {
+  color: #409eff;
+  cursor: pointer;
+}
+</style>

src/views/projectClassification/rightDialog.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <base-right-dialog
+      size="450px"
+      ref="baseRightDialog"
+      :footerShow="true"
+      :dialogVisible.sync="dialogVisible"
+      :title="dialogTitle + ' 项目分类管理'"
+      @handleClose="handleDialogClose"
+      :type="dialogType"
+      :submitShow="submitShow"
+      @handleConfirmClick="handleConfirmClick"
+    >
+      <base-form
+        ref="basicsForm"
+        :formRow="formRow"
+        :isFunBtn="false"
+        :rules="basicsRules"
+        class="dialog_form"
+        :spanWidth="`120px`"
+        :loading="vLoading"
+      >
+      </base-form>
+
+    </base-right-dialog>
+  </div>
+</template>
+
+<script>
+import baseRightDialog from '@/components/base/baseRightDialog'
+import baseForm from '@/components/base/baseNewForm'
+import baseTable from '@/components/base/baseTable'
+import configData from '@/views/projectClassification/configData'
+import { authApi } from '@/api/apis/auth'
+
+export default {
+  components: {
+    baseRightDialog,
+    baseForm,
+    baseTable,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogType: '',
+      formRow: configData.formRow,
+      basicsRules: configData.basicsRules,
+      vLoading: false,
+      newMarryOptions: [],
+      submitShow: true,
+      loadingType: true,
+      tableVersionData: [],
+      funData: [],
+      isEdit: false,
+      select_dist: {},
+      plugNameOptions: [],
+      tableColumn: configData.operationTableColumn,//操作记录
+      tableData: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    openDialog(type, row) {
+
+      this.formRow = configData.formRow
+      this.submitShow = true
+
+      this.isEdit = false
+      this.funData = []
+
+      // 编辑
+      if (type == 'edit') {
+        this.isEdit = true
+        this.dialogTitle = '编辑'
+        this.dialogType = 'edit'
+        this.productGetById(row.id)
+      }
+      // 查看
+      if (type == 'show') {
+        this.funData = Object.assign([], [])
+        this.submitShow = false
+        this.formRow = configData.formRowShow
+        this.dialogTitle = '查看'
+        this.dialogType = 'show'
+        this.productGetById(row.id)
+
+      }
+      this.dialogVisible = true
+      // 新增
+      if (type == 'add') {
+        this.dialogTitle = '新增'
+        this.dialogType = 'add'
+        this.$nextTick(() => {
+          this.$set(this.$refs.basicsForm.ruleForm, 'state', '0')
+        })
+      }
+
+    },
+    // 编辑详情
+    async productGetById(id) {
+      let params = {
+        id: id
+      }
+      let res = await authApi(
+        'sysFlowClassService',
+        '',
+        'getFlowClass',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.$nextTick(() => {
+          this.$refs.basicsForm.incomingParameters(res.attribute)
+        })
+      }
+    },
+    addVersionDialog() {
+      let obj = {
+        argName: '',
+        argCode: '',
+        argType: '1',
+        remark: ''
+      }
+      this.tableVersionData.push(obj)
+    },
+    // 删除
+    onFunc(index, row) {
+      if (index == 0) {
+        this.$delConfirm().then(() => {
+          this.tableVersionData.forEach((item, itemIndex) => {
+            if (item.id === row.id) {
+              this.tableVersionData.splice(itemIndex, 1)
+            }
+          })
+        })
+      }
+    },
+    // 弹窗关闭
+    handleDialogClose() {
+      this.tableVersionData = Object.assign([], [])
+      this.$refs.basicsForm.resetFields()
+      this.dialogVisible = false
+    },
+    // 弹窗确认按钮
+    handleConfirmClick() {
+      this.$refs.basicsForm.$refs['ruleForm'].validate((valid) => {
+        if (!valid) {
+          return
+        } else {
+          let params = {
+            ...this.$refs.basicsForm.ruleForm
+          }
+          if (this.dialogType == 'add') {
+            this.openLoading('submit')
+            this.productSaveDto(params)
+          }
+          if (this.dialogType == 'edit') {
+            this.openLoading('submit')
+            this.productUpdateDto(params)
+          }
+        }
+      })
+    },
+    // 新增保存
+    async productSaveDto(params) {
+      let res = await authApi(
+        'sysFlowClassService',
+        '',
+        'saveFlowClass',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('新增成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+    // 编辑保存
+    async productUpdateDto(params) {
+      let res = await authApi(
+        'sysFlowClassService',
+        '',
+        'updateFlowClass',
+        '',
+        params
+      )
+      if (res.status == '200') {
+        this.handleDialogClose()
+        this.$vmNews('更新成功', 'success')
+        this.$emit('resetTable')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.small_title {
+  margin: 10px 0;
+  font-size: 16px;
+}
+
+.dialogList {
+  padding: 16px 0;
+  border-top: 1px solid #dcdfe6;
+  display: flex;
+  flex-direction: column;
+}
+
+.updateBtn {
+  border: 1px solid #ebedf1;
+  padding: 5px 0;
+  border-radius: 3px;
+  text-align: center;
+  font-size: 14px;
+  cursor: pointer;
+  width: 100px;
+}
+
+.updateBtn:hover {
+  color: #1890ff;
+  border-color: #badeff;
+  background-color: #e8f4ff;
+}
+
+::v-deep .el-table__body-wrapper.is-scrolling-none {
+  height: auto !important;
+}
+
+::v-deep .app-container {
+  height: auto !important;
+}
+</style>