项目卡片组件 - 可编辑项目信息并管理成员

<template>
  <div class='list-card'>
  <t-card header-bordered :bordered='false' hover-shadow v-on:click='handle'>
    <template #header>
      <t-avatar size='56px'>
        <template #icon>
          <setting-icon/>
        </template>
      </t-avatar>
      <p class='list-card-item_detail--name'>{{ project.project_name }}</p>
      <t-dropdown
        trigger='click'
        :options='[
          {
            content: '编辑项目内容',
            value: 'manage_content',
            onClick: () => handleManageProduct(project),
          },
          {
            content: '管理项目成员',
            value: 'manage_member',
            onClick: () => handleManageMember(project),
          },
          {
            content: '删除',
            value: 'delete',
            onClick: () => handleDeleteItem(project),
          },
        ]'
      >
        <t-button theme='default' shape='square' variant='text'>
          <more-icon />
        </t-button>
      </t-dropdown>
    </template>
    <template #footer>
      <t-button theme='primary' @click='handle(project.ID)'>
        查看详情
      </t-button>
      <div class='project-id'>{{ project.ID }}</div>
    </template>
    <template #content>
      <p class='list-card-item_detail--name'>{{ project.project_name }}</p>
      <p class='list-card-item_detail--desc'>{{ project.project_description }}</p>
    </template>
  </t-card>
  <!-- 项目管理弹窗 -->
    <t-dialog header='编辑项目' :visible.sync='formVisible' :width='680' :footer='false'>
      <div slot='body'>
        <!-- 表单内容 -->
        <t-form :data='formData' ref='form' :rules='rules' @submit='onSubmit(project)' :labelWidth='100'>
          <t-form-item label='项目名称' name='project_name'>
            <t-input :style='{ width: '480px' }' v-model='formData.project_name' placeholder='请输入项目名称'></t-input>
          </t-form-item>
          <t-form-item label='项目介绍' name='project_description'>
            <t-input :style='{ width: '480px' }' v-model='formData.project_description' placeholder='请输入项目介绍'></t-input>
          </t-form-item>
<pre><code>      &lt;t-form-item style='float: right'&gt;
        &lt;t-button variant='outline' @click='onClickCloseBtn'&gt;取消&lt;/t-button&gt;
        &lt;t-button theme='primary' type='submit'&gt;提交&lt;/t-button&gt;
      &lt;/t-form-item&gt;
    &lt;/t-form&gt;
  &lt;/div&gt;
&lt;/t-dialog&gt;
</code></pre>
  </div>
</template>
<script lang='ts'>
import { ShopIcon, CalendarIcon, ServiceIcon, UserAvatarIcon, LaptopIcon, MoreIcon, AddIcon, SettingIcon} from 'tdesign-icons-vue';

export default {
  name: 'ProjectCard',
  components: {
    MoreIcon,
    SettingIcon
  },
  props: {
    project: {
      type: Object,
    },
  },
  data() {
    return {
      id: -1,
      formVisible: false,
      formData: {
        project_name: '',
        project_description: '',
      },
    };
  },
  methods: {
    handle(id) {
      console.log('您点击了图标，项目信息为：');
      this.id = id
      this.$router.push({ name: 'Tasks', params: {id}})
    },
    handleManageProduct(project) {
      this.id = project.ID;  // 设置当前项目的ID
      this.formVisible = true;
    },
    handleManageMember(project) {
      this.$emit('manage-member', project);
    },
    handleDeleteItem(project) {
      this.$emit('delete-item', project);
    },
    onClickCloseBtn(): void {
      this.formVisible = false;
      this.formData = {};
    },
    onSubmit(project) {
      console.log(project);
      project.project_name = this.formData.project_name;
      project.project_description = this.formData.project_description;
      this.formVisible = false;
      // 将项目名称和描述发送给服务器进行保存
      this.$request.put(`http://wxgametest.woa.com/iExplorer/web/projects/${this.id}`, {
        project_name: this.formData.project_name,
        description: this.formData.project_description,
      },{headers: {'Content-Type': 'application/json'}}, 
      {withCredentials: true}
      )
        .then((res) => {
          if (res.status === 200) {
            // 如果服务器返回状态码为 200（成功），则从响应数据中获取保存后的项目信息
            this.$message.success('保存成功');
            // 更新项目列表
            this.$request
              .get('http://wxgametest.woa.com/iExplorer/web/projects')
              .then((res) => {
                this.projectList = res.data;
              })
              .catch((err) => {
                console.error(err);
                this.$message.error('获取项目列表失败', err);
              });
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error('保存失败');
        });
    },
  },
};
</script>