文章审批加保存

ebts-ui/package.json

@@ -39,6 +39,7 @@
     "@antv/g6": "^4.2.7",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
+    "ckeditor4-vue": "^1.4.0",
     "clipboard": "2.0.4",
     "codemirror": "^5.59.2",
     "core-js": "3.6.5",

ebts-ui/src/api/sist/article.js

@@ -50,6 +50,33 @@ export function addArticle(data) {
   })
 }
 
+// 审批系统文章
+export function approve(data) {
+  return request({
+    url: '/sist/article/approve',
+    method: 'post',
+    data: data
+  })
+}
+
+// 保存草稿
+export function drafts(data) {
+  return request({
+    url: '/sist/article/drafts',
+    method: 'post',
+    data: data
+  })
+}
+
+// 驳回系统文章
+export function rejected(data) {
+  return request({
+    url: '/sist/article/rejected',
+    method: 'post',
+    data
+  })
+}
+
 // 修改系统文章
 export function updateArticle(data) {
   return request({

ebts-ui/src/components/Editor/index.vue

@@ -47,7 +47,8 @@ export default {
             [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
             [{ align: [] }],                                 // 对齐方式
             ["clean"],                                       // 清除文本格式
-            ["link", "image", "video"]                       // 链接、图片、视频
+            ["link", "image", "video"],                       // 链接、图片、视频
+              [{ 'script': 'sub'}, { 'script': 'super' }],
           ],
         },
         placeholder: "请输入内容",

ebts-ui/src/main.js

@@ -18,11 +18,11 @@ import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts,getEncodeDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, addCreateDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/hcy";
+import { parseTime, resetForm, addDateRange, addCreateDateRange,selectDictCode , selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/hcy";
 import Pagination from "@/components/Pagination";
 //自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
-
+import CKEditor from 'ckeditor4-vue';
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getEncodeDicts = getEncodeDicts
@@ -31,6 +31,7 @@ Vue.prototype.parseTime = parseTime
 Vue.prototype.resetForm = resetForm
 Vue.prototype.addDateRange = addDateRange
 Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictCode = selectDictCode
 Vue.prototype.addCreateDateRange = addCreateDateRange
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
@@ -53,6 +54,7 @@ Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 
 Vue.use(permission)
+Vue.use( CKEditor );
 
 /**
  * If you don't want to use mock-server

ebts-ui/src/router/index.js

@@ -113,15 +113,21 @@ export const constantRoutes = [
       {
         path: 'add',
         component: (resolve) => require(['@/views/sist/article/components/article'], resolve),
-        name: 'addarticle',
+        name: 'addArticle',
         meta: { title: '添加文章' }
       },
       {
         path: 'edit/:articleId',
         component: (resolve) => require(['@/views/sist/article/components/article'], resolve),
-        name: 'editarticle',
+        name: 'editArticle',
         meta: { title: '修改文章' }
       },
+      {
+        path: 'approve/:articleId',
+        component: (resolve) => require(['@/views/sist/article/components/approve'], resolve),
+        name: 'approveArticle',
+        meta: { title: '审批文章' }
+      },
     ]
   },
   {

ebts-ui/src/store/getters.js

@@ -10,6 +10,7 @@ const getters = {
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes
+  permission_routes: state => state.permission.routes,
+  userId: state => state.user.userId,
 }
 export default getters

ebts-ui/src/store/modules/user.js

@@ -5,6 +5,7 @@ const user = {
   state: {
     token: getToken(),
     name: '',
+    userId: '',
     avatar: '',
     roles: [],
     permissions: []
@@ -17,6 +18,9 @@ const user = {
     SET_NAME: (state, name) => {
       state.name = name
     },
+    SET_ID: (state, userId) => {
+      state.userId = userId
+    },
     SET_AVATAR: (state, avatar) => {
       state.avatar = avatar
     },
@@ -60,6 +64,7 @@ const user = {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
           commit('SET_NAME', user.userName)
+          commit('SET_ID', user.userId)
           commit('SET_AVATAR', avatar)
           resolve(res)
         }).catch(error => {

ebts-ui/src/utils/hcy.js

@@ -90,6 +90,17 @@ export function selectDictLabel(datas, value) {
 	})
 	return actions.join('');
 }
+// 回显数据字典
+export function selectDictCode(datas, value) {
+	var actions = [];
+	Object.keys(datas).some((key) => {
+		if (datas[key].dictCode == ('' + value)) {
+			actions.push(datas[key].dictLabel);
+			return true;
+		}
+	})
+	return actions.join('');
+}
 
 // 回显数据字典（字符串数组）
 export function selectDictLabels(datas, value, separator) {

ebts-ui/src/views/sist/article/components/approve.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="approve">
+    <el-row>
+      <el-col :offset="1" :span="22">
+        <div class="context">
+          <div class="title">{{ article.title }}</div>
+          <!--          <Editor></Editor>-->
+          <div class="text" v-html="article.content"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-form ref="elForm" size="medium" label-width="100px">
+      <!--    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">-->
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="是否顶置">
+            <el-radio-group v-model="article.isTop" disabled>
+              <el-radio-button v-for="(item, index) in isTopOptions" :key="index"
+                               :label="item.dictValue">{{ item.dictLabel }}
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否显示">
+            <el-radio-group v-model="article.isView" disabled>
+              <el-radio-button v-for="(item, index) in isViewOptions" :key="index"
+                               :label="item.dictValue">{{ item.dictLabel }}
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="是否英语">
+            <el-radio-group v-model="article.isEnglish" disabled>
+              <el-radio-button v-for="(item, index) in isEnglishOptions" :key="index"
+                               :label="item.dictValue">{{ item.dictLabel }}
+              </el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="发布时间">
+            <el-date-picker
+              v-model="publishTime"
+              type="datetime"
+              placeholder="选择日期时间"
+              align="right"
+              :picker-options="pickerOptions">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24" class="submitForm">
+          <el-form-item size="large">
+            <el-button type="success" plain @click="submitForm('approve')">批准</el-button>
+            <el-button type="danger" plain @click="submitForm('rejected')">驳回</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {approve, getArticle, rejected} from "@/api/sist/article";
+
+export default {
+  components: {},
+  name: "approve",
+  data() {
+    return {
+      article: {
+        id: null,
+        title: null,
+      },
+      fromData: null,
+      publishTime: null,
+      isTopOptions: [],
+      isViewOptions: [],
+      isEnglishOptions: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', new Date());
+          }
+        }, {
+          text: '昨明天',
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() + 3600 * 1000 * 24);
+            picker.$emit('pick', date);
+          }
+        }, {
+          text: '一周后',
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', date);
+          }
+        }]
+      },
+    }
+  },
+  created() {
+    this.article.id = this.$route.params && this.$route.params.articleId;
+    getArticle(this.article.id).then(response => {
+      this.article = response.data
+    })
+    this.getDicts("is_top").then(response => {
+      this.isTopOptions = response.data;
+    });
+    this.getDicts("is_view").then(response => {
+      this.isViewOptions = response.data;
+    });
+    this.getDicts("is_english").then(response => {
+      this.isEnglishOptions = response.data;
+    });
+  },
+  methods: {
+    submitForm(type) {
+      let that = this
+      if (type === "approve") {
+        if (this.publishTime === null) {
+          this.$confirm('您未选择发布时间,是否将现在作为发布时间,并批准发布?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function () {
+            that.toApprove()
+          })
+        } else {
+          this.$confirm('您确认批准发布?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function () {
+            that.toApprove()
+          })
+        }
+      } else if (type === "rejected") {
+        this.$confirm('您确认驳回此文章?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function () {
+          that.toRejected()
+        })
+      }
+      // TODO 提交表单
+    },
+
+    toApprove() {
+      this.fromData = {
+        id: this.article.id,
+        publishTime: this.publishTime,
+      }
+      approve(this.fromData).then(res => {
+        console.log(res);
+      })
+    },
+    toRejected() {
+      rejected(this.article.id).then(res => {
+        console.log(res);
+      })
+    },
+
+
+    resetForm() {
+      this.$refs['elForm'].resetFields()
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.article {
+  margin-top: 20px;
+}
+
+.submitForm {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.context {
+  margin: 3rem 4rem;
+
+  .title {
+    font-size: 2.4rem;
+    font-weight: 500;
+    color: #1956BC;
+    text-align: center;
+  }
+
+  .text {
+    margin-top: 2rem;
+    font-size: 1.2rem;
+    font-weight: 400;
+    color: #3C3C3C;
+  }
+}
+</style>

ebts-ui/src/views/sist/article/components/article.vue

@@ -118,7 +118,8 @@
       <el-row>
         <el-col :span="24" class="submitForm">
           <el-form-item size="large">
-            <el-button type="primary" @click="submitForm">提交</el-button>
+            <el-button type="success" @click="saveDrafts">保存草稿</el-button>
+            <el-button type="primary" @click="submitForm">提交审核</el-button>
             <el-button @click="resetForm">重置</el-button>
           </el-form-item>
         </el-col>
@@ -128,7 +129,7 @@
 </template>
 <script>
 import Editor from '@/components/Editor';
-import {updateArticle, getArticle, addArticle, getArticleType, getArticleApprove} from "@/api/sist/article";
+import {updateArticle, getArticle, drafts, getArticleType, getArticleApprove} from "@/api/sist/article";
 import {Message} from "element-ui";
 
 export default {
@@ -160,28 +161,6 @@ export default {
       isViewOptions: [],
       isEnglishOptions: [],
       sitetypeOptions: [],
-      pickerOptions: {
-        shortcuts: [{
-          text: '今天',
-          onClick(picker) {
-            picker.$emit('pick', new Date());
-          }
-        }, {
-          text: '昨天',
-          onClick(picker) {
-            const date = new Date();
-            date.setTime(date.getTime() - 3600 * 1000 * 24);
-            picker.$emit('pick', date);
-          }
-        }, {
-          text: '一周前',
-          onClick(picker) {
-            const date = new Date();
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', date);
-          }
-        }]
-      },
       rules: {
         title: [{
           required: true,
@@ -276,9 +255,7 @@ export default {
         this.labApproveOption = res.data
       })
     },
-
     submitForm() {
-      console.log(this.formData);
       this.$refs['elForm'].validate(valid => {
         if (valid) {
           if ((this.params.sistArticleType === null || this.params.sistArticleType === "") && (this.params.labArticleType === null || this.params.labArticleType === "")) {
@@ -288,13 +265,13 @@ export default {
             })
             return
           } else if ((this.params.sistArticleType === null || this.params.sistArticleType === "") && (this.params.labArticleType !== null || this.params.labArticleType !== "") && (this.formData.sistApprove === null || this.params.sistApprove === "")) {
-            Message({
+            this.msgSuccess({
               message: "请选择信息网站的审批人",
               type: 'error'
             })
             return
           } else if ((this.params.sistArticleType === null || this.params.sistArticleType === "") && (this.params.labArticleType != null || this.params.labArticleType !== "") && (this.params.labApprove === null || this.params.labApprove === "")) {
-            Message({
+            this.msgSuccess({
               message: "请选择实验室网站的审批人",
               type: 'error'
             })
@@ -304,18 +281,28 @@ export default {
         this.formData.params = this.params
         if (this.formData.id != null) {
           updateArticle(this.formData).then(response => {
-            this.msgSuccess("修改成功");
+            this.msgSuccess("提交审批成功");
-            this.$router.push("/sist/article");
-          });
-        } else {
-          addArticle(this.formData).then(response => {
-            this.msgSuccess("新增成功");
             this.$router.push("/sist/article");
           });
+        // } else {
+          // addArticle(this.formData).then(response => {
+          //   this.msgSuccess("新增成功");
+          //   this.$router.push("/sist/article");
+          // });
         }
         // TODO 提交表单
       })
     },
+    saveDrafts() {
+      this.$refs['elForm'].validate(valid => {
+        drafts(this.formData).then(res=>{
+          if (this.formData.id === null || this.formData.id === ""){
+            this.formData.id = res.data
+          }
+          this.msgSuccess('保存成功');
+        })
+      })
+    },
     resetForm() {
       this.$refs['elForm'].resetFields()
     },
@@ -330,5 +317,6 @@ export default {
 
 .submitForm {
   margin-top: 20px;
+  text-align: center;
 }
 </style>

ebts-ui/src/views/sist/article/index.vue

@@ -14,10 +14,10 @@
       <el-form-item label="文章类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择文章类型" clearable size="small">
           <el-option
-            v-for="dict in typeOptions"
+            v-for="dict in articleTypeOptions"
-            :key="dict.dictValue"
+            :key="dict.dictCode"
             :label="dict.dictLabel"
-            :value="dict.dictValue"
+            :value="dict.dictCode"
           />
         </el-select>
       </el-form-item>
@@ -116,7 +116,7 @@
       </el-table-column>
       <el-table-column label="文章标题" align="center" prop="title"/>
       <el-table-column label="站点类型" align="center" prop="siteType" :formatter="siteTypeFormat"/>
-      <el-table-column label="文章类型" align="center" prop="type" :formatter="typeFormat"/>
+      <el-table-column label="文章类型" align="center" prop="type" :formatter="articleTypeFormat"/>
       <el-table-column label="发布人姓名" align="center" prop="publishUserName"/>
       <el-table-column label="是否置顶" align="center" prop="isTop" :formatter="isTopFormat"/>
       <el-table-column label="是否显示" align="center" prop="isView" :formatter="isViewFormat"/>
@@ -124,30 +124,31 @@
       <el-table-column label="缩略图" align="center" prop="imgurl"/>
       <el-table-column label="是否英文" align="center" prop="isEnglish" :formatter="isEnglishFormat"/>
       <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat"/>
-<!--      <template slot-scope="scope">-->
+      <!--      <template slot-scope="scope">-->
-<!--        <el-tag-->
+      <!--        <el-tag-->
-<!--          v-if="scope.row.status==1">待取件-->
+      <!--          v-if="scope.row.status==1">待取件-->
-<!--        </el-tag>-->
+      <!--        </el-tag>-->
-<!--        <el-tag-->
+      <!--        <el-tag-->
-<!--          type="warning" v-if="scope.row.status==2"-->
+      <!--          type="warning" v-if="scope.row.status==2"-->
-<!--        >运输中-->
+      <!--        >运输中-->
-<!--        </el-tag>-->
+      <!--        </el-tag>-->
-<!--        <el-tag-->
+      <!--        <el-tag-->
-<!--          type="danger" v-if="scope.row.status==3"-->
+      <!--          type="danger" v-if="scope.row.status==3"-->
-<!--          disable-transitions>待收取-->
+      <!--          disable-transitions>待收取-->
-<!--        </el-tag>-->
+      <!--        </el-tag>-->
-<!--        <el-tag-->
+      <!--        <el-tag-->
-<!--          type="success" v-if="scope.row.status==4"-->
+      <!--          type="success" v-if="scope.row.status==4"-->
-<!--          disable-transitions>完成-->
+      <!--          disable-transitions>完成-->
-<!--        </el-tag>-->
+      <!--        </el-tag>-->
-<!--      </template>-->
+      <!--      </template>-->
       <el-table-column label="发布时间 " align="center" prop="publishTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.publishTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
         <template slot-scope="scope">
+          <span v-show="scope.row.status === 'NEd5n92EMIpyyBslaNqsRgE'|| scope.row.status === 'N6CfFGz2UWpQ9Uhk3uwiJAQ'">
             <el-button
               size="mini"
               type="text"
@@ -164,6 +165,14 @@
             v-hasPermi="['sist:article:remove']"
           >删除
           </el-button>
+          </span>
+          <el-button v-show="scope.row.approvalUserId===userId"
+                     size="mini"
+                     type="text"
+                     icon="el-icon-edit"
+                     @click="handleApprova(scope.row)"
+          >审批
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -179,8 +188,9 @@
 </template>
 
 <script>
-import {listArticle, delArticle, exportArticle} from "@/api/sist/article";
+import {listArticle, delArticle, exportArticle,drafts} from "@/api/sist/article";
 import Editor from '@/components/Editor';
+import store from "@/store";
 
 export default {
   name: "Article",
@@ -189,6 +199,7 @@ export default {
   },
   data() {
     return {
+      userId: store.getters.userId,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -210,7 +221,7 @@ export default {
       // 站点类型 1： sist    2: lab 3: 双边都发字典
       siteTypeOptions: [],
       // 1: 2: 3: 根据导航字典
-      typeOptions: [],
+      articleTypeOptions: [],
       // 是否置顶字典
       isTopOptions: [],
       // 是否显示字典
@@ -272,8 +283,8 @@ export default {
     this.getDicts("article_site_type").then(response => {
       this.siteTypeOptions = response.data;
     });
-    this.getDicts("article_type").then(response => {
+    this.getEncodeDicts("article_type").then(response => {
-      this.typeOptions = response.data;
+      this.articleTypeOptions = response.data;
     });
     this.getDicts("is_top").then(response => {
       this.isTopOptions = response.data;
@@ -303,8 +314,8 @@ export default {
       return this.selectDictLabel(this.siteTypeOptions, row.siteType);
     },
     // 1: 2: 3: 根据导航字典翻译
-    typeFormat(row, column) {
+    articleTypeFormat(row, column) {
-      return this.selectDictLabel(this.typeOptions, row.type);
+      return this.selectDictCode(this.articleTypeOptions, row.type);
     },
     // 是否置顶字典翻译
     isTopFormat(row, column) {
@@ -351,6 +362,10 @@ export default {
     handleUpdate(row) {
       this.$router.push("/article/edit/" + row.id);
     },
+    /** 审批按钮操作 */
+    handleApprova(row) {
+      this.$router.push("/article/approve/" + row.id);
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;

ebts-ui/src/views/utils/Editor.vue

@@ -0,0 +1,21 @@
+<template>
+<div class="Editor">
+  <ckeditor v-model="context"></ckeditor>
+  <div>{{context}}</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "Editor",
+  data(){
+    return{
+      context:""
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>