Merge remote-tracking branch 'origin/master'

client/src/views/OaSystem/officeCenter/tzggPage/editor.vue

@@ -0,0 +1,326 @@
+<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="简介" prop="description">
+        <el-input
+          type="textarea"
+          :rows="4"
+          v-model="formData.description"
+          placeholder="请输入文章简介"
+        />
+      </el-form-item>
+      <el-form-item label="图片" prop="imgurl">
+        <div class="uploadFileBox">
+          <el-input
+            v-model="formData.imgurl"
+            placeholder="请上传图片，上传图片小于1M，建议尺寸（X）"
+          />
+          <span>
+            <el-button type="primary" @click="uploadHandle">开始上传</el-button>
+            <input type="file" style="display: none" ref="fileRef" @change="fileChangeHandle" />
+          </span>
+        </div>
+      </el-form-item>
+      <div class="preImg" v-if="coverImg">
+        <img :src="coverImg" />
+      </div>
+      <div class="switchGroup">
+        <el-form-item label="开关">
+          <el-switch
+            :active-value="1"
+            :inactive-value="0"
+            active-text="是"
+            inline-prompt
+            inactive-text="否"
+            v-model="formData.status"
+          />
+        </el-form-item>
+        <el-form-item label="是否推荐">
+          <el-switch
+            active-text="是"
+            :active-value="1"
+            :inactive-value="0"
+            inline-prompt
+            inactive-text="否"
+            v-model="formData.isTop"
+          />
+        </el-form-item>
+        <el-form-item label="是否同步官网">
+          <el-switch
+            active-text="是"
+            :active-value="1"
+            :inactive-value="0"
+            inline-prompt
+            inactive-text="否"
+            :before-change="beforeChangeHandle"
+            v-model="formData.isSyncSite"
+          />
+        </el-form-item>
+      </div>
+      <el-form-item label="内容">
+        <Tinymce v-model="formData.content" width="100%" height="800px" />
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="seo页面标题">
+            <el-input v-model="formData.seoTitle" placeholder="" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="seo页面关键字">
+            <el-input v-model="formData.seoKeywords" placeholder="" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="seo页面简介">
+        <el-input v-model="formData.seoDesc" placeholder="" />
+      </el-form-item>
+    </el-form>
+    <div class="btnGroup" style="text-align: right">
+      <span v-if="formData.isPub === 0">
+        <el-button type="primary" @click="onSubmit(ruleFormRef, 1)">立即发布</el-button>
+        <el-button type="primary" @click="onSubmit(ruleFormRef, 0)">暂存</el-button>
+      </span>
+      <span v-else>
+        <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 axios from 'axios'
+import moment from 'moment'
+import { Base64 } from 'js-base64'
+import request from '@/config/axios'
+import { ElMessage, ElMessageBox, Action, FormRules, FormInstance } from 'element-plus'
+import router from '@/router'
+
+const initFormData: any = {
+  id: null,
+  sid: 1,
+  title: '',
+  description: '',
+  imgurl: '',
+  happenTime: '',
+  adddate: '',
+  sort: 0,
+  status: 1, //0 不显示 1 显示
+  isTop: 0,
+  isSyncSite: 1,
+  content: '',
+  seoTitle: '',
+  seoKeywords: '',
+  seoDesc: '',
+  isPub: 0
+}
+const eTypeRef = ref<string>('add')
+const formData = ref(initFormData)
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<
+  FormRules<{
+    title: string
+    description: string
+    imgurl: string
+  }>
+>({
+  title: {
+    required: true,
+    message: '标题不能为空! ',
+    trigger: 'change'
+  },
+  description: {
+    required: true,
+    message: '简介不能为空! ',
+    trigger: 'change'
+  },
+  imgurl: {
+    required: true,
+    message: '图片不能为空! ',
+    trigger: 'change'
+  }
+})
+//同步官网Switch组件
+function beforeChangeHandle(): boolean | Promise<boolean> {
+  const val: number = formData.value.isSyncSite
+  if (val === 0) return true
+  return new Promise((resolve, reject) => {
+    ElMessageBox.alert('确定取消同步到公司官网？', '', {
+      callback: (action: Action) => {
+        if (action === 'confirm') {
+          resolve(true)
+        } else {
+          reject(false)
+        }
+      }
+    })
+  })
+}
+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 = ''
+
+      const sendData = {
+        ...formData.value
+      }
+      if (eTypeRef.value === 'add') {
+        urlApi = '/adm/article/add'
+      } else {
+        urlApi = '/adm/article/update'
+      }
+
+      if (formData.value['isPub'] === 0 && num === 1) {
+        sendData['adddate'] = moment().format('YYYY-MM-DD HH:mm:ss')
+        sendData['isPub'] = 1
+      }
+      request.post({ url: urlApi, data: sendData }).then((result) => {
+        if (result) {
+          ElMessage({
+            showClose: true,
+            message: '保存成功.',
+            type: 'success'
+          })
+          if (
+            formData.value['isPub'] === 0 &&
+            sendData['isPub'] === 1 &&
+            formData.value.isSyncSite === 1
+          ) {
+            syncSiteAjax(formData.value)
+          }
+          if (num !== 0) {
+            router.back()
+          }
+        }
+      })
+    } else {
+      const keys = Object.keys(fields)
+      ElMessage.error(fields[keys[0]][0]['message'])
+    }
+  })
+}
+//同步官网接口——需要代理转发
+const syncSiteAjax = async (data): Promise<void> => {
+  const header = {
+    token: 'L7grJk5JnyWhsnX0D5OZ8sero5PiZkk7'
+  }
+  const body = {
+    sid: data.sid,
+    title: data.title,
+    description: data.description,
+    imgurl: data.imgurl,
+    adddate: data.adddate,
+    status: data.status,
+    content: data.content,
+    seo_title: data.seoTitle,
+    seo_keywords: data.seoKeywords,
+    seo_desc: data.seoDesc
+  }
+  const sendData = {
+    _encrypted_data: Base64.encode(JSON.stringify(body))
+  }
+  const result = await axios({
+    url: '/widewebApi/api/Article/pushNews',
+    method: 'POST',
+    data: sendData,
+    headers: header
+  })
+  if (result && result['data']) {
+    ElMessage({
+      showClose: true,
+      message: '新闻同步官网成功.',
+      type: 'success'
+    })
+  }
+}
+//文件上传
+const fileRef = ref()
+function uploadHandle() {
+  fileRef.value.click()
+}
+function fileChangeHandle(evt) {
+  const target = evt.target
+  uploadFileAjax(target.files[0])
+}
+const coverImg = ref<string>()
+async function uploadFileAjax(file: any): Promise<void> {
+  const url = import.meta.env.VITE_UPLOAD_URL
+  const sendFData = new FormData()
+  const date = new Date()
+  const uuid: string =
+    Math.random().toString().replace('.', '') +
+    Math.random().toString().replace('.', '') +
+    date.getTime()
+  sendFData.append('path', uuid)
+  sendFData.append('file', file)
+  const result = await request.upload({ url: url, data: sendFData })
+  formData.value.imgurl = coverImg.value = result['data']
+}
+//获取详情页面
+async function queryDetailById(idStr: any): Promise<void> {
+  const urlApi = `/adm/article/query/detailById`
+  const params = {
+    id: idStr
+  }
+  const result = await request.get({ url: urlApi, params })
+  if (result) {
+    formData.value = result
+    coverImg.value = result['imgurl']
+  }
+}
+const route = useRoute()
+const query = route.query
+if (query.id) {
+  eTypeRef.value = 'edit'
+  queryDetailById(query.id)
+} else {
+  restForm()
+}
+</script>
+
+<style lang="scss" scoped>
+.newsSettingBox {
+  margin-top: 20px;
+  height: calc(100% - 20px);
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 20px;
+  overflow-y: auto;
+  .switchGroup {
+    display: flex;
+  }
+  .btnGroup {
+    > span {
+      margin-right: 20px;
+    }
+  }
+  .uploadFileBox {
+    position: relative;
+    flex: 1;
+    display: flex;
+    > span {
+      display: block;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+    }
+  }
+  .preImg {
+    margin-bottom: 20px;
+    margin-left: 120px;
+    > img {
+      width: 200px;
+    }
+  }
+}
+</style>