| | |
| | | <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-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"> |
| | | <div class="application flex-display flex-align-center flex-justify-between"> |
| | | <p>申请码加入项目</p> |
| | | <div class="button"> |
| | | <a-button type="text"> |
| | | 未开启 |
| | | <template #icon><right-outlined /></template> |
| | | <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-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"> |
| | | <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> |
| | |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue' |
| | | 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]: '', |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 100%; |
| | | color: #fff; |
| | | background-color: #232323; |
| | | |
| | | .side-header { |
| | |
| | | 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; |