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="submitShow"
    :submitTitle="'保存'"
    title="新增账号"
  >
    <template #addButton>
      <el-button type="primary" @click="VerifyAccount">验证账号</el-button>
    </template>
    <div class="rightDialogClass_main" style="background: #fff; padding: 10px">
      <base-form
        style="padding-top: 0 !important"
        spanWidth="80px"
        ref="customForm"
        :formRow="accountFormRow"
        :isFunBtn="false"
        :rules="accountRules"
        alignAt="block"
        :span="24"
      >
      </base-form>
      <div class="custom-error-box" v-if="!submitShow && message">
        <el-alert
          title="验证失败"
          type="error"
          show-icon
          :closable="false"
          :description="message"
        >
        </el-alert>
      </div>
      <div class="custom-error-box" v-if="submitShow && message">
        <el-alert
          title="验证成功"
          type="success"
          show-icon
          :closable="false"
          :description="message"
        >
        </el-alert>
      </div>
    </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: "",
      sceneID: "",
      stepID: "",
      accountType: "",
      submitShow: false, //是否显示查看按钮
      message: "",
    };
  },
  methods: {
    openDialog(appID, sceneID, stepID) {
      this.submitShow = false;
      this.message = "";
      this.queryDictionaryList();
      this.appID = appID;
      this.sceneID = sceneID;
      this.stepID = stepID;
      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;
      }
    },
    VerifyAccount() {
      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.$refs.customForm.ruleForm,
          };
          this.verifyDataBase(params);
        } else {
          this.$message({ message: "请选择必填项", type: "warning" });
          return;
        }
      });
    },
    async verifyDataBase(params) {
      this.openLoading("验证");
      let res = await authApi(
        "sysFlowStepAccountService",
        "",
        "verifyDataBase",
        "",
        params
      );
      if (res.status == "200") {
        this.message = res.attribute.msg || "";
        if (res.attribute.flag == true) {
          this.submitShow = true;
        } else {
          this.submitShow = false;
        }
      }
    },
    handleConfirmClick() {
      this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.$refs.customForm.ruleForm,
            appId: this.appID,
            status: 1,
            flowId: this.sceneID,
            stepId: this.stepID,
          };
          this.SaveAccountData(params);
        } else {
          this.$message({ message: "请选择必填项", type: "warning" });
          return;
        }
      });
    },

    async SaveAccountData(params) {
      let res = await authApi(
        "sysFlowStepAccountService",
        "",
        "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;
}

::v-deep .custom-error-box .el-alert {
  padding: 15px 16px !important;
}
::v-deep .custom-error-box .el-alert__title {
  font-size: 14px !important;
}
::v-deep .custom-error-box .el-alert__description {
  font-size: 13px !important;
}
</style>