EnforcementCode-2.0/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/carouselBanner/edit.vue

<template>
  <div v-loading="pageLoading" class="carousel-edit-container">
    <div class="page-header">
      <h1>编辑轮播图</h1>
    </div>

    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" class="form-container">
      <el-form-item label="标题:" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" class="form-input" />
      </el-form-item>

      <el-form-item label="内容发布在:" prop="targetPlatform">
        <el-select v-model="form.targetPlatform" placeholder="请选择" class="form-select">
          <el-option v-for="item in platformOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="橱窗选择:" prop="carouselPosition">
        <el-select v-model="form.carouselPosition" placeholder="请选择" class="form-select">
          <el-option v-for="item in carouselPositionOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="类型:" prop="type">
        <el-select v-model="form.type" placeholder="请选择" class="form-select" @change="handleTypeChange">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="显示天数:" prop="displayDays">
        <el-select v-model="form.displayDays" placeholder="请选择" class="form-select">
          <el-option v-for="item in displayDaysOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.type === 1" label="链接:" prop="linkUrl">
        <el-input v-model="form.linkUrl" placeholder="请输入跳转链接" class="form-input" />
      </el-form-item>

      <el-form-item v-else label="富文本内容:" prop="content">
        <div class="editor-wrapper">
          <QuillEditor
            ref="quillEditorRef"
            v-model:content="form.content"
            content-type="html"
            :toolbar="toolbarOptions"
            theme="snow"
            class="quill-editor"
            placeholder="请输入富文本内容"
          />
        </div>
      </el-form-item>

      <el-form-item label="轮播图:" prop="imageUrl">
        <div class="upload-area">
          <div class="upload-row">
            <el-upload
              class="banner-uploader"
              :show-file-list="false"
              accept=".jpg,.jpeg,.png"
              :http-request="handleImageUpload"
              :before-upload="beforeImageUpload"
            >
              <div class="upload-box">
                <div class="upload-icon">+</div>
                <span class="upload-text">上传</span>
              </div>
            </el-upload>

            <div v-if="form.imageUrl" class="preview-image">
              <img :src="form.imageUrl" alt="轮播图预览" />
              <span class="remove-btn" title="删除" @click.stop="removeImage">×</span>
            </div>
          </div>
          <p class="upload-tip">建议比例16:9，小于5M的JPG、PNG格式图片</p>
        </div>
      </el-form-item>

      <el-form-item class="form-actions">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="info" :loading="submitting" @click="handleSaveDraft">保存草稿箱</el-button>
        <el-button type="success" :loading="submitting" @click="handleSubmit">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import type { FormRules, UploadRequestOptions } from 'element-plus';
import { ElForm, ElMessage } from 'element-plus';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { useRoute } from 'vue-router';
import { editCarouselBanner, getCarouselBannerDetails } from '@/api/supervision/carouselBanner';
import { getDicts } from '@/api/system/dict/data';
import request from '@/utils/request';

const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const formRef = ref<InstanceType<typeof ElForm>>();
const quillEditorRef = ref<InstanceType<typeof QuillEditor>>();
const pageLoading = ref(true);
const submitting = ref(false);
const recordId = ref('');

const platformOptions = ref<{ label: string; value: number }[]>([]);
const carouselPositionOptions = Array.from({ length: 5 }, (_, index) => ({
  label: `橱窗${index + 1}`,
  value: index + 1
}));
const displayDaysOptions = [
  { label: '1天', value: 1 },
  { label: '3天', value: 3 },
  { label: '5天', value: 5 },
  { label: '7天', value: 7 },
  { label: '15天', value: 15 },
  { label: '30天', value: 30 },
  { label: '永久', value: 0 }
];
const typeOptions = [
  { label: '富文本', value: 0 },
  { label: '外部链接', value: 1 }
];

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean']
];

const form = reactive({
  title: '',
  targetPlatform: undefined as number | undefined,
  carouselPosition: undefined as number | undefined,
  type: undefined as number | undefined,
  displayDays: undefined as number | undefined,
  linkUrl: '',
  content: '',
  imageUrl: '',
  status: 2
});

const rules: FormRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  targetPlatform: [{ required: true, message: '请选择内容发布在', trigger: 'change' }],
  carouselPosition: [{ required: true, message: '请选择橱窗', trigger: 'change' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  displayDays: [{ required: true, message: '请选择显示天数', trigger: 'change' }],
  linkUrl: [{ required: true, message: '请输入跳转链接', trigger: 'blur' }],
  content: [{ required: true, message: '请输入富文本内容', trigger: 'blur' }],
  imageUrl: [{ required: true, message: '请上传轮播图', trigger: 'change' }]
};

const handleTypeChange = () => {
  form.linkUrl = '';
  form.content = '';
  formRef.value?.validateField('linkUrl');
  formRef.value?.validateField('content');
};

const beforeImageUpload = (file: File) => {
  const isImage = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isImage) {
    ElMessage.error('仅支持 JPG、PNG 格式图片');
    return false;
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB');
    return false;
  }
  return true;
};

