open_platform/src/views/app/AppHomeView.vue

<script setup lang="ts">
// @ts-ignore
import API from "@/api/index.js"
import { ref } from "vue"
import { PriceTag } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"

const Api = API
const appList = ref([])
const init = () => {
  Api.appList({ type: "APP" }).then((res) => {
    appList.value = res
  })
}
const appCreate = () => {
  ElMessage.success("新建应用成功")
  Api.appCreate({ type: "APP", appName: name.value }).then(() => {
    init()
    showDialog.value = false
  })
}
const name = ref(undefined)
const showDialog = ref(false)
const detail = ref(undefined)
const showDetailsDialog = ref(false)
const addApp = () => {
  name.value = undefined
  showDialog.value = true
}
const showApp = (scope) => {
  detail.value = undefined
  // showDetailsDialog.value = true
}
init()
</script>

<template>
  <el-card style="margin-top: 20px">
    <template #header>
      <el-button @click="addApp">新建应用</el-button>
    </template>
    <el-table :data="appList" style="width: 100%">
      <el-table-column type="index" width="150" label="序号" />
      <el-table-column prop="appName" label="应用名称" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="showApp(scope.row)"> 详情 </el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog v-model="showDialog" title="新建应用" width="500">
    <el-input
      class="text item"
      v-model="name"
      style="width: 440px"
      placeholder="请输入应用名称"
      :prefix-icon="PriceTag"
      :clearable="true"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialog = false">Cancel</el-button>
        <el-button type="primary" @click="appCreate"> Confirm</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="showDetailsDialog" title="应用信息" width="500">
    <el-input
      class="text item"
      v-model="name"
      style="width: 440px"
      placeholder="请输入应用名称"
      :prefix-icon="PriceTag"
      :clearable="true"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="showDetailsDialog = false"> 关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>