添加申请用户任务完成流程

guoshilong

2022-12-19 6fd27418225f2d36fc206acdfe6c24fb33ae7590

 src/views/pass/pass.vue

@@ -28,12 +28,26 @@
        </el-button>
      </template>
      <template slot-scope="{type,size,row,index}" slot="menu">
        <el-button icon="el-icon-view" :size="size" :type="type">预 览</el-button>
        <el-button icon="el-icon-view" :size="size" :type="type" @click="viewQr(row)">预 览</el-button>
        <el-button icon="el-icon-edit" :size="size" :type="type">导 出</el-button>
        <el-button icon="el-icon-delete" :size="size" :type="type" >打 印</el-button>
        <el-button icon="el-icon-delete" :size="size" :type="type">废 止</el-button>
      </template>
    </avue-crud>

    <el-dialog
      title="通行证预览"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="30%">
      <div id="qrCode" ref="qrCodeDiv"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>



  </basic-container>
</template>

@@ -41,6 +55,7 @@
  import {getList, getDetail, add, update, remove} from "@/api/pass/pass";
  import option from "@/const/pass/pass";
  import {mapGetters} from "vuex";
  import QRCode from 'qrcodejs2';

  export default {
    data() {
@@ -55,7 +70,9 @@
        },
        selectionList: [],
        option: option,
        data: []
        data: [],
        dialogVisible:false,
        qrCode:"",
      };
    },
    computed: {
@@ -185,6 +202,25 @@
          this.loading = false;
          this.selectionClear();
        });
      },
      viewQr(row){
        console.log(row)
        this.dialogVisible = true
        this.$nextTick(()=>{
          if(this.qrcode) {  // 有新的二维码地址了，先把之前的清除掉
            this.$refs.qrCodeDiv.innerHTML = ''
          }
          this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
            text: 'https://www.baidu.com/',
            width: 200,
            height: 200,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
          })
        })


      }
    }
  };