培训班

src/views/modules/trainingCourse/training-course-user.vue

@@ -5,17 +5,9 @@
       :model="dataForm"
       @keyup.enter.native="getDataList()"
     >
-      <el-form-item label="名称">
-        <el-input
-          v-model="dataForm.title"
-          placeholder="请输入名称"
-          clearable
-        >
-        </el-input>
-      </el-form-item>
       <el-form-item label="手机号">
         <el-input
-          v-model="dataForm.title"
+          v-model="dataForm.tel"
           placeholder="请输入手机号"
           clearable
         >
@@ -31,8 +23,8 @@
         >
         <el-button
           type="primary"
-          @click="addOrUpdateHandle()"
-          >新增</el-button
+          @click="addHandle()"
+          >报名</el-button
         >
       </el-form-item>
     </el-form>
@@ -41,32 +33,36 @@
       border
       v-loading="dataListLoading"
       style="width: 100%"
+      @sort-change="handleSortChange"
     >
-      <el-table-column label="用户ID" align="center" prop="id"></el-table-column>
-      <el-table-column label="姓名" align="center" prop="nickname">
+      <el-table-column
+        label="序号"
+        type="index"
+        align="center"
+        width="60">
+      </el-table-column>
+      <el-table-column label="报名时间" align="center" prop="createTime" width="170" sortable="custom" :sort-orders="['ascending', 'descending']">
+      </el-table-column>
+      <el-table-column label="订单编号" align="center" prop="orderSn"></el-table-column>
+      <el-table-column label="名称" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.nickname ? scope.row.nickname : "暂无用户名" }}</span>
+          <span>{{ scope.row.user.name ? scope.row.user.nickname : "暂无用户名" }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="头像" align="center" prop="avatar">
+      <el-table-column label="联系方式" align="center">
+        <template slot-scope="scope">{{ scope.row.user.tel||'-' }}</template>
+      </el-table-column>
+      <el-table-column label="用户身份" align="center">
         <template slot-scope="scope">
-          <img
-            v-if="scope.row.avatar && scope.row.avatar != ''"
-            :src="scope.row.avatar"
-            width="50"
-            height="50"
-          />
-          <img
-            v-else
-            src="../../../../static/img/morenAvavter.png"
-            width="50"
-            height="50"
-          />
+          {{ scope.row.identity }}
         </template>
       </el-table-column>
-      <el-table-column label="电话" align="center" prop="tel"></el-table-column>
-      <el-table-column label="邮箱" align="center" prop="email"></el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime">
+     
+      <el-table-column label="支付方式" align="center">
+        <template slot-scope="scope">{{ scope.row.payMethod }}：{{ scope.row.realMoney }}</template>
+      </el-table-column>
+      <el-table-column label="抵扣方式" align="center">
+        <template slot-scope="scope">积分：{{ scope.row.jfDeduction }}</template>
       </el-table-column>
       <el-table-column
         fixed="right"
@@ -78,7 +74,9 @@
           <el-button
             type="text"
             size="small"
-            >修改</el-button>
+            @click="deleteHandle(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -95,24 +93,34 @@
 
     <!-- 弹窗, 新增 / 修改 -->
     <el-dialog
-      :visible.sync="addOrUpdateVisible"
-      :title="titlesub"
+      :visible.sync="addVisible"
+      title="添加用户"
       class="dialog_box"
       @close="cancleClose"
+      width="600px"
     >
       <el-form
         :model="addForm"
         ref="addFormRef"
         :rules="addFormRule"
-        label-width="90px"
+        label-width="100px"
       >  
-        <el-form-item label="姓名" prop="nickname">
-          <el-input v-model="addForm.nickname" placeholder="请输入姓名"></el-input>
+        <el-form-item label="手机号/邮箱" prop="userKey" style="width: 530px;">
+          <el-input v-model="addForm.userKey" placeholder="请输入手机号/邮箱" clearable @input="handleSearch"></el-input>
+          <div class="data-list" v-if="showSearch" v-loading="searchListLoading">
+            <span v-for="(v,i) in searchList" :key="i" @click="checkTitle(v)">{{ v.tel }}</span>
+          </div>
+        </el-form-item>
+        <el-form-item label="用户身份" v-if="infoStatus">
+          {{ info.identity }}
+        </el-form-item>
+        <el-form-item label="最终价格" v-if="infoStatus">
+          {{ info.fee }}
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cancleClose">取 消</el-button>
-        <el-button type="primary" @click="addOrEditCate">确 定</el-button>
+        <el-button type="primary" @click="addCate">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -123,26 +131,18 @@ export default {
     return {
       trainingId: null,
       dataForm: {
-        title: '',
-        
-
-
-
+        tel: ''
       },
       addForm: {
-        id: "", //新增不传
-        title: "", //标题
-        
-
-
-
+        userId: '',
+        userKey: ''
       },
       editId: "",
       addFormRule: {
-        title: [
+        userKey: [
           {
             required: true,
-            message: "请输入标题",
+            message: "请输入手机号/邮箱",
           },
         ]
       },
@@ -151,16 +151,36 @@ export default {
       pageSize: 10,
       totalPage: 0,
       dataListLoading: false,
-      addOrUpdateVisible: false,
-      titlesub: '新增',
-      statusType: 0,  //区分新增还是修改
+      searchListLoading: false,
+      addVisible: false,
+      //新增-模糊查询
+      showSearch: false,
+      searchList: [],
+      sortParams: {        // 排序参数
+        field: 'date',    // 默认排序字段
+        order: 'desc'     // 默认降序
+      },
+      //获取身份和价格
+      infoStatus: false,
+      info: {},
+      //日期排序
+      sortParams: {
+        date: ''
+      }
     };
   },
-  created() {
-    this.trainingId=this.$route.query.id;
+  activated(){
+    this.trainingId = this.$route.query.id;
     this.getDataList();
   },
   methods: {
+    //排序变化事件
+    handleSortChange({ column, prop, order }) {
+      this.sortParams.date = order 
+          ? (order === 'ascending' ? '2' : '1') 
+          : null;
+      this.getDataList();
+    },
     // 获取数据列表
     getDataList() {
       this.dataListLoading = true;
@@ -170,7 +190,9 @@ export default {
         data: this.$http.adornData({
           current: this.pageIndex,
           limit: this.pageSize,
-          trainingId: this.trainingId
+          trainingId: this.trainingId,
+          tel: this.dataForm.tel,
+          createTimeSort: this.sortParams.date
         }),
       }).then(({ data }) => {
         if (data && data.code === 0) {
@@ -180,27 +202,20 @@ export default {
         this.dataListLoading = false;
       });
     },
-    //新增
-    addOrUpdateHandle(){
-      this.addOrUpdateVisible = true;
-      this.statusType = 0;  //新增
-      this.titlesub = '新增';
+    //添加用户
+    addHandle(){
+      this.addVisible = true;
       this.$refs["addFormRef"].resetFields();
       this.addForm = {
-        title: "", //标题
+        userId:'',
+        userKey: ''
       }
+      this.infoStatus = false;
+      this.info = {};
     },
-    //关闭
-    cancleClose(){
-      this.addOrUpdateVisible = false;
-    },
-    addOrEditCate(){
-      this.addCate();
-    },
-
     //取消
     cancleClose(){
-      this.addOrUpdateVisible = false;
+      this.addVisible = false;
     },
     // 每页数
     sizeChangeHandle(val) {
@@ -213,40 +228,121 @@ export default {
       this.pageIndex = val;
       this.getDataList();
     },
-    //新增
+    //模糊查询
+    handleSearch(val){
+      if(val){
+        this.showSearch = true;
+        this.searchListLoading = true;
+        this.infoStatus = false;
+        this.info = {}
+        this.$http({
+          url: this.$http.adornUrl("/book/user/getUserList"),
+          method: "post",
+          data: this.$http.adornData({
+            page: 1,
+            limit: 9999,
+            key: val
+          })
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            if(data.user.records&&data.user.records.length>0){
+              this.searchList = data.user.records;
+            }else{
+              this.searchList = [];
+            }
+            this.searchListLoading = false;
+          }
+        });
+      }else{
+        console.log('输入框已被清空');
+        this.infoStatus = false;
+        this.info = {}
+      }
+    },
+    //选中模糊值
+    checkTitle(v){
+      this.addForm.userId = v.id;
+      this.addForm.userKey = v.tel;
+      this.showSearch = false;
+      this.getFinalPriceByUser();
+    },
+    //获取角色和价格
+    getFinalPriceByUser(){
+      this.$http({
+        url: this.$http.adornUrl("/common/trainingClass/getFinalPriceByUser"),
+        method: "post",
+        data: this.$http.adornData({
+          userId: this.addForm.userId,
+          classId: Number(this.trainingId)
+        }),
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          if(data.info){
+            this.infoStatus = true;
+            this.info = data.info;
+          }else{
+            this.infoStatus = false;
+          }
+        }else{
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    //添加用户
     addCate(){
       this.$refs["addFormRef"].validate(valid => {
         if (valid) {
           this.$http({
-            url: this.$http.adornUrl("/master/trainingClass/addTrainingClass"),
+            url: this.$http.adornUrl("/master/trainingClass/addUserToTrainingClass"),
             method: "post",
             data: this.$http.adornData({
-              id: this.addForm.id,
-              title: this.addForm.title,
-              type: String(this.addForm.type),
-              year: this.addForm.year,
-              singupFlag: String(this.addForm.singupFlag),
-              icon: this.addForm.icon,
-              fee: this.addForm.fee,
-              vipFee: this.addForm.vipFee,
-              svipFee: this.addForm.svipFee,
-              huFee: this.addForm.huFee,
-              sort: this.addForm.sort
+              userId: this.addForm.userId,
+              trainingId: this.trainingId,
+              identity: this.info.identity+'：'+this.info.fee
             }),
           }).then(({ data }) => {
             if (data && data.code === 0) {
               this.$message({
-                message: "操作成功",
+                message: "添加成功",
                 type: "success"
               });
-              this.addOrUpdateVisible = false;
+              this.addVisible = false;
 
               this.getDataList();
+            }else{
+              this.$message.error(data.msg);
             }
           });
         }
       })
-    }
+    },
+    //删除
+    deleteHandle(row){
+      this.$confirm("确定要删除该用户?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+      .then(() => {
+        this.$http({
+          url: this.$http.adornUrl("/master/trainingClass/delUserToTrainingClass"),
+          method: "post",
+          data: this.$http.adornData({
+            id: row.id
+          }),
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+                message: "操作成功",
+                type: "success"
+              });
+
+              this.getDataList();
+          }
+        });
+      })
+      .catch(() => {});
+    },
   },
 };
 </script>
@@ -280,4 +376,26 @@ export default {
     }
   }
 }
+
+.data-list{
+  min-height: 200px;
+  width: 100%;
+  border-radius: 4px;
+  background: #fff;
+  position: absolute;
+  z-index: 99;
+  top: 40px;
+  left: 0;
+  padding: 10px 20px;
+  cursor: pointer;
+  max-height: 280px;
+  overflow-y: scroll;
+
+  span{
+    color: #606266;
+    line-height: 36px;
+    font-size: 14px;
+    display: block;
+  }
+}
 </style>