1

src/api/index.js

@@ -4,7 +4,7 @@ import permission from "./permission";
 import registerAndLogin from './registerAndLogin'
 import application from "./application";
 import version from "./version";
-import vip from "./vip";
+import vip from "./vipType";
 import file from "./file";
 
 

src/api/version.js

@@ -10,24 +10,6 @@ export default {
         return axios.post('/permission/api/version/queryVersionList',data)
     },
 
-    /**
-     * 根据id获取应用版本信息
-     * @param {*} data 
-     * @returns 
-     */
-    getVersionById(params){
-        return axios.get('/permission/api/version/queryById',{params})
-    },
-
-    /**
-     * 获取应用版本详情
-     * @param {*} data 
-     * @returns 
-     */
-    getVersionInfo(data){
-        return axios.post('/permission/api/version/queryVersionInfo',data)
-    },
-
     //添加应用版本
     addVersion(data){
         return axios.post('/permission/api/version/add', data)

src/api/vip.js

@@ -1,36 +0,0 @@
-import axios from '@/utils/axios'
-
-export default {
-    /**
-     * 获取应用会员列表
-     * @param {*} data 
-     * @returns 
-     */
-    getVipList(data){
-        return axios.post('/permission/api/appVipType/query',data)
-    },
-
-    /**
-     * 根据id获取应用会员信息
-     * @param {*} data 
-     * @returns 
-     */
-    getVipById(params){
-        return axios.get('/permission/api/appVipType/queryById',{params})
-    },
-
-    //添加应用会员
-    addVip(data){
-        return axios.post('/permission/api/appVipType/add', data)
-    },
-
-    //编辑应用会员
-    updateVip(data){
-        return axios.post('/permission/api/appVipType/update', data)
-    },
-
-    deleteVip(data){
-        return axios.post('/permission/api/appVipType/delete', data)
-    }
-
-}

src/api/vipType.js

@@ -0,0 +1,36 @@
+import axios from '@/utils/axios'
+
+export default {
+    /**
+     * 获取应用会员类型
+     * @param {*} data 
+     * @returns 
+     */
+    getVipList(data){
+        return axios.post('/permission/api/vipType/query',data)
+    },
+
+
+    //添加应用会员类型
+    addVipType(data){
+        return axios.post('/permission/api/vipType/add', data)
+    },
+
+    //编辑应用会员类型
+    updateVipType(data){
+        return axios.post('/permission/api/vipType/update', data)
+    },
+    //删除会员类型
+    deleteVipType(data){
+        return axios.post('/permission/api/vipType/delete', data)
+    },
+    //查询会员类型功能
+    getVipTypeFunction(data){
+        return axios.post('/permission/api/vipType/queryFunction', data)
+    },
+    //查询窍笔所有功能
+    queryQiaoBiFunction(data){
+        return axios.post('/permission/api/qiaoBiApplication/queryFunction', data)
+    },
+
+}

src/router/index.js

@@ -142,23 +142,30 @@ export const backStageManageRouterItem = [
         hidden:true
       },
       {
-        path: 'vip',
-        name: 'Administrator_vip',
-        component: () => import('@/views/backStageManage/application/vip/index.vue'),
+        path: 'vipType',
+        name: 'Administrator_vipType',
+        component: () => import('@/views/backStageManage/application/vipType/index.vue'),
         meta: {title: '应用会员类型', icon: '会员类型'}
       },
       {
-        path: 'addVip',
-        name: 'Administrator_addVip',
-        component: () => import('@/views/backStageManage/application/vip/components/addVipForm.vue'),
-        meta: {title: '添加应用会员类型', icon: 'addVip',keepAlive:true},
+        path: 'addVipType',
+        name: 'Administrator_addVipType',
+        component: () => import('@/views/backStageManage/application/vipType/addVipType.vue'),
+        meta: {title: '添加应用会员类型',keepAlive:true},
         hidden:true
       },
       {
-        path: 'editVip',
-        name: 'Administrator_editVip',
-        component: () => import('@/views/backStageManage/application/vip/components/editVipForm.vue'),
-        meta: {title: '编辑应用会员', icon: 'editVip'},
+        path: 'editVipType',
+        name: 'Administrator_editVipType',
+        component: () => import('@/views/backStageManage/application/vipType/editVipType.vue'),
+        meta: {title: '编辑应用会员类型', keepAlive:true},
+        hidden:true
+      },
+      {
+        path: 'vipTypeDetail',
+        name: 'Administrator_vipTypeDetail',
+        component: () => import('@/views/backStageManage/application/vipType/vipTypeDetail.vue'),
+        meta: {title: '应用会员类型详情'},
         hidden:true
       },
     ]

