dvcp_v2_webapp/project/oms/apps/AppSaas/AppSaas.vue

<template>
  <section class="AppSaas">
    <ai-list>
      <ai-title slot="title" title="平台配置" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="dialogForm = {}, dialog=true">添加</el-button>
          </template>
          <template #right>
            <el-input size="small" placeholder="搜索名称" v-model="search.condition" clearable
             @clear="page.current = 1,search.condition = '', getTableData()"
                      v-throttle="() => {page.current = 1, getTableData()}"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                  @getList="getTableData" :col-configs="colConfigs" :dict="dict"
                  @selection-change="v=>ids=v.filter(e=>e.id).map(e=>e.id)">
          <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
            <el-row type="flex" justify="center" align="middle" slot-scope="{row}">
              <el-button type="text" @click="handleEnter(row.accessUrl)">打开</el-button>
              <el-button type="text" @click="handleUpdate(row)">修改</el-button>
              <el-button type="text" @click="handleUpdatePwd(row)">修改密码</el-button>
              <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
            </el-row>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <!--添加SAAS平台-->
    <ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px"
               @onConfirm="saveSaas">
      <el-form ref="saasForm" :model="dialogForm" :rules="rules" size="small"
               label-width="120px">
        <el-form-item required label="名称" prop="name">
          <el-input v-model.trim="dialogForm.name" placeholder="请输入SaaS平台名称" clearable
                    :maxLength="50"/>
        </el-form-item>
        <el-form-item required label="账号" prop="username">
          <el-input v-model.trim="dialogForm.username" placeholder="请输入平台账号" clearable
                    :maxLength="50"/>
        </el-form-item>
        <el-form-item required label="密码" prop="password" v-if="!isEdit" :rules="[{required: true, message: '请输入平台密码'}]">
          <el-input v-model.trim="dialogForm.password" placeholder="请输入平台密码" clearable
                    :maxLength="100"/>
        </el-form-item>
        <el-form-item label="访问地址" prop="accessUrl">
          <el-input v-model.trim="dialogForm.accessUrl" placeholder="请输入访问地址" clearable
                    :maxLength="255"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
    <!--修改密码-->
    <ai-dialog title="修改密码" :visible.sync="updateDialog" width="600px"
               @onConfirm="updatePwd">
      <el-form ref="updatePwdForm" :model="updatePwdForm" :rules="updateRules" size="small"
               label-width="120px">
        <el-form-item required label="密码" prop="password">
          <el-input v-model.trim="updatePwdForm.password" placeholder="请输入平台密码" clearable
                    :maxLength="100"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>

export default {
  name: "AppSaas",
  label: "Saas平台管理",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    isEdit() {
      return !!this.dialogForm.id
    },
    dialogTitle() {
      return this.isEdit ? '修改SaaS平台' : '添加SaaS平台'
    },
    colConfigs() {
      return [
        {label: "名称", prop: "name"},
        {label: "账号", prop: "username", align: 'center'},
        {label: "访问地址", prop: "accessUrl"},
        {label: "创建时间", prop: "createTime"},
        {slot: "options"}
      ]
    },
    rules() {
      return {
        name: [{required: true, message: "请输入SaaS平台名称"}],
        username: [{required: true, message: "请输入平台账号"}],
        accessUrl: [{required: true, message: "请输入访问地址"}]
      }
    },
    updateRules() {
      return {
        password: [{required: true, message: "请输入平台密码"}]
      }
    }
  },
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      dialog: false,
      updateDialog: false,
      dialogForm: {},
      updatePwdForm: {password: ''},
      tableData: [],
      search: {condition: ""},
      ids: [],
      currentSaas: ''
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/appSaas/page", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    // 新增/修改
    saveSaas() {
      this.$refs.saasForm.validate(v => {
        if (v) {
          this.instance.post("/appSaas/addOrUpdate", this.dialogForm).then(res => {
            if (res?.code == 0) {
              this.dialog = false;
              this.$message.success("保存成功")
              this.getTableData();
            } else {
              this.$message.error(res?.msg)
            }
          })
        }
      })
    },
    // 新增/修改
    updatePwd() {
      this.$refs.updatePwdForm.validate(v => {
        if (v) {
          this.updatePwdForm.id = this.currentSaas.id
          this.instance.post("/appSaas/updatePwd", null, {params: this.updatePwdForm}).then(res => {
            if (res?.code == 0) {
              this.updateDialog = false;
              this.$message.success("密码修改成功")
            } else {
              this.$message.error(res?.msg)
            }
          })
        }
      })
    },
    handleUpdatePwd(row) {
      this.currentSaas = row
      this.updatePwdForm.password = ''
      this.updateDialog = true
    },
    handleUpdate(row) {
      this.dialogForm = row
      this.dialog = true
    },
    handleDelete(ids) {
      this.$confirm("是否要删除该Saas信息?").then(() => {
        this.instance.post("/appSaas/delete", null, {
          params: {ids}
        }).then(res => {
          if (res?.code == 0) {
            this.getTableData();
            this.$message.success("删除成功!");
          }
        })
      }).catch(() => 0)
    },
    handleEnter(accessUrl) {
      window.open(accessUrl, "_blank");
    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AppSaas {
  height: 100%;

}
</style>