middleground_code_v2/src/views/LinkUp/compoment/addAccount.vue

<template>
  <base-right-dialog
    @handleClose="examineHandleClose"
    @handleConfirmClick="handleConfirmClick"
    :dialogVisible="dialogVisible"
    size="500px"
    :appendBody="true"
    :loading="true"
    :footerShow="true"
    :submitShow="true"
    :submitTitle="'保存'"
    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 { authApi } from "@/api/apis/auth";
import baseRightDialog from "@/components/base/baseRightDialog/index.vue";
import baseForm from "@/components/base/baseNewForm";
export default {
  components: {
    baseRightDialog,
    baseForm,
  },
  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",
          },
        ],
      },
      appID: "",
      accountType: "",
    };
  },
  methods: {
    openDialog(appID) {
      this.queryDictionaryList();
      this.appID = appID;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.customForm?.resetFields("ruleForm");
      });
    },
    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;
      }
    },
    handleConfirmClick() {
      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.$refs.customForm.ruleForm,
            appId: this.appID,
          };
          this.SaveAccountData(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");
      }
    },
    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>