index.vue

<template>
  <div class="qrcode">
    <el-form label-width="100px" inline="">
      <el-form-item label="标题">
        <el-input/>
      </el-form-item>
      <el-form-item label="二维码类型">
        <el-select v-model="searchFrom.type" placeholder="请选择" @change="nowPage = 1;initPage()">
          <el-option v-for="item in typeOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道类型">
        <el-select v-model="searchFrom.code_type" placeholder="请选择" @change="nowPage = 1;initPage()">
          <el-option v-for="item in code_typeOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchFrom.status" placeholder="请选择" @change="nowPage = 1;initPage()">
          <el-option v-for="item in statusOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button @click="initPage" type="primary" plain>
          搜索
        </el-button>
      </el-form-item>
      <el-form-item label="">
        <el-button type="success" plain @click="newObj.show = true">
          创建二维码
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      :data="list">
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="title"
        label="二维码类型">
        <template slot-scope="scope">
          {{scope.row.type | qrType}}
        </template>
      </el-table-column>
      <el-table-column
        prop="invite_code"
        label="推广码">
      </el-table-column>
      <el-table-column
        label="渠道码类型">
        <template slot-scope="scope">
          {{scope.row.code_type | qrCodeType}}
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
          {{scope.row.status | qrStatus}}
        </template>
      </el-table-column>
      <el-table-column
        label="二维码">
        <template slot-scope="scope">
          <a target="_blank" download="二维码" :href="scope.row.open_url">
            <img :src="scope.row.open_url" class="img"/>
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        label="备注">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button
            @click="editComment(scope.$index, list)"
            type="text"
            size="small"
            v-if="!$store.state.readonly">
            备注
          </el-button>
          <el-button
            @click.native.prevent="editRow(scope.$index, list)"
            type="text"
            size="small"
            v-if="!$store.state.readonly">
            编辑
          </el-button>
          <el-button
            @click.native.prevent="detail(scope.$index, list)"
            type="text"
            size="small">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <dialog-div :newObj="newObj" @initPage="initPage" @changeShow="changeShow"></dialog-div>
  </div>
</template>

<script>
  import dialogDiv from './dialog'
  import {getQrCodeListApi,getQrCodeDetailUrlApi,updateQrcodeDescApi} from "../../service/api";
  import {QRCODETYPE,QRSTATUS,QRTYPE} from "../../util/wordbook";
  import page from '../framework/page'
  export default {
    name: "index",
    filters:{
      qrType(value){
        return QRTYPE[value]
      },
      qrStatus(value){
        return QRSTATUS[value]
      },
      qrCodeType(value){
        return QRCODETYPE[value]
      }
    },
    data(){
      return {
        newObj:{
          show:false,
        },
        list:[],
        limit:10,
        nowPage:1,
        typeOption:[
          {
            label:'请选择',
            value:''
          },{
            label:'永久',
            value:1
          },{
            label:'临时',
            value:2
          },
        ],
        code_typeOption:[
          {
            label:'请选择',
            value:''
          },{
            label:'渠道',
            value:1
          },{
            label:'用户',
            value:2
          },
        ],
        statusOption:[
          {
            label:'请选择',
            value:''
          },{
            label:'正常',
            value:0
          },{
            label:'禁用',
            value:1
          },
        ],
        total:0,
        searchFrom:{
          title:'',
          type:'',
          code_type:'',
          status:''
        }
      }
    },
    components:{
      dialogDiv,
      page
    },
    mounted(){
      this.initPage()
    },
    methods:{
      onPageChange(val){
        this.nowPage = val
        this.initPage()
      },
      onSizeChange(val){
        this.nowPage = 1
        this.limit = val
        this.initPage()
      },
      initPage(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if(this.searchFrom.title){
            json.title = this.searchFrom.title
        }
        if(this.searchFrom.type){
          json.type = this.searchFrom.type
        }
        if(this.searchFrom.code_type){
          json.code_type = this.searchFrom.code_type
        }
        if(this.searchFrom.status){
          json.status = this.searchFrom.status
        }
        getQrCodeListApi(json).then(res=>{
          this.list = res ? res.list : [];
          this.total = res ? res.total : 0;
        })
      },
      newQrcode(){
        this.newObj = {
          show: true,
          title:null,
          type:2,
          invite_code:null,
          status:0,
          end_at:null
        }
      },
      editRow(index, list){
        let _obj = list[index]
        getQrCodeDetailUrlApi(_obj.id).then(res=> {
          this.newObj = {
          title: res.title,
          type: res.type,
          invite_code: res.invite_code ? res.invite_code.split('-')[2] : '',
          status: res.status,
          end_at: res.end_at,
          id: _obj.id
          }
          if(res.auto_reply){
            this.newObj.list = JSON.parse(res.auto_reply)
          }
          this.newObj.editFlag = true;
          this.newObj.show = true;
        });
      },
      editComment(index, list) {
        this.$prompt('', '编辑备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType:'textarea',
          inputValue: list[index].desc ? list[index].desc : ''
        }).then(({ value }) => {
          updateQrcodeDescApi(list[index].id,{desc: value}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            });
            this.initPage()
          });
        })
      },
      detail(index, list){
        let _obj = list[index]
        getQrCodeDetailUrlApi(_obj.id).then(res=> {
          this.newObj = {
          title: res.title,
          type: res.type,
          invite_code: res.invite_code ? res.invite_code.split('-')[2] : '',
          status: res.status,
          end_at: res.end_at,
          id: _obj.id
        }
        if(res.auto_reply){
          this.newObj.list = JSON.parse(res.auto_reply)
        }
        this.newObj.readFlag = true;
        this.newObj.show = true;
      });
      },
      changeShow(val){
        this.newObj = {
          show: false,
          title:null,
          type:2,
          invite_code:null,
          status:0,
          end_at:null
        }
      },
      getQrCodeDetail(id){
        getQrCodeDetailUrlApi(id).then(res=> {

        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .text-r{
    padding: 10px;
    text-align: right;
  }
  .qrcode{
    padding: 10px;
  }
  .img{
    width: 50px;
  }
</style>