update

src/api/settings.js

@@ -56,7 +56,12 @@ export function createStaff(data) {
 export function updateStaff(data) {
   return httpRequest.put(`/api/cms/admin/v1/user/${data.sso_id}/update`, data)
 }
-
+/**
+ * 批量删除员工
+ */
+export function batchDeleteStaff(data) {
+  return httpRequest.put('/api/cms/admin/v1/user/batch-delete', data)
+}
 /* ------------------------------------项目管理------------------------------------ */
 /**
  * 获取项目列表
@@ -112,3 +117,9 @@ export function updateType(data) {
 export function getContentTypesList(params) {
   return httpRequest.get('/api/cms/admin/v1/type/content-types', { params })
 }
+/**
+ * 批量删除类型
+ */
+export function batchDeleteType(data) {
+  return httpRequest.put('/api/cms/admin/v1/type/batch-delete', data)
+}

src/components/TableList.vue

@@ -38,7 +38,7 @@
     <div class="table-list-bd">
       <el-table :data="dataList" size="mini" v-loading="loading" v-bind="$attrs" v-on="$listeners" style="height: 100%">
         <template v-for="item in columns">
-          <el-table-column v-bind="item" :key="item.prop">
+          <el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
             <template v-slot:default="scope" v-if="item.slots">
               <slot :name="item.slots" v-bind="scope"></slot>
             </template>
@@ -165,6 +165,9 @@ export default {
       this.page.currentPage = 1
       this.page.size = value
       this.fetchList()
+    },
+    visible(item) {
+      return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
     }
   },
   beforeMount() {

src/pages/content-manage/ads/index.vue

@@ -148,7 +148,7 @@ export default {
           }
         ],
         columns: [
-          { type: 'selection' },
+          { type: 'selection', visible: this.hasDelete },
           { prop: 'image_url', label: '图片', slots: 'image' },
           { prop: 'id', label: '广告ID', slots: 'table-id' },
           { prop: 'title', label: '标题' },

src/pages/content-manage/article/index.vue

@@ -143,7 +143,7 @@ export default {
           }
         ],
         columns: [
-          { type: 'selection' },
+          { type: 'selection', visible: this.hasDelete },
           { prop: 'image_url', label: '图片', slots: 'image' },
           { prop: 'id', label: '文章ID', slots: 'table-id' },
           { prop: 'title', label: '标题' },

src/pages/content-manage/image-text/index.vue

@@ -131,7 +131,7 @@ export default {
           }
         ],
         columns: [
-          { type: 'selection' },
+          { type: 'selection', visible: this.hasDelete },
           { prop: 'image_url', label: '图片', slots: 'image' },
           { prop: 'id', label: '图文ID', slots: 'table-id' },
           { prop: 'title', label: '标题' },

src/pages/settings/project/index.vue

@@ -2,24 +2,47 @@
   <div class="project page_container">
     <table-list v-bind="tableOptions" ref="tabList" @selection-change="selectionChange">
       <template #header-aside>
-        <el-button type="primary" size="mini" @click="handleCreate">新建项目</el-button>
+        <el-button type="primary" size="mini" @click="handleCreate" v-if="hasCreate">新建项目</el-button>
       </template>
       <!-- 项目Id -->
-      <template v-slot:project_id="scope"><span class="details-handle" @click="handleDetails(scope.row)">{{scope.row.id}}</span></template>
+      <template v-slot:project_id="scope"
+        ><span class="details-handle" @click="handleDetails(scope.row)">{{ scope.row.id }}</span></template
+      >
       <!-- 状态 -->
       <template v-slot:status="{ row }">
-        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" @change="statusChange(row)"></el-switch>
+        <el-switch
+          v-model="row.status"
+          :active-value="1"
+          :inactive-value="0"
+          active-text="启用"
+          inactive-text="停用"
+          @change="statusChange(row)"
+        ></el-switch>
       </template>
     </table-list>
     <el-drawer ref="drawer" :visible.sync="drawerVisible" size="490px" @close="handleDrawerClose">
       <template slot="title">
         <h5>
-          {{drawerTitle}}
-          <el-button v-if="drawerType !== 'create'" type="primary" @click="drawerType = 'edit'" size="mini" style="float:right;margin-right:30px;">编辑</el-button>
+          {{ drawerTitle }}
+          <el-button
+            v-if="drawerType !== 'create'"
+            type="primary"
+            @click="drawerType = 'edit'"
+            size="mini"
+            style="float: right; margin-right: 30px"
+            >编辑</el-button
+          >
         </h5>
       </template>
       <div class="drawer__content">
-        <el-form :model="form" :rules="rules" ref="drawerForm" label-width="80px" class="drawer-form" :disabled="isDetails">
+        <el-form
+          :model="form"
+          :rules="rules"
+          ref="drawerForm"
+          label-width="80px"
+          class="drawer-form"
+          :disabled="isDetails"
+        >
           <el-form-item label="项目名称" prop="name">
             <el-input v-model="form.name" size="small"></el-input>
           </el-form-item>
@@ -27,32 +50,49 @@
             <el-input v-model="form.short_name" size="small"></el-input>
           </el-form-item>
           <el-form-item label="项目类型" prop="type_id">
-            <el-select v-model="form.type_id" placeholder="请选择项目类型" size="small" style="width:100%;">
+            <el-select v-model="form.type_id" placeholder="请选择项目类型" size="small" style="width: 100%">
               <el-option :label="item.name" :value="item.id" v-for="item in projectTypeList" :key="item.id" />
             </el-select>
           </el-form-item>
           <el-form-item label="项目网址" prop="project_uri">
             <el-input v-model="form.project_uri" size="small"></el-input>
           </el-form-item>
-          <el-form-item label="广告类型" style="margin-bottom:0;">
-            <el-checkbox :indeterminate="adType.isIndeterminate" v-model="adType.checkAll" @change="val => handleCheckAllChange(val, 'adType')">全选</el-checkbox>
-            <div style="margin: 2px 0;"></div>
+          <el-form-item label="广告类型" style="margin-bottom: 0">
+            <el-checkbox
+              :indeterminate="adType.isIndeterminate"
+              v-model="adType.checkAll"
+              @change="val => handleCheckAllChange(val, 'adType')"
+              >全选</el-checkbox
+            >
+            <div style="margin: 2px 0"></div>
             <el-checkbox-group v-model="form.adType" @change="val => handleCheckedChange(val, 'adType')">
-              <el-checkbox v-for="item in adTypeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+              <el-checkbox v-for="item in adTypeList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
             </el-checkbox-group>
           </el-form-item>
-          <el-form-item label="文章类型" style="margin-bottom:0;">
-            <el-checkbox :indeterminate="articleType.isIndeterminate" v-model="articleType.checkAll" @change="val => handleCheckAllChange(val, 'articleType')">全选</el-checkbox>
-            <div style="margin: 2px 0;"></div>
+          <el-form-item label="文章类型" style="margin-bottom: 0">
+            <el-checkbox
+              :indeterminate="articleType.isIndeterminate"
+              v-model="articleType.checkAll"
+              @change="val => handleCheckAllChange(val, 'articleType')"
+              >全选</el-checkbox
+            >
+            <div style="margin: 2px 0"></div>
             <el-checkbox-group v-model="form.articleType" @change="val => handleCheckedChange(val, 'articleType')">
-              <el-checkbox v-for="item in articleTypeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+              <el-checkbox v-for="item in articleTypeList" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
             </el-checkbox-group>
           </el-form-item>
-          <el-form-item label="图文类型" style="margin-bottom:0;">
-            <el-checkbox :indeterminate="imageTextType.isIndeterminate" v-model="imageTextType.checkAll" @change="val => handleCheckAllChange(val, 'imageTextType')">全选</el-checkbox>
-            <div style="margin: 2px 0;"></div>
+          <el-form-item label="图文类型" style="margin-bottom: 0">
+            <el-checkbox
+              :indeterminate="imageTextType.isIndeterminate"
+              v-model="imageTextType.checkAll"
+              @change="val => handleCheckAllChange(val, 'imageTextType')"
+              >全选</el-checkbox
+            >
+            <div style="margin: 2px 0"></div>
             <el-checkbox-group v-model="form.imageTextType" @change="val => handleCheckedChange(val, 'imageTextType')">
-              <el-checkbox v-for="item in imageTextTypeList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
+              <el-checkbox v-for="item in imageTextTypeList" :label="item.id" :key="item.id">{{
+                item.name
+              }}</el-checkbox>
             </el-checkbox-group>
           </el-form-item>
         </el-form>
@@ -66,7 +106,14 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
-import { getProjectList, getTypeList, getContentTypesList, createProject, updateProject, deleteProject } from '@/api/settings'
+import {
+  getProjectList,
+  getTypeList,
+  getContentTypesList,
+  createProject,
+  updateProject,
+  deleteProject
+} from '@/api/settings'
 const defaultForm = {
   name: '',
   short_name: '',
@@ -119,6 +166,18 @@ export default {
     }
   },
   computed: {
+    // 权限列表
+    permissions() {
+      return this.$store.state.user.permissions
+    },
+    // 创建权限
+    hasCreate() {
+      return this.permissions.includes('setting-function-project-create')
+    },
+    // 删除权限
+    hasDelete() {
+      return this.permissions.includes('setting-function-project-delete')
+    },
     isDetails() {
       return this.drawerType === 'details'
     },
@@ -156,7 +215,7 @@ export default {
           }
         ],
         columns: [
-          { prop: 'selection', label: '', type: 'selection', minWidth: '50px', fixed: 'left' },
+          { type: 'selection', minWidth: '50px', fixed: 'left', visible: this.hasDelete },
           { prop: 'id', label: '项目ID', slots: 'project_id', minWidth: '160px', fixed: 'left' },
           { prop: 'name', label: '项目名称', minWidth: '150px', fixed: 'left' },
           { prop: 'short_name', label: '项目简称', minWidth: '150px' },
@@ -195,13 +254,13 @@ export default {
       console.log(this.form)
     },
     handleCheckAllChange(val, target) {
-      this.form[target] = val ? this[target + 'List'].map(item => item.id) : [];
-      this[target].isIndeterminate = false;
+      this.form[target] = val ? this[target + 'List'].map(item => item.id) : []
+      this[target].isIndeterminate = false
     },
     handleCheckedChange(val, target) {
-      const checkedCount = val.length;
-      this[target].checkAll = checkedCount === this[target + 'List'].length;
-      this[target].isIndeterminate = checkedCount > 0 && checkedCount < this[target + 'List'].length;
+      const checkedCount = val.length
+      this[target].checkAll = checkedCount === this[target + 'List'].length
+      this[target].isIndeterminate = checkedCount > 0 && checkedCount < this[target + 'List'].length
     },
     handleDrawerClose() {
       this.drawerVisible = false
@@ -227,10 +286,13 @@ export default {
       this.tableSelections = val.map(item => item.id)
     },
     statusChange(val) {
-      this.fetchUpdateProject({
+      this.fetchUpdateProject(
+        {
           project_id: val.id,
           status: val.status
-      }, 'status')
+        },
+        'status'
+      )
     },
     getFormData() {
       const form = this.form
@@ -248,7 +310,7 @@ export default {
     },
     fetchCreateProject() {
       const data = this.getFormData()
-      createProject(data).then((res) => {
+      createProject(data).then(res => {
         if (res.code === 0 && res.message === 'SUCCESS') {
           this.$message.success('新建项目成功')
           this.$refs.tabList.refetch()
@@ -259,7 +321,7 @@ export default {
     },
     fetchUpdateProject(data, type) {
       const msg = type === 'status' ? '更改状态' : '更改项目'
-      updateProject(data).then((res) => {
+      updateProject(data).then(res => {
         if (res.code === 0 && res.message === 'SUCCESS') {
           this.$message.success(msg + '成功')
           this.$refs.tabList.refetch()
@@ -269,7 +331,7 @@ export default {
       })
     },
     fetchDeleteProject() {
-      deleteProject({ project_id: this.tableSelections[0] }).then((res) => {
+      deleteProject({ project_id: this.tableSelections[0] }).then(res => {
         if (res.code === 0 && res.data && res.data.status) {
           this.$message.success('删除项目成功')
           this.$refs.tabList.refetch()
@@ -279,14 +341,14 @@ export default {
       })
     },
     fetchProjectTypeList() {
-      getTypeList({ type: 0, status: 1, limit: 100 }).then((res) => {
+      getTypeList({ type: 0, status: 1, limit: 100 }).then(res => {
         if (res.code === 0 && res.data && Array.isArray(res.data.data)) {
           this.projectTypeList = res.data.data
         }
       })
     },
     fetchContentTypeList() {
-      getContentTypesList().then((res) => {
+      getContentTypesList().then(res => {
         if (res.code === 0 && res.data) {
           this.adTypeList = res.data.advert_list
           this.articleTypeList = res.data.article_list
@@ -298,23 +360,23 @@ export default {
 }
 </script>
 <style scoped>
-.details-handle{
-  cursor:pointer;
+.details-handle {
+  cursor: pointer;
 }
-.details-handle:hover{
-  color:#409EFF;
+.details-handle:hover {
+  color: #409eff;
 }
-.drawer__content{
-  height:100%;
+.drawer__content {
+  height: 100%;
 }
-.drawer-form{
-  width:450px;
-  margin:0 20px;
-  padding:20px 0 10px;
+.drawer-form {
+  width: 450px;
+  margin: 0 20px;
+  padding: 20px 0 10px;
   min-height: calc(100% - 73px);
 }
-.drawer__footer{
-  text-align:center;
-  padding-bottom:15px;
+.drawer__footer {
+  text-align: center;
+  padding-bottom: 15px;
 }
 </style>

src/pages/settings/staff/index.vue

 <template>
   <div class="staff page_container">
-    <table-list v-bind="tableOptions" ref="tabList">
+    <table-list v-bind="tableOptions" ref="tabList" @selection-change="handleSelectionChange">
       <template #header-aside>
-        <el-button type="primary" size="mini" @click="handleCreate">新建员工</el-button>
+        <el-button type="primary" size="mini" @click="handleCreate" v-if="hasCreate">新建员工</el-button>
       </template>
       <!-- 姓名 -->
       <template v-slot:table-name="{ row }">
@@ -29,6 +29,11 @@
         <el-button type="text" @click="changePassword(row)">重置密码</el-button>
         <el-button type="text" @click="changePhone(row)">更换手机号</el-button>
       </template>
+      <template #footer>
+        <el-button size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete"
+          >删除</el-button
+        >
+      </template>
     </table-list>
     <el-drawer :title="drawerTitle" :visible.sync="drawerVisible" size="440px" :destroy-on-close="true">
       <div class="drawer__content">
@@ -120,7 +125,7 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
-import { getStaffList, getProjectList, getRoleList, createStaff, updateStaff } from '@/api/settings'
+import { getStaffList, getProjectList, getRoleList, createStaff, updateStaff, batchDeleteStaff } from '@/api/settings'
 import { sendCode } from '@/api/account'
 import { searchUserList } from '@/api/system'
 const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{4,8}$/
@@ -175,6 +180,18 @@ export default {
     }
   },
   computed: {
+    // 权限列表
+    permissions() {
+      return this.$store.state.user.permissions
+    },
+    // 创建权限
+    hasCreate() {
+      return this.permissions.includes('setting-function-user-create')
+    },
+    // 删除权限
+    hasDelete() {
+      return this.permissions.includes('setting-function-user-delete')
+    },
     drawerTitle() {
       return this.drawerType === 'create' ? '新建员工' : '编辑员工'
     },
@@ -213,7 +230,7 @@ export default {
           }
         ],
         columns: [
-          { prop: 'selection', label: '', type: 'selection', minWidth: '50px', fixed: 'left' },
+          { type: 'selection', minWidth: '50px', fixed: 'left', visible: this.hasDelete },
           { prop: 'sso_user.real_name', label: '姓名', slots: 'table-name', minWidth: '80px', fixed: 'left' },
           { prop: 'roles', label: '角色', slots: 'table-role', minWidth: '100px' },
           { prop: 'sso_user.mobile', label: '手机号', minWidth: '110px' },
@@ -232,6 +249,18 @@ export default {
     this.fetchRoleList()
   },
   methods: {
+    // 删除
+    handleRemove() {
+      const ids = this.multipleSelection.map(item => item.id)
+      batchDeleteStaff({ sso_ids: ids }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('删除成功')
+          this.$refs.tableList.refetch(true)
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
     handleCreate() {
       this.drawerVisible = true
       this.drawerType = 'create'

src/pages/settings/type/index.vue

 <template>
   <div class="type page_container">
-    <el-button class="btn-create" type="primary" @click="handleCreate" size="small">新建类型</el-button>
-    <el-tabs v-model="activeName" type="card">
+    <el-button class="btn-create" type="primary" @click="handleCreate" size="small" v-if="hasCreate"
+      >新建类型</el-button
+    >
+    <el-tabs v-model="activeName" type="card" tab-click="handleTabClick">
       <el-tab-pane label="项目类型" name="0" lazy>
-        <table-list v-bind="projectTableOptions" ref="tableList">
+        <table-list v-bind="projectTableOptions" ref="tableList" @selection-change="handleSelectionChange">
           <!-- 项目Id -->
-          <template v-slot:table-id="{ row }"><p class="details-handle" @click="handleDetails(row)">{{row.id}}</p></template>
+          <template v-slot:table-id="{ row }"
+            ><p class="details-handle" @click="handleDetails(row)">{{ row.id }}</p></template
+          >
           <!-- 创建人 -->
-          <template v-slot:table-creater="{ row }"><p>{{row.sso_user.realname || row.sso_user.nickname}}</p></template>
+          <template v-slot:table-creater="{ row }"
+            ><p>{{ row.sso_user.realname || row.sso_user.nickname }}</p></template
+          >
           <!-- 状态 -->
           <template v-slot:table-status="{ row }">
-            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" @change="statusChange(row)"></el-switch>
+            <el-switch
+              v-model="row.status"
+              :active-value="1"
+              :inactive-value="0"
+              active-text="启用"
+              inactive-text="停用"
+              @change="statusChange(row)"
+            ></el-switch>
+          </template>
+          <template #footer>
+            <el-button size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete"
+              >删除</el-button
+            >
           </template>
         </table-list>
       </el-tab-pane>
       <el-tab-pane label="内容类型" name="1" lazy>
-        <table-list v-bind="contentTableOptions" ref="tableList">
+        <table-list v-bind="contentTableOptions" ref="tableList" @selection-change="handleSelectionChange">
           <!-- 项目Id -->
-          <template v-slot:table-id="{ row }"><p class="details-handle" @click="handleDetails(row)">{{row.id}}</p></template>
+          <template v-slot:table-id="{ row }"
+            ><p class="details-handle" @click="handleDetails(row)">{{ row.id }}</p></template
+          >
           <!-- 创建人 -->
-          <template v-slot:table-creater="{ row }"><p>{{row.sso_user.realname || row.sso_user.nickname}}</p></template>
+          <template v-slot:table-creater="{ row }"
+            ><p>{{ row.sso_user.realname || row.sso_user.nickname }}</p></template
+          >
           <!-- 创建人 -->
-          <template v-slot:table-category="{ row }"><p>{{row.category | categoryFilter}}</p></template>
+          <template v-slot:table-category="{ row }"
+            ><p>{{ row.category | categoryFilter }}</p></template
+          >
           <!-- 状态 -->
           <template v-slot:table-status="{ row }">
-            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="停用" @change="statusChange(row)"></el-switch>
+            <el-switch
+              v-model="row.status"
+              :active-value="1"
+              :inactive-value="0"
+              active-text="启用"
+              inactive-text="停用"
+              @change="statusChange(row)"
+            ></el-switch>
+          </template>
+          <template #footer>
+            <el-button size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete"
+              >删除</el-button
+            >
           </template>
         </table-list>
       </el-tab-pane>
     </el-tabs>
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="440px" @close="handleDialogClose" :destroy-on-close="true">
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="440px"
+      @close="handleDialogClose"
+      :destroy-on-close="true"
+    >
       <el-form :model="form" label-width="110px" ref="dialogForm" class="dialog-form">
         <template v-if="activeName === '0'">
-          <el-form-item label="项目类型名称" prop="name" :rules="{ required: true, message: '请输入项目类型名称', trigger: 'blur' }">
+          <el-form-item
+            label="项目类型名称"
+            prop="name"
+            :rules="{ required: true, message: '请输入项目类型名称', trigger: 'blur' }"
+          >
             <el-input v-model="form.name" size="small"></el-input>
           </el-form-item>
-          <el-form-item v-if="dialogType === 'create'" label="参数ID为：" prop="tag" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
+          <el-form-item
+            v-if="dialogType === 'create'"
+            label="参数ID为："
+            prop="tag"
+            :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }"
+          >
             <el-input v-model="form.tag" size="small"></el-input>
           </el-form-item>
         </template>
         <template v-else>
-          <el-form-item label="内容类型为：" prop="category" :rules="[{ required: true, message: '请选择手机号', trigger: 'change' }]">
-            <el-select v-model="form.category" placeholder="请选择类型" size="small" style="width:100%;">
-              <el-option :label="item.name" :value="item.id" v-for="item in contentTypeList" :key="item.id" ></el-option>
+          <el-form-item
+            label="内容类型为："
+            prop="category"
+            :rules="[{ required: true, message: '请选择手机号', trigger: 'change' }]"
+          >
+            <el-select v-model="form.category" placeholder="请选择类型" size="small" style="width: 100%">
+              <el-option :label="item.name" :value="item.id" v-for="item in contentTypeList" :key="item.id"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item v-if="dialogType === 'create'" label="参数ID为：" prop="tag" :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }">
+          <el-form-item
+            v-if="dialogType === 'create'"
+            label="参数ID为："
+            prop="tag"
+            :rules="{ required: true, message: '请输入参数ID', trigger: 'blur' }"
+          >
             <el-input v-model="form.tag" size="small"></el-input>
           </el-form-item>
-          <el-form-item label="类型名称为：" prop="name" :rules="{ required: true, message: '请输入类型名称', trigger: 'blur' }">
+          <el-form-item
+            label="类型名称为："
+            prop="name"
+            :rules="{ required: true, message: '请输入类型名称', trigger: 'blur' }"
+          >
             <el-input v-model="form.name" size="small"></el-input>
           </el-form-item>
         </template>
@@ -62,7 +126,7 @@
 </template>
 <script>
 import TableList from '@/components/TableList'
-import { getTypeList, createType, updateType } from '@/api/settings.js'
+import { getTypeList, createType, updateType, batchDeleteType } from '@/api/settings.js'
 const defaultForm = {
   name: '',
   category: '',
@@ -73,31 +137,59 @@ export default {
   data() {
     return {
       activeName: '0',
+
+      contentTypeList: [
+        { id: 1, name: '文章' },
+        { id: 2, name: '广告' },
+        { id: 3, name: '图文' }
+      ],
+      dialogVisible: false,
+      dialogType: '',
+      form: Object.assign({}, defaultForm),
+      selectedId: '',
+      multipleSelection: []
+    }
+  },
+  computed: {
+    // 权限列表
+    permissions() {
+      return this.$store.state.user.permissions
+    },
+    // 创建权限
+    hasCreate() {
+      return this.permissions.includes('setting-function-type-create')
+    },
+    // 删除权限
+    hasDelete() {
+      return this.permissions.includes('setting-function-type-delete')
+    },
     // 项目类型
-      projectTableOptions: {
+    projectTableOptions() {
+      return {
         remote: {
           httpRequest: getTypeList,
           params: { type: 0 }
         },
         columns: [
-          { prop: 'selection', label: '', type: 'selection', minWidth: '50px' },
+          { type: 'selection', visible: this.hasDelete },
           { prop: 'id', label: '项目类型ID', slots: 'table-id', minWidth: '150px' },
           { prop: 'name', label: '项目类型', minWidth: '150px' },
           { prop: 'sso_user', label: '创建人', slots: 'table-creater', minWidth: '100px' },
           { prop: 'created_at', label: '创建时间', minWidth: '150px' },
           { prop: 'tag', label: '参数ID', minWidth: '80px' },
           { prop: 'status', label: '状态', slots: 'table-status', minWidth: '150px' }
-        ],
-        data: []
+        ]
+      }
     },
     // 内容类型
-      contentTableOptions: {
+    contentTableOptions() {
+      return {
         remote: {
           httpRequest: getTypeList,
           params: { type: 1 }
         },
         columns: [
-          { prop: 'selection', label: '', type: 'selection', minWidth: '50px' },
+          { type: 'selection', visible: this.hasDelete },
           { prop: 'id', label: '内容ID', slots: 'table-id', minWidth: '150px' },
           { prop: 'name', label: '类型名称', minWidth: '150px' },
           { prop: 'category', label: '内容类型', slots: 'table-category', minWidth: '80px' },
@@ -106,19 +198,8 @@ export default {
           { prop: 'tag', label: '参数ID', minWidth: '100px' },
           { prop: 'status', label: '状态', slots: 'table-status', minWidth: '150px' }
         ]
-      },
-      contentTypeList: [
-        { id: 1, name: '文章' },
-        { id: 2, name: '广告' },
-        { id: 3, name: '图文' }
-      ],
-      dialogVisible: false,
-      dialogType: '',
-      form: Object.assign({}, defaultForm),
-      selectedId: ''
       }
     },
-  computed: {
     dialogTitle() {
       let text = this.dialogType === 'create' ? '新建' : '修改'
       text += this.activeName === '0' ? '项目' : '内容'
@@ -140,6 +221,25 @@ export default {
     }
   },
   methods: {
+    handleTabClick() {
+      this.multipleSelection = []
+    },
+    // 选择
+    handleSelectionChange(value) {
+      this.multipleSelection = value
+    },
+    // 删除
+    handleRemove() {
+      const ids = this.multipleSelection.map(item => item.id)
+      batchDeleteType({ ids }).then(res => {
+        if (res.code === 0) {
+          this.$message.success('删除成功')
+          this.$refs.tableList.refetch(true)
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
     handleCreate() {
       this.dialogType = 'create'
       this.dialogVisible = true
@@ -175,36 +275,43 @@ export default {
       })
     },
     statusChange(val) {
-      this.fetchUpdateType({
+      this.fetchUpdateType(
+        {
           type_id: val.id,
           status: val.status
-      }, 'status')
+        },
+        'status'
+      )
     },
     fetchCreateType() {
       const params = { ...this.form }
       !params.category && (params.category = 0)
       params.type = this.activeName === '0' ? 0 : 1
-      createType(params).then((res) => {
+      createType(params)
+        .then(res => {
           if (res.code === 0 && res.data && res.data.id) {
             this.$refs.tableList.refetch()
             this.$message.success('新建类型成功')
           } else {
             this.$message.error(res.message || '新建类型失败')
           }
-      }).catch(() => {
+        })
+        .catch(() => {
           this.$message.error('新建类型失败')
         })
     },
     fetchUpdateType(data, type) {
       const msg = type === 'status' ? '更改状态' : '更改类型名称'
-      updateType(data).then((res) => {
+      updateType(data)
+        .then(res => {
           if (res.code === 0 && res.data && res.data.status) {
             this.$message.success(msg + '成功')
             this.$refs.tableList.refetch()
           } else {
             this.$message.error(res.message || msg + '失败')
           }
-      }).catch(() => {
+        })
+        .catch(() => {
           this.$message.error(msg + '失败')
         })
     }
@@ -212,27 +319,27 @@ export default {
 }
 </script>
 <style scoped>
-.type{
-  box-sizing:border-box;
-  padding:15px;
-  position:relative;
+.type {
+  box-sizing: border-box;
+  padding: 15px;
+  position: relative;
 }
-.btn-create{
-  position:absolute;
-  right:20px;
-  top:16px;
-  z-index:1;
+.btn-create {
+  position: absolute;
+  right: 20px;
+  top: 16px;
+  z-index: 1;
 }
-.el-tabs{
-  height:100%;
+.el-tabs {
+  height: 100%;
 }
-.el-tabs ::v-deep.el-tabs__content{
-  height:calc(100% - 56px);
+.el-tabs ::v-deep.el-tabs__content {
+  height: calc(100% - 56px);
 }
-.el-tab-pane{
-  height:100%;
+.el-tab-pane {
+  height: 100%;
 }
-.table-list .table-list-bd{
-  height:100%;
+.table-list .table-list-bd {
+  height: 100%;
 }
 </style>