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 ref="formRef" :model="form" :rules="rules" label-width="100px" 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="publishDeptIds">
        <el-select
          v-model="form.publishDeptIds"
          multiple
          filterable
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择发布部门"
          class="form-select"
        >
          <el-option
            v-for="item in deptOptions"
            :key="item.deptId"
            :label="item.deptName"
            :value="String(item.deptId)"
          />
        </el-select>
      </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="contentType">
        <el-select v-model="form.contentType" placeholder="请选择" class="form-select" clearable>
          <el-option v-for="item in contentTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item 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="附件:">
        <div class="upload-area">
          <el-upload
            drag
            multiple
            :http-request="handleFileUpload"
            :show-file-list="true"
            :file-list="uploadFileList"
            :on-remove="handleFileRemove"
            accept=".pdf,.doc,.docx"
          >
            <div class="upload-box">
              <div class="upload-icon">📁</div>
              <p>点击或将文件拖拽到这里上传</p>
              <p class="upload-tip">支持扩展名称：.pdf .word；文件大小：10MB以内</p>
            </div>
          </el-upload>
        </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>

    <MobilePreview
      v-model:visible="previewVisible"
      :title="form.title"
      :dept-names="selectedDeptNames"
      :content-type-label="selectedContentTypeLabel"
      :content="previewContentHtml"
      :attachments="previewAttachments"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import type { UploadFile, UploadRequestOptions, UploadUserFile } from 'element-plus';
import { ElMessage, ElForm, FormRules } from 'element-plus';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { useRoute } from 'vue-router';
import {
  addEducationServices,
  listPublishDeptOptions,
  type EducationServicesForm,
  type PublishDeptOption
} from '@/api/supervision/educationServices';
import { getDicts } from '@/api/system/dict/data';
import { useUserStore } from '@/store/modules/user';
import request from '@/utils/request';
import MobilePreview from './components/MobilePreview.vue';

interface AttachmentItem {
  fileName: string;
  uploadPath: string;
  uploadPersonId: string;
  uploadPersonName: string;
}

const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userStore = useUserStore();
const formRef = ref<InstanceType<typeof ElForm>>();
const quillEditorRef = ref<InstanceType<typeof QuillEditor>>();
const previewVisible = ref(false);
const previewContentHtml = ref('');
const uploadFileList = ref<UploadUserFile[]>([]);
const attachmentList = ref<AttachmentItem[]>([]);
const platformOptions = ref<{ label: string; value: number }[]>([
  { label: '企业端', value: 3 },
  { label: '执法端', value: 2 },
  { label: '公众端', value: 0 }
]);
const contentTypeOptions = ref<{ label: string; value: number }[]>([]);
const deptOptions = ref<PublishDeptOption[]>([]);

const rules: FormRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  publishDeptIds: [{ required: true, message: '请选择发布部门', trigger: 'change', type: 'array', min: 1 }],
  targetPlatform: [{ 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' }],
  [{ 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: '',
  publishDeptIds: [] as string[],
  targetPlatform: undefined as number | undefined,
  contentType: undefined as number | undefined,
  content: ''
});

const selectedDeptNames = computed(() => {
  return deptOptions.value
    .filter((item) => form.publishDeptIds.includes(String(item.deptId)))
    .map((item) => item.deptName)
    .join(',');
});

const selectedContentTypeLabel = computed(() => {
  const item = contentTypeOptions.value.find((option) => option.value === form.contentType);
  return item?.label || '';
});

const previewAttachments = computed(() => {
  return attachmentList.value.map((item) => ({ fileName: item.fileName }));
});

const buildPayload = (status: number): EducationServicesForm => ({
  title: form.title,
  publishDeptIds: form.publishDeptIds.join(','),
  targetPlatform: form.targetPlatform,
  contentType: form.contentType,
  content: form.content,
  sourceType: 1,
  status,
  fileList: attachmentList.value
});

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

  try {
    const res: any = await addEducationServices(buildPayload(status));
    if (res.code === 200) {
      ElMessage.success(successMessage);
      const targetPath = route.query.from === 'draft' 
        ? '/supervision/educationServices/draft' 
        : '/general-manage/enforcementcode-educationServices';
      proxy?.$tab.closeOpenPage({ path: targetPath });
    } else {
      ElMessage.error(res.msg || '操作失败');
    }
  } catch (error) {
    console.error('提交失败:', error);
    ElMessage.error('操作失败，请重试');
  }
};

const getEditorHtml = () => {
  const html = quillEditorRef.value?.getHTML?.();
  if (html) {
    form.content = html;
    return html;
  }
  return form.content;
};

const isEmptyEditorContent = (html: string) => {
  return !html
    .replace(/<[^>]+>/g, '')
    .replace(/&nbsp;/g, ' ')
    .trim();
};

const handlePreview = () => {
  const html = getEditorHtml();
  if (!form.title && isEmptyEditorContent(html)) {
    ElMessage.warning('请先填写标题或服务信息');
    return;
  }
  previewContentHtml.value = html;
  previewVisible.value = true;
};

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

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

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

const handleFileUpload = 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 || '上传失败');
    }

    attachmentList.value.push({
      fileName: options.file.name,
      uploadPath: res.data,
      uploadPersonId: String(userStore.userId || ''),
      uploadPersonName: userStore.nickname || ''
    });
    uploadFileList.value.push({
      name: options.file.name,
      url: res.data,
      uid: options.file.uid
    });
    options.onSuccess?.(res);
  } catch (error) {
    console.error('附件上传失败:', error);
    ElMessage.error('附件上传失败，请重试');
    options.onError?.(error as any);
  }
};

const handleFileRemove = (file: UploadFile) => {
  const index = uploadFileList.value.findIndex((item) => item.uid === file.uid);
  if (index > -1) {
    uploadFileList.value.splice(index, 1);
    attachmentList.value.splice(index, 1);
  }
};

const loadDeptOptions = async () => {
  try {
    const res: any = await listPublishDeptOptions();
    deptOptions.value = res.data || [];
  } catch (error) {
    console.error('加载发布部门失败:', error);
  }
};

const loadDictOptions = async () => {
  try {
    const [contentRes, platformRes] = await Promise.all([
      getDicts('web_content_classification'),
      getDicts('web_publishing_platform')
    ]);

    contentTypeOptions.value = (contentRes.data || [])
      .map((item: any) => ({
        label: item.dictLabel,
        value: Number(item.dictValue)
      }))
      .filter((item) => !Number.isNaN(item.value));

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

    if (platformDict.length > 0) {
      platformOptions.value = platformDict;
      if (!platformOptions.value.some((item) => item.value === 0)) {
        platformOptions.value.push({ label: '公众端', value: 0 });
      }
    }
  } catch (error) {
    console.error('加载字典失败:', error);
  }
};

onMounted(() => {
  loadDeptOptions();
  loadDictOptions();
});
</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,
.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: 500px;
}

:deep(.el-upload-dragger) {
  padding: 0;
  border: none;
  background: transparent;
}

.upload-box {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  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;
}
</style>