EnforcementCode-2.0/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/educationServices/add.vue

<template>
  <div class="add-carousel-container">
    <div class="page-header">
      <h1>新增普法服务</h1>
    </div>

    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" 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="department">
        <el-input v-model="form.department" placeholder="请输入发布部门" class="form-input" />
      </el-form-item>

      <el-form-item label="发布部门:" prop="department2">
        <el-input v-model="form.department2" placeholder="请选择发布部门" class="form-input" />
        <span class="form-tip">注: 多部门用,分隔</span>
      </el-form-item>

      <el-form-item label="内容发布在:" prop="publishTo">
        <el-select v-model="form.publishTo" placeholder="请选择" class="form-select">
          <el-option label="企业端" value="enterprise" />
          <el-option label="执法端" value="law_enforcement" />
          <el-option label="公众端" value="public" />
        </el-select>
      </el-form-item>

      <el-form-item label="内容分类:" prop="category">
        <el-select v-model="form.category" placeholder="请选择" class="form-select">
          <el-option label="法律法规解读" value="law_解读" />
          <el-option label="典型案例警示" value="case_warning" />
          <el-option label="政策文件解读" value="policy_interpretation" />
          <el-option label="普法宣传" value="law_publicity" />
        </el-select>
      </el-form-item>

      <el-form-item label="内容分类:" prop="category2">
        <el-select v-model="form.category2" placeholder="请选择" class="form-select">
          <el-option label="法律法规解读" value="law_解读" />
          <el-option label="典型案例警示" value="case_warning" />
          <el-option label="政策文件解读" value="policy_interpretation" />
          <el-option label="普法宣传" value="law_publicity" />
        </el-select>
      </el-form-item>

      <el-form-item label="服务信息:" prop="content">
        <div class="editor-wrapper">
          <QuillEditor ref="quillEditor" v-model:content="form.content" content-type="html" :toolbar="toolbarOptions"
            theme="snow" class="quill-editor" placeholder="请输入服务信息" />
        </div>
      </el-form-item>

      <el-form-item label="附件:">
        <div class="upload-area">
          <div class="upload-box" @click="handleUpload">
            <div class="upload-icon">📁</div>
            <p>点击或将文件拖拽到这里上传</p>
            <p class="upload-tip">支持扩展名称：.pdf .word；文件大小：10MB以内</p>
          </div>
        </div>
      </el-form-item>

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

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage, ElForm, FormRules } from 'element-plus';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { useRouter } from 'vue-router';
import { addCarouselBanner } from '@/api/supervision/carouselBanner';

const router = useRouter();
const formRef = ref<InstanceType<typeof ElForm>>();
const quillEditor = ref();

const rules: FormRules = {
  title: [
    { required: true, message: '请输入标题', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请输入发布部门', trigger: 'blur' }
  ],
  department2: [
    { required: true, message: '请选择发布部门', trigger: 'blur' }
  ],
  publishTo: [
    { required: true, message: '请选择内容发布到', trigger: 'change' }
  ],
  category: [
    { required: true, message: '请选择内容分类', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入服务信息', trigger: 'blur' }
  ]
};

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

const form = reactive({
  title: '',
  department: '',
  department2: '',
  publishTo: '',
  category: '',
  category2: '',
  content: '',
  attachment: ''
});

const handlePreview = () => {
  ElMessage.info('预览功能开发中');
};

const handleCancel = () => {
  router.push('/supervision/carouselBanner');
};

const handleSaveDraft = () => {
  ElMessage.success('已保存到草稿箱');
};

const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    const isValid = await formRef.value.validate();
    if (!isValid) {
      return;
    }

    const res: any = await addCarouselBanner(form);
    if (res.code === 200) {
      ElMessage.success('发布成功');
      router.push('/supervision/carouselBanner');
    } else {
      ElMessage.error(res.msg || '发布失败');
    }
  } catch (error) {
    console.error('发布失败:', error);
    ElMessage.error('发布失败，请重试');
  }
};

const handleUpload = () => {
  ElMessage.info('文件上传功能开发中');
};
</script>

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

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

.page-header h1 {
  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 {
  width: 100%;
  max-width: 500px;
}

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

.form-tip {
  display: block;
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}

.editor-wrapper {
  width: 100%;
  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%;
}

.upload-box {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

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

.upload-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 16px;
}

.upload-box p {
  color: #606266;
  margin: 8px 0;
}

.upload-tip {
  font-size: 12px;
  color: #909399 !important;
}

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

:deep(.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label)::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>