优惠券

src/components/selectPro.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-drawer 
+    size="50%"
+    title="请选择"
+    :visible.sync="drawer"
+    :direction="direction"
+    :before-close="handleClose"
+  >
+    <div style="padding:15px">
+        <!-- <el-button class="closeBtn" type="primary" plain 
+            @click="handleClose">确定选中并关闭</el-button
+          > -->
+      <el-form
+        :inline="true"
+        :model="query"
+        @keyup.enter.native="getDataList()"
+      >
+        <el-form-item label="课程名称">
+          <el-input
+            v-model="query.courseName"
+            placeholder="课程名称"
+            clearable
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button
+            @click="
+              pageIndex = 1;
+              getDataList();
+            "
+            >查询</el-button
+          >
+          
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="padding: 15px">
+    <el-table v-loading="dataListLoading"
+      :data="dataList"
+      border
+      style="width: 100%; "
+    >
+      <!-- <el-table-column type="selection" > </el-table-column> -->
+      <el-table-column prop="title" label="名称" > </el-table-column>      
+      <el-table-column prop="description" label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button :disabled="checkBtnStatus(scope.row)"
+            type="primary" plain
+            size="small"
+            @click="handleSelect(scope.row)"
+          >
+            {{checkBtnStatus(scope.row) ? '已选择' : '选择'}}
+
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      style="padding: 30px 0; text-align: center;"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
+    </el-pagination>
+</div>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: "selectPro",
+  props: ["requesturl", "oldData"],
+  data() {
+    return {
+      drawer: true,
+      direction: "rtl",
+      dataList: [],
+      selected: [],
+      query: {
+        courseName: ""
+      },
+      pageSize: 10,
+      pageIndex: 1,
+      totalPage: 0,
+      dataListLoading: false,
+    };
+  },
+  mounted() {
+    console.log("挂载");
+    this.getDataList();
+
+  },
+  filters: {    
+
+  },
+  methods: {
+    checkBtnStatus(val) {
+        let index = this.oldData.findIndex(item => item.id === val.id);
+        if(index > -1){
+            return true
+        }else{
+            return false
+        }
+
+    },
+    handleSelect(row) {
+        var _list = this.selected.map( item => item.id)
+        if(_list.includes(row.id)){
+            this.$message({
+                message: '已选择该课程',
+                type: 'warning'
+            })
+            return
+        }
+        this.selected.push(row);
+        let index = this.dataList.findIndex(item => item.id === row.id);
+        this.dataList.splice(index,1)
+        this.$message({
+            message: '选择成功',
+            type:'success'
+        })
+        console.log('选择的课程',this.selected)
+    },
+        // 每页数
+        sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    handleClose(done) {
+      this.$emit("close", this.selected);
+      this.selected = []
+    },
+    getDataList() {
+        this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl(this.requesturl),
+        method: "post",
+        data: this.$http.adornData({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          courseName: this.query.courseName,   
+          type:1,       
+          medicalId:"",//医学标签id，type为1时生效，空字符串为全部
+          sociologyId:""//国学标签id，type为2时生效，空字符串为全部
+        })
+      }).then(({ data }) => {
+        if(data.code != 0) return this.$message.error(data.msg);
+        if (data && data.code === 0) {
+          this.dataList = data.page.records;
+          this.totalPage = data.page.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      }).catch((e) => {
+        this.$message.error(e.msg);
+        this.dataListLoading = false;
+      });
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+.closeBtn{position: absolute;right: 15px;top: 15px;}
+</style>