src/views/backStageManage/application/vip/components/addVipForm.vue

@@ -1,89 +0,0 @@
-<template>
-    <div>
-        <el-form ref="form" :model="form" :rules="rules" label-width="auto">
-            
-            <el-form-item label="会员类型名称" prop="vipName">
-                <el-input v-model="form.tenantVipName" placeholder="请输入会员类型名称" maxlength="20" />
-            </el-form-item>
-                
-            <el-form-item label="备注" prop="remark">
-                <el-input v-model="form.remark" placeholder="请输入备注" maxlength="50" />
-            </el-form-item>
-    
-            <el-form-item label="持续时长/月" prop="lastTime">
-                <el-input v-model="form.lastTime" placeholder="请输入持续时长" maxlength="50" />
-            </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <div class="button-container">
-                <el-button type="primary" @click="submitForm">提 交</el-button>
-                <el-button @click="cancel">重 置</el-button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-components: {},
-props: {},
-data() {
-    return {
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-            tenantVipName: [
-                { required: true, message: "会员类型名称不能为空", trigger: "blur" }
-            ],
-            lastTime: [
-                { required: true, message: "持续时长不能为空", trigger: "blur" }
-            ]
-        }
-    };
-},
-watch: {},
-computed: {},
-created() {},
-mounted() {},
-methods: {
-     /** 提交按钮 */
-     submitForm: function() {
-        this.$refs.form.validate((valid) => {
-            if (valid) {
-                this.$api.addVip(this.form)
-                    .then(response => {
-                        if (response.code === 200) {
-                            this.$message.success('提交成功');
-                            this.resetForm();
-                        } else {
-                            this.$message.error('提交失败');
-                        }
-                    })
-                    .catch(error => {
-                        this.$message.error('提交失败');
-                        console.error(error);
-                    });
-            }
-        });
-    },
-    
-},
-};
-</script>
-<style lang="scss" scoped>
-.el-form {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.dialog-footer {
-    display: flex;
-    justify-content: center;
-}
-
-.button-container {
-    display: flex;
-    justify-content: center;
-}
-</style>

src/views/backStageManage/application/vip/components/editVipForm.vue

@@ -1,102 +0,0 @@
-<template>
-    <div>
-        <el-form ref="form" :model="form" :rules="rules" label-width="auto">
-            <el-form-item label="会员类型名称" prop="tenantVipName">
-                <el-input v-model="form.tenantVipName" placeholder="请输入会员类型名称" maxlength="20" />
-            </el-form-item>       
-            <el-form-item label="持续时长" prop="lastTime">
-                <el-input v-model="form.lastTime" placeholder="请输入持续时长" maxlength="11" />
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-                <el-input v-model="form.remark" placeholder="请输入备注" maxlength="50" />
-            </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <div class="button-container">
-                <el-button type="primary" @click="submitForm">提 交</el-button>
-                <el-button @click="cancel">重 置</el-button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    components: {},
-    props: {},
-    data() {
-        return {
-            // 表单参数
-            form: {},
-            // 表单校验
-            rules: {
-                tenantVipName: [
-                    { required: true, message: "会员类型名称不能为空", trigger: "blur" }
-                ],
-                lastTime: [
-                    { required: true, message: "持续时长不能为空", trigger: "blur" }
-                ]
-            }
-        };
-    },
-    watch: {},
-    computed: {
-        vipId() {
-            return this.$route.query.id;
-        },
-    },
-    created() {},
-    mounted() {
-        this.getById()
-    },
-    methods: {
-        getById() {
-            var params = {
-                id: this.vipId,
-            };
-            this.$api.getVipById(params).then(response=>{
-                if(response.code == 200){
-                    this.form = response.data.records
-                }
-            }).catch(error=>{
-                this.form = []
-            })
-        },
-        /** 提交按钮 */
-        submitForm: function() {
-            this.$refs.form.validate((valid) => {
-                if (valid) {
-                    this.$api.updateVip(this.form)
-                        .then(response => {
-                            if (response.code === 200) {
-                                this.$message.success('提交成功');
-                                this.resetForm();
-                            } else {
-                                this.$message.error('提交失败');
-                            }
-                        })
-                        .catch(error => {
-                            this.$message.error('提交失败');
-                            console.error(error);
-                        });
-                }
-            });
-        },
-    },
-};
-</script>
-<style lang="scss" scoped>
-.el-form {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.dialog-footer {
-    display: flex;
-    justify-content: center;
-}
-.button-container {
-    display: flex;
-    justify-content: center;
-}
-</style>

src/views/backStageManage/application/vip/vipType.vue

@@ -1,226 +0,0 @@
-<template>
-  <div class="container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="会员类型名称" prop="tenantVipName">
-        <el-input
-          v-model="queryParams.tenantVipName"
-          placeholder="请输入会员类型名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
-      </el-col>
-    </el-row>
-
-    <el-table 
-        :data="tableData"
-        row-key="id"
-        style="width: 100%"
-        :maxHeight="tableHeight - 40"
-        v-loading="loading"
-        @selection-change="handleSelectionChange"
-        @sort-change="sortChange"
-    >
-        <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!choose"></el-table-column>
-
-        <el-table-column  v-if="choose" align="center">
-          <template slot-scope="scope">
-              <div>
-                  <el-checkbox-group v-model="checkList1">
-                      <el-checkbox :label="scope.row.id">{{(scope.$index + 1) + ((queryParams.current - 1) * queryParams.size)}}</el-checkbox>
-                  </el-checkbox-group>
-              </div>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="tenantVipName" label="会员类型名称"></el-table-column>
-        <el-table-column prop="lastTime" label="持续时长"></el-table-column>
-        <el-table-column prop="createPersonName" label="创建人"></el-table-column>
-        <el-table-column prop="createTime" label="创建时间"></el-table-column>
-        <el-table-column prop="remark" label="备注"></el-table-column>
-
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleEdit(scope.row)"
-            >修改</el-button>
-            <el-button
-              v-if="scope.row.id != 0"
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-            >删除</el-button>
-          </template>
-        </el-table-column>
-    </el-table>
-    <div>
-      <el-pagination background layout="total, sizes, prev, pager, next, jumper"
-        :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
-        @current-change="handleCurrentChange" @size-change="changeSize" :total="total">
-      </el-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-
-  components: {},
-  props: {},
-  data() {
-    return {
-      // 遮罩层
-      loading: false,
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 显示搜索条件
-      showSearch: true,
-      // 表单参数
-      form: {},
-      tableData: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        tenantVipName: undefined
-      },
-      rules: {
-        tenantVipName: [
-          { required: true, message: "会员类型名称不能为空", trigger: "blur" }
-        ]
-      }
-    };
-  },
-  watch: {},
-  computed: {},
-  created() {},
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    /** 查询vip列表 */
-    getList() {
-      this.loading = true;
-      this.$api.getVipList(this.queryParams).then(response=>{
-        if(response.code == 200){
-            this.tableData = response.data.records
-            this.total = response.data.total
-            this.loading = false
-        }
-      }).catch(error=>{
-          this.tableData = []
-          this.total = 0
-          this.loading = false
-      })
-    },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.$router.push('/administrator/addVip');
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.open = false;
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-    },
-    handleEdit(row) {
-      this.$router.push({ 
-        path: '/administrator/editVip', 
-        query: {
-            id: row.id
-        }
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.handleQuery();
-    },
-    handleDelete(row) {
-      this.removeVip([row.id]);
-    },
-    removeVip(ids,type){
-          this.$confirm('确认删除本条数据吗？', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-          }).then(() => {
-            var params = {
-                ids:ids,
-            }
-              this.$api.deleteVip(params).then(response=>{
-                  if(response.code == 200){
-                      this.$message.success('删除成功')
-                      this.getList()
-                      if(type){
-                          this.multipleSelection = []
-                          this.$refs.table.clearSelection();
-                      }else{
-                          var id = response.data.data[0]
-                          var index = this.multipleSelection.findIndex(item=>{
-                              return item.id == id
-                          })
-                          if(index!=-1){
-                              this.multipleSelection.splice(index,1)
-                          }
-                      }
-                      
-                  }
-              }).catch(error=>{
-                  this.$message.error('删除失败')
-              })
-          })
-      },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.container{
-  width: 100%;
-}
-.padding_20{
-  padding: 20px
-}
-::v-deep .el-table,
-.el-table__expanded-cell {
-  background-color: transparent;
-}
-
-::v-deep .el-table tr {
-  background-color: transparent !important;
-}
-::v-deep .el-table__body td,::v-deep .el-table__header th,
-.el-table .cell {
-  background-color: transparent;
-}
-::v-deep .el-table::before {
-  //去除底部白线
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0px;
-}
-
-</style>

src/views/backStageManage/application/vipType/addVipType.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <vipTypeForm model="add"></vipTypeForm>
+    </div>
+</template>
+
+<script>
+import vipTypeForm from './components/form/vipType.vue';
+export default {
+    components: {
+        vipTypeForm
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {},
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/application/vipType/components/form/vipType.vue

@@ -0,0 +1,229 @@
+<template>
+    <div>
+        <div class="button-container" v-if="model != 'detail'">
+                <el-button type="primary" size="small" :loading="btnLoading" @click="submitForm">提 交</el-button>
+                <el-button size="small"  @click="init">重 置</el-button>
+        </div>
+        <div class="form_center" >
+            <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px" :class="model == 'detail'?'pointer_events_none':''">
+                <el-form-item label="会员类型名称：" prop="vipTypeName" >
+                    <el-input v-model="form.vipTypeName" placeholder="请输入会员类型名称" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="持续时长：" prop="lastTime">
+                    <el-input v-model="form.lastTime" placeholder="请输入持续时长" >
+                        <template slot="append">月</template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="是否启用：" prop="enable">
+                    <el-radio-group v-model="form.enable">
+                        <el-radio :label="true">是</el-radio>
+                        <el-radio :label="false">否</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="备注：" prop="remark">
+                    <el-input v-model="form.remark" placeholder="请输入备注" maxlength="50" />
+                </el-form-item>
+            </el-form>
+            <div style="border:1px solid white;padding:10px;margin:10px 0;border-radius:8px;">
+                <div style="height: 500px;" >
+                    <p>
+                        {{model=='detail'?'功能清单':'选择功能'}}
+                    </p>
+                    <funTable ref="functionTable" :tableData="tableData" :loading="loading" :reload="reload" :canChoose="model=='detail'?false:true" :defaultChecked="true"></funTable>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import funTable from '@/views/backStageManage/application/vision/components/functionTable.vue';
+const currentForm = {
+    id:null,
+    vipName:null,
+    lastTime:1,
+    applicationCode:'4e95e3d926a2a4befa5d913acc0aa9f5',
+    applyId:14,
+    remark:null,
+    enable:true,
+    functionIds:[]
+}
+export default {
+    components: {
+        funTable
+    },
+    mixins:[],
+    props: {
+        id:"",
+        model:{
+            type:String,
+            default:"add"
+        },
+    },
+    data() {
+        return {
+            btnLoading: false,
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                vipTypeName: [
+                    { required: true, message: "会员类型不能为空", trigger: "blur" }
+                ],
+                lastTime: [
+                    { required: true, message: "持续时长不能为空", trigger: "blur" }
+                ]
+            },
+            tableData:{},
+            loading:false,
+            reload:true,
+            
+        };
+    },
+    watch: {
+        id(){
+            if(this.$route.path != '/administrator/editVipType'){
+                return
+            }
+            this.init()
+        },
+    },
+    computed: {},
+    created() {},
+    mounted() {
+       this.init()
+    },
+    methods: {
+        //初始化当前页面
+        async init(){
+            if(this.model == 'add'){
+                this.resetForm()
+            }else if(this.model == 'edit' || this.model == 'detail'){
+                if( this.model == 'detail'){
+                    this.reload = false
+                }
+                this.getById()
+            }
+            this.reload = false
+            this.$nextTick(()=>{
+                this.reload = true
+            })
+            await this.getList()
+        },
+        //查询数据并校验
+        getById(){
+            if(!this.id){
+                this.$message.error('编辑缺少参数')
+                return
+            }
+            var params = {
+                ids: [this.id],
+            };
+            this.$api.getVipList(params).then(response=>{
+                if(response.code == 200){
+                    var data = response.data.records
+                    if(data && data.length>0){
+                        this.form = data[0]
+                    }
+                }
+            }).catch(error=>{
+                this.resetForm()
+            })
+        },
+        //重置表单
+        resetForm(){
+            this.form = Object.assign({}, currentForm)
+            this.$refs['form'].resetFields();
+        },
+        //获取所有的功能及代码
+        getAllFunId(data,funId){
+            for(var i = 0;i<data.length;i++){
+                if(data[i].isSelect != 2){
+                    funId.push(data[i].id)
+                }
+                if(data[i].children && data[i].children.length){
+                    this.getAllFunId(data[i].children,funId)
+                }
+            }
+        },
+        /** 提交按钮 */
+        submitForm: function() {
+            this.$refs['form'].validate((valid) => {
+                if (valid) {
+                    var functionIds = []
+                    this.getAllFunId(this.tableData.children,functionIds)
+                    this.form.functionIds = functionIds
+                    this.btnLoading = true
+                    var a = '添加'
+                    var api = 'addVipType'
+                    if(this.model == "edit"){
+                        a = '编辑'
+                        api = 'updateVipType'
+                    }
+                    this.$api[api](this.form).then(response => {
+                        if (response.code === 200) {
+                            this.btnLoading = false
+                            this.$message.success( a + '成功');
+                            this.finish()
+                        }
+                    })
+                    .catch(error => {
+                        this.$message.error(a + '失败')
+                        this.btnLoading = false
+                    });
+                }
+            });
+        },
+        finish(){
+            if(this.model == 'add'){
+                this.resetForm();
+                this.init()
+            }else{
+                this.$store.commit('removeHistoryPath',this.$route.path);
+                this.$store.commit('removeHistory',this.$route.path);
+                this.$router.push(
+                    {
+                        path:'/administrator/vipType'
+                    }
+                )
+            }
+        },
+        //查询功能列表
+        async getList() {
+            var params = {}
+            var api = 'queryQiaoBiFunction'
+            if(this.model == 'detail'){
+                api = 'getVipTypeFunction'
+            }
+            if(this.model != 'add'){
+                params.vipTypeId = this.id
+            }
+            this.loading = true
+            await this.$api[api](params).then(response => {
+                this.tableData = {
+                    applyId:this.form.applyId,
+                    children:response.data
+                }
+                this.loading = false
+            }).catch(error => {
+                this.loading = true
+            })
+        },
+    },
+};
+</script>
+<style lang="scss">
+.form_center {
+    width: 800px;
+    margin: 30px auto;
+}
+
+.button-container {
+    max-width: 1200px;
+    display: flex;
+    justify-content:flex-end;
+    margin: 10px auto;
+    position:sticky;
+    top:10px,
+}
+</style>

src/views/backStageManage/application/vipType/editVipType.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <vipTypeForm model="edit" :id="id"></vipTypeForm>
+    </div>
+</template>
+
+<script>
+import vipTypeForm from './components/form/vipType.vue';
+export default {
+    components: {
+        vipTypeForm
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {
+        id(){
+            return this.$route.query.id
+        }
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/application/vip/index.vue

@@ -1,10 +1,15 @@
 <template>
-  <div></div>
+  <div class="height_100">
+    <vipType></vipType>
+  </div>
 </template>
 
 <script>
+import vipType from './vipType.vue';
 export default {
-  components: {},
+  components: {
+    vipType
+  },
   props: {},
   data() {
     return {

src/views/backStageManage/application/vipType/vipType.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="height_100">
+    <el-container>
+      <el-header>
+        <div class="header">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+            <el-form-item label="会员类型名称" prop="tenantVipName">
+              <el-input
+                v-model="queryParams.vipTypeName"
+                placeholder="请输入会员类型名称"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+          
+          <el-row :gutter="10">
+            <el-col :span="1.5">
+              <el-button icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </el-header>
+      <el-main class="padding_10">
+        <el-table 
+          :data="tableData"
+          border
+          row-key="id"
+          style="width: 100%"
+          max-height="calc(100% - 40px)"
+          v-loading="loading"
+      >
+          <el-table-column type="index" label="序号" align="center" width="120px">
+            <template slot-scope="scope">
+                <div>
+                    <!-- <el-checkbox-group v-model="checkList">
+                        <el-checkbox :label="scope.row.id">{{(scope.$index + 1) + ((queryParams.current - 1) * queryParams.size)}}</el-checkbox>
+                    </el-checkbox-group> -->
+                    {{(scope.$index + 1) + ((queryParams.current - 1) * queryParams.size)}}
+                </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="vipTypeName" label="会员类型名称">
+            <template slot-scope="scope">
+                <div>
+                  <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.vipTypeName }}</el-link>
+                </div>
+              </template>
+          </el-table-column>
+          <el-table-column prop="lastTime" label="持续时长">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.lastTime }}月
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="enable" label="是否启用">
+            <template slot-scope="scope">
+              <div>
+                {{ scope.row.enable?'是':"否" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createName" label="创建人"></el-table-column>
+          <el-table-column prop="createTime" label="创建时间"></el-table-column>
+          <el-table-column prop="remark" label="备注"></el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleEdit(scope.row)"
+              >修改</el-button>
+              <el-button
+                v-if="scope.row.id != 0"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+      </el-table>
+      </el-main>
+      <el-footer class="pagination">
+        <el-pagination background layout="total, sizes, prev, pager, next, jumper"
+          :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
+          @current-change="handleCurrentChange" @size-change="changeSize" :total="total">
+        </el-pagination>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+const searchForm = {
+  vipTypeName:null
+}
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      tableData: [],
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        ...searchForm
+      },
+      total:0,
+      checkList:[],
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    /** 查询vip类型列表 */
+    getList() {
+      this.loading = true;
+      this.$api.getVipList(this.queryParams).then(response=>{
+        if(response.code == 200){
+            this.tableData = response.data.records
+            this.total = response.data.total || 0
+            this.loading = false
+        }
+      }).catch(error=>{
+          this.tableData = []
+          this.total = 0
+          this.loading = false
+      })
+    },
+    //切换分页
+    handleCurrentChange(value){
+      this.queryParams.current = value
+      this.getList()
+    },
+    //切换页大小
+    changeSize(value){
+      this.queryParams.size = value
+      this.queryParams.current = 1
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.$router.push('/administrator/addVipType');
+    },
+    handleEdit(row) {
+      this.$router.push({ 
+        path: '/administrator/editVipType', 
+        query: {
+            id: row.id
+        }
+      });
+    },
+    handleDetail(row) {
+      this.$router.push({ 
+        path: '/administrator/editVipType', 
+        query: {
+            id: row.id
+        }
+      });
+    },
+    /** 搜索按钮操作 */
+    search() {
+      this.queryParams.current = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      for(let key in searchForm){
+        this.$set(this.queryParams,key,'')
+      }
+      this.search();
+    },
+    handleDelete(row) {
+      this.removeVip([row.id]);
+    },
+    removeVip(ids,type){
+      this.$confirm('确认删除选择数据吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+      }).then(() => {
+        var params = {
+            ids:ids,
+        }
+        this.$api.deleteVip(params).then(response=>{
+            if(response.code == 200){
+                this.$message.success('删除成功')
+                this.getList()
+            }
+        }).catch(error=>{
+            this.$message.error('删除失败')
+        })
+      })
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.header{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.foot{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>

src/views/backStageManage/application/vipType/vipTypeDetail.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <vipTypeForm model="detail" :id="id"></vipTypeForm>
+    </div>
+</template>
+
+<script>
+import vipTypeForm from './components/form/vipType.vue';
+export default {
+    components: {
+        vipTypeForm
+    },
+    props: {},
+    data() {
+        return {};
+    },
+    watch: {},
+    computed: {
+        id(){
+            return this.$route.query.id
+        }
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/backStageManage/application/vision/addVersion.vue

@@ -22,17 +22,4 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.el-form {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-.dialog-footer {
-    display: flex;
-    justify-content: center;
-}
-.button-container {
-    display: flex;
-    justify-content: center;
-}
 </style>

src/views/backStageManage/application/vision/vision.vue

@@ -244,13 +244,13 @@ export default {
     },
     //删除
     handleDelete(row){
-      this.removeVersions([row.id])
+      this.removeVersions([row.id],1)
     },
     dels(){
       this.removeVersions(this.checkList)
     },
     //删除
-    removeVersions(ids){
+    removeVersions(ids,type){
       this.$confirm('确认删除选择的数据吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -261,6 +261,15 @@ export default {
           this.$message.success('删除成功')
           this.loading = false
           this.getList()
+          if(type){
+              var id = ids[0]
+              var index = this.checkList.indexOf(id)
+              if(index!=-1){
+                this.checkList.splice(index,1)
+              }
+          }else{
+              this.$set(this,'checkList',[])
+          }
         }).catch(error => {
           this.loading = false
         })