feat(system-client): impl app service start & stop;

maslow · Sep 3, 2021 · f28d199 · f28d199
1 parent 4dcc7a0
commit f28d199
Show file tree

Hide file tree

Showing 2 changed files with 217 additions and 15 deletions.
diff --git a/packages/system-client/src/api/application.js b/packages/system-client/src/api/application.js
@@ -24,3 +24,61 @@ export async function getApplicationByAppid(appid) {
 
   return res
 }
+
+/**
+ * 创建应用
+ * @param param0
+ * @returns
+ */
+export async function createApplication({ name }) {
+  const res = await request({
+    url: `/apps/create`,
+    method: 'post',
+    data: {
+      name
+    }
+  })
+  return res
+}
+
+/**
+ * 编辑应用
+ * @param param0
+ * @returns
+ */
+export async function updateApplication(appid, { name }) {
+  const res = await request({
+    url: `/apps/${appid}`,
+    method: 'post',
+    data: {
+      name
+    }
+  })
+  return res
+}
+
+/**
+ * 启动应用服务
+ * @param {*} appid
+ * @returns
+ */
+export async function startApplication(appid) {
+  const res = await request({
+    url: `/apps/${appid}/start`,
+    method: 'post'
+  })
+  return res
+}
+
+/**
+ * 停止应用服务
+ * @param {*} appid
+ * @returns
+ */
+export async function stopApplication(appid) {
+  const res = await request({
+    url: `/apps/${appid}/stop`,
+    method: 'post'
+  })
+  return res
+}
diff --git a/packages/system-client/src/views/application/index.vue b/packages/system-client/src/views/application/index.vue
@@ -4,7 +4,7 @@
       <el-button plain type="default" size="mini" icon="el-icon-refresh" @click="loadApps">
         刷新
       </el-button>
-      <el-button plain type="primary" size="mini" icon="el-icon-plus" @click="deleteApp">
+      <el-button plain type="primary" size="mini" icon="el-icon-plus" @click="showCreateForm">
         新建
       </el-button>
     </div>
@@ -13,7 +13,7 @@
         <template slot-scope="scope">
           <div class="table-row">
             <div> {{ scope.row.appid }}</div>
-            <i v-clipboard:message="scope.row._id" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
+            <i v-clipboard:message="scope.row.appid" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
           </div>
         </template>
       </el-table-column>
@@ -22,20 +22,23 @@
           {{ scope.row.name }}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="App Secret" width="300">
-        <template slot-scope="scope">
-          <div class="table-row">
-            <div class="app-secret">{{ scope.row.app_secret }}</div>
-            <i v-clipboard:message="scope.row.app_secret" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
-          </div>
-        </template>
-      </el-table-column>
       <el-table-column align="center" label="Status" width="300">
         <template slot-scope="scope">
           {{ scope.row.status }}
         </template>
       </el-table-column>
