EnforcementCode-2.0/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/educationServices/repost.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="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="forwardUrl">
        <el-input v-model="form.forwardUrl" placeholder="请输入转载链接" class="form-input" />
      </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 { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import { ElMessage, ElForm, FormRules } from 'element-plus';
import { useRoute } from 'vue-router';
import {
  addEducationServices,
  listPublishDeptOptions,
  type PublishDeptOption
} from '@/api/supervision/educationServices';
import { getDicts } from '@/api/system/dict/data';

const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const formRef = ref<InstanceType<typeof ElForm>>();
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 }],
  forwardUrl: [{ required: true, message: '请输入转载链接', trigger: 'blur' }]
};

const form = reactive({
  title: '',
  publishDeptIds: [] as string[],
  contentType: undefined as number | undefined,
  forwardUrl: ''
});

const buildPayload = (status: number) => ({
  title: form.title,
  publishDeptIds: form.publishDeptIds.join(','),
  contentType: form.contentType,
  forwardUrl: form.forwardUrl,
  sourceType: 2,
  targetPlatform: 3,
  status
});

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 handlePreview = () => {
  if (!form.title && !form.forwardUrl) {
    ElMessage.warning('请先填写标题或转载链接');
    return;
  }
  window.open(form.forwardUrl || 'about:blank', '_blank');
};

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, '发布成功');
};

onMounted(async () => {
  try {
    const [dictRes, deptRes]: any[] = await Promise.all([
      getDicts('web_content_classification'),
      listPublishDeptOptions()
    ]);
    contentTypeOptions.value = (dictRes.data || []).map((item: any) => ({
      label: item.dictLabel,
      value: Number(item.dictValue)
    }));
    deptOptions.value = deptRes.data || [];
  } catch (error) {
    console.error('加载页面数据失败:', error);
  }
});
</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;
}

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

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