填加环境模版/创建环境功能

src/api/getEnvTemplate.js

+import request from '@/utils/holmesRequest'
+// 获取环境模版列表
+export function getEnvTemplateList(queryInfo) {
+  return request({
+    url: '/env/template/list',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 获取所有服务
+export function getAllEnvRepo(queryInfo) {
+  return request({
+    url: '/k8s/repo/getAll',
+    method: 'get',
+    params: queryInfo
+  })
+}
+// 添加环境模版
+export function addEnvTemplate(data) {
+  return request({
+    url: '/env/template/create',
+    method: 'post',
+    data
+  })
+}
+// 编辑环境模版
+export function editEnvTemplate(data) {
+  return request({
+    url: '/env/template/modify',
+    method: 'post',
+    data
+  })
+}
+// 删除环境模版
+export function delEnvTemplate(data) {
+  return request({
+    url: '/env/template/delete',
+    method: 'post',
+    data
+  })
+}
+// 删除环境模版
+export function addEnv(data) {
+  return request({
+    url: '/k8s/namespace/create',
+    method: 'post',
+    data
+  })
+}

src/assets/css/iconfont.css

@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-addenvironment:before {
+  content: "\e607";
+}
+
+.icon-left-template:before {
+  content: "\e62b";
+}
+
+.icon-environment:before {
+  content: "\edac";
+}
+
+.icon-template:before {
+  content: "\e735";
+}
+
 .icon-jira1:before {
   content: "\e672";
 }

src/assets/fonts/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "997336",
+      "name": "add environment",
+      "font_class": "addenvironment",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "3238366",
+      "name": "模板",
+      "font_class": "left-template",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "3571612",
+      "name": "environment",
+      "font_class": "environment",
+      "unicode": "edac",
+      "unicode_decimal": 60844
+    },
+    {
+      "icon_id": "6146030",
+      "name": "template",
+      "font_class": "template",
+      "unicode": "e735",
+      "unicode_decimal": 59189
+    },
     {
       "icon_id": "3876500",
       "name": "jira",

src/router/index.js

@@ -49,6 +49,9 @@ import NavigateList from '../views/navigate/List'
 import NavigateConfig from '../views/navigate/Config'
 import DataGenerator from '../views/effect/DataGenerator'
 import DbSync from '../views/effect/DbSync'
+// 添加环境模版/创建环境(2021-09-18)
+import EnvTemplate from '../views/docker/EnvTemplate'
+import CreateEnv from '../views/docker/CreateEnv'
 
 const originalPush = Router.prototype.push
 Router.prototype.push = function push(location) {
@@ -265,6 +268,18 @@ const router = new Router({
           path: '/effect/dbsync',
           name: '老数据库同步',
           component: DbSync
+        },
+        // 添加环境模版(2021-09-18)
+        {
+          path: '/docker/envTemplate',
+          name: '环境模版',
+          component: EnvTemplate
+        },
+        // 创建环境(2021-09-18)
+        {
+          path: '/docker/createEnv',
+          name: '环境模版',
+          component: CreateEnv
         }
       ]
     }

src/views/auto/AddInterface.vue

@@ -394,7 +394,6 @@ export default {
               }
             })
           } else {
-            console.log('接口参数', this.interfaceForm)
             addInterface(this.interfaceForm).then((resp) => {
               if (resp.data.data === true) {
                 this.$message.success('添加成功！')

src/views/docker/CreateEnv.vue

+<template>
+  <div>
+    <el-form :model="addEnvForm" ref="addEnvFormRef" :rules="rules" label-position="left" label-width="130px"
+      style="width: 95%; margin-left:20px;">
+      <el-alert type="warning" style="margin-bottom: 20px; font-size: 14px;" show-icon>
+        <slot name="description">
+          <p>环境创建成功后，到运行中环境页面</p>
+          <p>1. 同步数据库 和 rabbitmq</p>
+          <p>2. 再部署应用服务</p>
+        </slot>
+      </el-alert>
+      <el-form-item label="Namespace名称" prop="name">
+        <el-input v-model="addEnvForm.name" placeholder="请输入环境名称" />
+      </el-form-item>
+      <el-form-item label="环境归属" prop="desc">
+        <el-select v-model="addEnvForm.desc" style="width:100%" placeholder="请选择环境归属">
+          <el-option v-for="item in envBelongList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择模版" prop="templateId">
+        <el-select v-model="addEnvForm.templateId" style="width:100%" placeholder="请选择环境模版">
+          <el-option v-for="item in envTemplateList" :value="item.envTemplate.id" :key="item.envTemplate.id"
+            :label="item.envTemplate.name" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="归属人" prop="owner">
+        <el-input v-model="addEnvForm.owner" placeholder="请输入归属人" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer" style="margin-left:500px">
+      <el-button type="primary" @click="saveEnv">确 定</el-button>
+    </span>
+  </div>
+</template>
+<script>
+import { getEnvTemplateList, addEnv } from '@/api/getEnvTemplate'
+// 引入组件
+import bus from '@/utils/bus'
+export default {
+  data() {
+    var checkData = (rule, value, callback) => {
+      if (value) {
+        if (/[\u4E00-\u9FA5]/g.test(value)) {
+          callback(new Error('不能输入汉字'))
+        } else {
+          callback()
+        }
+        callback()
+      }
+    }
+    return {
+      addEnvForm: {},
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      namespaceList: [],
+      envTemplateList: [],
+      envBelongList: [
+        {
+          id: 'test',
+          name: 'test'
+        },
+        {
+          id: 'dev',
+          name: 'dev'
+        }
+      ],
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '环境名称不能为空！',
+            trigger: 'blur'
+          },
+          { validator: checkData, trigger: 'blur' }
+        ],
+        desc: [
+          {
+            required: true,
+            message: '环境归属不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        templateId: [
+          {
+            required: true,
+            message: '环境模版不能为空！',
+            trigger: 'blur'
+          }
+        ],
+        owner: [
+          {
+            required: true,
+            message: '归属人不能为空！',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getEnvTemplateList()
+  },
+  methods: {
+    // 获取环境模版列表
+    getEnvTemplateList() {
+      getEnvTemplateList(this.queryModuleInfo).then((resp) => {
+        this.envTemplateList = resp.data.data.list
+      })
+    },
+    // 保存信息
+    saveEnv() {
+      this.$refs.addEnvFormRef.validate((valid) => {
+        if (!valid) {
+          return false
+        } else {
+          var formdata = new FormData()
+          formdata.set('name', this.addEnvForm.name)
+          formdata.set('desc', this.addEnvForm.desc)
+          formdata.set('owner', this.addEnvForm.owner)
+          formdata.set('templateId', this.addEnvForm.templateId)
+
+          addEnv(formdata).then((resp) => {
+            if (resp.data.msg === 'SUCCESS') {
+              this.$message.success('新增成功！')
+              // 向菜单栏中的下拉框传递环境名称
+              bus.$emit('testEnv', this.addEnvForm.name)
+              // 向菜单栏中传递环境名称
+              bus.$emit('refreshEnv', this.addEnvForm.name)
+              this.$router.push({
+                path: `/docker/env`
+              })
+              this.addEnvForm.name = ''
+              this.addEnvForm.desc = ''
+              this.addEnvForm.owner = ''
+              this.addEnvForm.templateId = ''
+            } else {
+              this.$message.error(resp.data.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/docker/EnvTemplate.vue

+<template>
+  <div>
+    <el-card>
+      <div class="filter">
+        <el-button type="primary" icon="el-icon-circle-plus" @click="addEnvTemplate()"
+          v-permission="('docker:envTemplate:create')">新增</el-button>
+      </div>
+      <el-table :data="envTemplateList" border style="width: 100%;margin-top:20px">
+        <el-table-column type='index' width="50px">
+          <template slot-scope="scope">
+            <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="envTemplate.name" label="名称" width="100px"></el-table-column>
+        <el-table-column prop="envTemplate.updateTime" label="更新时间" width="200px"></el-table-column>
+        <el-table-column label="操作">
+          <slot slot-scope="scope">
+            <el-button type="warning" icon="el-icon-edit" @click="editEnvTemplate(scope.row)"
+              v-permission="('docker:envTemplate:modify')">编辑</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="deEnvTemplateFrom(scope.row)"
+              v-permission="('docker:envTemplate:delete')">删除</el-button>
+          </slot>
+        </el-table-column>
+      </el-table>
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
+        layout="total, prev, pager, next" :total="totalNum">
+      </el-pagination>
+    </el-card>
+
+    <!-- 新增环境模版页面 -->
+    <el-dialog :title='titleName' :visible.sync="AddEnvTemplateDialog" width="80%">
+      <el-form ref="addEnvTemplateFormRef" :rules="rules" :model="addEnvTemplateForm" label-width="90px">
+        <el-form-item label="模版名称:" style="width:400px" prop="envTemplate.name">
+          <el-input v-model="addEnvTemplateForm.envTemplate.name"></el-input>
+        </el-form-item>
+        <el-form-item v-for="(ns,index) in repoNamespaces" :label="ns.type" :key="index">
+          <el-card>
+            <el-button v-for="item in ns.repos" :key="item.serviceName" style="margin:3px"
+              @click="selectSystem(item, ns.type)"
+              :type="dependant[ns.type]&& dependant[ns.type].find(sys=>sys.serviceName===item.serviceName)?'success':''">
+              {{ item.serviceName }}
+            </el-button>
+          </el-card>
+          <el-checkbox :indeterminate="isIndeterminate[ns.type]" v-model="checkAll[ns.type]"
+            @change="handleCheckAllChange(checkAll[ns.type],ns.type)">全选</el-checkbox>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="AddEnvTemplateDialog=false">取 消</el-button>
+        <el-button type="primary" @click="saveEnvTemplate">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import {
+  getEnvTemplateList,
+  getAllEnvRepo,
+  addEnvTemplate,
+  delEnvTemplate,
+  editEnvTemplate
+} from '@/api/getEnvTemplate'
+export default {
+  data() {
+    return {
+      queryModuleInfo: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      AddEnvTemplateDialog: false,
+      envTemplateList: [],
+      totalNum: 0,
+      addEnvTemplateForm: {
+        envTemplate: {
+          name: ''
+        },
+        envTemplateDetailList: []
+      },
+      repoNamespaces: [],
+      dependant: {},
+      isIndeterminate: {},
+      checkAll: {},
+      titleName: '',
+      rules: {
+        envTemplate: {
+          name: [
+            {
+              required: true,
+              message: '环境模版名称不能为空！',
+              trigger: 'blur'
+            }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    // 获取环境模版列表
+    getEnvTemplateList() {
+      getEnvTemplateList(this.queryModuleInfo).then((resp) => {
+        this.envTemplateList = resp.data.data.list
+        this.totalNum = resp.data.data.total
+      })
+    },
+    handleSizeChange(newSize) {
+      this.queryModuleInfo.pageSize = newSize
+      this.getEnvTemplateList()
+    },
+    handleCurrentChange(newPage) {
+      this.queryModuleInfo.pageNum = newPage
+      this.getEnvTemplateList()
+    },
+    // 获取所有的服务信息
+    getAllRepos() {
+      getAllEnvRepo().then((resp) => {
+        this.repoNamespaces = resp.data.data
+        this.repoNamespaces.forEach((item) => {
+          this.checkAll[item.type] = false
+          this.isIndeterminate[item.type] = true
+        })
+      })
+    },
+    // 新增环境模版按钮
+    addEnvTemplate() {
+      this.titleName = '新增环境模版'
+      this.AddEnvTemplateDialog = true
+      this.addEnvTemplateForm.envTemplate = {}
+      this.addEnvTemplateForm.envTemplateDetailList = []
+      this.dependant = {}
+    },
+    // 保存环境模版
+    saveEnvTemplate() {
+      // 验证必填项
+      this.$refs.addEnvTemplateFormRef.validate((valid) => {
+        if (!valid) {
+          return false
+        } else {
+          this.addEnvTemplateForm.envTemplateDetailList = []
+          for (var i in this.dependant) {
+            this.dependant[i].forEach((item) => {
+              this.addEnvTemplateForm.envTemplateDetailList.push(item)
+            })
+          }
+          // 编辑环境模版
+          if (this.addEnvTemplateForm.envTemplate.id) {
+            editEnvTemplate(this.addEnvTemplateForm)
+              .then((resp) => {
+                if (resp.data.msg === 'SUCCESS') {
+                  this.$message.success('修改成功')
+                  this.AddEnvTemplateDialog = false
+                  this.getEnvTemplateList()
+                } else {
+                  this.$message.error(resp.data.msg)
+                }
+              })
+              .catch((error) => {
+                this.$message({ type: 'error', message: error })
+              })
+          } else {
+            // 添加环境模版
+            addEnvTemplate(this.addEnvTemplateForm)
+              .then((resp) => {
+                if (resp.data.data === true) {
+                  this.$message.success('新增成功')
+                  this.AddEnvTemplateDialog = false
+                  this.getEnvTemplateList()
+                } else {
+                  this.$message.error(resp.data.msg)
+                }
+              })
+              .catch((error) => {
+                this.$message({ type: 'error', message: error })
+              })
+          }
+        }
+      })
+    },
+    // 点击button按钮 触发事件
+    selectSystem(item, type) {
+      if (!this.dependant[type]) this.$set(this.dependant, type, [])
+      const index = this.dependant[type].findIndex(
+        (sys) => sys.serviceName === item.serviceName
+      )
+      if (index === -1) {
+        this.dependant[type].push(item)
+      } else {
+        this.dependant[type].splice(index, 1)
+      }
+    },
+    // 复选框全选事件
+    handleCheckAllChange(val, type) {
+      this.$set(this.dependant, type, [])
+      this.isIndeterminate[type] = false
+      if (val) {
+        this.dependant[type] = this.repoNamespaces
+          .filter((item) => item.type === type)[0]
+          .repos.concat()
+      }
+    },
+    // 编辑环境模版
+    editEnvTemplate(row) {
+      this.titleName = '编辑环境模版'
+      this.AddEnvTemplateDialog = true
+      this.addEnvTemplateForm.envTemplate.id = row.envTemplate.id
+      this.addEnvTemplateForm.envTemplate.name = row.envTemplate.name
+      this.addEnvTemplateForm.envTemplateDetailList = row.envTemplateDetailList
+      this.dependant = {}
+      this.addEnvTemplateForm.envTemplateDetailList.forEach((item) => {
+        this.selectSystem(item, item.label)
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除环境模版
+    deEnvTemplateFrom(row) {
+      var formdata = new FormData()
+      formdata.set('templateId', row.envTemplate.id)
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delEnvTemplate(formdata)
+          .then((resp) => {
+            if (resp.data.msg === 'SUCCESS') {
+              this.$message.success('删除成功！')
+              this.getEnvTemplateList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
+    }
+  },
+  created() {
+    this.getEnvTemplateList()
+    this.getAllRepos()
+  }
+}
+</script>

src/views/jira/Notify.vue

@@ -29,6 +29,7 @@
           </template>
         </el-table-column>
         <el-table-column prop="dingRobot.namespace" label="测试环境" width="100px"></el-table-column>
+        <el-table-column prop="dingRobot.namespace" label="状 态" width="100px"></el-table-column>
         <el-table-column prop="dingRobot.creator" label="创建人" width="100px">
         </el-table-column>
         <el-table-column prop="dingRobot.createTime" label="创建时间" width="180px"></el-table-column>
@@ -62,6 +63,10 @@
         <el-form-item label="项目名称" prop="dingRobot.projectName">
           <el-input v-model="pipelineFrom.dingRobot.projectName" placeholder="请输入项目名称"></el-input>
         </el-form-item>
+        <!-- 新增状态 -->
+        <!-- <el-form-item label="状 态" prop="dingRobot.projectName">
+          <el-input v-model="pipelineFrom.dingRobot.projectName" placeholder="请输入项目名称"></el-input>
+        </el-form-item> -->
         <el-form-item label="钉钉通知地址" prop="dingRobot.dingUrl">
           <el-input v-model="pipelineFrom.dingRobot.dingUrl" placeholder="请输入钉钉通知地址" type="textarea" :rows="3">
           </el-input>
@@ -481,6 +486,7 @@ export default {
     // 获取ding_robot列表
     getProjectRobotList() {
       getPipelineList(this.queryInfo).then((resp) => {
+        // console.log('列表信息', resp.data.data.list)
         this.dingRobotList = resp.data.data.list
         this.totalNum = resp.data.data.total
       })

src/views/layout/leftAside/menu.json

@@ -47,6 +47,18 @@
           "title": "服务配置管理",
           "icon": "iconfont icon-peizhi",
           "path": "/docker/ProConfig"
+        },
+        {
+          "id": 4,
+          "title": "环境模版",
+          "icon": "iconfont icon-left-template",
+          "path": "/docker/envTemplate"
+        },
+        {
+          "id": 5,
+          "title": "创建环境",
+          "icon": "iconfont icon-addenvironment",
+          "path": "/docker/createEnv"
         }
       ]
     },