<template>
|
<div class="project_add">
|
<div class="side-header">
|
<div class="side-option flex-display flex-align-center">
|
<left-outlined :style="{ fontSize: '18px', marginRight: '8px' }" />
|
<h2 class="title">创建项目</h2>
|
</div>
|
<div class="border-bottom"></div>
|
</div>
|
<div class="side-form-content">
|
<a-form layout="vertical" :model="formState">
|
<a-form-item label="项目名称">
|
<a-input v-model:value="formState[FormProject.PROJECT_NAME]" placeholder="项目名称" />
|
</a-form-item>
|
<a-form-item label="项目简介">
|
<a-textarea :auto-size="{ minRows: 4, maxRows: 8 }" type="textarea"
|
v-model:value="formState[FormProject.PROJCECT_INTRO]" placeholder="项目简介" />
|
</a-form-item>
|
<a-form-item>
|
<div class="application flex-display flex-align-center flex-justify-between">
|
<p>申请码加入项目</p>
|
<div class="btn dis_opticy">
|
<a-button type="text" disabled>
|
<span class="button_name">未开启</span>
|
<template #icon><right-outlined
|
:style="{ fontSize: '14px', color: '#fff', marginLeft: '8px' }" /></template>
|
</a-button>
|
</div>
|
</div>
|
</a-form-item>
|
<a-form-item>
|
<div class="application flex-display flex-align-center flex-justify-between">
|
<p>天气阻飞设置</p>
|
<div class="btn">
|
<a-button type="text" disabled>
|
<span class="button_name">未开启</span>
|
<template #icon><right-outlined
|
:style="{ fontSize: '14px', color: '#fff', marginLeft: '8px' }" /></template>
|
</a-button>
|
</div>
|
</div>
|
</a-form-item>
|
<a-form-item>
|
<div class="application flex-display flex-align-center flex-justify-between">
|
<p>项目成员</p>
|
<div>
|
<a-button type="text">
|
<span class="button_add">添加成员</span>
|
<template #icon><plus-outlined :style="{ fontSize: '14px', color: '#2d8cf0' }" /></template>
|
</a-button>
|
</div>
|
</div>
|
<a-table :columns="columns" :data-source="dataSource" bordered>
|
<template v-for="col in ['name', 'age', 'address']" #[col]="{ text, record }" :key="col">
|
<div>
|
<a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][col]"
|
style="margin: -5px 0" />
|
<template v-else>
|
{{ text }}
|
</template>
|
</div>
|
</template>
|
<template #operation="{ record }">
|
<div class="editable-row-operations">
|
<span v-if="editableData[record.key]">
|
<a @click="save(record.key)">Save</a>
|
<a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
|
<a>Cancel</a>
|
</a-popconfirm>
|
</span>
|
<span v-else>
|
<a @click="edit(record.key)">Edit</a>
|
</span>
|
</div>
|
</template>
|
</a-table>
|
</a-form-item>
|
<a-form-item>
|
<a-button type="primary">Submit</a-button>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { LeftOutlined, RightOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
import { FormState, FormProject } from './type'
|
import { UnwrapRef } from 'vue'
|
const columns = [
|
{
|
title: '人员项目呼号',
|
dataIndex: 'name',
|
key: 'name',
|
},
|
{
|
title: '项目角色',
|
dataIndex: 'role',
|
key: 'role',
|
responsive: ['md'],
|
},
|
{
|
title: '编辑',
|
dataIndex: 'edit',
|
key: 'edit',
|
responsive: ['lg'],
|
},
|
]
|
interface DataItem {
|
key: string;
|
name: string;
|
role: number;
|
edit: string;
|
}
|
const dataSource = ref([
|
{
|
key: '1',
|
name: '接口活',
|
role: '项目管理员'
|
}
|
])
|
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({})
|
const formState = ref<FormState>({
|
[FormProject.PROJECT_NAME]: '',
|
[FormProject.PROJECT_STATUS]: '',
|
[FormProject.PROJCECT_INTRO]: '',
|
[FormProject.LONGITUDE]: 0,
|
[FormProject.LATITUDE]: 0,
|
[FormProject.USERLIST]: []
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.project_add {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
color: #fff;
|
background-color: #232323;
|
|
.side-header {
|
height: 60px;
|
font-size: 16px;
|
line-height: 60px;
|
box-sizing: border-box;
|
background-color: #232323;
|
border-bottom: 1px solid #4f4f4f;
|
|
.side-option {
|
padding: 0 16px;
|
|
.title {
|
color: $text-white-basic;
|
font-size: 18px;
|
margin: 0;
|
font-weight: 700;
|
}
|
}
|
}
|
|
.side-form-content {
|
padding: 16px;
|
flex: 1;
|
overflow-y: auto;
|
|
.application {
|
color: #fff;
|
|
>p {
|
margin: 0;
|
}
|
|
.btn {
|
:deep(.ant-btn-text) {
|
display: flex;
|
align-items: center;
|
flex-direction: row-reverse;
|
}
|
|
.button_name {
|
color: #fff;
|
}
|
}
|
|
.button_add {
|
color: $primary;
|
margin: 0;
|
}
|
}
|
}
|
|
:deep(.ant-form-item-label > label) {
|
color: #fff;
|
}
|
|
:deep(.ant-form-item) {
|
margin-bottom: 16px;
|
}
|
|
:deep(.ant-input) {
|
background: #101010;
|
border: 1px solid #444;
|
color: #fff;
|
}
|
|
:deep(.ant-input-affix-wrapper) {
|
background: #101010;
|
}
|
}
|
</style>
|
