ezhizao_dms_vue/src/views/system/notification/form.vue

<template>
  <!-- 添加或修改项目信息对话框 -->
  <div class="el-drawer__wrapper">
    <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
      <div class="page-container form-container">
        <div class="form-btns-container">
          <span class="title-label"
            ><el-icon>
              <Document />
            </el-icon>
            项目信息</span
          >
          <el-button-group>
            <el-button
              v-if="editStatus"
              type="primary"
              size="small"
              icon="Finished"
              @click="submitForm"
              >保存</el-button
            >
            <el-button
              v-else
              type="warning"
              size="small"
              icon="Edit"
              @click="editStatus = true"
              >编辑</el-button
            >
            <el-button
              v-if="form.id && editStatus"
              type="info"
              size="small"
              icon="Close"
              @click="editStatus = false"
              >取消编辑</el-button
            >
            <el-button
              v-if="form.id"
              type="success"
              size="small"
              @click="getForm"
            >
              <i class="fa fa-refresh" aria-hidden="true" /> 刷新
            </el-button>
          </el-button-group>
          <div class="close-btn" @click="cancel">
            <i class="fa fa-times" aria-hidden="true" />
            <!-- <span>关闭</span> -->
          </div>
        </div>
        <div
          class="Y-scrollbar"
          style="
            position: absolute;
            top: 32px;
            bottom: 0;
            width: 100%;
            overflow: auto;
          "
        ></div>
        <el-form
          ref="notificationRef"
          class="master-container"
          :model="form"
          :rules="rules"
          label-width="120px"
        >
          <el-row :gutter="30">
            <el-col :span="6"
              ><el-form-item label="公告标题" prop="title">
                <el-input
                  v-if="editStatus"
                  v-model="form.title"
                  placeholder="请输入公告标题"
                />
                <span v-else>{{ form.title }}</span>
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-if="editStatus"
                  v-model="form.remark"
                  placeholder="请输入备注"
                />
                <span v-else>{{ form.remark }}</span>
              </el-form-item></el-col
            >
          </el-row>

          <el-form-item label="公告内容">
            <wangEditor
              class="WangEditor"
              @select="getRich"
              ref="childrenRef"
              :editValue="editValue"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import {
  getNotification,
  addNotification,
  updateNotification,
} from "@/api/business/notification";
import "@wangeditor/editor/dist/css/style.css";
import { onMounted, reactive, ref, watch, nextTick } from "vue";
import wangEditor from "./wangEditor";
const { proxy } = getCurrentInstance();
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const { getList } = toRefs(props);
/** 字典数组区 */
/** 表单抽屉 页变量 */
const title = ref("");
const loading = ref(false);
const multiple = ref(true);
const visible = ref(false);
const editStatus = ref(false);
const isFullscreen = ref(false);
const editorRef = ref(null);
const webHost = import.meta.env.VITE_APP_BASE_API;

const editValue = ref("");

watch(
  props,
  (newUser, oldUser) => {
    if (props.dataRow && props.dataRow.id) {
      // 富文本回显
      form.value.content = props.dataRow.content;
      editValue.value = form.value.content;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

const data = reactive({
  form: {},
  rules: {
    title: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
    type: [{ required: true, message: "公告类型不能为空", trigger: "change" }],
    content: [{ required: true, message: "公告内容不能为空", trigger: "blur" }],
    updateContent: [
      { required: true, message: "更新中公告内容不能为空", trigger: "blur" },
    ],
    status: [
      { required: true, message: "公告状态不能为空", trigger: "change" },
    ],
  },
});
const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset();
  visible.value = true;
  if (id) {
    getNotification(id).then((response) => {
      form.value = response.data;
      editStatus.value = false;
      title.value = "修改项目信息";
    });
  } else {
    editStatus.value = true;
    title.value = "添加项目信息";
  }
}
//当编辑器的内容更新时，获取该值
const getRich = function (value) {
  form.value.content = value;
};
/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    title: null,
    type: null,
    content: null,
    updateContent: null,
    status: null,
    createTime: null,
    creatorId: null,
    updateId: null,
    updateTime: null,
    remark: null,
    deleted: null,
    version: null,
  };
  proxy.resetForm("notificationRef");
}

/** 全屏缩放 */
function handleScreen() {
  const dom = document.querySelector(
    ".list-container > .el-drawer__wrapper > .el-overlay"
  );
  isFullscreen.value = !isFullscreen.value;
  dom.style.position = isFullscreen.value ? "fixed" : "absolute";
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["notificationRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != null) {
        updateNotification(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          getList.value();
        });
      } else {
        addNotification(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          getList.value();
        });
      }
    }
  });
}

/** 查询表单信息  */
function getForm() {
  loading.value = true;
  getNotification(form.value.id).then((response) => {
    loading.value = false;
    form.value = response.data;
  });
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>