租户会员管理

src/router/index.js

@@ -66,6 +66,14 @@ const routes = [
         component: () => import('@/views/client/index.vue')
       },
       {
+        path: 'memberType',
+        meta: {
+          title: '会员类别管理',
+          active: 'memberType'
+        },
+        component: () => import('@/views/memberType/index.vue')
+      },
+      {
         path: 'apply',
         meta: {
           title: '应用管理',

src/views/layout/index.vue

@@ -27,6 +27,10 @@
               <i class="el-icon-film"></i>
               <span slot="title">租户管理</span>
             </el-menu-item>
+            <el-menu-item index="memberType" v-if="$permission('/admin/memberType')">
+              <i class="el-icon-film"></i>
+              <span slot="title">租户会员类型管理</span>
+            </el-menu-item>
             <!-- <el-menu-item index="apply">
               <i class="el-icon-present"></i>
               <span slot="title">应用管理</span>

src/views/memberType/components/table.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <el-form :inline="true"  v-if="visibleCopy" >
+      <el-form-item class="tenant" >
+        <el-input
+          placeholder="根据会员类型/名称查询"
+          v-model="queryParams.likeName"
+          clearable
+          style="width: 200px;">
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <!-- <el-button type="" size="small" @click="getList2" v-if="$permission('/admin/memberType/check')">查询</el-button>
+        <el-button type="primary" size="small" @click="handleAdd()" v-if="$permission('/admin/memberType/add')">新增</el-button> -->
+        <el-button type="" size="small" @click="getList" >查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        @sort-change="sortMethod"
+        header-row-class-name="custom-table-header"
+    >
+      <el-table-column prop="tenantVipName" label="会员类型/名称" sortable align="center" width="200px">
+
+      </el-table-column>
+      <el-table-column label="功能权限" align="center" show-overflow-tooltip min-width="200px">
+        <template slot-scope="scope">
+          <span v-for="item in scope.row.functionIdPathNameDescriptions" :key="item.functionId">{{ item.functionName  }} &nbsp; </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createPersonName" v-if="!visibleCopy" label="创建人" sortable align="center" width="100px"></el-table-column>
+      <el-table-column prop="createTime"  v-if="!visibleCopy" label="创建时间" sortable align="center" ></el-table-column>
+      <el-table-column prop="remark"  v-if="!visibleCopy" label="备注" show-overflow-tooltip align="center" width="200px"></el-table-column>
+      <el-table-column label="操作" align="center" width="150">
+        <template slot-scope="scope">
+          <el-dropdown v-if="!visibleCopy" split-button type="primary" size="small">
+            <p v-if="$permission('/admin/memberType/modify')" @click="handleEdit(scope.row)">编辑</p>
+            <p v-else @click="handleEdit(scope.row)">编辑</p>
+            <el-dropdown-menu slot="dropdown" class="text-align_center">
+              <el-dropdown-item @click.native="handleDelete(scope.row.id)">删除</el-dropdown-item>
+              <!-- <el-dropdown-item @click.native="handleAdd(scope.row.id)">新增</el-dropdown-item> -->
+              <!-- <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" divided
+                v-if="$permission('/admin/memberType/delete')">删除
+              </el-dropdown-item> -->
+              <!-- <el-dropdown-item @click.native="distributionPersonnel(scope.row)" divided>分配人员
+              </el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-tooltip  v-else  class="item" effect="dark" content="复制已有权限功能并粘贴到新增会员类别权限功能处" placement="top">
+            <el-button @click="handleCopy(scope.row)" type="primary" size="small">权限复制粘贴</el-button>
+          </el-tooltip>
+          
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格分页 -->
+    <div class="pagination">
+      <el-pagination :current-page.sync="queryParams.page" :page-size="queryParams.pageSize" :total="total"
+                     @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
+      background></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ['isMemberType', 'likeNames','visibleCopy'],
+  data() {
+    return {
+      tableData: [],
+      total: 0,
+      loading: false,
+      queryParams: {
+        pageSize: 10,
+        page: 1,
+        likeName:'',
+        orderBy: '',
+        orderType: '',
+      },
+    };
+  },
+  watch: {
+    isMemberType(val) {
+      console.log(val);
+      // if (val) {
+        this.getList()
+      // }
+    },
+    likeNames(val) {
+        this.queryParams.likeName = val
+        this.getList()
+    },
+    visibleCopy(val) {
+      this.getList()
+    },
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // 表格数据
+    getList() {
+      this.loading = true
+      this.$api.queryTenantVipType(this.queryParams).then(res => {
+        if (res.code == 200) {
+          this.tableData = res.data.list
+          // this.tableDataCopy = res.data.list
+          this.total = res.data.totalCount
+          this.loading = false
+        }
+      })
+    },
+    handleCopy(row) {
+      this.$emit('row',row)
+    },
+    //排序
+    sortMethod({ column, prop, order }) {
+      console.log(column, prop, order);
+      if (order == 'ascending') {
+        this.queryParams.orderType = 'asc'
+        this.queryParams.orderBy = prop
+        this.getList()
+      } else if (order == 'descending') {
+        this.queryParams.orderType = 'desc'
+        this.queryParams.orderBy = prop
+        this.getList()
+      }
+    },
+    // 删除
+    handleDelete(id) {
+      this.$confirm('此操作将删除该会员类型，不可恢复， 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+             this.$api.deleteTenantVipType({ id: id }).then(res => {
+                if (res.code == 200) {
+                  this.$message.success('删除成功!');
+                  this.getList()
+                }
+              })
+          }).catch(() => {
+            this.$message.info('已取消删除');
+          });
+
+     
+    },
+    // 表格编辑
+    handleEdit(row) {
+      // this.title = '编辑会员类型功能权限'
+      row.visible = true
+      // this.isMemberType = true
+      // let rows = JSON.parse(JSON.stringify(row))
+      // this.ruleForm = rows
+      this.$emit('tableRow', row)
+      console.log('tableRow');
+    },
+    // 表格分页
+    handleCurrentChange(val) {
+      this.queryParams.page = val;
+      this.getList();
+    },
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/memberType/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <!-- 搜索 -->
+    <el-form :inline="true">
+      <!-- <el-form-item v-if="$permission('/admin/memberType/check')"> -->
+      <!-- <el-form-item>
+        <el-input v-model="queryParams.name" size="small" placeholder="请输入"></el-input>
+      </el-form-item> -->
+      <!-- <el-form-item class="tenant" v-if="userinfo.rList?(userinfo.rList.filter(item=>item.roleId==1))[0]:''"> -->
+      <el-form-item class="tenant" >
+        <el-input
+          placeholder="根据会员类型/名称或创建人查询"
+          v-model="queryParams.likeName"
+          clearable
+          style="width: 280px;">
+        </el-input>
+        <!-- <el-autocomplete
+          class="inline-input"
+          v-model="tenant"
+          :fetch-suggestions="querySearch"
+          placeholder="根据会员类型/名称或创建人查询"
+          :trigger-on-focus="false"
+          @select="handleSelect"
+          style="width: 280px;"
+        ></el-autocomplete> -->
+        <!-- <el-select v-model="queryParams.tenant" @change="getList" clearable placeholder="根据租户/租户类别查询">
+          <el-option
+              v-for="item in tenantList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+          </el-option>
+        </el-select> -->
+      </el-form-item>
+      <el-form-item>
+        <!-- <el-button type="" size="small" @click="getList2" v-if="$permission('/admin/memberType/check')">查询</el-button>
+        <el-button type="primary" size="small" @click="handleAdd()" v-if="$permission('/admin/memberType/add')">新增</el-button> -->
+        <el-button type="" size="small" @click="get" >查询</el-button>
+        <el-button type="primary" size="small" @click="handleAdd()">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 表格 -->
+    <Table @tableRow="hanleEdit" :isMemberType="isMemberType" :likeNames="likeName"></Table>
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog :title="title" :visible.sync="visible" width="600px" max-height="800" :before-close="close" append-to-body>
+      <!-- dialog -->
+      <!-- <Dialogs ref="ruleForm" :isDialogs="isDialogs" @ruleForms="handleForms" :ruleFormTable="ruleFormTab"></Dialogs> -->
+      <div style="height: 280px">
+        <el-form  :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="80px" label-position="left">
+          <el-form-item label="会员类型" prop="tenantVipName">
+            <el-input v-model="ruleForm.tenantVipName" placeholder="请输入会员类型名称"></el-input>
+            <!-- <el-select style="width:100%" v-model="ruleForm.memberType"
+                       :disabled="(userinfo.rList?!(userinfo.rList.filter(item=>item.roleId==1))[0]:'')||disabled"
+                       placeholder="请选择">
+              <el-option
+                  v-for="item in tenantList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+              </el-option>
+            </el-select> -->
+          </el-form-item>
+          <el-form-item label="创建人" prop="createPersonName">
+            <el-input v-model="ruleForm.createPersonName" placeholder="请输入创建人" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="功能权限" prop="functions" style="margin-top: 20px;">
+                        <el-cascader
+                              ref="FunctionCascader"
+                              v-model="ruleForm.functions"
+                              :options="authority"
+                              :props="{multiple:true,value:'id',label:'name' }"
+                              collapse-tags
+                              placeholder="请选择功能权限"
+                              clearable
+                              :style="{width:isAdd?385+'px':100+'%'}"></el-cascader>
+                    <el-tooltip v-if="isAdd" style="margin-left: 20px;"  class="item" effect="dark" content="复制已有会员类别权限功能并粘贴到新增会员类别权限功能处" placement="top">
+                      <el-button @click="btnCopy">复制</el-button>
+                    </el-tooltip>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" maxlength="100"
+                      show-word-limit></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 权限展示 -->
+    <el-dialog title="权限展示" :visible.sync="visibleCopy" width="600px" max-height="800" :before-close="closeCopy" append-to-body>
+      <Table :likeNames="likeName" :visibleCopy="visibleCopy" @row="handleCopy"></Table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeCopy">取 消</el-button>
+        <el-button type="primary" @click="submitCopy" :loading="btnLoading">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import Dialogs from "@/views/memberType/components/dialogs.vue"
+import Table from "@/views/memberType/components/table.vue"
+
+export default {
+  components: {
+    // Dialogs,
+    Table,
+  },
+  data() {
+    return {
+      total: 0,
+      tenantList: [],
+      tableData: [],
+      tableDataCopy: [],
+      authority: [],//权限功能面板数据
+      ruleForm: {},//新增、编辑数据
+      ruleFormTab: {},//新增、编辑数据
+      queryParams: {
+        pageSize: 10,
+        page: 1,
+        likeName:'',
+        orderBy: '',
+        orderType: '',
+      },
+      likeName:'',
+      visible: false,
+      visibleCopy: false,
+      title: '',
+      isAdd: true,
+      loading: false,
+      btnLoading: false,
+      rules: {
+        tenantVipName: [{ required: true, message: '请输入会员类型/名称', trigger: 'blur' },],
+        functions: [{ required: true, message: '请选择功能权限', trigger: 'change' },],
+        // type: 'array',
+      },
+      tenant: '',
+      isMemberType: false,//更新或新增成功标识
+      // isDialogs: false,
+    }
+  },
+  computed: {
+    userinfo() {
+      return this.$store.state.admin.userinfo
+    },
+  },
+  mounted() {
+    this.getFunction()
+    // this.getList()
+  },
+  methods: {
+    //查询
+    get() {
+      this.likeName = this.queryParams.likeName?this.queryParams.likeName:null
+      // console.log(this.likeName);
+    },
+      //权限功能 
+    getFunction(val) {
+      this.$api.getAllFunctionList({ type: val }).then(response => {
+        this.authority = []
+        this.authority = response.data
+      }).catch(error => {
+        // this.loading = true
+      })
+    },
+    // 复制弹框
+    btnCopy() {
+      this.visibleCopy = true
+    },
+    submitCopy() {
+      this.closeCopy()
+    },
+    closeCopy() {
+      this.visibleCopy = false
+    },
+    handleCopy(val) {
+      // console.log(val);
+      this.$set(this.ruleForm,'functions',val.functions)
+      // this.ruleForm.functions = val.functions
+      if (this.ruleForm.functions) {
+        this.$message.success('复制粘贴权限成功')
+        this.closeCopy()
+      } else {
+        this.$message.info('复制粘贴权限失败')
+      }
+    },
+    
+    // 新增、编辑弹窗功能权限选择
+    // downloadChange() { },
+    
+    // 新增、编辑弹窗关闭
+    close() {
+      this.visible = false
+      this.ruleForm = {}
+      // this.isDialogs = false
+      // this.isMemberType = false
+      this.resetForm()
+    },
+    resetForm(formName) {
+        this.$refs.ruleForm.resetFields();
+      },
+   
+    hanleEdit(val) {
+        let rows = JSON.parse(JSON.stringify(val))
+      this.visible = rows.visible
+        this.isAdd=false
+        this.title = '编辑会员类型功能权限'
+        this.ruleForm = rows
+        // console.log(this.ruleForm);
+     
+    },
+     // 新增类别
+    handleAdd() {
+      this.title = '新增会员类型功能权限'
+      this.isAdd=true
+      this.ruleForm={}
+      this.ruleForm.createPersonName = this.userinfo.name
+      this.visible = true
+
+    },
+    // 新增、编辑弹窗确定
+    submit() {
+      console.log(this.ruleForm, this.userinfo);
+      // this.isDialogs=true
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.btnLoading = true
+          if (this.ruleForm.hasOwnProperty('functions')) {
+            var functionModifyPaths = []
+            this.ruleForm.functions.forEach(item => {
+              let a = item.join(',')
+              functionModifyPaths.push(a)
+            })
+            this.ruleForm.createPersonId = this.userinfo.id
+            this.ruleForm.functionModifyPaths = functionModifyPaths
+          }
+          
+          console.log(this.ruleForm);
+          if (this.ruleForm.id) {
+            this.$api.updateNewTenantVipType(this.ruleForm).then(res => {
+              if (res.code == 200) {
+                this.$message.success("更新会员功能权限成功")
+                this.btnLoading = false
+                this.isMemberType = !this.isMemberType
+                 this.close()
+              }
+            }).catch(err => {
+              console.log(err);
+                this.$message.error(err.message)
+                this.btnLoading = false
+            })
+          } else {
+            this.$api.addNewTenantVipType(this.ruleForm).then(res => {
+              if (res.code == 200) {
+                this.$message.success("新增会员功能权限成功")
+                this.btnLoading = false
+                this.isMemberType = !this.isMemberType
+                this.close()
+              } 
+            }).catch(err => {
+              console.log(err);
+              this.$message.error(err.message)
+                this.btnLoading = false
+            })
+          }
+        }
+      })
+    },
+   
+    // 租户/租户类别查询
+    // handleSelect(item) {
+    //   this.tenant = item
+    // },
+    // querySearch(queryString, cb) { },
+
+  },
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>