更新

src/router/index.js

@@ -478,7 +478,10 @@ export const asyncRoutes = {
   cloudTrafficPackage: () => import('@/views/platformManager/cloudTrafficPackage'),
   accompanyBaseConfig: () => import('@/views/categroyManager/accompanyBaseConfig'),
   // 网管课价格配置
-  accompanyFeeConfig: () => import('@/views/categroyManager/accompanyFeeConfig')
+  accompanyFeeConfig: () => import('@/views/categroyManager/accompanyFeeConfig'),
+  // 机构列表
+  organList: () => import('@/views/organManager'),
+  organOperation: () => import('@/views/organManager/organOperation')
 }
 
 export default router

src/store/modules/permission.js

@@ -823,6 +823,22 @@ function setDetailRoute(accessedRoutes) {
         }
       }])
     }
+    if(route.path == '/federationManager') {
+      route.children = route.children.concat([{
+        name: '添加&修改',
+        path: 'organOperation',
+        component: () => import('@/views/organManager/organOperation'),
+        hidden: true,
+        meta: {
+          noCache: '1',
+          title: '添加&修改',
+          belongTopMenu: "/federationManager",
+          activeMenu: '/organManager/organList',
+          id: 'xx29'
+        }
+      }])
+      console.log(route)
+    }
   })
   return accessedRoutes
 }

src/views/organManager/api.js

@@ -0,0 +1,35 @@
+
+import request2 from '@/utils/request2'
+
+export const platformServeQueryPage = data => request2({
+  url: '/api-web/platformServe/queryPage',
+  method: 'get',
+  params: data,
+})
+
+export const platformServeAdd = data => request2({
+  url: '/api-web/platformServe/add',
+  method: 'post',
+  data,
+})
+
+export const platformServeUpdate = data => request2({
+  url: '/api-web/platformServe/update',
+  method: 'post',
+  data,
+})
+
+export const platformServeDelete = data => request2({
+  url: '/api-web/platformServe/delete/' + data.id,
+  method: 'get'
+})
+
+export const platformServeQueryInfo = data => request2({
+  url: '/api-web/platformServe/queryInfo/' + data.id,
+  method: 'get'
+})
+
+export const platformServeQueryModeDetail = data => request2({
+  url: '/api-web/platformServe/queryModeDetail/' + data.id,
+  method: 'get'
+})

src/views/organManager/components/memberSetting.vue

