mirror of https://github.com/certd/certd
408 lines
9.2 KiB
Vue
408 lines
9.2 KiB
Vue
<template>
|
|
|
|
<div class="page-detail">
|
|
|
|
<div class="flow">
|
|
<div class="flow-group flow-cert">
|
|
<h3 class="group-head">
|
|
证书申请
|
|
</h3>
|
|
<a-divider></a-divider>
|
|
<div class="cert-display">
|
|
<a-button class="cert-edit-btn" type="link" @click="certFormOpen">
|
|
编辑
|
|
</a-button>
|
|
|
|
<div class="label-list">
|
|
<div class="title">证书</div>
|
|
<div class="label-item">
|
|
<label>域名:</label>
|
|
<div class="value">
|
|
<a-tag type="primary" v-for="item of options.cert.domains " :key="item">
|
|
{{ item }}
|
|
</a-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="label-item">
|
|
<label>邮箱:</label>
|
|
<div>
|
|
{{ options.cert.email }}
|
|
</div>
|
|
</div>
|
|
<div class="label-item">
|
|
<label>CA:</label>
|
|
<div>
|
|
{{ options.cert.ca }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="title">CSR
|
|
<span>必须全英文</span></div>
|
|
<div class="label-item">
|
|
<label>country:</label>
|
|
<div>
|
|
{{ options.cert.csr.country }}
|
|
</div>
|
|
</div>
|
|
<div class="label-item">
|
|
<label>state:</label>
|
|
<div>
|
|
{{ options.cert.csr.state }}
|
|
</div>
|
|
</div>
|
|
<div class="label-item">
|
|
<label>locality:</label>
|
|
<div>
|
|
{{ options.cert.csr.locality }}
|
|
</div>
|
|
</div>
|
|
<div class="label-item">
|
|
<label>org:</label>
|
|
<div>
|
|
{{ options.cert.csr.organization }}
|
|
</div>
|
|
</div>
|
|
<div class="label-item">
|
|
<label>orgUnit:</label>
|
|
<div>
|
|
{{ options.cert.csr.organizationUnit }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flow-group flow-deploy">
|
|
<h3 class="group-head">
|
|
部署流程
|
|
<PlusCircleOutlined title="添加部署流程" class="add-icon" @click="deployAdd"/>
|
|
</h3>
|
|
<a-divider></a-divider>
|
|
|
|
<div class="deploy-list">
|
|
|
|
<a-card class="deploy-item" v-for="(deploy,index) of options.deploy" :key="index">
|
|
<template #title>
|
|
<div class="deploy-name">
|
|
<template v-if="deploy._isEdit">
|
|
<a-input v-model:value="deploy.deployName"
|
|
:validateStatus="deploy.deployName?'':'error'"
|
|
placeholder="请输入流程名称"
|
|
@keyup.enter="deployCloseEditMode(deploy)"
|
|
>
|
|
<template #suffix>
|
|
<CheckOutlined @click="deployCloseEditMode(deploy)" style="color: rgba(0,0,0,.45)"/>
|
|
</template>
|
|
</a-input>
|
|
</template>
|
|
<template v-else>
|
|
<span @click="deployNameEdit"> <NodeIndexOutlined/> {{ deploy.deployName }}</span>
|
|
<EditOutlined class="ml-10 edit-icon" @click="deployOpenEditMode(deploy)"/>
|
|
</template>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<div class="task-list">
|
|
<div class="task-item-wrapper" v-for="(task,iindex) of deploy.tasks" :key="iindex">
|
|
<a-button class="task-item" shape="round" @click="taskEdit(deploy,task,index)">
|
|
<ThunderboltOutlined/>
|
|
{{ task.taskName }}
|
|
</a-button>
|
|
<ArrowRightOutlined class="task-next-icon"/>
|
|
</div>
|
|
<div class="task-item-wrapper">
|
|
<a-button type="primary" class="task-item" shape="round" @click="taskAdd(deploy)">
|
|
<PlusOutlined/>
|
|
添加新任务
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
|
|
</a-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<cert-form ref="certFormRef" v-model:cert="options.cert" v-model:access-providers="options.accessProviders"></cert-form>
|
|
|
|
<task-form ref="taskFormRef" ></task-form>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { message } from 'ant-design-vue'
|
|
// eslint-disable-next-line no-unused-vars
|
|
import { reactive, ref, toRef } from 'vue'
|
|
// eslint-disable-next-line no-unused-vars
|
|
import { useRoute } from 'vue-router'
|
|
import CertForm from '@/views/detail/components/cert-form'
|
|
import TaskForm from './components/task-form'
|
|
import _ from 'lodash-es'
|
|
|
|
function useDeploy (options) {
|
|
const deployAdd = () => {
|
|
options.deploy.push({
|
|
deployName: `D${options.deploy.length + 1}-新部署流程`,
|
|
_isEdit: false,
|
|
tasks: []
|
|
})
|
|
}
|
|
|
|
const deployCloseEditMode = (deploy) => {
|
|
if (!deploy.deployName) {
|
|
message.error('请输入流程名称')
|
|
return
|
|
}
|
|
deploy._isEdit = false
|
|
console.log('options', options)
|
|
}
|
|
|
|
const deployOpenEditMode = (deploy) => {
|
|
deploy._isEdit = true
|
|
}
|
|
return {
|
|
deployAdd, deployCloseEditMode, deployOpenEditMode
|
|
}
|
|
}
|
|
|
|
export default {
|
|
components: { CertForm, TaskForm },
|
|
setup () {
|
|
const route = useRoute()
|
|
console.log('route', route)
|
|
const optionParams = route.params.options ? JSON.parse(route.params.options) : {}
|
|
const optionsDefault = {
|
|
cert: {
|
|
csr: {
|
|
country: 'CN',
|
|
state: 'GuangDong',
|
|
locality: 'ShengZhen',
|
|
organization: 'CertD Org.',
|
|
organizationUnit: 'IT Department'
|
|
}
|
|
},
|
|
accessProviders: [{ key: 'aliyun', type: 'aliyun', name: 'aliyun' }],
|
|
deploy: []
|
|
}
|
|
_.merge(optionsDefault, optionParams)
|
|
const options = reactive(optionsDefault)
|
|
|
|
const certFormChanged = (value) => {
|
|
console.log('certFormChanged', value)
|
|
options.cert = value
|
|
}
|
|
|
|
const certFormRef = ref(null)
|
|
const certFormOpen = () => {
|
|
certFormRef.value.open()
|
|
}
|
|
|
|
const taskFormRef = ref(null)
|
|
const taskAdd = (deploy) => {
|
|
taskFormRef.value.taskAdd(deploy)
|
|
}
|
|
const taskEdit = (deploy, task, index) => {
|
|
taskFormRef.value.taskEdit(deploy, task, index)
|
|
}
|
|
|
|
return {
|
|
options,
|
|
certFormChanged,
|
|
certFormRef,
|
|
certFormOpen,
|
|
...useDeploy(options),
|
|
taskFormRef,
|
|
taskAdd,
|
|
taskEdit
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
.page-detail {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
|
|
.label-list {
|
|
.title{
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color:#555;
|
|
span{
|
|
font-weight: 200;
|
|
margin-left:5px;
|
|
font-size: 12px;
|
|
color:#888;
|
|
}
|
|
}
|
|
.label-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: baseline;
|
|
padding: 8px 0px;
|
|
|
|
label {
|
|
width: 70px;
|
|
flex-shrink: 0;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
line-height: 1.5715;
|
|
text-align: end;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.value {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flow {
|
|
height: 100%;
|
|
|
|
h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.flow-group {
|
|
min-width: 300px;
|
|
height: 100%;
|
|
border-right: 1px #eee solid;
|
|
padding: 20px;
|
|
|
|
.group-head {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.add-icon {
|
|
margin-left: 20px;
|
|
font-size: 24px;
|
|
color: #737070;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flow-cert {
|
|
max-width: 400px;
|
|
|
|
.cert-display {
|
|
position: relative;
|
|
|
|
.cert-edit-btn {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-icon {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.flow-deploy {
|
|
flex-shrink: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.deploy-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
|
|
.deploy-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
// min-width:70%;
|
|
.deploy-name {
|
|
max-width: 300px;
|
|
|
|
.edit-icon {
|
|
color: #737070;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.ant-form.task-form {
|
|
padding: 10px 24px;
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
> * {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.task-item-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-item {
|
|
//border: 1px solid #eee;
|
|
//padding: 10px 20px;
|
|
//border-radius: 20px;
|
|
}
|
|
|
|
.task-add-icon {
|
|
font-size: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.task-next-icon {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.task-type-selector {
|
|
|
|
}
|
|
|
|
.task-form {
|
|
.task-plugin-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
> * {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.task-plugin {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
</style>
|