条码生成页面完善

src/views/components/QrCodeDemo.vue

 <template>
-  <div>
-    <qrcode-vue :value="value" :size="size" level="H"/>
-    <input v-model="barcodeValue" /><br>
-    <barcode :value="barcodeValue" :format="barcodeFormat"/>
+  <div class="app-container">
+    <div class="head-container">
+      <label class="el-form-item-label">物料编码</label>
+      <el-input
+        v-model="materialCode"
+        clearable
+        placeholder="请输入物料编码"
+        style="width: 185px;"
+        class="filter-item"
+      />
+      <label class="el-form-item-label">条码类型</label>
+      <el-select
+        v-model="nowBarCode"
+        clearable
+        placeholder="请选择条码类型"
+        style="width: 185px;"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-button @click="firstButton">二维码</el-button>
+
+      <el-button @click="SecButton">条形码</el-button>
+      <div v-if="(qrDisplay = true)">
+        <qrcode-vue :value="qrCode" :size="size" level="H" />
+      </div>
+      <div>
+        <barcode :value="qrCode" :format="barcodeFormat" />
+      </div>
+    </div>
   </div>
+  <!-- <div>
+    <qrcode-vue :value="value" :size="size" level="H" />
+    <input v-model="barcodeValue" /><br />
+    <barcode :value="barcodeValue" :format="barcodeFormat" />
+  </div> -->
 </template>
 <script>
 import QrcodeVue from 'qrcode.vue'
@@ -11,19 +46,96 @@ import VueBarcode from 'vue-barcode'
 export default {
   components: {
     QrcodeVue,
-    'barcode': VueBarcode
+    barcode: VueBarcode
   },
   data() {
     return {
-      value: 'https://www.baidu.com',
+      // value: "https://www.baidu.com",
+      nowBarCode: '',
       size: 300,
       barcodeValue: 'test',
-      barcodeFormat: ''
+      barcodeFormat: '',
+      qrDisplay: false,
+      qrCode: '',
+      materialCode: '',
+      options: [
+        {
+          value: 'CODE128',
+          label: 'CODE128'
+        },
+        {
+          value: 'EAN',
+          label: 'EAN'
+        },
+        {
+          value: 'EAN-13',
+          label: 'EAN-13'
+        },
+        {
+          value: 'EAN-8',
+          label: 'EAN-8'
+        },
+        {
+          value: 'EAN-5',
+          label: 'EAN-5'
+        },
+        {
+          value: 'EAN-2',
+          label: 'EAN-2'
+        },
+        {
+          value: 'UPC (A)',
+          label: 'UPC (A)'
+        },
+        {
+          value: 'CODE39',
+          label: 'CODE39'
+        },
+        {
+          value: 'ITF-14',
+          label: 'ITF-14'
+        },
+        {
+          value: 'MSI',
+          label: 'MSI'
+        },
+        {
+          value: 'Pharmacode',
+          label: 'Pharmacode'
+        },
+        {
+          value: 'Codabar',
+          label: 'Codabar'
+        }
+      ]
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    firstButton() {
+      this.qrDisplay = true
+      this.qrCode = this.materialCode
+      console.log(this.materialCode)
+      this.$message({
+        message: '二维码已更新',
+        type: 'success'
+      })
+    },
+    SecButton() {
+      this.qrCode = this.materialCode
+      if (this.nowBarCode === '') {
+        this.$message({
+          message: '请先选择条形码类型',
+          type: 'warning'
+        })
+        return
+      }
+      console.log('nowBarCode', this.nowBarCode)
+      this.barcodeFormat = this.nowBarCode.value
     }
   }
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>