middleground_code_v2/src/views/applicationList/accountList/accountAdmin.vue

<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>