-      <el-table-column label="创建/更新时间" align="center">
+      <el-table-column fixed="right" label="服务启停" align="center" width="380" class-name="small-padding">
+        <template slot-scope="{row}">
+
+          <el-button v-if="row.status !== 'running'" plain type="warning" size="mini" @click="startApp(row)">
+            启动
+          </el-button>
+          <el-button v-if="row.status === 'running'" plain type="danger" size="mini" @click="stopApp(row)">
+            停止
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
         <template slot-scope="{row}">
           <span v-if="row.created_at">{{ row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
           <span v-else>-</span>
@@ -44,19 +47,64 @@
       <el-table-column fixed="right" label="操作" align="center" width="380" class-name="small-padding">
         <template slot-scope="{row,$index}">
           <el-button plain type="primary" size="mini" @click="toDetail(row)">
-            管理
+            开发
+          </el-button>
+          <el-button plain type="default" size="mini" @click="showUpdateForm(row)">
+            编辑
+          </el-button>
+          <el-button v-if="row.status !== 'running'" plain type="warning" size="mini" @click="startApp(row)">
+            启动应用
+          </el-button>
+          <el-button v-if="row.status === 'running'" plain type="danger" size="mini" @click="stopApp(row)">
+            停止应用
           </el-button>
-          <el-button plain size="mini" type="danger" @click="handleDelete(row,$index)">
+          <el-button plain size="mini" type="info" @click="deleteApp(row,$index)">
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 创建应用表单 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form
+        ref="dataForm"
+        :rules="rules"
+        :model="form"
+        label-position="left"
+        label-width="120px"
+        style="width: 400px; margin-left:20px;"
+      >
+        <el-form-item label="应用名称" prop="name">
+          <el-input v-model="form.name" placeholder="应用名称" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?handleCreate():handleUpdate()">
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getMyApplications } from '@/api/application'
+import { createApplication, getMyApplications, startApplication, stopApplication, updateApplication } from '@/api/application'
+// 默认化创建表单的值
+function getDefaultFormValue() {
+  return {
+    _id: undefined,
+    appid: undefined,
+    name: ''
+  }
+}
+
+const formRules = {
+  name: [{ required: true, message: '应用名不可为空', trigger: 'blur' }]
+}
 
 export default {
   name: 'Applications',
@@ -67,7 +115,15 @@ export default {
         created: [],
         joined: []
       },
-      loading: false
+      loading: false,
+      form: getDefaultFormValue(),
+      dialogFormVisible: false,
+      dialogStatus: '',
+      textMap: {
+        update: '编辑',
+        create: '创建'
+      },
+      rules: formRules
     }
   },
   async created() {
@@ -91,11 +147,99 @@ export default {
       //   path: `/app/${app.appid}/dashboard/index`
       // })
     },
+    // 显示创建表单
+    showCreateForm() {
+      this.form = getDefaultFormValue()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 创建请求
+    handleCreate() {
+      this.$refs['dataForm'].validate(async(valid) => {
+        if (!valid) { return }
+        const data = Object.assign({}, this.form)
+
+        // 执行创建请求
+        const res = await createApplication({ name: data.name })
+        if (!res.data?.id) {
+          this.$notify({
+            type: 'error',
+            title: '操作失败',
+            message: '创建失败！' + res.error
+          })
+          return
+        }
+        this.$notify({
+          type: 'success',
+          title: '操作成功',
+          message: '创建成功！'
+        })
+
+        this.loadApps()
+        this.dialogFormVisible = false
+      })
+    },
+    // 显示更新表单
+    showUpdateForm(row) {
+      this.form = Object.assign(getDefaultFormValue(), row) // copy obj
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    // 更新请求
+    handleUpdate() {
+      this.$refs['dataForm'].validate(async(valid) => {
+        if (!valid) { return }
+
+        // 执行创建请求
+        const res = await updateApplication(this.form.appid, { name: this.form.name })
+        if (!res.data.ok) {
+          this.$notify({
+            type: 'error',
+            title: '操作失败',
+            message: '更新失败！' + res.error
+          })
+          return
+        }
+
+        this.$notify({
+          type: 'success',
+          title: '操作成功',
+          message: '更新成功！'
+        })
+
+        this.loadApps()
+        this.dialogFormVisible = false
+      })
+    },
     async deleteApp() {
       this.$message('尚未实现此功能')
     },
     onCopy() {
       this.$message.success('已复制')
+    },
+    async startApp(app) {
+      const res = await startApplication(app.appid)
+      if (res.data) {
+        this.$notify.success('启动应用成功')
+        this.loadApps()
+        return
+      }
+    },
+    async stopApp(app) {
+      await this.$confirm('确认要停止应用服务？', '服务操作确认')
+
+      const res = await stopApplication(app.appid)
+      if (res.data) {
+        this.$notify.success('停止应用成功')
+        this.loadApps()
+        return
+      }
     }
   }
 }