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="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 label="链接:" prop="linkUrl">
        <el-input v-model="form.linkUrl" placeholder="请输入跳转链接" class="form-input" />
      </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="primary" :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 { 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 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 form = reactive({
  title: '',
  targetPlatform: undefined as number | undefined,
  carouselPosition: undefined as number | undefined,
  displayDays: undefined as number | undefined,
  linkUrl: '',
  imageUrl: '',
  status: 2,
  type: 1
});

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

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 = () => {
  proxy?.$tab.closePage();
};

const handleSubmit = async () => {
  if (!formRef.value) return;
  const isValid = await formRef.value.validate().catch(() => false);
  if (!isValid) return;

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

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.displayDays = data.displayDays ?? undefined;
    form.linkUrl = data.linkUrl || '';
    form.imageUrl = data.imageUrl || '';
    form.status = data.status ?? 2;
    form.type = data.type ?? 1;
  } 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;
}

.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>