删除主题按钮

src/api/menu.js

@@ -0,0 +1,29 @@
+import service from '@/utils/service'
+
+const baseUrl = '/admin/api/menus'
+
+const menuApi = {}
+
+menuApi.listAll = () => {
+  return service({
+    url: baseUrl,
+    method: 'get'
+  })
+}
+
+menuApi.create = menu => {
+  return service({
+    url: baseUrl,
+    data: menu,
+    method: 'post'
+  })
+}
+
+menuApi.delete = menuId => {
+  return service({
+    url: `${baseUrl}/${menuId}`,
+    method: 'delete'
+  })
+}
+
+export default menuApi

src/views/interface/MenuList.vue

@@ -1,20 +1,14 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="12">
-      <a-col
+      <a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24" :style="{ 'padding-bottom': '12px' }">
-        :xl="10"
-        :lg="10"
-        :md="10"
-        :sm="24"
-        :xs="24"
-        :style="{ 'padding-bottom': '12px' }">
         <a-card title="添加菜单">
           <a-form layout="horizontal">
             <a-form-item label="名称：" help="*页面上所显示的名称">
-              <a-input />
+              <a-input v-model="menuToCreate.name" />
             </a-form-item>
             <a-form-item label="路径：" help="*菜单的路径">
-              <a-input />
+              <a-input v-model="menuToCreate.url" />
             </a-form-item>
             <a-form-item label="上级菜单：">
               <a-select>
@@ -22,32 +16,42 @@
               </a-select>
             </a-form-item>
             <a-form-item label="排序编号：">
-              <a-input type="number" />
+              <a-input type="number" v-model="menuToCreate.sort" />
             </a-form-item>
             <a-form-item label="图标：" help="*请根据主题的支持选填">
-              <a-input />
+              <a-input v-model="menuToCreate.icon" />
             </a-form-item>
             <a-form-item label="打开方式：">
-              <a-select defaultValue="_self">
+              <a-select defaultValue="_self" v-model="menuToCreate.target">
                 <a-select-option value="_self">当前窗口</a-select-option>
                 <a-select-option value="_blank">新窗口</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item>
-              <a-button type="primary">保存</a-button>
+              <a-button type="primary" @click="createMenu">保存</a-button>
             </a-form-item>
           </a-form>
         </a-card>
       </a-col>
-      <a-col
+      <a-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24" :style="{ 'padding-bottom': '12px' }">
-        :xl="14"
-        :lg="14"
-        :md="14"
-        :sm="24"
-        :xs="24"
-        :style="{ 'padding-bottom': '12px' }">
         <a-card title="所有菜单">
-          <a-table :columns="columns" :dataSource="data" :loading="loading"> </a-table>
+          <a-table :columns="columns" :dataSource="menus" :loading="loading">
+            <ellipsis :length="10" tooltip slot="name" slot-scope="text">
+              {{ text }}
+            </ellipsis>
+            <span slot="action" slot-scope="text, record">
+              <a href="javascript:;" @click="editMenu(record.id)">编辑</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                :title="'你确定要删除【' + record.name + '】菜单？'"
+                @confirm="deleteMenu(record.id)"
+                okText="确定"
+                cancelText="取消"
+              >
+                <a href="javascript:;">删除</a>
+              </a-popconfirm>
+            </span>
+          </a-table>
         </a-card>
       </a-col>
     </a-row>
@@ -55,10 +59,13 @@
 </template>
 
 <script>
