新增溯源码预览

Administrator

2022-07-01 dce0e380d8e7f97057b83336db3f24cae858c58a

新增溯源码预览

 public/traceabilityCode.html

 src/api/traceability/traceability.js

@@ -22,6 +22,17 @@
    })
}


export const getSimpleInfo = (code) => {
    return request({
        url: '/api/traceability/getSimpleInfo',
        method: 'get',
        params: {
            code
        }
    })
}

export const remove = (ids) => {
    return request({
        url: '/api/traceability/remove',

 src/views/traceability/firstView.vue

New file
@@ -0,0 +1,101 @@
<template>
  <div>
    <el-dialog
      title="溯源码预览"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="40%"
      :visible.sync="visible"
      center
    >
      <div class="dialog-code">
        <div class="syms">
          <div class="code">{{code}}</div>
          <p class="detail">溯源信息：{{remark}}</p>
        </div>
        <div class="qrcode">
          <img :src="qrcode" alt=""/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getSimpleInfo } from "@/api/traceability/traceability";
export default {
  data() {
    return {
      code: null,
      visible: false,
      qrcode:'',
      remark:''
    };
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
  },
  mounted() {},
  methods: {
    //初始化
    init(row) {
      this.code = row.code;
      this.visible = true;
      this.getTraceability(this.code);
    },
    //获取溯源信息
    getTraceability(code){
      getSimpleInfo(code).then((res)=>{
        this.qrcode = res.data.data.qrcode;
        this.remark = res.data.data.remark;
      })
    },
  },
};
</script>

<style>
.dialog-code{
    width: 400px;
    height: 100%;
    border-radius: 20px;
    border: 1px solid transparent;
    box-shadow: 0 0 5px #ddd;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.syms{
  width: 200px;
  display: flex;
  flex-direction:column;
}

.syms .code{
  font-size: 24px;
  font-weight: 700;
  height: 28px;
}

.syms .detail{
  margin-top: 0px;
}

.qrcode{
  width:100px;
}

.qrcode img{
  width:100px;
   image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
</style>

 src/views/traceability/traceability.vue

@@ -41,6 +41,14 @@
        <el-button
          :type="type"
          :size="size"
          icon="el-icon-view"
          :disabled="row.bind != 0"
          @click="handleView(row)"
          >预览
        </el-button>
        <el-button
          :type="type"
          :size="size"
          :disabled="row.bind != 1"
          icon="el-icon-paperclip"
          @click="handlebind(row)"
@@ -62,6 +70,8 @@
    <recovery v-if="bindVisible" ref="recovery"  @refreshOnLoad="onLoads"></recovery>
    <!-- 补打印 -->
    <print v-if="printVisible" ref="print"></print>
    <!-- 预览 -->
    <firstView v-if="viewVisible" ref="views"></firstView>
  </basic-container>
</template>

@@ -71,17 +81,20 @@
import addTraceability from "./addTraceability.vue";
import recovery from "./recovery.vue";
import print from "./print.vue";
import firstView from "./firstView.vue";
export default {
  components: {
    addTraceability,
    recovery,
    print
    print,
    firstView
  },
  data() {
    return {
      addTraceabilityVisible: false,
      bindVisible: false,
      printVisible: false,
      viewVisible: false,
      form: {},
      query: {},
      loading: true,
@@ -235,6 +248,15 @@
        this.$refs.print.init(row);
      });
    },
    //预览溯源码
    handleView(row){
      this.viewVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs,123456);
        console.log(this.$refs.views,789);
        this.$refs.views.init(row);
      });
    },
    //新增
    rowSave(row, done, loading) {
      row['farmType'] = 0;