const handleImageUpload = async (options: UploadRequestOptions) => {
  const formData = new FormData();
  formData.append('file', options.file);

  try {
    const res: any = await request({
      url: '/app-enf/common/file/upload',
      method: 'post',
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data' }
    });

    if (res.code !== 200 || !res.data) {
      throw new Error(res.msg || '上传失败');
    }

    form.imageUrl = res.data;
    formRef.value?.validateField('imageUrl');
    options.onSuccess?.(res);
  } catch (error) {
    console.error('轮播图上传失败:', error);
    ElMessage.error('轮播图上传失败，请重试');
    options.onError?.(error as any);
  }
};

const removeImage = () => {
  form.imageUrl = '';
  formRef.value?.validateField('imageUrl');
};

const handleCancel = () => {
  const targetPath = route.query.from === 'draft' 
    ? '/supervision/carouselBanner/draft' 
    : '/general-manage/supervision-carouselBanner';
  proxy?.$tab.closeOpenPage({ path: targetPath });
};

const submitForm = async (status: number, successMessage: string) => {
  if (!formRef.value) return;
  const isValid = await formRef.value.validate().catch(() => false);
  if (!isValid) return;

  if (form.type === 0 && quillEditorRef.value) {
    form.content = quillEditorRef.value.getHTML?.() || form.content;
  }

  submitting.value = true;
  try {
    const res: any = await editCarouselBanner({
      id: recordId.value,
      title: form.title,
      targetPlatform: form.targetPlatform,
      carouselPosition: form.carouselPosition,
      type: form.type,
      displayDays: form.displayDays,
      linkUrl: form.type === 1 ? form.linkUrl : undefined,
      content: form.type === 0 ? form.content : undefined,
      imageUrl: form.imageUrl,
      // status,
      // isDelete: status === 2 ? 0 : 1
    });
    if (res.code === 200) {
      ElMessage.success(successMessage);
      proxy?.$tab.closePage();
    } else {
      ElMessage.error(res.msg || '操作失败');
    }
  } catch (error) {
    console.error('提交失败:', error);
    ElMessage.error('操作失败，请重试');
  } finally {
    submitting.value = false;
  }
};

const handleSaveDraft = () => {
  submitForm(1, '已保存到草稿箱');
};

const handleSubmit = () => {
  submitForm(2, '发布成功');
};

const loadDetail = async () => {
  const id = route.params.id as string;
  if (!id) {
    ElMessage.error('缺少记录ID');
    proxy?.$tab.closePage();
    return;
  }

  recordId.value = id;
  try {
    const res: any = await getCarouselBannerDetails(id);
    if (res.code !== 200 || !res.data) {
      ElMessage.error(res.msg || '加载详情失败');
      proxy?.$tab.closePage();
      return;
    }

    const data = res.data;
    form.title = data.title || '';
    form.targetPlatform = data.targetPlatform ?? undefined;
    form.carouselPosition = data.carouselPosition ?? undefined;
    form.type = data.type ?? undefined;
    form.displayDays = data.displayDays ?? undefined;
    form.linkUrl = data.linkUrl || '';
    form.content = data.content || '';
    form.imageUrl = data.imageUrl || '';
    form.status = data.status ?? 2;
  } catch (error) {
    console.error('加载详情失败:', error);
    ElMessage.error('加载详情失败');
    proxy?.$tab.closePage();
  } finally {
    pageLoading.value = false;
  }
};

const loadDictOptions = async () => {
  try {
    const platformRes = await getDicts('web_publishing_platform');
    const platformDict = (platformRes.data || [])
      .map((item: any) => ({
        label: item.dictLabel,
        value: Number(item.dictValue)
      }))
      .filter((item) => !Number.isNaN(item.value) && item.value !== 1);

    platformOptions.value = platformDict.length > 0 ? platformDict : [
      { label: '公众端', value: 0 },
      { label: '执法端', value: 2 },
      { label: '企业端', value: 3 }
    ];
  } catch (error) {
    console.error('加载字典失败:', error);
    platformOptions.value = [
      { label: '公众端', value: 0 },
      { label: '执法端', value: 2 },
      { label: '企业端', value: 3 }
    ];
  }
};

onMounted(async () => {
  await loadDictOptions();
  await loadDetail();
});
</script>

<style scoped>
.carousel-edit-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.form-container {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-input,
.form-select {
  width: 100%;
  max-width: 500px;
}

.editor-wrapper {
  width: 100%;
  max-width: 900px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.quill-editor {
  height: 500px;
}

:deep(.ql-container) {
  min-height: 500px;
  height: 100%;
}

:deep(.ql-editor) {
  min-height: 450px;
}

.upload-area {
  width: 100%;
  max-width: 620px;
}

.upload-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.banner-uploader :deep(.el-upload) {
  display: block;
}

.upload-box {
  width: 120px;
  height: 120px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-box:hover {
  border-color: #409eff;
  background: #f0f5ff;
}

.upload-icon {
  font-size: 28px;
  line-height: 1;
  color: #909399;
}

.upload-text {
  margin-top: 8px;
  color: #909399;
  font-size: 14px;
}

.preview-image {
  position: relative;
  width: 213px;
  height: 120px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}

.preview-image img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

.remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.upload-tip {
  margin: 10px 0 0;
  font-size: 12px;
  color: #909399;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  white-space: nowrap;
}
</style>