260720

src/views/gxmu/TYGLForm/components/growthArchives.vue

@@ -0,0 +1,177 @@
+<template>
+  <a-drawer
+    placement="right"
+    width="760"
+    :visible="visible"
+    title="成长档案"
+    :body-style="{ paddingBottom: '88px' }"
+    @update:visible="updateVisible"
+  >
+    <div class="archive-header">
+      <div class="archive-title">{{ props.data?.name || '未命名团员' }}</div>
+      <div class="archive-subtitle">
+        手机：{{ props.data?.phone || '-' }} ｜ 入团年月：{{ props.data?.joinMonth || '-' }}
+      </div>
+    </div>
+    <div class="archive-card">
+      <div
+        v-for="(item, index) in growthArchives"
+        :key="`archive-${index}`"
+        class="archive-item"
+      >
+        <a-form layout="vertical">
+          <a-form-item label="时间">
+            <a-date-picker
+              v-model:value="item.archiveTime"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+              placeholder="请选择时间"
+            />
+          </a-form-item>
+          <a-form-item label="内容">
+            <a-textarea
+              v-model:value="item.content"
+              :rows="5"
+              placeholder="请输入成长档案内容"
+            />
+          </a-form-item>
+        </a-form>
+        <a class="remove-link" @click="removeArchive(index)">删除</a>
+      </div>
+      <a-button block @click="addArchive">新增成长档案</a-button>
+    </div>
+    <div class="drawer-footer">
+      <a-space>
+        <a-button @click="updateVisible(false)">取消</a-button>
+        <a-button type="primary" :loading="loading" @click="save">保存</a-button>
+      </a-space>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { updateTyglGrowthArchives } from '@/api/gxmu/tygl-form';
+  import type { TyglForm, TyglGrowthArchive } from '@/api/gxmu/tygl-form/model';
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    visible: boolean;
+    data?: TyglForm | null;
+  }>();
+
+  const loading = ref(false);
+  const growthArchives = ref<TyglGrowthArchive[]>([]);
+
+  const createArchive = (): TyglGrowthArchive => ({
+    content: '',
+    archiveTime: ''
+  });
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        growthArchives.value = (props.data?.growthArchives || []).map((item) => ({
+          content: item.content || '',
+          archiveTime: item.archiveTime || ''
+        }));
+      } else {
+        growthArchives.value = [];
+      }
+    },
+    { immediate: true }
+  );
+
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const addArchive = () => {
+    growthArchives.value.push(createArchive());
+  };
+
+  const removeArchive = (index: number) => {
+    growthArchives.value.splice(index, 1);
+  };
+
+  const save = () => {
+    if (!props.data?.id) {
+      message.error('请先保存团员基础信息');
+      return;
+    }
+    loading.value = true;
+    updateTyglGrowthArchives(props.data.id, {
+      growthArchives: growthArchives.value.filter(
+        (item) => (item.content || '').trim() || (item.archiveTime || '').trim()
+      )
+    })
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+</script>
+
+<style lang="less" scoped>
+  .archive-header {
+    margin-bottom: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #f7fbff 0%, #edf5ff 100%);
+  }
+
+  .archive-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .archive-subtitle {
+    margin-top: 8px;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .archive-card {
+    padding: 16px;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    background: #fff;
+  }
+
+  .archive-item {
+    position: relative;
+    margin-bottom: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    background: #fafafa;
+  }
+
+  .remove-link {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    color: #ff4d4f;
+  }
+
+  .drawer-footer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #f0f0f0;
+    padding: 12px 16px;
+    background: #fff;
+    text-align: right;
+  }
+</style>