12.31开源admin代码更新

admin/src/views/content/article/edit.vue

@@ -9,7 +9,7 @@
           <el-form-item label="作者" prop="author" :rules="[{required:true, message:'请填作者', trigger:['blur','change']}]">
             <el-input v-model="pram.author" placeholder="作者" maxlength="20"/>
           </el-form-item>
-          <el-form-item label="文章分类">
+          <el-form-item label="文章分类" :rules="[{required:true, message:'请选择分类', trigger:['blur','change']}]">
             <el-select v-model="pram.cid" placeholder="请选择" style="width:100%;">
               <el-option
                 v-for="item in categoryTreeData"
@@ -27,29 +27,11 @@
               </div>
             </div>
           </el-form-item>
-          <!--<el-form-item label="微信公众号封面" prop="imageInput" :rules="[{ required: true, message: '请上传图文封面', trigger: 'change' }]">-->
-          <!--<div class="upLoadPicBox">-->
-          <!--<div v-if="pram.imageInput" class="pictrue"><img :src="pram.imageInput"></div>-->
-          <!--<el-upload-->
-          <!--v-else-->
-          <!--class="upload-demo mr10 mb15"-->
-          <!--action-->
-          <!--:http-request="handleUploadForm"-->
-          <!--:headers="myHeaders"-->
-          <!--:show-file-list="false"-->
-          <!--multiple-->
-          <!--&gt;-->
-          <!--<div class="upLoad">-->
-          <!--<i class="el-icon-camera cameraIconfont" />-->
-          <!--</div>-->
-          <!--</el-upload>-->
-          <!--</div>-->
-          <!--</el-form-item>-->
           <el-form-item label="文章简介" prop="synopsis" :rules="[{required:true, message:'请填写文章简介', trigger:['blur','change']}]">
             <el-input v-model="pram.synopsis" maxlength="100" type="textarea" :rows="2" resize="none" placeholder="文章简介" />
           </el-form-item>
           <el-form-item label="文章内容" prop="content" :rules="[{required:true, message:'请填写文章内容', trigger:['blur','change']}]">
-            <ueditor-from v-model="pram.content" :content="pram.content" />
+            <Tinymce v-model="pram.content"></Tinymce>
           </el-form-item>
           <el-form-item label="是否Banner">
             <el-switch v-model="pram.isBanner" />
@@ -57,12 +39,8 @@
           <el-form-item label="是否热门">
             <el-switch v-model="pram.isHot" />
           </el-form-item>
-          <!--<el-form-item label="原文链接">-->
-          <!--<p>原文链接选填，填写之后在图文左下方会出现此链接</p>-->
-          <!--<el-input v-model="pram.url" placeholder="原文链接" />-->
-          <!--</el-form-item>-->
           <el-form-item>
-            <el-button type="primary" :loading="loading" @click="handerSubmit('pram')">保存</el-button>
+            <el-button type="primary" :loading="loading" @click="handerSubmit('pram')" v-hasPermi="['admin:article:update']">保存</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -77,6 +55,7 @@ import * as articleApi from '@/api/article.js'
 import * as selfUtil from '@/utils/ZBKJIutil.js'
 import { fileImageApi } from '@/api/systemSetting'
 import { getToken } from '@/utils/auth'
