Explorar o código

通知公告编辑新增拆分

songxy hai 1 ano
pai
achega
040a272eb7

+ 2 - 2
client/.env.dev

@@ -5,8 +5,8 @@ VITE_DEV=false
 
 # 请求路径
 # VITE_BASE_URL='http://10.10.9.113:48080'
-VITE_BASE_URL='http://10.10.10.7:18080'
-# VITE_BASE_URL='http://oa.zjugis.com:28080'
+# VITE_BASE_URL='http://10.10.10.7:18080'
+VITE_BASE_URL='http://oa.zjugis.com:28080'
 
 # VITE_BASE_URL='http://10.10.9.168:48080'
 

+ 4 - 20
client/src/router/modules/remaining.ts

@@ -210,16 +210,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'noticeAdd',
-        component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/addoreditor.vue'),
-        name: 'noticeAdd',
+        component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/add.vue'),
+        name: 'NoticeAdd',
         meta: {
           title: '通知公告新增'
         }
       },
       {
         path: 'noticeEditor',
-        component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/addoreditor.vue'),
-        name: 'noticeEditor',
+        component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/editor.vue'),
+        name: 'NoticeEditor',
         meta: {
           title: '通知公告编辑',
           keepAlive: false
@@ -233,22 +233,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '通知公告详情'
         }
       },
