estate/src/views/system/NoticePc/addNoticePc.vue

<template>
  <div class="ResidentMainBox p-2 w-full">
    <PageHeader title="公告"></PageHeader>
    <div class="ResidentMainBody">
      <el-card>
        <template #header>
          <div class="title">基本信息</div>
        </template>
        <div class="addBuildingFormBody">
          <div class="formbox">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公告标题" prop="noticeTitle">
                    <el-input v-model.trim="form.noticeTitle" placeholder="请输入公告标题" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="作者" prop="author">
                    <el-input v-model.trim="form.author" placeholder="请输入作者" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公告紧急程度" prop="urgencyLevel">
                    <el-select v-model="form.urgencyLevel" clearable placeholder="请选择公告紧急程度">
                      <el-option v-for="dict in com_noticepc_level" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否发布" prop="publishStatus">
                    <el-radio-group v-model="form.publishStatus">
                      <el-radio v-for="dict in com_publish_status" :key="dict.value" :value="Number(dict.value)">{{
                        dict.value === '0' ? dict.label : '发布'
                      }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="公告详情" prop="noticeContent">
                    <editor
                      @update:model-value="handleContent"
                      :model-value="form.noticeContent"
                      :height="500"
                      :min-height="300"
                      :read-only="false"
                      :file-size="5"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="handleBack">返回</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { addNotice, getNotice } from '@/api/system/NoticePc/index';
import { updateNotice } from '@/api/system/NoticePc';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_noticepc_level } = toRefs<any>(proxy?.useDict('com_noticepc_level'));
const { com_publish_status } = toRefs<any>(proxy?.useDict('com_publish_status'));

const route = useRoute();
const router = useRouter();
const formRef = ref();
const form = ref({
  'id': null,
  'author': '',
  'noticeTitle': '',
  'urgencyLevel': 0,
  'publishStatus': 1,
  'noticeContent': ''
});
const rules = {
  noticeTitle: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
  urgencyLevel: [{ required: true, message: '请选择紧急程度', trigger: 'blur' }],
  author: [{ required: true, message: '请输入作者名称', trigger: 'blur' }],
  noticeContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
};
const userid = ref();
// ! 富文本 =============================================================================================================
function handleContent(val: string) {
  form.value.noticeContent = val.trim();
}
// ! 富文本 =============================================================================================================

//  ! 投诉 ====================================================================================================
function init() {
  getNotice(userid.value).then((res) => {
    form.value = {
      ...form.value,
      ...res.data
    };
  });
}

if (route.query.id) {
  userid.value = route.query.id;
  init();
}

// 提交
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (userid.value) {
        updateNotice(form.value).then(() => {
          ElMessage.success('编辑成功');
          handleBack();
        });
      } else {
        addNotice(form.value).then(() => {
          ElMessage.success('添加成功');
          handleBack();
        });
      }
    }
  });
};

//  返回
function handleBack() {
  router.push({
    path: '/repair/noticepc'
  });
}
</script>

<style scoped lang="scss">
.ResidentMainBox {
  display: flex;
  flex-direction: column;
  .ResidentMainBody {
    margin-top: 20px;
    flex: 1;

    .formbox {
      width: 1000px;
      margin: 0 auto;
    }
    &:deep(div.el-step__head.is-process) {
      & > div.el-step__line {
        width: 0;
        border: 1px dashed gray;
        background: transparent;
      }
    }
    &:deep(.el-step.is-vertical .el-step__line) {
      top: 20px;
    }
    &:deep(div.el-step__head.is-finish) {
      & > div.el-step__line {
        width: 0;
        border: 1px solid var(--el-color-primary);
        background: transparent;
      }
    }
  }
}
</style>