memberList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <!-- -->
  2. <template>
  3. <div class="m-container">
  4. <h2>
  5. <div class="squrt"></div>
  6. 乐团会员列表
  7. </h2>
  8. <div class="m-core">
  9. <save-form
  10. :inline="true"
  11. :model="searchForm"
  12. @submit="search"
  13. @reset="onReSet"
  14. >
  15. <el-form-item>
  16. <el-input
  17. v-model.trim="searchForm.search"
  18. clearable
  19. @keyup.enter.native="search"
  20. placeholder="乐团/学员名称、编号"
  21. ></el-input>
  22. </el-form-item>
  23. <!-- <el-form-item>
  24. <el-input
  25. v-model.trim="searchForm.search"
  26. @keyup.enter.native="search"
  27. placeholder="学员姓名、编号"
  28. ></el-input>
  29. </el-form-item> -->
  30. <el-form-item prop="organId">
  31. <el-select
  32. class="multiple"
  33. filterable
  34. v-model.trim="searchForm.organId"
  35. clearable
  36. placeholder="请选择分部"
  37. >
  38. <el-option
  39. v-for="(item, index) in selects.branchs"
  40. :key="index"
  41. :label="item.name"
  42. :value="item.id"
  43. ></el-option>
  44. </el-select>
  45. </el-form-item>
  46. <el-form-item prop="hasMember">
  47. <el-select
  48. class="multiple"
  49. v-model.trim="searchForm.hasMember"
  50. clearable
  51. placeholder="会员是否过期"
  52. >
  53. <el-option label="已过期" value="0"></el-option>
  54. <el-option label="即将过期" value="1"></el-option>
  55. </el-select>
  56. </el-form-item>
  57. <!-- <el-form-item prop="isActive">
  58. <el-select
  59. class="multiple"
  60. v-model.trim="searchForm.isActive"
  61. clearable
  62. placeholder="会员是否即将过期"
  63. >
  64. <el-option label="是" value="true"></el-option>
  65. <el-option label="否" value="false"></el-option>
  66. </el-select>
  67. </el-form-item> -->
  68. <el-form-item>
  69. <el-button native-type="submit" type="primary">搜索</el-button>
  70. <el-button native-type="reset" type="danger">重置</el-button>
  71. </el-form-item>
  72. </save-form>
  73. <div class="tableWrap">
  74. <el-table
  75. style="width: 100%"
  76. :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
  77. :data="tableList"
  78. >
  79. <el-table-column
  80. align="center"
  81. prop="userId"
  82. label="学员编号"
  83. ></el-table-column>
  84. <el-table-column
  85. align="center"
  86. prop="username"
  87. label="学员姓名"
  88. ></el-table-column>
  89. <el-table-column
  90. align="center"
  91. prop="organName"
  92. label="所属分部"
  93. ></el-table-column>
  94. <el-table-column
  95. align="center"
  96. prop="musicGroupName"
  97. label="所属乐团"
  98. ></el-table-column>
  99. <el-table-column align="center" prop="studentId" label="会员是否过期">
  100. <template slot-scope="scope">
  101. <div>
  102. {{ scope.row.memberDay > 0 ? "否" : "是" }}
  103. </div>
  104. </template>
  105. </el-table-column>
  106. <el-table-column
  107. align="center"
  108. prop="memberDay"
  109. label="会员有效期剩余天数"
  110. ></el-table-column>
  111. <el-table-column align="center" prop="studentId" label="操作">
  112. <template slot-scope="scope">
  113. <div>
  114. <!-- addVisit -->
  115. <auth :auths="'visit/add/4465'">
  116. <el-button type="text" @click="addVisit(scope.row)"
  117. >新增回访</el-button
  118. >
  119. </auth>
  120. <auth :auths="'musicGroupQuit/directQuitMusicGroup4463'">
  121. <el-button type="text" @click="quitTeam(scope.row)"
  122. >退团退费</el-button
  123. >
  124. </auth>
  125. <auth :auths="'musicGroupQuit/directQuitMusicGroup4462'">
  126. <el-button type="text" @click="quieTeams(scope.row)"
  127. >退团</el-button
  128. >
  129. </auth>
  130. </div>
  131. </template>
  132. </el-table-column>
  133. </el-table>
  134. <pagination
  135. sync
  136. :total.sync="rules.total"
  137. :page.sync="rules.page"
  138. :limit.sync="rules.limit"
  139. :page-sizes="rules.page_size"
  140. @pagination="getList"
  141. />
  142. </div>
  143. </div>
  144. <!-- 退团弹窗 -->
  145. <el-dialog title="退团信息确认" width="640px" :visible.sync="quitVisible">
  146. <quiteTeam :quitForm="quitForm" :activeRow="activeRow" ref="quitForm" />
  147. <span slot="footer" class="dialog-footer question">
  148. <div>
  149. <el-popover placement="right" width="500" trigger="click">
  150. <div class="popoverWrap">
  151. <p>乐团退团退费规则:</p>
  152. <p>退还乐器练习云教练费用:报名缴费时缴费的乐器练习云教练费用</p>
  153. <p>退还课程费用:缴费总额-已结束课时单价之和</p>
  154. <p>退还乐器费用:报名缴费时缴纳的乐器费用(团购、租金)</p>
  155. <p>退还教辅费用:报名缴费时缴费的教辅费用</p>
  156. <p>退还乐保费用:报名缴费时缴费的乐保费用</p>
  157. </div>
  158. <el-button
  159. type="text"
  160. icon="el-icon-question"
  161. slot="reference"
  162. style="color: red"
  163. >退团退费说明</el-button
  164. >
  165. </el-popover>
  166. </div>
  167. <div>
  168. <el-button @click="quitVisible = false">取 消</el-button>
  169. <el-button type="primary" @click="chioseType">确 定</el-button>
  170. </div>
  171. </span>
  172. </el-dialog>
  173. <!-- 新增回访 -->
  174. <el-dialog
  175. title="新增回访"
  176. width="500px"
  177. :visible.sync="visitVisible"
  178. append-to-body
  179. >
  180. <visit
  181. v-if="visitVisible && activeRow"
  182. :detail="activeRow"
  183. :username="activeRow.username"
  184. @close="visitVisible = false"
  185. @submited="getList"
  186. :useVisitType="['其它', '会员续费']"
  187. />
  188. </el-dialog>
  189. </div>
  190. </template>
  191. <script>
  192. import axios from "axios";
  193. import { getToken } from "@/utils/auth";
  194. import pagination from "@/components/Pagination/index";
  195. import quiteTeam from "@/views/teamDetail/components/modals/quite-team";
  196. import { StudentQuit } from "@/api/buildTeam";
  197. import load from "@/utils/loading";
  198. import { getMusicMemberList } from "./api";
  199. import visit from "@/views/withdrawal-application/modals/visit";
  200. export default {
  201. components: { pagination, quiteTeam,visit },
  202. data() {
  203. return {
  204. searchForm: {
  205. search: null,
  206. },
  207. tableList: [{}],
  208. organList: [],
  209. rules: {
  210. // 分页规则
  211. limit: 10, // 限制显示条数
  212. page: 1, // 当前页
  213. total: 0, // 总条数
  214. page_size: [10, 20, 40, 50], // 选择限制显示条数
  215. },
  216. quitForm: {
  217. // 退团信息确认
  218. isRefundCourseFee: null,
  219. isRefundInstrumentFee: null,
  220. isRefundTeachingAssistantsFee: null,
  221. isMaintenanceFee: null,
  222. cloudTeacherAmount: null,
  223. isCloudTeacherAmount: null,
  224. maintenanceFee: 0,
  225. reason: "",
  226. },
  227. quitVisible: false,
  228. activeRow: null,
  229. visitVisible:false
  230. };
  231. },
  232. //生命周期 - 创建完成(可以访问当前this实例)
  233. created() {},
  234. //生命周期 - 挂载完成(可以访问DOM元素)
  235. mounted() {
  236. // 获取分部
  237. this.$store.dispatch("setBranchs");
  238. this.init();
  239. },
  240. methods: {
  241. init() {
  242. if(this.$route.query.hasMember){
  243. this.$set(this.searchForm,'hasMember',this.$route.query.hasMember)
  244. }
  245. this.getList();
  246. },
  247. async getList() {
  248. try {
  249. const res = await getMusicMemberList({
  250. ...this.searchForm,
  251. page: this.rules.page,
  252. rows: this.rules.limit,
  253. });
  254. this.tableList = res.data.rows;
  255. this.rules.total = res.data.total;
  256. } catch (e) {
  257. console.log(e);
  258. }
  259. },
  260. search() {
  261. this.rules.page = 1;
  262. this.getList();
  263. },
  264. onReSet() {},
  265. quitTeam(row) {
  266. this.activeRow = row;
  267. this.quitVisible = true;
  268. this.quitForm.cloudTeacherAmount = row.cloudTeacherAmount;
  269. },
  270. quieTeams(row) {
  271. this.$prompt("请输入退团原因", "提示", {
  272. confirmButtonText: "确定",
  273. cancelButtonText: "取消",
  274. inputPattern: /\S/,
  275. inputErrorMessage: "请输入退团原因",
  276. type: "warning",
  277. })
  278. .then((val) => {
  279. // 发请求 退团
  280. StudentQuit({
  281. musicGroupId: row.musicGroupId,
  282. userId: row.userId,
  283. reason: val.value,
  284. isRefundCourseFee: false,
  285. isRefundInstrumentFee: false,
  286. isRefundTeachingAssistantsFee: false,
  287. }).then((res) => {
  288. this.quitForm = {
  289. // 退团信息确认
  290. isRefundCourseFee: null,
  291. isRefundInstrumentFee: null,
  292. isRefundTeachingAssistantsFee: null,
  293. isMaintenanceFee: null,
  294. cloudTeacherAmount: null,
  295. isCloudTeacherAmount: null,
  296. maintenanceFee: 0,
  297. reason: "",
  298. };
  299. if (res.code == 200) {
  300. this.$message.success("退团成功");
  301. this.getList();
  302. this.quitVisible = false;
  303. }
  304. });
  305. })
  306. .catch(() => {});
  307. },
  308. chioseType() {
  309. this.$refs["quitForm"].$refs["quitForm"].validate((res) => {
  310. if (res) {
  311. this.$confirm("确定退团?", "提示", {
  312. confirmButtonText: "确定",
  313. cancelButtonText: "取消",
  314. type: "warning",
  315. })
  316. .then(() => {
  317. let row = this.activeRow;
  318. let params = {
  319. musicGroupId: row.musicGroupId,
  320. userId: row.userId,
  321. reason: this.quitForm.reason,
  322. isRefundCourseFee: this.quitForm.isRefundCourseFee,
  323. isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
  324. isRefundTeachingAssistantsFee:
  325. this.quitForm.isRefundTeachingAssistantsFee,
  326. maintenanceFee: this.quitForm.maintenanceFee,
  327. };
  328. // 退还乐器练习云教练费用
  329. if (this.quitForm.isCloudTeacherAmount) {
  330. params.cloudTeacherAmount = this.quitForm.cloudTeacherAmount;
  331. } else {
  332. params.cloudTeacherAmount = 0;
  333. }
  334. // 发请求 退团
  335. StudentQuit(params).then((res) => {
  336. this.quitForm = {
  337. // 退团信息确认
  338. isRefundCourseFee: null,
  339. isRefundInstrumentFee: null,
  340. isRefundTeachingAssistantsFee: null,
  341. isMaintenanceFee: null,
  342. cloudTeacherAmount: null,
  343. isCloudTeacherAmount: null,
  344. maintenanceFee: 0,
  345. reason: "",
  346. };
  347. if (res.code == 200) {
  348. this.$message.success("退团成功");
  349. this.getList();
  350. this.quitVisible = false;
  351. }
  352. });
  353. })
  354. .catch(() => {});
  355. } else {
  356. }
  357. });
  358. // row.typeVisible = false;
  359. },
  360. addVisit(row) {
  361. this.visitVisible = true;
  362. this.activeRow = row;
  363. },
  364. },
  365. watch:{
  366. quitVisible(val) {
  367. if (!val) {
  368. this.quitForm = {
  369. // 退团信息确认
  370. isRefundCourseFee: null,
  371. isRefundInstrumentFee: null,
  372. isRefundTeachingAssistantsFee: null,
  373. isMaintenanceFee: null,
  374. cloudTeacherAmount: null,
  375. isCloudTeacherAmount: null,
  376. maintenanceFee: 0,
  377. reason: "",
  378. }
  379. this.$refs["quitForm"].$refs["quitForm"].resetFields();
  380. }
  381. },
  382. }
  383. };
  384. </script>
  385. <style lang='scss' scoped>
  386. </style>