소스 검색

页面完成

1
Xiao_Mo 4 년 전
부모
커밋
1c4ed76629

+ 3 - 1
src/router/index.js

@@ -390,7 +390,9 @@ export const asyncRoutes = {
   // 未在班级学员
   notClassStudent:()=>import('@/views/main/notClassStudent'),
   // 报表中心 下载列表
-  downList:()=>import('@/views/reportForm/downList')
+  downList:()=>import('@/views/reportForm/downList'),
+  // 乐器置换
+  reaplceMusicPlayer:()=>import('@/views/reaplceMusicPlayer')
 }
 
 export default router

+ 1 - 0
src/router/notKeepAliveList.js

@@ -103,5 +103,6 @@ export default [
   '/operateManager/serverDetail', // 服务指标明细
   '/business/remedy', //
   '/downList', //下载列表
+  '/business/reaplceMusicPlayer' // 乐器置换
   // '/business/feeAudit',
 ]

+ 228 - 0
src/views/reaplceMusicPlayer/index.vue

@@ -0,0 +1,228 @@
+<!--  -->
+<template>
+  <div class="m-container">
+    <h2>
+      <div class="squrt"></div>
+      乐器置换
+    </h2>
+    <div class="m-core">
+      <div class="btnList">
+        <!--      v-permission="'export/practiceGroup'" -->
+        <div
+          class="newBand"
+          @click="makeUrl"
+          style="max-width: 150px; margin-right: 10px"
+        >
+          生成链接
+        </div>
+        <div class="newBand" @click="onExport" style="max-width: 150px">
+          导出
+        </div>
+      </div>
+      <save-form
+        :inline="true"
+        :model="searchForm"
+        @submit="search"
+        @reset="onReSet"
+      >
+        <el-form-item>
+          <el-input
+            v-model.trim="searchForm.search"
+            clearable
+            @keyup.enter.native="search"
+            placeholder="学校名称或编号"
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="organIdList">
+          <el-select
+            v-model.trim="searchForm.organIdList"
+            filterable
+            clearable
+            placeholder="请选择分部"
+          >
+            <el-option
+              v-for="(item, index) in selects.branchs"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="ispay">
+          <el-select
+            class="multiple"
+            v-model.trim="searchForm.ispay"
+            filterable
+            clearable
+            placeholder="是否开启缴费"
+          >
+            <el-option label="是" value="true"></el-option>
+            <el-option label="否" value="false"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary">搜索</el-button>
+          <el-button native-type="reset" type="danger">重置</el-button>
+        </el-form-item>
+      </save-form>
+      <div class="tableWrap">
+        <el-table
+          style="width: 100%"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          :data="tableList"
+        >
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="分部"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="合作单位"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="调查人数"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="置换人数"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="置换率"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="studentId"
+            label="是否开启缴费"
+          ></el-table-column>
+          <el-table-column align="center" prop="studentId" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <el-button type="text" @click="lookDetail(scope.row)">详情</el-button>
+                <el-button type="text">调查链接</el-button>
+                <el-button type="text">统计链接</el-button>
+                <el-button type="text">开启缴费</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+    <el-dialog
+      title="生成链接"
+      :visible.sync="makeUrlVisible"
+      width="500px"
+      v-if="makeUrlVisible"
+    >
+        <addUrl ref="addUrl" @close='close'/>
+      <div slot="footer">
+        <el-button @click="makeUrlVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addurl"
+          >生成链接</el-button
+        >
+      </div>
+    </el-dialog>
+
+        <el-dialog
+      title="详情"
+      :visible.sync="detailVisible"
+      width="1000px"
+      v-if="detailVisible"
+    >
+        <detail ref="detail" @close='close'/>
+      <div slot="footer">
+        <el-button type="primary" @click="detailVisible = false"
+          >确定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { getToken } from "@/utils/auth";
+import pagination from "@/components/Pagination/index";
+import addUrl from './modals/addUrl'
+import detail from './modals/detail'
+import load from "@/utils/loading";
+export default {
+  components: { pagination,addUrl,detail },
+  data() {
+    return {
+      searchForm: {
+        search: null,
+        organIdList: "",
+        ispay: "",
+      },
+
+      tableList: [{}],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      makeUrlVisible: false,
+      detailVisible:false
+    };
+  },
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {
+    // 获取分部
+
+    this.init();
+  },
+  methods: {
+    init() {
+      this.$store.dispatch("setBranchs");
+
+      this.getList();
+    },
+    getList() {},
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet() {},
+    makeUrl() {
+      this.makeUrlVisible = true;
+    },
+    addurl(){
+        this.$refs.addUrl.submit()
+    },
+    close(){
+        this.makeUrlVisible=false;
+        this.detailVisible = false
+    },
+    onExport() {},
+    lookDetail(row){
+    this.detailVisible = true
+    }
+  },
+};
+</script>
+<style lang='scss' scoped>
+.btnList {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+</style>

+ 80 - 0
src/views/reaplceMusicPlayer/modals/addUrl.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <el-form :model="form" label-width="80px" ref="form">
+      <el-form-item
+        label="分部"
+        prop="organId"
+        :rules="[{ required: true, message: '请选择分部' }]"
+      >
+        <el-select
+          v-model.trim="form.organId"
+          filterable
+          clearable
+          placeholder="请选择分部"
+          @change="changeSection"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        label="合作单位"
+        prop="school"
+        :rules="[{ required: true, message: '请选择合作单位' }]"
+      >
+        <el-select
+          v-model.trim="form.school"
+          :disabled="!form.organId"
+          filterable
+          clearable
+        >
+          <el-option
+            v-for="(item, index) in cooperationList"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { queryByOrganId } from "@/api/systemManage";
+export default {
+  data() {
+    return {
+      form: {
+        organId: "",
+        school: "",
+      },
+      cooperationList: [],
+    };
+  },
+  methods: {
+    changeSection(val) {
+      this.form.school = "";
+      queryByOrganId({ organId: val }).then((res) => {
+        if (res.code == 200) {
+          this.cooperationList = res.data;
+        }
+      });
+    },
+   async submit() {
+      this.$refs.form.validate((res) => {
+        if (res) {
+            console.log(res)
+          this.$emit('close')
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

+ 174 - 0
src/views/reaplceMusicPlayer/modals/detail.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <el-form
+      :inline="true"
+      :model="searchForm"
+      ref="searchForm"
+      @submit="search"
+      @reset="onReSet"
+    >
+      <el-form-item>
+        <el-input
+          v-model.trim="searchForm.search"
+          clearable
+          @keyup.enter.native="search"
+          placeholder="学生姓名或手机号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="organIdList">
+        <el-select
+          v-model.trim="searchForm.organIdList"
+          filterable
+          clearable
+          placeholder="请选择声部"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="organIdList">
+        <el-select
+          v-model.trim="searchForm.organIdList"
+          filterable
+          clearable
+          placeholder="请选择品牌"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item prop="organIdList">
+        <el-select
+          v-model.trim="searchForm.organIdList"
+          filterable
+          clearable
+          placeholder="请选择型号"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button native-type="submit" type="primary">搜索</el-button>
+        <el-button native-type="reset" type="danger">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="tableWrap">
+      <el-table
+        style="width: 100%"
+        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        :data="tableList"
+      >
+        <el-table-column
+          align="center"
+          prop="studentId"
+          label="声部"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="studentId"
+          label="学员姓名"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="studentId"
+          label="联系电话"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="studentId"
+          label="品牌"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="studentId"
+          label="型号"
+        ></el-table-column>
+        <el-table-column align="center" prop="studentId" label="操作">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text" @click="resetMusic(scope.row)">修改</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        sync
+        :total.sync="rules.total"
+        :page.sync="rules.page"
+        :limit.sync="rules.limit"
+        :page-sizes="rules.page_size"
+        @pagination="getList"
+      />
+    </div>
+    <el-dialog
+        title="修改信息"
+        :visible.sync="dialogVisible"
+        width="1000px"
+        append-to-body v-if="dialogVisible">
+        <resetInfo @close="close"/>
+        <div slot="footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="dialogVisible = false">确认修改</el-button>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import pagination from "@/components/Pagination/index";
+import resetInfo from './resetInfo'
+export default {
+  components: { pagination,resetInfo },
+  data() {
+    return {
+      searchForm: {
+        organIdList: "",
+        search: "",
+      },
+      tableList: [{}],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+      dialogVisible:false
+    };
+  },
+  mounted() {},
+  methods: {
+    init() {
+      this.getList();
+    },
+    getList() {},
+    search() {
+      this.rules.page = 1;
+      this.getList();
+    },
+    onReSet(){
+        this.$refs.searchForm.resetFields();
+        this.search()
+    },
+    resetMusic(row){
+        this.dialogVisible = true
+    },
+    close(){
+        this.dialogVisible = false
+    }
+  },
+};
+</script>

+ 73 - 0
src/views/reaplceMusicPlayer/modals/resetInfo.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <el-form :model="form" label-width="80px" :inline="true">
+      <el-form-item label="学员姓名">
+        <div style="width:180px"></div>
+      </el-form-item>
+      <el-form-item label="联系电话">
+        <div></div>
+      </el-form-item>
+      <br />
+      <el-form-item prop="organIdList" label="声部">
+        <el-select
+          v-model.trim="form.organIdList"
+          filterable
+          clearable
+          placeholder="请选择声部"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="organIdList" label="品牌">
+        <el-select
+          v-model.trim="form.organIdList"
+          filterable
+          clearable
+          placeholder="请选择品牌"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item prop="organIdList" label="型号">
+        <el-select
+          v-model.trim="form.organIdList"
+          filterable
+          clearable
+          placeholder="请选择型号"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        sound: "",
+        pinpai: "",
+        xinghao: "",
+        organIdList: "",
+      },
+    };
+  },
+};
+</script>