|
|
@@ -0,0 +1,253 @@
|
|
|
+<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>
|
