项目卡片组件：展示和管理项目信息
<p>"<template>\n <div class="list-card">\n <t-card header-bordered="true" :bordered="false" hover-shadow v-on:click="handle">\n <template #header>\n <t-avatar size="56px">\n <template #icon>\n <setting-icon/>\n </template>\n </t-avatar>\n <p class="list-card-item_detail--name">{{ project.project_name }}</p>\n <t-dropdown\n trigger="click"\n :options="[\n {\n content: '编辑项目内容',\n value: 'manage_content',\n onClick: () => handleManageProduct(project),\n },\n {\n content: '管理项目成员',\n value: 'manage_member',\n onClick: () => handleManageMember(project),\n },\n {\n content: '删除',\n value: 'delete',\n onClick: () => handleDeleteItem(project),\n },\n ]"\n >\n <t-button theme="default" shape="square" variant="text">\n <more-icon />\n </t-button>\n </t-dropdown>\n </template>\n <template #footer>\n <t-button theme="primary" @click="handle(project.ID)">\n 查看详情\n </t-button>\n <div class="project-id">{{ project.ID }}</div>\n </template>\n <template #content>\n <p class="list-card-item_detail--name">{{ project.project_name }}</p>\n <p class="list-card-item_detail--desc">{{ project.project_description }}</p>\n </template>\n </t-card>\n <!-- 项目管理弹窗 -->\n <t-dialog header="编辑项目" :visible.sync="formVisible" :width="680" :footer="false">\n <div slot="body">\n <!-- 表单内容 -->\n <t-form :data="formData" ref="form" :rules="rules" @submit="onSubmit(project.ID)" :labelWidth="100">\n <t-form-item label="项目名称" name="project_name">\n <t-input :style="{ width: '480px' }" v-model="formData.project_name" placeholder="请输入项目名称"></t-input>\n </t-form-item>\n <t-form-item label="项目介绍" name="project_description">\n <t-input :style="{ width: '480px' }" v-model="formData.project_description" placeholder="请输入项目介绍"></t-input>\n </t-form-item>\n\n <t-form-item style="float: right">\n <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>\n <t-button theme="primary" type="submit">提交</t-button>\n </t-form-item>\n </t-form>\n </div>\n </t-dialog>\n </div>\n</template>\n\n<script lang="ts">\nimport { ShopIcon, CalendarIcon, ServiceIcon, UserAvatarIcon, LaptopIcon, MoreIcon, AddIcon, SettingIcon} from 'tdesign-icons-vue';\n\nexport default {\n name: 'ProjectCard',\n components: {\n MoreIcon,\n SettingIcon\n },\n props: {\n project: {\n type: Object,\n },\n },\n data() {\n return {\n id: -1,\n formVisible: false,\n formData: {\n project_name: '',\n project_description: '',\n },\n };\n },\n methods: {\n handle(id) {\n console.log(<code>您点击了图标，项目信息为：</code>);\n this.id = id\n this.$router.push({ name: 'Tasks', params: {id}})\n },\n handleManageProduct(project) {\n this.formVisible = true;\n this.formData.project_name = project.project_name;\n this.formData.project_description = project.project_description;\n this.id = project.ID;\n },\n handleManageMember(project) {\n this.$emit('manage-member', project);\n },\n handleDeleteItem(project) {\n this.$emit('delete-item', project);\n },\n onClickCloseBtn(): void {\n this.formVisible = false;\n this.formData = {};\n },\n onSubmit({ result, firstError }) {\n if (!firstError) {\n this.formVisible = false;\n console.log({\n project_name: this.formData.project_name,\n description: this.formData.project_description,\n });\n // 将项目名称和描述发送给服务器进行保存\n this.$request.put(<code>http://wxgametest.woa.com/iExplorer/web/projects/${this.id}</code>, {\n project_name: this.formData.project_name,\n description: this.formData.project_description,\n },{headers: {'Content-Type': 'application/json'}},\n {withCredentials: true}\n )\n .then((res) => {\n if (res.status === 200) {\n // 如果服务器返回状态码为 200（成功），则从响应数据中获取保存后的项目信息\n this.$message.success('保存成功');\n // 更新项目列表\n // this.$request\n // .get('http://wxgametest.woa.com/iExplorer/web/projects')\n // .then((res) => {\n // this.projectList = res.data;\n // })\n // .catch((err) => {\n // console.error(err);\n // this.$message.error('获取项目列表失败', err);\n // });\n }\n })\n .catch((err) => {\n console.error(err);\n this.$message.error('保存失败');\n });\n } else {\n console.log('Errors: ', result);\n this.$message.warning(firstError);\n }\n },\n },\n};\n</script>\n\n<style lang="less" scoped>\n@import '@/style/variables';\n\n.list-card-item {\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n &_detail {\n min-height: 140px;\n\n &--name {\n margin-bottom: 8px;\n align-items: end;\n font-size: 20px;\n font-weight: 400;\n color: var(--td-text-color-primary);\n }\n\n &--desc {\n color: var(--td-text-color-secondary);\n font-size: 12px;\n line-height: 20px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n height: 40px;\n }\n }\n}\n\n.editing-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n\n .modal-content {\n width: 400px;\n padding: 24px;\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n }\n\n .input-field {\n margin-bottom: 16px;\n\n label {\n display: block;\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 8px;\n }\n\n input {\n width: 100%;\n padding: 8px;\n font-size: 14px;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n }\n\n .button-row {\n display: flex;\n justify-content: flex-end;\n margin-top: 16px;\n\n button {\n margin-left: 8px;\n }\n }\n}\n</style></p>
原文地址: https://www.cveoy.top/t/topic/quyQ 著作权归作者所有。请勿转载和采集!