-      {
-        path: 'learnCenterAdd',
-        component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/addoreditor.vue'),
-        name: 'learnCenterAdd',
-        meta: {
-          title: '学习中心新增'
-        }
-      },
-      {
-        path: 'learnCenterEditor',
-        component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/addoreditor.vue'),
-        name: 'learnCenterEditor',
-        meta: {
-          title: '学习中心编辑'
-        }
-      },
       {
         path: 'learnCenterDetail',
         component: () => import('@/views/OaSystem/officeCenter/noticeAndLearn/detail.vue'),

+ 169 - 0
client/src/views/OaSystem/officeCenter/noticeAndLearn/add.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="newsSettingBox">
+    <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px">
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入标题" />
+      </el-form-item>
+      <el-form-item label="附件">
+        <div class="uploadFileBox">
+          <span>
+            <el-button type="primary" @click="uploadHandle">上传</el-button>
+            <input type="file" style="display: none" ref="fileRef" @change="fileChangeHandle" />
+          </span>
+          <ul class="prviewFile">
+            <li v-for="(item, index) in fileUrls" :key="index">
+              <span>
+                <a href="javascript:void(0);" @click="downloadFile(item['url'])">{{
+                  item['name']
+                }}</a>
+              </span>
+              <el-button
+                type="text"
+                @click="
+                  deleteFile(item['id'], () => {
+                    ElMessage.success('文件删除成功!')
+                  })
+                "
+                >删除</el-button
+              >
+            </li>
+          </ul>
+        </div>
+      </el-form-item>
+      <el-form-item label="内容">
+        <Tinymce v-model="formData.content" width="100%" height="800px" />
+      </el-form-item>
+    </el-form>
+    <div class="btnGroup" style="text-align: right">
+      <span>
+        <el-button type="primary" @click="onSubmit(ruleFormRef)">发布</el-button>
+      </span>
+      <el-button @click="router.back()">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { ElMessage, FormRules, FormInstance } from 'element-plus'
+import request from '@/config/axios'
+import router from '@/router'
+import { useFiles } from './mixins.ts'
+
+const { fileUrls, downloadFile, uploadFile, deleteFile } = useFiles(request)
+
+defineOptions({
+  name: 'NoticeAdd'
+})
+const route = useRoute()
+const initFormData: any = {
+  id: null,
+  title: '',
+  type: route.name.startsWith('notice') ? 1 : 2,
+  studyType: null,
+  files: '',
+  userId: '',
+  nickname: '',
+  content: ''
+}
+const formData = ref(initFormData)
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<
+  FormRules<{
+    title: string
+    content: string
+  }>
+>({
+  title: {
+    required: true,
+    message: '标题不能为空! ',
+    trigger: 'change'
+  },
+  content: {
+    required: true,
+    message: '内容不能为空! ',
+    trigger: 'change'
+  }
+})
+function onSubmit(formEl: FormInstance | undefined, num?: number): void {
+  if (!formEl) return
+  formEl.validate((valid, fields: any) => {
+    if (valid) {
+      let urlApi: string = '/adm/noticeAndLearn/add'
+      const sendData = {
+        ...formData.value
+      }
+      if (fileUrls.value.length > 0) {
+        sendData.files = fileUrls.value.map((item) => item.id).join(',')
+      }
+      request.post({ url: urlApi, data: sendData }).then((result) => {
+        if (result) {
+          ElMessage({
+            showClose: true,
+            message: '保存成功.',
+            type: 'success'
+          })
+          if (num !== 0) {
+            const timer = setTimeout(() => {
+              clearTimeout(timer)
+              router.back()
+            })
+          }
+        }
+      })
+    } else {
+      const keys = Object.keys(fields)
+      ElMessage.error(fields[keys[0]][0]['message'])
+    }
+  })
+}
+const fileRef = ref()
+function uploadHandle() {
+  fileRef.value.click()
+}
+function fileChangeHandle(evt) {
+  const target = evt.target
+  uploadFile(target.files[0])
+}
+</script>
+
+<style lang="scss" scoped>
+.newsSettingBox {
+  margin-top: 20px;
+  height: calc(100% - 20px);
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 20px;
+  overflow-y: auto;
+  .prviewFile {
+    padding-left: 20px;
+    > li {
+      margin-bottom: 10px;
+      > span {
+        display: inline-block;
+        margin-right: 15px;
+      }
+    }
+  }
+  .switchGroup {
+    display: flex;
+  }
+  .btnGroup {
+    > span {
+      margin-right: 20px;
+    }
+  }
+  .uploadFileBox {
+    position: relative;
+    flex: 1;
+    display: flex;
+  }
+  .preImg {
+    margin-bottom: 20px;
+    margin-left: 120px;
+    > img {
+      width: 200px;
+    }
+  }
+}
+</style>

+ 5 - 16
client/src/views/OaSystem/officeCenter/noticeAndLearn/addoreditor.vue → client/src/views/OaSystem/officeCenter/noticeAndLearn/editor.vue

@@ -36,9 +36,7 @@
     </el-form>
     <div class="btnGroup" style="text-align: right">
       <span>
-        <el-button type="primary" @click="onSubmit(ruleFormRef)">{{
-          eTypeRef === 'add' ? '发布' : '保存'
-        }}</el-button>
+        <el-button type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
       </span>
       <el-button @click="router.back()">取消</el-button>
     </div>
@@ -54,6 +52,9 @@ import { useFiles } from './mixins.ts'
 
 const { fileUrls, downloadFile, queryFiles, uploadFile, deleteFile } = useFiles(request)
 
+defineOptions({
+  name: 'NoticeEditor'
+})
 const route = useRoute()
 const initFormData: any = {
   id: null,
@@ -98,26 +99,17 @@ const rules = reactive<
     trigger: 'change'
   }
 })
-const eTypeRef = ref<string>('add')
-function restForm() {
-  formData.value = initFormData
-}
 function onSubmit(formEl: FormInstance | undefined, num?: number): void {
   if (!formEl) return
   formEl.validate((valid, fields: any) => {
     if (valid) {
-      let urlApi: string = ''
+      let urlApi: string = '/adm/noticeAndLearn/update'
       const sendData = {
         ...formData.value
       }
       if (fileUrls.value.length > 0) {
         sendData.files = fileUrls.value.map((item) => item.id).join(',')
       }
-      if (eTypeRef.value === 'add') {
-        urlApi = '/adm/noticeAndLearn/add'
-      } else {
-        urlApi = '/adm/noticeAndLearn/update'
-      }
       request.post({ url: urlApi, data: sendData }).then((result) => {
         if (result) {
           ElMessage({
@@ -149,10 +141,7 @@ function fileChangeHandle(evt) {
 }
 const query = route.query
 if (query.id) {
-  eTypeRef.value = 'edit'
   queryDetailById(query.id)
-} else {
-  restForm()
 }
 </script>