yoe-shop-web/src/views/enterprise/messageNotice/addNotice.vue

<template>
  <div class="message-notice-container">
    <div class="page-title">
      <i class="title-bar"></i>
      <span>{{ isEdit ? '编辑消息通知' : '新增消息通知' }}</span>
    </div>
    <div class="form-wrapper">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <Editor v-model="form.content" :height="400" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">生效</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="danger" @click="handleSave">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import Editor from '@/components/Editor/index.vue';
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getMessageInfo, addMessage, updateMessage } from '@/api/pc/enterprise';

const router = useRouter();
const route = useRoute();
const formRef = ref();

const form = reactive({
  title: '',
  content: '',
  status: '0'
});

const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
};

// 判断是否为编辑模式
const isEdit = ref(false);

onMounted(async () => {
  const id = route.query.id as any;
  if (id) {
    isEdit.value = true;
    try {
      const res = await getMessageInfo(id);
      if (res.code === 200 && res.data) {
        form.title = res.data.title;
        form.content = res.data.content;
        form.status = String(res.data.status);
      }
    } catch (error) {
      ElMessage.error('获取消息通知详情失败');
    }
  }
});

const handleCancel = () => {
  router.back();
};

const handleSave = async () => {
  const valid = await formRef.value?.validate();
  if (!valid) return;
  try {
    const data: any = {
      title: form.title,
      content: form.content,
      status: form.status
    };

    if (isEdit.value) {
      data.id = Number(route.query.id);
      await updateMessage(data);
      ElMessage.success('修改成功');
    } else {
      await addMessage(data);
      ElMessage.success('新增成功');
    }
    router.back();
  } catch (error) {
    ElMessage.error('操作失败');
  }
};
</script>

<style scoped lang="scss">
.message-notice-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
  flex: 1;
}
.page-title {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.title-bar {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #e60012;
  border-radius: 2px;
}
.form-wrapper {
  margin-top: 30px;
}
</style>