|
@@ -1,11 +1,166 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from "vue";
|
|
|
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
|
|
+import { onBeforeUnmount, ref, shallowRef, nextTick } from "vue";
|
|
|
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
|
|
+import { ElForm } from "element-plus";
|
|
|
+
|
|
|
+const emit = defineEmits(["create", "update"]);
|
|
|
+
|
|
|
+defineProps<{
|
|
|
+ loading: boolean;
|
|
|
+}>();
|
|
|
+
|
|
|
+const mode = "default";
|
|
|
+const type = ref<any>("create");
|
|
|
const visible = ref(false);
|
|
|
+const editorRef = shallowRef();
|
|
|
+const formRef = ref<InstanceType<typeof ElForm>>();
|
|
|
+const id = ref("");
|
|
|
+
|
|
|
+const editorConfig = { placeholder: "请输入内容..." };
|
|
|
+const formData = ref({
|
|
|
+ module: "",
|
|
|
+ system: "",
|
|
|
+ sys_type: "",
|
|
|
+ version: "",
|
|
|
+ addtime: ""
|
|
|
+});
|
|
|
+
|
|
|
+const createRequiredRule = message => ({
|
|
|
+ message,
|
|
|
+ required: true,
|
|
|
+ trigger: "change"
|
|
|
+});
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ module: [createRequiredRule("标题不能为空")],
|
|
|
+ system: [createRequiredRule("内容不能为空")],
|
|
|
+ sys_type: [createRequiredRule("请选择一个类型")],
|
|
|
+ version: [createRequiredRule("版本号不能为空")],
|
|
|
+ time: [createRequiredRule("时间不能为空")]
|
|
|
+};
|
|
|
+
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ const editor = editorRef.value;
|
|
|
+ if (editor == null) return;
|
|
|
+ editor.destroy();
|
|
|
+});
|
|
|
+
|
|
|
+const handleCreated = editor => {
|
|
|
+ editorRef.value = editor;
|
|
|
+};
|
|
|
+
|
|
|
+function handleClose() {
|
|
|
+ formData.value = {
|
|
|
+ module: "",
|
|
|
+ system: "",
|
|
|
+ sys_type: "",
|
|
|
+ version: "",
|
|
|
+ addtime: ""
|
|
|
+ };
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ Object.keys(formData.value).forEach(key =>
|
|
|
+ formRef.value.clearValidate(key)
|
|
|
+ );
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleConfirm() {
|
|
|
+ formRef.value.validate(isValid => {
|
|
|
+ isValid &&
|
|
|
+ emit(type.value, {
|
|
|
+ ...formData.value,
|
|
|
+ ...(type.value === "update" ? { id: id.value } : {})
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
defineExpose({
|
|
|
- onDisplay: () => (visible.value = true)
|
|
|
+ onDisplay: (_data?: any) => {
|
|
|
+ visible.value = true;
|
|
|
+ type.value = _data ? "update" : "create";
|
|
|
+ const { module, system, sys_type, version, addtime, id: _id } = _data;
|
|
|
+ id.value = _id;
|
|
|
+ formData.value = {
|
|
|
+ module,
|
|
|
+ system,
|
|
|
+ sys_type,
|
|
|
+ version,
|
|
|
+ addtime
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onHidden: () => (visible.value = false)
|
|
|
});
|
|
|
</script>
|
|
|
<template>
|
|
|
- <ElDialog v-model="visible" />
|
|
|
+ <ElDialog
|
|
|
+ v-model="visible"
|
|
|
+ :title="type === 'create' ? '添加版本信息' : '修改版本信息'"
|
|
|
+ @close="handleClose"
|
|
|
+ width="1040px"
|
|
|
+ destroy-on-close
|
|
|
+ center
|
|
|
+ top="10vh"
|
|
|
+ >
|
|
|
+ <ElForm label-width="80px" :model="formData" :rules="rules" ref="formRef">
|
|
|
+ <ElRow :gutter="10">
|
|
|
+ <ElCol :span="12">
|
|
|
+ <ElFormItem label="类型" prop="sys_type">
|
|
|
+ <ElSelect style="width: 100%" v-model="formData.sys_type">
|
|
|
+ <ElOption value="MSG" label="维护公告" />
|
|
|
+ <ElOption value="VER" label="版本信息" />
|
|
|
+ </ElSelect>
|
|
|
+ </ElFormItem>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :span="12">
|
|
|
+ <ElFormItem label="版本号" prop="version">
|
|
|
+ <ElInput placeholder="版本号" v-model="formData.version" />
|
|
|
+ </ElFormItem>
|
|
|
+ </ElCol>
|
|
|
+ </ElRow>
|
|
|
+ <ElRow :gutter="10">
|
|
|
+ <ElCol :span="12">
|
|
|
+ <ElFormItem label="标题" prop="module">
|
|
|
+ <ElInput placeholder="标题" v-model="formData.module" />
|
|
|
+ </ElFormItem>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :span="12">
|
|
|
+ <ElFormItem label="时间">
|
|
|
+ <ElDatePicker
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ v-model="formData.addtime"
|
|
|
+ type="datetime"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="时间"
|
|
|
+ />
|
|
|
+ </ElFormItem>
|
|
|
+ </ElCol>
|
|
|
+ </ElRow>
|
|
|
+ <ElFormItem label="内容" prop="system">
|
|
|
+ <div style="border: 1px solid #ccc">
|
|
|
+ <Toolbar
|
|
|
+ style="border-bottom: 1px solid #ccc"
|
|
|
+ :editor="editorRef"
|
|
|
+ :mode="mode"
|
|
|
+ />
|
|
|
+ <Editor
|
|
|
+ style="height: 400px; overflow-y: hidden"
|
|
|
+ v-model="formData.system"
|
|
|
+ :defaultConfig="editorConfig"
|
|
|
+ :mode="mode"
|
|
|
+ @onCreated="handleCreated"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+
|
|
|
+ <ElFormItem>
|
|
|
+ <div class="flex w-full justify-end">
|
|
|
+ <ElButton type="primary" @click="handleConfirm" :loading="loading"
|
|
|
+ >保存</ElButton
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </ElFormItem>
|
|
|
+ </ElForm>
|
|
|
+ </ElDialog>
|
|
|
</template>
|