|
@@ -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>
|