@@ -0,0 +1,79 @@
+<!--  -->
+<template>
+  <div class="m-core">
+    <el-alert
+        title="会员设置"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
+      <el-form ref="form" :model="form" label-width="140px" size="small" :inline="true">
+        <el-form-item label="月度会员分润金额" prop="sn"
+          :rules="[{ required: true, message: '请输入月度会员分润金额', trigger: 'blur' }]">
+          <el-input
+            size="small"
+            placeholder="请输入月度会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/月</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="季度会员分润金额" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入季度会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/季</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="半年会员分润金额" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入半年会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/半年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="年度会员分润金额" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入年度会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="可用教材" prop="serveId">
+          <el-select
+            v-model.trim="form.serveId"
+            placeholder="请选择可用教材"
+            style="width: 238px !important"
+          >
+          </el-select>
+        </el-form-item>
+      </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'serviceManger',
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      form: {}
+    };
+  },
+  mounted () {
+  },
+  methods: {
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+
+</style>

src/views/organManager/components/openService.vue

@@ -0,0 +1,91 @@
+<!--  -->
+<template>
+  <div class="m-core">
+    <el-alert
+        title="开通服务"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
+      <el-form ref="form" :model="form" label-width="120px" size="small" :inline="true">
+        <el-form-item label="服务名称" prop="serveId">
+          <el-select
+            v-model.trim="form.serveId"
+            placeholder="请选择服务名称"
+            style="width: 238px !important"
+          >
+          </el-select>
+        </el-form-item>
+        <el-form-item label="付费模式" prop="serveDetailId">
+          <el-select
+            v-model.trim="form.serveDetailId"
+            placeholder="请选择付费模式"
+            style="width: 238px !important"
+          >
+          </el-select>
+        </el-form-item>
+        <el-form-item label="学员上限" prop="sn">
+          <el-select
+            placeholder="请选择学员上限"
+            style="width: 238px !important"
+          >
+          </el-select>
+        </el-form-item>
+        <el-form-item label="合同价" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入合同价"
+            style="width: 238px;"
+          >
+            <div slot="append">元/年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="原价" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入原价"
+            style="width: 238px;"
+          >
+            <div slot="append">元/年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="有效期" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入有效期"
+          >
+            <div slot="append">年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="开能价格" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入开能价格"
+          >
+            <div slot="append">元</div>
+          </el-input>
+        </el-form-item>
+      </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'serviceManger',
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      form: {}
+    };
+  },
+  mounted () {
+  },
+  methods: {
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+
+</style>

src/views/organManager/components/organInfo.vue

@@ -0,0 +1,188 @@
+<!--  -->
+<template>
+  <div class="m-core">
+    <el-alert
+        title="机构信息"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
+      <el-form ref="form" :model="form" label-width="120px" :inline="true">
+        <el-col :span="24">
+          <el-form-item label="机构LOGO" prop="logo"
+            :rules="[{ required: true, message: '请上传机构LOGO', trigger: 'blur, change' }]">
+            <el-upload
+              class="avatar-uploader"
+              action="/api-web/uploadFile"
+              accept=".png"
+              :headers="headers"
+              :show-file-list="false"
+              size="small"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img v-if="form.logo" :src="form.logo" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-form-item label="机构名称" prop="name"
+          :rules="[{ required: true, message: '请输入机构名称', trigger: 'blur' }]">
+          <el-input
+            v-model.trim="form.name"
+            size="small"
+            placeholder="请输入机构名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="机构联系人" prop="contacts"
+          :rules="[{ required: true, message: '请输入机构联系人', trigger: 'blur' }]">
+          <el-input
+            v-model.trim="form.contacts"
+            size="small"
+            :min="11"
+            :max="11"
+            placeholder="请输入机构联系人"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="联系人手机号" prop="phone"
+          :rules="[{ required: true, message: '请输入联系人手机号', trigger: 'blur' }]">
+          <el-input
+            v-model.trim="form.phone"
+            size="small"
+            placeholder="请输入联系人手机号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="机构邮箱" prop="email"
+          :rules="[{ required: true, message: '请输入机构邮箱', trigger: 'blur' }]">
+          <el-input
+            v-model.trim="form.email"
+            size="small"
+            placeholder="请输入机构邮箱"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="机构客服电话" prop="customerServicePhone"
+          :rules="[{ required: true, message: '请输入机构客服电话', trigger: 'blur' }]">
+          <el-input
+            v-model.trim="form.customerServicePhone"
+            size="small"
+            placeholder="请输入机构客服电话"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="商品描述" prop="remark">
+          <el-input
+            type="textarea"
+            size="small"
+            v-model.trim="form.remark"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+export default {
+  name: 'serviceManger',
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      headers: {
+        Authorization: getToken(),
+      },
+      form: {
+        logo: null,
+        name: null,
+        contacts: null,
+        phone: null,
+        email: null,
+        customerServicePhone: null,
+        remark: null,
+      }
+    };
+  },
+  mounted () {
+  },
+  methods: {
+    handleAvatarSuccess(res) {
+      this.form.image = res.data.url;
+    },
+    beforeAvatarUpload(file) {
+      const imageType = {
+        "image/png": true
+      };
+      const isImage = imageType[file.type];
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      const imageWidth = this.imageWidthM;
+      const imageHeigh = this.imageHeightM;
+      const _URL = window.URL || window.webkitURL;
+      const isSize = new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = function () {
+          if (imageWidth && imageHeigh) {
+            this.width === imageWidth && this.height === imageHeigh
+              ? resolve()
+              : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`);
+          } else if (imageWidth && !imageHeigh) {
+            this.width === imageWidth
+              ? resolve()
+              : reject(`请上传宽为${imageWidth}的图片`);
+          } else if (!imageWidth && imageHeigh) {
+            this.height === imageHeigh
+              ? resolve()
+              : reject(`请上传高为${imageHeigh}的图片`);
+          } else {
+            resolve();
+          }
+        };
+        img.src = _URL.createObjectURL(file);
+      }).then(
+        () => {
+          return file;
+        },
+        (src) => {
+          this.$message.error(src);
+          this.uploadImgLoading = false;
+          return Promise.reject();
+        }
+      );
+      if (!isImage) {
+        this.$message.error("只能上传图片格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isImage && isLt2M && isSize;
+    },
+    onCancel () {
+      this.$store.dispatch('delVisitedViews', this.$route)
+      this.$router.push({
+        path: "/organManager/organList"
+      });
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+/deep/.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 258px;
+  height: 74px;
+  line-height: 74px;
+  text-align: center;
+}
+
+.avatar {
+  width: 258px;
+  height: 74px;
+  display: block;
+}
+</style>

src/views/organManager/components/rateSetting.vue

@@ -0,0 +1,79 @@
+<!--  -->
+<template>
+  <div class="m-core">
+    <el-alert
+        title="手续费设置"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
+      <el-form ref="form" :model="form" label-width="140px" size="small" :inline="true">
+        <el-form-item label="月度会员分润金额" prop="sn"
+          :rules="[{ required: true, message: '请输入月度会员分润金额', trigger: 'blur' }]">
+          <el-input
+            size="small"
+            placeholder="请输入月度会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/月</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="季度会员分润金额" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入季度会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/季</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="半年会员分润金额" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入半年会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/半年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="年度会员分润金额" prop="sn">
+          <el-input
+            size="small"
+            placeholder="请输入年度会员分润金额"
+            style="width: 238px;"
+          >
+            <div slot="append">元/年</div>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="可用教材" prop="serveId">
+          <el-select
+            v-model.trim="form.serveId"
+            placeholder="请选择可用教材"
+            style="width: 238px !important"
+          >
+          </el-select>
+        </el-form-item>
+      </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'serviceManger',
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      form: {}
+    };
+  },
+  mounted () {
+  },
+  methods: {
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+
+</style>

src/views/organManager/components/roomPrice.vue

@@ -0,0 +1,57 @@
+<!--  -->
+<template>
+  <div class="m-core" style="margin-bottom: 18px;overflow: hidden;">
+    <el-alert
+        title="云教室定价"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
+      <el-col :lg="12" :md="18" :sm="18" :xs="24">
+        <el-table :data="dataList"
+                  style="width:100% !important;"
+                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+          <el-table-column prop="name"
+                           label="流量包">
+          </el-table-column>
+          <el-table-column prop="onlineClassesUnitPrice"
+                           label="合同价">
+            <template slot-scope="scope">
+              <div>
+                <el-input v-model.trim="scope.row.onlineClassesUnitPrice"></el-input>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="offlineClassesUnitPrice"
+                           label="原价（元）">
+            <template slot-scope="scope">
+              <div>
+                <el-input v-model.trim="scope.row.offlineClassesUnitPrice"></el-input>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'serviceManger',
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      dataList: [],
+    };
+  },
+  mounted () {
+  },
+  methods: {
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+
+</style>

src/views/organManager/components/roomRules.vue

@@ -0,0 +1,61 @@
+<!--  -->
+<template>
+  <div class="m-core" style="margin-bottom: 18px;overflow: hidden;">
+    <el-alert
+        title="云教室规则"
+        type="info"
+        :closable="false"
+        style="margin-bottom: 20px"
+      ></el-alert>
+      <el-form ref="form" :model="form" label-width="200px" size="small" :inline="true">
+        <el-form-item label="云教室人数上限（含老师）" prop="sn"
+          :rules="[{ required: true, message: '请输入云教室人数上限', trigger: 'blur' }]">
+          <el-input
+            size="small"
+            placeholder="请输入云教室人数上限"
+            style="width: 238px;"
+          >
+            <div slot="append">人</div>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-col :lg="12" :md="18" :sm="18" :xs="24">
+        <el-table :data="dataList"
+                  style="width:100% !important;"
+                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">
+          <el-table-column prop="name"
+                           label="人数">
+          </el-table-column>
+          <el-table-column prop="onlineClassesUnitPrice"
+                           label="每分钟扣费标准">
+            <template slot-scope="scope">
+              <div>
+                <el-input v-model.trim="scope.row.onlineClassesUnitPrice"></el-input>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'serviceManger',
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      dataList: [],
+    };
+  },
+  mounted () {
+  },
+  methods: {
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+
+</style>

src/views/organManager/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="m-container">
+    <h2>
+      <div class="squrt"></div>
+      机构列表
+    </h2>
+    <save-form
+      :inline="true"
+      class="searchForm"
+      ref="searchForm"
+      @submit="search"
+      @reset="reset"
+      size="small"
+      :saveKey="'platformServiceManager'"
+      :model.sync="searchForm"
+    >
+      <el-form-item :rules="[]">
+        <el-input v-model="searchForm.search" placeholder="机构编号/名称/电话"></el-input>
+      </el-form-item>
+      <el-form-item prop="createTimer">
+        <el-date-picker
+          v-model.trim="searchForm.createTimer"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="入驻开始时间"
+          end-placeholder="入驻结束时间"
+          :picker-options="{ firstDayOfWeek: 1 }"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="courseViewType">
+        <el-select
+          v-model.trim="searchForm.courseViewType"
+          filterable
+          placeholder="请选择添加人"
+          clearable
+        >
+          <!-- <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in courseViewTypeList"
+            :key="item.value"
+          ></el-option> -->
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="courseViewType">
+        <el-select
+          v-model.trim="searchForm.courseViewType"
+          filterable
+          placeholder="请选择机构状态"
+          clearable
+        >
+          <!-- <el-option
+            :label="item.label"
+            :value="item.value"
+            v-for="item in courseViewTypeList"
+            :key="item.value"
+          ></el-option> -->
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button native-type="submit" type="danger">搜索</el-button>
+        <el-button native-type="reset" type="primary">重置</el-button>
+      </el-form-item>
+    </save-form>
+    <el-button size="small" style="margin-bottom: 20px;" type="primary" v-permission="'platformServe/add'" @click="openService('create')" icon="el-icon-plus">新增机构</el-button>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table
+        :data="tableList"
+        size="small"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+      >
+        <el-table-column align="center" prop="id" label="机构编号">
+        </el-table-column>
+        <el-table-column align="center" label="机构名称" prop="serveName">
+        </el-table-column>
+        <el-table-column align="center" label="联系人" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="联系人电话" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="服务" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="人数" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="有效期到期时间" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="网络教室剩余时长" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="缴费状态" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="添加人" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="机构状态" prop="productName">
+        </el-table-column>
+        <el-table-column align="center" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              @click="openService('update', scope.row)"
+              v-permission="'platformServe/update'"
+              type="text"
+              size="small"
+              >查看</el-button>
+            <el-button
+              @click="openService('update', scope.row)"
+              v-permission="'platformServe/update'"
+              type="text"
+              size="small"
+              >修改</el-button>
+            <el-button
+              @click="delService(scope.row)"
+              v-permission="'platformServe/delete'"
+              type="text"
+              size="small"
+              >停用</el-button>
+            <el-button
+              @click="openService('update', scope.row)"
+              v-permission="'platformServe/update'"
+              type="text"
+              size="small"
+              >重置密码</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+       :saveKey="'platformServiceManager'"
+        sync
+        :total.sync="pageInfo.total"
+        :page.sync="pageInfo.page"
+        :limit.sync="pageInfo.limit"
+        :page-sizes="pageInfo.page_size"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import pagination from "@/components/Pagination/index";
+import { platformServeQueryPage,platformServeDelete } from "./api";
+const initSearch = {
+  search: null
+};
+export default {
+  components: { pagination },
+  data() {
+    return {
+      tableList: [],
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      searchForm: { ...initSearch },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      try {
+        const res = await platformServeQueryPage({
+          ...this.searchForm,
+          page: this.pageInfo.page,
+          rows: this.pageInfo.limit,
+        });
+        this.pageInfo.total = res.data.total;
+        this.tableList = res.data.rows;
+      } catch (e) {}
+    },
+    search() {
+      this.pageInfo.page = 1;
+      this.$refs.searchForm.save(this.searchForm);
+      this.$refs.searchForm.save(this.pageInfo, "page");
+      this.getList();
+    },
+    reset() {
+      this.searchForm = { ...initSearch };
+      this.search();
+    },
+    openService(type, row) {
+      const tagTitle = type == 'update' ? '修改' : '创建'
+      this.$router.push({
+        path: '/federationManager/organOperation',
+        query: {
+          type: type,
+          id: row?.id || null
+        }
+      }, (route) => {
+        route.meta.title = tagTitle + '机构'
+      })
+    },
+    async delService(row) {
+      this.$confirm("是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then( async() => {
+        try{
+         await platformServeDelete({ id:row.id})
+         this.$message.success('删除成功')
+         this.getList()
+        }catch{}
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.courseMask .el-dialog__body {
+  padding-bottom: 0;
+}
+</style>

src/views/organManager/organOperation.vue

@@ -0,0 +1,69 @@
+<!--  -->
+<template>
+  <div class="m-container">
+    <h2>
+      <el-page-header @back="onCancel" :content="(payType == 'create' ? '新增机构' : '修改机构')"></el-page-header>
+    </h2>
+    <div class="m-core" style="overflow: hidden">
+      <div style="display: block;overflow: hidden;">
+        <el-col :span="8" :lg="10" :md="18" :sm="18" :xs="24">
+          <el-steps :active="active" finish-status="success" simple align-center>
+            <el-step title="机构信息" ></el-step>
+            <el-step title="产品定价" ></el-step>
+            <el-step title="确认设置" ></el-step>
+          </el-steps>
+        </el-col>
+      </div>
+      <!-- 机构基本信息 -->
+      <organInfo v-show="active == 0" />
+      <!-- 产品定价 -->
+      <openService v-show="active == 1" />
+      <roomPrice v-show="active == 1" />
+      <memberSetting v-show="active == 1" />
+      <roomRules v-show="active == 1" />
+      <rate-setting v-show="active == 1" />
+
+      <div style="padding-left: 120px;display: flex;width: 100%;">
+        <el-button type="primary" size="small" v-if="active > 0" @click="active -= 1">上一步</el-button>
+        <el-button type="primary" size="small" @click="onNext">下一步</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import organInfo from './components/organInfo'
+import openService from './components/openService'
+import roomPrice from './components/roomPrice'
+import memberSetting from './components/memberSetting'
+import roomRules from './components/roomRules'
+import RateSetting from './components/rateSetting.vue'
+export default {
+  name: 'serviceManger',
+  components: { organInfo, openService, roomPrice, memberSetting, roomRules, RateSetting },
+  data () {
+    const query = this.$route.query
+    return {
+      payType: query.type,
+      active: 1, // 当前第几步
+    };
+  },
+  mounted () {
+  },
+  methods: {
+    onNext() {
+      this.active += 1
+    },
+    onCancel () {
+      this.$store.dispatch('delVisitedViews', this.$route)
+      this.$router.push({
+        path: "/organManager/organList"
+      });
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+
+
+</style>

src/views/platformManager/serviceManager/form.vue

@@ -8,7 +8,6 @@
     <div class="m-core"
          style="overflow: hidden">
       <el-form :model="form"
-                :rules="rules"
                 ref="accountForm"
                 size="small"
                 :inline="true"
@@ -20,27 +19,18 @@
           :closable="false"
           style="margin-bottom: 20px"
         ></el-alert>
-        <el-row>
-            <el-col :span="5">
-              <el-form-item label="服务名称"
-                      prop="name">
-                <el-input v-model="form.name"
-                          placeholder="请输入服务名称"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="产品服务"
-                      prop="bankCode">
-                <el-select v-model="form.bankCode"
-                            placeholder="请选择产品服务">
-                  <el-option v-for="(item, index) in backList"
-                              :key="index"
-                              :label="item.title"
-                              :value="item.value"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-        </el-row>
+        <el-form-item label="服务名称" prop="name" :rules="[{ required: true, message: '请输入服务名称', trigger: 'blur' }]">
+          <el-input v-model="form.name" placeholder="请输入服务名称"></el-input>
+        </el-form-item>
+        <el-form-item label="产品服务" prop="productId" :rules="[{ required: true, message: '请选择产品服务', trigger: 'change' }]">
+          <el-select v-model="form.productId"
+                      placeholder="请选择产品服务">
+            <el-option v-for="(item, index) in productList"
+                        :key="index"
+                        :label="item.name"
+                        :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
 
         <el-alert
           title="服务属性"
@@ -49,39 +39,48 @@
           style="margin-bottom: 20px"
         ></el-alert>
 
-        <div class="serviceAttr">
-          <el-row>
-            <el-col :span="5">
-              <el-form-item label="付费模式"
-                            prop="legalPerson">
-                <el-input v-model="form.legalPerson" placeholder="请输入付费模式"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="19">
+        <div class="serviceAttr" v-for="(attrList, index) in form.attrList" :key="index">
+          <div class="serviceBlock">
+            <el-form-item label="付费模式"
+              :prop="'attrList.' + index + '.mode'"
+              :rules="[{ required: true, message: '请选择付费模式', trigger: 'change' }]">
+              <el-select v-model="attrList.mode" placeholder="请选择付费模式">
+                <el-option label="月" value="MONTH"></el-option>
+                <el-option label="年" value="YEAR"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="serviceBlock">
+            <div v-for="(attrItem, i) in attrList.attr" :key="i">
               <el-form-item label="学员上限"
-                        prop="legalMp">
-                <el-input v-model="form.legalMp" placeholder="请输入学员上限">
+                :prop="'attrList.' + index + '.attr.' + i + '.studentUpLimit'"
+                :rules="[{ required: true, message: '请输入学员上限', trigger: 'blur' },
+                  {type: 'number', message: '学员上限必须为数字值' }]">
+                <el-input v-model.number="attrItem.studentUpLimit" placeholder="请输入学员上限">
                   <span slot="append">人</span>
                 </el-input>
               </el-form-item>
               <el-form-item label="服务原价"
-                            prop="legalCertId">
-                <el-input v-model="form.legalCertId" placeholder="请输入服务原价">
+                :prop="'attrList.' + index + '.attr.' + i + '.originalPrice'"
+                :rules="[{ required: true, message: '请输入服务原价', trigger: 'blur' },
+                  {type: 'number', message: '服务原价必须为数字值' }]">
+                <el-input v-model.number="attrItem.originalPrice" placeholder="请输入服务原价">
                   <span slot="append">元</span>
                 </el-input>
               </el-form-item>
-              <el-button icon="el-icon-plus" size="small" circle></el-button>
-              <el-button icon="el-icon-minus" size="small" circle type="danger"></el-button> 
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="13" :offset="5" style="padding-left: 120px">
-              <el-form-item class="add">
-                <el-button icon="el-icon-plus" style="width: 200px">添加模式</el-button>
-              </el-form-item>
-            </el-col>
-          </el-row>
+              <el-button icon="el-icon-minus" size="small" circle type="danger" @click="onRemoveItem(attrList.attr, i)" :disabled="attrList.attr.length <= 1"></el-button>
+            </div>
+            <el-form-item class="add" style="padding-left: 120px; display: block;">
+              <el-button icon="el-icon-plus" style="width: 200px" @click="onAddItem('child', attrList.attr)">添加模式</el-button>
+            </el-form-item>
+          </div>
+          <div class="list-remove">
+            <el-button type="text" size="small" icon="el-icon-delete" @click="onRemoveItem(form.attrList, index)" :disabled="form.attrList.length <= 1">删除</el-button>
+          </div>
         </div>
+        <el-form-item class="add" style="margin-top: 18px">
+          <el-button icon="el-icon-plus" style="width: 200px" :disabled="form.attrList.length >= 2" @click="onAddItem('parent')">添加模式</el-button>
+        </el-form-item>
       </el-form>
       <el-button type="primary" size="small" @click="onSubmit('accountForm')">确 定</el-button>
       <el-button @click="onCancel" size="small">取 消</el-button>
@@ -90,62 +89,26 @@
 </template>
 
 <script>
-// import { cityJson } from "./cityJson";
-// import { bankJson } from "./bankJson";
-import { getToken } from "@/utils/auth";
-import load from '@/utils/loading'
-// import { createMember, updateMember } from './api.js'
-import { isvalidPhone } from '@/utils/validate'
-let validPhone = (rule, value, callback) => {
-  if (!value) {
-    callback(new Error('请输入公司法人手机号'))
-  } else if (!isvalidPhone(value)) {
-    callback(new Error('请输入正确的11位手机号码'))
-  } else {
-    callback()
-  }
-}
+import { platformProductQueryPage } from '../productManger/api'
+import { platformServeAdd, platformServeUpdate, platformServeQueryInfo } from './api'
 export default {
-  name: 'ADaPayAccount',
+  name: 'serviceManger',
   data () {
     const query = this.$route.query
     return {
       payType: query.type,
+      productList: [],
       form: {
-        memberId: null,
+        attrList: [{
+          mode: null,
+          attr: [{
+            originalPrice: null,
+            studentUpLimit: null,
+          }]
+        }],
         name: null,
-        legalPerson: null,
-        legalMp: null,
-        legalCertId: null,
-        legalCertIdExpires: null,
-        cardNo: null,
-        bankCode: null,
-        provCode: null,
-        areaCode: null,
-        socialCreditCode: null,
-        socialCreditCodeExpires: null,
-        businessScope: null,
-        address: null,
-        multipartFile: null,
-        zipCode: null
-      },
-      rules: {
-        memberId: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
-        name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
-        legalPerson: [{ required: true, message: '请输入公司法人', trigger: 'blur' }],
-        legalMp: [{ type: 'number', required: true, validator: validPhone, trigger: 'blur' }],
-        legalCertId: [{ required: true, message: '请输入法人身份证号', trigger: 'blur' }],
-        legalCertIdExpires: [{ required: true, message: '请选择身份证有效期', trigger: 'change' }],
-        cardNo: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
-        bankCode: [{ required: true, message: '请选择所属银行', trigger: 'change' }],
-        provCode: [{ required: true, message: '请选择省份', trigger: 'change' }],
-        areaCode: [{ required: true, message: '请选择城市', trigger: 'change' }],
-        socialCreditCode: [{ required: true, message: '请输入统一社会信用码', trigger: 'blur' }],
-        socialCreditCodeExpires: [{ required: true, message: '请选择统一社会信用码有效期', trigger: 'change' }],
-        businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
-        multipartFile: [{ required: true, message: '请上传证照文件', trigger: 'change' }],
-        zipCode: [{ required: true, message: '请输入邮编', trigger: 'blur' }]
+        productId: null,
+        id: query.id || null
       }
     };
   },
@@ -153,66 +116,71 @@ export default {
     this.__init()
   },
   methods: {
-    __init () {
-      const query = this.$route.query
-      this.payType = query.type
-      this.row = query.row ? JSON.parse(query.row) : {}
-      this.files = null
-      this.fileList = []
-      this.form.multipartFile = null
-      if (this.payType == 'update') {
-        const row = this.row
-        this.id = row.id
-        this.form = {
-          memberId: row.memberId,
-          name: row.name,
-          legalPerson: row.legalPerson,
-          legalMp: row.legalMp,
-          legalCertId: row.legalCertId,
-          legalCertIdExpires: row.legalCertIdExpires,
-          cardNo: row.cardNo,
-          bankCode: row.bankCode,
-          provCode: row.provCode,
-          areaCode: row.areaCode,
-          socialCreditCode: row.socialCreditCode,
-          socialCreditCodeExpires: row.socialCreditCodeExpires,
-          businessScope: row.businessScope,
-          address: row.address,
-          multipartFile: row.multipartFile,
-          zipCode: row.zipCode
-        }
-        this.cityList.forEach(item => {
-          if (item.value == row.provCode) {
-            this.selectListCity = item.cities
+    async __init () {
+      try {
+        const res = await platformProductQueryPage({ page: 1, rows: 999 })
+        this.productList = res.data?.rows || []
+        if (this.payType == 'update') {
+          const queryInfo = await platformServeQueryInfo({ id: this.form.id })
+          console.log(queryInfo)
+          const result = queryInfo.data || null
+          if(result) {
+            this.form.productId = Number(result.productId),
+            this.form.name = result.name,
+            this.form.attrList = this.formatAttr(result.detailList, 'asc')
           }
+        }
+      } catch(e) {}
+    },
+    onAddItem(type, row) {
+      // 添加子项目
+      if(type == 'child') {
+        row.push({
+          mode: null,
+          originalPrice: null,
+          studentUpLimit: null,
+        })
+      } else if(type == 'parent') {
+        this.form.attrList.push({
+          mode: null,
+          attr: [{
+            originalPrice: null,
+            studentUpLimit: null,
+          }]
         })
-      } else if (this.payType == 'create') {
-        this.$refs["accountForm"].resetFields()
       }
     },
+    onRemoveItem(row, index) {
+      this.$confirm("是否删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then( async() => {
+        row.splice(index, 1)
+      });
+    },
     async onSubmit (formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
-          const form = this.form
-          let formData = new FormData()
-          formData.append("memberId", form.memberId)
-          formData.append("name", form.name)
-          formData.append("legalPerson", form.legalPerson)
-          formData.append("legalMp", form.legalMp)
-          formData.append("legalCertId", form.legalCertId)
-          formData.append("legalCertIdExpires", form.legalCertIdExpires)
-          formData.append("cardNo", form.cardNo)
-          formData.append("bankCode", form.bankCode)
-          formData.append("provCode", form.provCode)
-          formData.append("areaCode", form.areaCode)
-          formData.append("socialCreditCode", form.socialCreditCode)
-          formData.append("socialCreditCodeExpires", form.socialCreditCodeExpires)
-          formData.append("businessScope", form.businessScope)
-          formData.append("address", form.address)
-          formData.append("multipartFile", form.multipartFile)
-          formData.append("zipCode", form.zipCode)
+          const { attrList, ...res } = this.form
+          let isYear = 0, isMonth = 0
+          attrList.forEach(attr => {
+            if(attr.mode == 'YEAR') {
+              isYear++
+            } else if(attr.mode == 'MONTH') {
+              isMonth ++
+            }
+          })
+          if(isYear > 1 || isMonth > 1) {
+            this.$message.error('付费模式重复')
+            return
+          }
+          const params = {
+            ...res,
+            detailList: this.formatAttr(attrList)
+          }
           if (this.payType == 'create') {
-            createMember(formData).then(res => {
+            platformServeAdd(params).then(res => {
               if (res.code == 200) {
                 this.$message.success('保存成功')
                 this.onCancel()
@@ -221,8 +189,7 @@ export default {
               }
             })
           } else if (this.payType == 'update') {
-            formData.append('id', this.id)
-            updateMember(formData).then(res => {
+            platformServeUpdate(params).then(res => {
               if (res.code == 200) {
                 this.$message.success('保存成功')
                 this.onCancel()
@@ -243,25 +210,46 @@ export default {
         }
       });
     },
-    handleChange (file) {
-      this.files = file
-      this.form.multipartFile = file.raw
-      this.$refs["accountForm"].validateField('multipartFile')
-    },
-    handleRemove (file, fileList) {
-      this.files = null
-      this.form.multipartFile = null
-    },
-    handlePreview (file) {
-      //  (file);
-    },
-    onProvChange (value) {
-      this.form.areaCode = null
-      this.cityList.forEach(item => {
-        if (item.value == value) {
-          this.selectListCity = item.cities
+    formatAttr(row, type) { // 格式化数据
+      let resultArray = []
+      if(!row) return
+      if(type == 'asc') { // 修改时获取数据重新拼装数据
+        let isType = []
+        row.forEach(ele => {
+          if(isType.includes(ele.mode)) {
+            resultArray.forEach(arr => {
+              if(arr.mode == ele.mode) {
+                arr.attr.push({
+                  originalPrice: ele.originalPrice,
+                  studentUpLimit: ele.studentUpLimit
+                })
+              }
+            })
+          } else {
+            isType.push(ele.mode)
+            resultArray.push({
+              mode: ele.mode,
+              attr: [{
+                originalPrice: ele.originalPrice,
+                studentUpLimit: ele.studentUpLimit
+              }]
+            })
+          }
+        });
+      } else {
+        for(let item of row) {
+          if(item.attr && item.attr.length > 0) {
+            for(let child of item.attr) {
+              resultArray.push({
+                mode: item.mode,
+                originalPrice: child.originalPrice,
+                studentUpLimit: child.studentUpLimit
+              })
+            }
+          }
         }
-      })
+      }
+      return resultArray
     },
     onCancel () {
       this.$store.dispatch('delVisitedViews', this.$route)
@@ -273,13 +261,26 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-.el-input,
-.el-textarea,
-.el-select {
-  width: 100% !important;
-}
 .serviceAttr {
+  position: relative;
+  margin-top: 18px;
   padding-top: 18px;
   background-color: #f4f4f5;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
 }
+.list-remove {
+  position: absolute;
+  right: 20px;
+  top: 18px;
+  .el-button--text {
+    font-size: 18px;
+    color: #F56C6C;
+    &.is-disabled {
+      color: #C0C4CC;
+    }
+  }
+}
+
 </style>

src/views/platformManager/serviceManager/index.vue

@@ -22,7 +22,7 @@
         <el-button native-type="reset" type="primary">重置</el-button>
       </el-form-item>
     </save-form>
-    <el-button size="small" style="margin-bottom: 20px;" type="primary" v-permission="'organizationCourseDurationSettings/insert'" @click="openService('create')" icon="el-icon-plus">新增服务</el-button>
+    <el-button size="small" style="margin-bottom: 20px;" type="primary" v-permission="'platformServe/add'" @click="openService('create')" icon="el-icon-plus">新增服务</el-button>
     <!-- 列表 -->
     <div class="tableWrap">
       <el-table
@@ -32,22 +32,22 @@
       >
         <el-table-column align="center" prop="id" label="服务编号">
         </el-table-column>
-        <el-table-column align="center" label="服务名称" prop="productName">
+        <el-table-column align="center" label="服务名称" prop="serveName">
         </el-table-column>
-        <el-table-column align="center" label="产品服务" prop="serveName">
+        <el-table-column align="center" label="产品服务" prop="productName">
         </el-table-column>
         <el-table-column align="center" label="操作">
           <template slot-scope="scope">
             <el-button
-              @click="resetCourseTime(scope.row)"
-              v-permission="'organizationCourseDurationSettings/update'"
+              @click="openService('update', scope.row)"
+              v-permission="'platformServe/update'"
               type="text"
               size="small"
               >修改</el-button
             >
             <el-button
               @click="delService(scope.row)"
-              v-permission="'organizationCourseDurationSettings/update'"
+              v-permission="'platformServe/delete'"
               type="text"
               size="small"
               >删除</el-button
@@ -86,9 +86,6 @@ export default {
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
       searchForm: { ...initSearch },
-      isAdd: true,
-      courseVisible: false,
-      activeRow: null,
     };
   },
   mounted() {
@@ -116,26 +113,13 @@ export default {
       this.searchForm = { ...initSearch };
       this.search();
     },
-    resetCourseTime(row) {
-      this.isAdd = false;
-      this.activeRow = row;
-      this.courseVisible = true;
-    },
-    submitInfo() {
-      const str = this.isAdd ? "create" : "update";
-      this.$refs.operationModel.submitInfo(str);
-    },
-    close() {
-      this.courseVisible = false;
-      this.getList();
-    },
     openService(type, row) {
       const tagTitle = type == 'update' ? '修改' : '创建'
       this.$router.push({
         path: '/platformManager/serviceOperation',
         query: {
           type: type,
-          row: JSON.stringify(row)
+          id: row?.id || null
         }
       }, (route) => {
         route.meta.title = tagTitle + '服务'

vue.config.js

@@ -16,8 +16,8 @@ const name = defaultSettings.title || '管乐迷后台管理系统' // page titl
 // http://47.99.212.176:8000
 // //  https://online.dayaedu.com
 // let target = 'https://online.dayaedu.com' //线上
-// let target = 'http://192.168.3.227:8000' // 何国威
-let target = 'http://192.168.3.124:8000' //邹璇
+let target = 'http://192.168.3.227:8000' // 何国威
+// let target = 'http://192.168.3.124:8000' //邹璇
 // let target = 'http://192.168.3.112:8000' //勇哥
 // let target = 'http://dev.dayaedu.com' // 开发环境
 // let target = 'https://test.dayaedu.com' //测试环境