+import { Ellipsis } from '@/components/Ellipsis'
+import menuApi from '@/api/menu'
 const columns = [
   {
     title: '名称',
-    dataIndex: 'name'
+    dataIndex: 'name',
+    scopedSlots: { customRender: 'name' }
   },
   {
     title: '路径',
@@ -71,14 +78,49 @@ const columns = [
   {
     title: '图标',
     dataIndex: 'icon'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    scopedSlots: { customRender: 'action' }
   }
 ]
 export default {
+  components: {
+    Ellipsis
+  },
   data() {
     return {
       data: [],
-      loading: false,
+      loading: true,
-      columns
+      columns,
+      menus: [],
+      menuToCreate: {}
+    }
+  },
+  created() {
+    this.loadMenus()
+  },
+  methods: {
+    loadMenus() {
+      menuApi.listAll().then(response => {
+        this.menus = response.data.data
+        this.loading = false
+      })
+    },
+    createMenu() {
+      menuApi.create(this.menuToCreate).then(response => {
+        this.loadMenus()
+      })
+    },
+    editMenu(id) {
+      this.$message.success('编辑' + id)
+    },
+    deleteMenu(id) {
+      menuApi.delete(id).then(response => {
+        this.$message.success('删除成功！')
+        this.loadMenus()
+      })
     }
   }
 }

src/views/interface/ThemeList.vue

@@ -9,7 +9,8 @@
         :sm="12"
         :xs="24"
         v-for="(theme, index) in themes"
-        :key="index">
+        :key="index"
+      >
         <a-card :bodyStyle="{ padding: '14px' }">
           <img
             :alt="theme.properties.name"
@@ -22,19 +23,18 @@
               {{ theme.properties.name }}
             </span>
             <a-button-group class="theme-button">
-              <a-button type="primary" v-if="activatedTheme==theme.key" disabled>已启用</a-button>
+              <a-button type="primary" v-if="activatedTheme == theme.key" disabled>已启用</a-button>
               <a-button type="primary" @click="activeTheme(theme.key)" v-else>启用</a-button>
-              <a-button @click="optionModal(theme.key)">设置</a-button>
+              <a-button @click="optionModal(theme.key)" v-if="activatedTheme == theme.key">设置</a-button>
+              <a-popconfirm :title="'确定删除【'+theme.properties.name+'】主题？'" @confirm="deleteTheme(theme.key)" okText="确定" cancelText="取消" v-else>
+                <a-button type="dashed">删除</a-button>
+              </a-popconfirm>
             </a-button-group>
           </div>
         </a-card>
       </a-col>
     </a-row>
-    <a-modal
+    <a-modal :title="optionTheme + ' 主题设置'" width="90%" v-model="visible">
-      :title="optionTheme+' 主题设置'"
-      width="90%"
-      v-model="visible"
-    >
       <iframe :src="optionUrl" height="560" width="100%" frameborder="0" scrolling="auto"></iframe>
     </a-modal>
   </div>
@@ -71,13 +71,16 @@ export default {
         this.$message.success('设置成功！')
         this.loadThemes()
       })
+    },
+    deleteTheme(theme) {
+      this.$message.success('删除' + theme)
     }
   }
 }
 </script>
 
 <style scoped>
-.ant-divider-horizontal{
+.ant-divider-horizontal {
   margin: 14px 0;
 }
 
@@ -85,11 +88,11 @@ export default {
   padding-bottom: 12px;
 }
 
-.theme-item .theme-control .theme-title{
+.theme-item .theme-control .theme-title {
   font-size: 18px;
 }
 
-.theme-item .theme-control .theme-button{
+.theme-item .theme-control .theme-button {
   float: right;
 }
 </style>

src/views/interface/components/ThemeFile.vue

@@ -43,7 +43,7 @@ export default {
         })
       )
     }
-    return h('p', 'No files')
+    return h('p', '没有文件')
   }
 }
 </script>

src/views/post/PostList.vue

@@ -42,7 +42,8 @@
         </router-link>
         <a-dropdown>
           <a-menu slot="overlay">
-            <a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
+            <a-menu-item key="1" v-if="postStatus==0 || postStatus==1"> <a-icon type="delete" />移到回收站 </a-menu-item>
+            <a-menu-item key="1" v-else-if="postStatus==2"> <a-icon type="delete" />永久删除 </a-menu-item>
           </a-menu>
           <a-button style="margin-left: 8px;">
             批量操作
@@ -122,7 +123,8 @@ export default {
       selectedRows: [],
       options: {},
       optionAlertShow: false,
-      categories: []
+      categories: [],
+      postStatus: 0
     }
   },
   created() {