epmet-work-pc-chengyang/src/views/modules/volunteer/pointsRedemption/index.vue

<template>
    <div class="g-main">
      <div class="m-search">
        <el-form :inline="true" ref="ref_searchform" :label-width="'100px'">
          <div>
            <el-form-item label="发布区域">
              <el-cascader class="list_item_width_1" ref="myCascader" clearable size="small"
               v-model.trim="formData.redeemOrgId" :options="orgOptions" :props="orgOptionProps"
               @change="handleChangeAgency"></el-cascader>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="formData.classKey" placeholder="请选择" clearable>
                <el-option v-for="item in formData.optionsStatus" :key="item.classKey" :label="item.className"
                  :value="item.classKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上架时间" >
              <el-date-picker
      v-model="formData.shelveOnTimeFrom"
      type="datetime"
      placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>至   <el-date-picker
      v-model="formData.shelveOnTimeTo"
      type="datetime"
      placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
            </el-form-item>

          </div>
          <div class="block">
            <div style="display: flex; justify-content: flex-end;">
              <el-button style="margin-left:10px" class="diy-button--blue" size="small"
                @click="handleSearch">查询</el-button>
              <el-button style="margin-left:10px" class="diy-button--white" size="small"
                @click="resetSearch">重置</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div class="m-table">
        <el-button style="" class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
        <el-table class="table" :data="tableData" border v-loading="tableLoading" style="width: 100%">
          <el-table-column label="序号" header-align="center" align="center" type="index" width="80"> </el-table-column>
          <el-table-column prop="redeemerOrgName" header-align="center" align="center" label="发布区域">
          </el-table-column>
          <el-table-column prop="className" header-align="center" align="center" label="分类">
            <!-- <template slot-scope="scope">
          <span>{{ scope.row.enabled === 1 ? '关闭' : '显示' }}</span>
        </template> -->
          </el-table-column>
          <el-table-column prop="awardName" header-align="center" align="center" label="标题">
            <template slot-scope="scope">
                    <el-button style="width: 100%" type="text" @click="handleSelect(scope.row)">{{scope.row.awardName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="shelveStatus" header-align="center" align="center" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.shelveStatus === 0 ? '下架' : '上架' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shelveOnTime" header-align="center" align="center" label="上架时间"  format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss">
          </el-table-column>
          <!-- <el-table-column prop="IDNumber" header-align="center" align="center" label="发布时间">
          </el-table-column>
          <el-table-column prop="RegistrationTime" header-align="center" align="center" label="状态">
          </el-table-column>
          <el-table-column prop="Points" header-align="center" align="center" label="来源">
          </el-table-column>
          <el-table-column prop="ActivityCount" header-align="center" align="center" label="所属项目">
          </el-table-column> -->
          <el-table-column label="操作" fixed="right" width="250" header-align="center" align="center" class="operate">
            <template slot-scope="scope">
              <el-button v-if="scope.row.shelveStatus === 0" type="text" style="color:#1C6AFD;" size="small" @click="handleDetail(scope.row)">修改</el-button>
              <el-button v-if="scope.row.shelveStatus === 0" type="text" style="color:#1C6AFD;" size="small" @click="handleonline(scope.row)">上架</el-button>
              <el-button v-if="scope.row.shelveStatus === 1" type="text" style="color:#1C6AFD;" size="small" @click="handleuponline(scope.row)">下架</el-button>
              <el-button  type="text" style="color:#1C6AFD;" size="small" @click="handleDel(scope.row)">删除</el-button>
              <el-button type="text" style="color:#1C6AFD;" size="small" @click="handleEdit(scope.row)">兑换记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
            :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" :total="total">
          </el-pagination>
        </div>
        <el-dialog :visible.sync="add" :close-on-click-modal="false" :close-on-press-escape="false" title="新增"
          width="1000px" top="10vh" class="dialog-h" @closed="closeDialog">
          <add v-if="add" :list="fmData" @closeDialog="closeDialog"/>
        </el-dialog>
        <el-dialog :visible.sync="updateshow" :close-on-click-modal="false" :close-on-press-escape="false" title="修改"
          width="1000px" top="10vh" class="dialog-h" @closed="closeupdate">
          <update v-if="updateshow" :list="fmData" @closeupdate="closeupdate"/>
        </el-dialog>
        <el-dialog :visible.sync="recordshow" :close-on-click-modal="false" :close-on-press-escape="false" title="兑换记录"
          width="1000px" top="10vh" class="dialog-h" @closed="diaClose">
          <record v-if="recordshow" :list="fmData" />
        </el-dialog>
        <el-dialog :visible.sync="showSelect" :close-on-click-modal="false" :close-on-press-escape="false" title="查看"
          width="750px" top="10vh" class="dialog-h" @closed="diaClose">
          <Select v-if="showSelect" :list="fmData" />
        </el-dialog>
      </div>
  
    </div>
  </template>
  
      <script>
      import record from "./record"
      import { requestPost,requestGet } from "@/js/dai/request";
      import nextTick from "dai-js/tools/nextTick";
      import { mapGetters } from "vuex";
      import add from "./add";
      import Select from "./Select.vue"
      import update from "./update.vue"
      export default {
        components: {add,record,Select,update},
      
        data() {
          return {
            updateshow:false,
            orgOptionProps: {
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        emitPath: false,
        multiple: false,
        checkStrictly: true
    },
            orgOptions:[],
            showSelect:false,
            recordshow:false,
            HandlePointsshow:false,
            ActivityCountshow:false,
            add:false,
            orgTypeFilter:["street"],
            formData:{
              shelveOnTimeTo:"",
              classKey:"",
              redeemOrgId:"",
              optionsStatus: [],
              shelveOnTimeFrom:"",

            },
            integral:false,
            tableLoading: false,
            formShow:false,
          //   pageType: "list", // 列表list 处理dispose 详情info 议题详情issue-info
            pageNo: 1,
            pageSize: 20,
            total: 1,
            tableData: [
            ],
            Record:false,
            fmData:[],
         
          };
        },
        computed: {
          maxTableHeight() {
            return this.$store.state.inIframe
              ? this.clientHeight - 400 + this.iframeHeigh
              : this.clientHeight - 400;
          },
          ...mapGetters(["clientHeight", "iframeHeight"]),
        },
        watch: {
          "fmData.endDate": function (val) {
            if (val && val != "") {
              console.log(val);
              let arrayTemp = val.split(" ");
              this.fmData.endDate = arrayTemp[0] + " 23:59:59";
            }
          },
        },
        mounted() {
          this.getTableData();
          this.getOrgTreeList()
          this.getclasses()
        },
        methods: {
             //获取物品分类信息
   async getclasses() {
        const url = "/voluntary/pointsAward/classes/list";
        let params = {
      }
        const { data, code, msg } = await requestGet(url, params)
        if (code === 0) {
          console.log("列表请求成功！！！！！！！！！！！！！！");
          this.TypeList=data
 
          this.formData.optionsStatus = data
          console.log(this.formData.optionsStatus,"this.tableData");
          
    
        } else {
          this.$message.error(msg || "列表请求失败");
        }
      },
          //删除
          handleDel(row){
            this.$confirm("删除之后无法回复，确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            console.log(row.id,"online");
           let url="/voluntary/pointsAward/admin/delete"
           let params={
            id:row.id
           }
           requestPost(url,params).then((res)=>{
            console.log(res,"res");
            this.getTableData()

           })
          })
          .catch(err => {
            if (err == "cancel") {

            }

          });
          
          },
          //上线
          handleonline(row){
            console.log(row.id,"online");
           let url="/voluntary/pointsAward/admin/shelveOn"
           let params={
            id:row.id
           }
           requestPost(url,params).then((res)=>{
            console.log(res,"res");
            this.getTableData()

           })
          },
          //下架
          handleuponline(row){
            console.log(row.id,"online");
           let url="/voluntary/pointsAward/admin/shelveOff"
           let params={
            id:row.id
           }
           requestPost(url,params).then((res)=>{
            console.log(res,"res");
            this.getTableData()

           })
          },
             //获取当前组织
   getOrgTreeList() {
      this.$http
        .post("/gov/org/customeragency/agencygridtree", {orgTypeFilter:this.orgTypeFilter})
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.orgOptions = [];
            this.orgOptions.push(res.data);
            console.log(this.orgOptions,"this.orgOptions");
            
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
          handleChangeAgency(val) {
            console.log(val);
            this.redeemerOrgId = val

          },
          closeDialog(){
              this.add=false,
              this.getTableData()
          },
          closeupdate(){
            this.updateshow=false,
            this.getTableData()
          },
          handleSelect(row){
            this.showSelect=true
            this.fmData=row
            console.log("row",row);
          },
          diaClose(){
            this.formShow=false
          },
          resetSearch(){
            this.formData=[]
          },
          handleDetail(row){
            console.log(row,"row");
            this.updateshow=true
            this.fmData=row
          },
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            window.localStorage.setItem("pageSize", val);
            this.getTableData();
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNo = val;
            this.getTableData();
          },
          //查询
          handleSearch(val) {
            this.pageNo = 1;
            this.getTableData();
          },
          async handleAdd() {
            this.add=true
          },
          async handleEdit(row) {
            this.fmData=row
            this.recordshow=true
          },
          async getTableData() {
        // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
        const url = "/voluntary/pointsAward/admin/list";
        let params = {
          pageNo: this.pageNo,
          shelveOnTimeFrom:this.formData.shelveOnTimeFrom,
          redeemOrgId:this.formData.redeemOrgId,
          pageTo:this.pageSize,
          classKey:this.formData.classKey,
          shelveOnTimeTo:this.formData.shelveOnTimeTo

      }
        const { data, code, msg } = await requestGet(url, params)
        if (code === 0) {
          console.log("列表请求成功！！！！！！！！！！！！！！");
          this.total = data.total || 0;
          this.tableData = data.list
          console.log(this.tableData,"this.tableData");
          
    
        } else {
        }
      },
        },
      };
      </script>
      
      <style lang="scss" scoped>
  @import "@/assets/scss/modules/management/list-main.scss";
        .g-main {
          width: 100%;
        }
        .m-search {
          background: #ffffff;
          border-radius: 4px;
          padding: 30px 20px 5px;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        }
        .item_width_1 {
          width: 260px;
        }
        .item_width_2 {
          width: 495px;
        }
        .m-table {
          background: #ffffff;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          margin-top: 15px;
          padding: 23px 30px 10px;
          .table {
            margin-top: 20px;
          }
        }
        .div_btn {
          display: flex;
          justify-content: space-between;
        }
        .el-row {
          /* margin-bottom: 20px; */
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          margin-right: 50px;
        }
      
      </style>