Investment-data-system/src/views/message/index.vue

<template>
  <div class="content-management">
    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="stores" tab="门店"></a-tab-pane>
      <a-tab-pane key="recommendations" tab="今日推荐"></a-tab-pane>
      <a-tab-pane key="events" tab="赛事分析"></a-tab-pane>
      <a-tab-pane key="carousel" tab="轮播"></a-tab-pane>
    </a-tabs>

    <div class="table-actions">
      <a-button type="primary" @click="showAddModal">新增</a-button>
    </div>

    <a-table :columns="columns" :data-source="filteredData" :rowKey="record => record.id">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'content'">
          <div v-if="['recommendations', 'carousel'].includes(record.type) && Array.isArray(record.content)">
            <a-image
              v-for="(image, index) in record.content.slice(0, 3)"
              :key="index"
              :src="image"
              :width="50"
              :height="50"
              style="margin-right: 5px;"
            />
            <span v-if="record.content.length > 3">+{{ record.content.length - 3 }} more</span>
          </div>
          <span v-else v-html="record.content"></span>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click="editItem(record)">编辑</a-button>
            <a-button type="link" @click="deleteItem(record)">删除</a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <a-modal
      v-model:visible="modalVisible"
      :title="modalMode === 'add' ? '新增内容' : '编辑内容'"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      width="800px"
    >
      <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
        <a-form-item label="类型">
          <a-select v-model:value="formState.type" :disabled="modalMode === 'edit'">
            <a-select-option value="stores">门店</a-select-option>
            <a-select-option value="recommendations">今日推荐</a-select-option>
            <a-select-option value="events">赛事分析</a-select-option>
            <a-select-option value="carousel">轮播</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="标题">
          <a-input v-model:value="formState.title" placeholder="输入标题"/>
        </a-form-item>
        <a-form-item label="图片" v-if="['recommendations', 'carousel'].includes(formState.type)">
          <a-upload
            v-model:fileList="formState.images"
            list-type="picture-card"
            :max-count="formState.type === 'carousel' ? 1 : 9"
            @preview="handlePreview"
            @change="handleImageChange"
          >
            <div v-if="formState.images.length < (formState.type === 'carousel' ? 1 : 9)">
              <plus-outlined />
              <div style="margin-top: 8px">上传图片</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="内容" v-if="!['recommendations', 'carousel'].includes(formState.type)">
          <wysiwyg-editor v-model="formState.content" />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model:visible="previewVisible" :title="previewTitle" :footer="null">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import WysiwygEditor from './WysiwygEditor.vue';

const activeTab = ref('stores');
const modalVisible = ref(false);
const modalMode = ref('add');
const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');

const columns = [
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '标题', dataIndex: 'title', key: 'title' },
  { title: '内容', dataIndex: 'content', key: 'content' },
  { title: '操作', key: 'action' },
];

const data = reactive([
  { id: 1, type: 'stores', title: '门店1', content: '<p>门店1的内容...</p>' },
  { id: 2, type: 'recommendations', title: '推荐1', content: ['https://matripe.oss-cn-beijing.aliyuncs.com/default.png', 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'] },
  { id: 3, type: 'events', title: '赛事1', content: '<p>赛事1的分析...</p>' },
  { id: 4, type: 'carousel', title: '轮播1', content: ['https://matripe.oss-cn-beijing.aliyuncs.com/default.png'] },
]);

const formState = reactive({
  id: null,
  type: 'stores',
  title: '',
  content: '',
  images: [],
});

const filteredData = computed(() => {
  return data.filter(item => item.type === activeTab.value);
});

const showAddModal = () => {
  modalMode.value = 'add';
  Object.assign(formState, { id: null, type: activeTab.value, title: '', content: '', images: [] });
  modalVisible.value = true;
};

const editItem = (record) => {
  modalMode.value = 'edit';
  if (['recommendations', 'carousel'].includes(record.type)) {
    Object.assign(formState, { 
      ...record, 
      images: record.content.map((url, index) => ({
        uid: -index,
        name: `image${index + 1}.jpg`,
        status: 'done',
        url: url,
      }))
    });
  } else {
    Object.assign(formState, { ...record, images: [] });
  }
  modalVisible.value = true;
};

const deleteItem = (record) => {
  const index = data.findIndex(item => item.id === record.id);
  if (index !== -1) {
    data.splice(index, 1);
    message.success('删除成功');
  }
};

const handleModalOk = () => {
  if (modalMode.value === 'add') {
    data.push({
      id: Date.now(),
      type: formState.type,
      title: formState.title,
      content: ['recommendations', 'carousel'].includes(formState.type)
        ? formState.images.map(img => img.url || img.response.url)
        : formState.content,
    });
    message.success('添加成功');
  } else {
    const index = data.findIndex(item => item.id === formState.id);
    if (index !== -1) {
      Object.assign(data[index], {
        type: formState.type,
        title: formState.title,
        content: ['recommendations', 'carousel'].includes(formState.type)
          ? formState.images.map(img => img.url || img.response.url)
          : formState.content,
      });
      message.success('编辑成功');
    }
  }
  modalVisible.value = false;
};

const handleModalCancel = () => {
  modalVisible.value = false;
};

const handlePreview = async (file) => {
  if (!file.url && !file.preview) {
    file.preview = await getBase64(file.originFileObj);
  }
  previewImage.value = file.url || file.preview;
  previewVisible.value = true;
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};

const handleImageChange = ({ fileList }) => {
  formState.images = fileList;
};

const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
};
</script>

<style scoped>
.content-management {
  padding: 24px;
}
.table-actions {
  margin-bottom: 16px;
  text-align: right;
}
</style>