+import {Debounce} from '@/utils/validate'
 export default {
   // name: "edit",
   components: { Tinymce },
@@ -96,7 +75,7 @@ export default {
       pram: {
         author: null,
         cid: null,
-        content: null,
+        content: '', //<span>My Document\'s Title</span>
         imageInput: '',
         isBanner: false,
         isHot: null,
@@ -110,7 +89,9 @@ export default {
         // mediaId: null
       },
       editData: {},
-      myHeaders: { 'X-Token': getToken() }
+      myHeaders: { 'X-Token': getToken() },
+      editorContentLaebl:"",
+      // basicForm:{editorContent:""}
     }
   },
   created() {
@@ -126,29 +107,8 @@ export default {
   methods: {
     getInfo (){
       categoryApi.articleInfoApi({ id: this.$route.params.id }).then(data => {
-        this.editData = data
-        this.hadlerInitEditData()
-      })
-    },
-    // 上传
-    handleUploadForm(param){
-      const formData = new FormData()
-      formData.append('media', param.file)
-      let loading = this.$loading({
-        lock: true,
-        text: '上传中，请稍候...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      fileImageApi(formData, {type: 'image'}).then(res => {
-        loading.close()
-        this.pram.mediaId = res.mediaId
-
-        // this.formValidate.contents.mediaId = res.mediaId
-        // this.formValidate.contents.srcUrl = res.url
-        this.$message.success('上传成功')
-      }).catch(() => {
-        loading.close()
+          this.editData = data
+          this.hadlerInitEditData()
       })
     },
     modalPicTap(tit) {
@@ -182,7 +142,7 @@ export default {
         localStorage.setItem('articleClass', JSON.stringify(data.list))
       })
     },
-    handerSubmit(form) {
+    handerSubmit:Debounce(function(form) {
       this.$refs[form].validate(valid => {
         if (!valid) return
         if (!this.$route.params.id) {
@@ -191,7 +151,7 @@ export default {
           this.handlerUpdate()
         }
       })
-    },
+    }),
     handlerUpdate() {
       this.loading = true
       this.pram.cid = Array.isArray(this.pram.cid) ? this.pram.cid[0] : this.pram.cid

admin/src/views/content/article/list.vue

@@ -5,42 +5,59 @@
         <div class="container">
           <el-form inline size="small">
             <el-form-item label="文章分类：">
-              <el-select v-model="listPram.cid" clearable class="selWidth"  placeholder="请选择文章分类" @change="handerSearch">
+              <el-select
+                v-model="listPram.cid"
+                clearable
+                class="selWidth"
+                placeholder="请选择文章分类"
+                @change="handerSearch"
+              >
                 <el-option
                   v-for="item in categoryTreeData"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id">
+                  :value="item.id"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="关键词：">
-              <el-input v-model="listPram.keywords" placeholder="请输入关键词" class="selWidth" size="small" clearable>
-                <el-button slot="append" icon="el-icon-search" @click="handerSearch" size="small"/>
+              <el-input
+                v-model="listPram.keywords"
+                placeholder="请输入关键词"
+                class="selWidth"
+                size="small"
+                clearable
+              >
+                <el-button
+                  slot="append"
+                  icon="el-icon-search"
+                  @click="handerSearch"
+                  size="small"
+                />
               </el-input>
             </el-form-item>
           </el-form>
         </div>
-        <router-link :to=" { path:'/content/articleCreat' } ">
-          <el-button size="small" type="primary" class="mr10">添加文章</el-button>
+        <router-link :to="{ path: '/content/articleCreat' }">
+          <el-button size="small" type="primary" class="mr10" v-hasPermi="['admin:article:save']">添加文章</el-button>
         </router-link>
-        <!--<el-button size="mini" type="primary" @click="handlerOpenEdit(0)">添加文章</el-button>-->
       </div>
-      <el-table :data="listData.list" size="mini"
-                class="table"
-                highlight-current-row>
-        <el-table-column
-          prop="id"
-          label="ID"
-          min-width="50"
-        />
+      <el-table
+        v-loading="listLoading"
+        :data="listData.list"
+        size="mini"
+        class="table"
+        highlight-current-row
+        :header-cell-style=" {fontWeight:'bold'}">
+        <el-table-column prop="id" label="ID" min-width="50" />
         <el-table-column label="图片" min-width="80">
           <template slot-scope="scope">
             <div class="demo-image__preview">
               <el-image
                 style="width: 36px; height: 36px"
-                :src="scope.row.imageInput[0]"
-                :preview-src-list="[scope.row.imageInput[0]]"
+                :src="scope.row.imageInput"
+                :preview-src-list="[scope.row.imageInput]"
               />
             </div>
           </template>
@@ -57,17 +74,32 @@
           </template>
         </el-table-column>
         <el-table-column prop="author" label="作者" min-width="180" />
-        <el-table-column prop="synopsis" label="文章简介" show-overflow-tooltip min-width="250"/>
-        <el-table-column prop="shareTitle" label="分享标题" show-overflow-tooltip min-width="200"/>
-        <el-table-column prop="updateTime" label="更新时间" min-width="180"/>
-        <el-table-column label="操作" min-width="100" fixed="right" align="center">
+        <el-table-column
+          prop="synopsis"
+          label="文章简介"
+          show-overflow-tooltip
+          min-width="250"
+        />
+        <el-table-column prop="updateTime" label="更新时间" min-width="180" />
+        <el-table-column
+          label="操作"
+          min-width="100"
+          fixed="right"
+          align="center"
+        >
           <template slot-scope="scope">
-            <router-link :to=" { path:'/content/articleCreat/'+ scope.row.id } ">
-              <el-button size="small" type="text" class="mr10">编辑</el-button>
+            <router-link
+              :to="{ path: '/content/articleCreat/' + scope.row.id }"
+            >
+              <el-button size="small" type="text" class="mr10" v-hasPermi="['admin:article:info']">编辑</el-button>
             </router-link>
-            <!--<el-button type="text" size="small" @click="handlerOpenEdit(1, scope.row)">编辑</el-button>-->
-            <!--<el-button type="text" size="small" disabled>关联产品</el-button>-->
-            <el-button type="text" size="small" @click="handlerDelete(scope.row)">删除</el-button>
+            <el-button
+              type="text"
+              size="small"
+              @click="handlerDelete(scope.row)"
+              v-hasPermi="['admin:article:delete']"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -82,7 +114,7 @@
     </el-card>
     <el-dialog
       :visible.sync="editDialogConfig.visible"
-      :title="editDialogConfig.isEdit === 0?'创建文章':'编辑文章'"
+      :title="editDialogConfig.isEdit === 0 ? '创建文章' : '编辑文章'"
       top="1vh"
       width="900px"
       destroy-on-close
@@ -101,10 +133,10 @@
 </template>
 
 <script>
-import * as articleApi from '@/api/article.js'
-import * as categoryApi from '@/api/categoryApi.js'
-import * as selfUtil from '@/utils/ZBKJIutil.js'
-import edit from './edit'
+import * as articleApi from "@/api/article.js";
+import * as categoryApi from "@/api/categoryApi.js";
+import * as selfUtil from "@/utils/ZBKJIutil.js";
+import edit from "./edit";
 export default {
   // name: "list",
   components: { edit },
@@ -115,53 +147,57 @@ export default {
         keywords: null,
         cid: null,
         page: 1,
-        limit: this.$constants.page.limit[0]
+        limit: this.$constants.page.limit[0],
       },
       listData: { list: [], total: 0 },
       editDialogConfig: {
         visible: false,
         data: {},
-        isEdit: 0 // 0=add 1=edit
+        isEdit: 0, // 0=add 1=edit
       },
+      listLoading: true,
       categoryTreeData: [],
       categoryProps: {
-        value: 'id',
-        label: 'name',
-        children: 'child',
-        expandTrigger: 'hover',
+        value: "id",
+        label: "name",
+        children: "child",
+        expandTrigger: "hover",
         checkStrictly: true,
-        emitPath: false
-      }
-    }
+        emitPath: false,
+      },
+    };
   },
   mounted() {
-    this.handlerGetListData(this.listPram)
-    this.handlerGetTreeList()
+    this.handlerGetListData(this.listPram);
+    this.handlerGetTreeList();
   },
   methods: {
     handlerGetTreeList() {
-      categoryApi.listCategroy({ type: 3, status: '' }).then(data => {
-        this.categoryTreeData = data.list
-        localStorage.setItem('articleClass', JSON.stringify(data.list))
-      })
+      categoryApi.listCategroy({ type: 3, status: "" }).then((data) => {
+        this.categoryTreeData = data.list;
+        localStorage.setItem("articleClass", JSON.stringify(data.list));
+      });
     },
     handerSearch() {
-      this.listPram.page = 1
-      this.handlerGetListData(this.listPram)
+      this.listPram.page = 1;
+      this.handlerGetListData(this.listPram);
     },
     handlerGetListData(pram) {
-      articleApi.ListArticle(pram).then(data => {
-        this.listData = data
-      })
+      this.listLoading = true
+      articleApi.ListArticle(pram).then((data) => {
+        this.listData = data;
+        this.listLoading = false
+      });
     },
-    handlerOpenEdit(isEdit, editData) { // 0=add 1=edit
+    handlerOpenEdit(isEdit, editData) {
+      // 0=add 1=edit
       if (isEdit === 1) {
-        this.editDialogConfig.isEdit = 1
-        this.editDialogConfig.editData = editData
-      }else{
-        this.editDialogConfig.isEdit = 0
+        this.editDialogConfig.isEdit = 1;
+        this.editDialogConfig.editData = editData;
+      } else {
+        this.editDialogConfig.isEdit = 0;
       }
-      this.editDialogConfig.visible = true
+      this.editDialogConfig.visible = true;
     },
     // handlerGetCategoryTreeData() {
     //   const _pram = { type: constants.categoryType[2].value, status: 1 }
@@ -170,31 +206,31 @@ export default {
     //   })
     // },
     handlerHideDialog() {
-      this.handlerGetListData(this.listPram)
-      this.editDialogConfig.visible = false
+      this.handlerGetListData(this.listPram);
+      this.editDialogConfig.visible = false;
     },
     handlerDelete(rowData) {
-      this.$confirm('确定删除当前数据', '提示').then(result => {
-        articleApi.DelArticle(rowData).then(data => {
-          this.$message.success('删除数据成功')
-          this.handlerGetListData(this.listPram)
-        })
-      })
+      this.$confirm("确定删除当前数据", "提示").then((result) => {
+        articleApi.DelArticle(rowData).then((data) => {
+          this.$message.success("删除数据成功");
+          this.handlerGetListData(this.listPram);
+        });
+      });
     },
     handleSizeChange(val) {
-      this.listPram.limit = val
-      this.handlerGetListData(this.listPram)
+      this.listPram.limit = val;
+      this.handlerGetListData(this.listPram);
     },
     handleCurrentChange(val) {
-      this.listPram.page = val
-      this.handlerGetListData(this.listPram)
-    }
-  }
-}
+      this.listPram.page = val;
+      this.handlerGetListData(this.listPram);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.articleModal{
+.articleModal {
   z-index: 333 !important;
 }
 </style>