husq
2023-08-30 203626165b02ccbc09c8a4ea70b4edd4d9f35a93
src/pages/page-web/projects/project_list/add_page/add.vue
@@ -13,19 +13,67 @@
                    <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>
@@ -36,9 +84,42 @@
</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]: '',
@@ -54,6 +135,7 @@
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #fff;
    background-color: #232323;
    .side-header {
@@ -80,12 +162,41 @@
        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;