kd-aiot-frontend/src/views/rulesManagement/barCodeManagement/details.vue

<template>
  <div class="page">
    <el-form label-width="150px">
      <div class="page-title">
        <div class="page-title-div">
          <el-page-header @back="$router.go(-1)" content="条码管理">
          </el-page-header>
        </div>
      </div>
      <!-- tab切换 -->
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li :class="{ active: num == 1 }" @click="tab(1)">详情</li>
          </ul>
        </div>
        <div class="switch_right">
          <el-button @click="openPrint" size="small">打印</el-button>
          <el-button @click="edit" size="small">编辑</el-button>
          <el-button @click="$router.go(-1)" size="small">关闭</el-button>
        </div>
      </div>
      <div class="content-detail" v-show="num == 1">
        <div class="basic-details">
          <div class="basic-details-title">
            <span class="border-span">基本信息</span>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="条码类型">
                <span>{{ data.dictBarName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <span v-if="data.status">生效</span>
                <span v-else>失效</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="条码摆放类型">
                <span>
                  {{ data.putType == 1 ? '横向摆放' : '纵向摆放' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="条码尺寸">
                <span> {{ data.sizeWide }} cm</span> *
                <span> {{ data.sizeLong }} cm</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建人">
                <span v-if="data.createUserName">
                  {{ data.createUserName }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间">
                <span> {{ data.createTime }} </span>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="basic-details-title">
            <span class="border-span">条码信息</span>
          </div>
          <el-table
            ref="singleTable"
            :data="barCodeList"
            border
            tooltip-effect="dark"
            style="width: 100%"
            class="el-table__body-wrapper"
            :header-cell-style="{ background: '#F0F3F3' }"
            :header-row-style="{ lineHeight: '0' }"
          >
            <el-table-column type="index" width="80px" label="序号">
            </el-table-column>
            <el-table-column label="字段code值" prop="modeCode">
            </el-table-column>
            <el-table-column label="字段名称" prop="modeName">
            </el-table-column>
            <el-table-column label="样例数据" prop="sampleData">
            </el-table-column>
            <el-table-column label="排序" prop="sort"> </el-table-column>
            <el-table-column label="分隔符" prop="separ"> </el-table-column>
            <el-table-column label="字体类型" prop="fontType">
              <template slot-scope="scope">
                <span>{{ codeTypeObj[scope.row.fontType] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="字体大小" prop="fontSize">
              <template slot-scope="scope">
                <span>{{ codeIndexList[scope.row.fontSize] }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="basic-details-title">
            <span class="border-span">条码样例</span>
          </div>
          <div class="vue-qr">
            <vue-qr
              :text="config.value ? config.value : ''"
              class="vueQrSize"
            ></vue-qr>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 打印 -->
    <print :openBarCode.sync="openWindows" :config="config"></print>
    <!-- 编辑 -->
    <el-dialog
      class="edit-dialog"
      title="修改"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <addComponent :viewForm="viewData" @edit="submit" />
    </el-dialog>
  </div>
</template>
<script>
  import barCode from '@/api/barCodeManagement';
  import { deepClone } from '@/utils/index';
  import selectUpload from '@/components/selectUpload';
  import print from '@/components/print';
  import addComponent from './add.vue';
  import VueQr from 'vue-qr';
  export default {
    components: { selectUpload, print, addComponent, VueQr },
    data() {
      return {
        num: 1,
        dialogVisible: false, //编辑弹窗
        data: {},
        typeValue: null,
        form: {},
        type: [],
        barCodeList: [], //条码信息列表
        openWindows: false, //打印弹窗
        config: {},
        viewData: {},
        codeIndexList: { 0.3: '小', 0.5: '中', 0.8: '大' },
        codeTypeList: [
          { id: 1, text: '宋体' },
          { id: 2, text: '微软雅黑' },
          { id: 3, text: 'Arial' }
        ],
        codeTypeObj: {
          1: '宋体',
          2: '微软雅黑',
          3: 'Arial'
        }
      };
    },
    async created() {
      this.getInfo();
    },
    methods: {
      mapSetArray(arr, prop) {
        let map = new Map();
        for (let item of arr) {
          if (!map.has(item[prop])) {
            map.set(item[prop], item);
          }
        }
        return [...map.values()];
      },
      tab(index) {
        this.num = index;
      },
      // 表格数据
      async getInfo() {
        let res = await barCode.infoApi(this.$route.query.id);
        // if (res) {
        // console.log(res.data)
        // if (res.success) {
        this.data = res.data;
        // 排序code1 - code14
        let arr = res.data.useModeList.sort((a, b) => {
          return a.barAvg.substr(4) - b.barAvg.substr(4);
        });
        console.log(arr);
        let newArr = [];
        arr.forEach((item) => {
          if (item.modeCode) {
            newArr.push(item);
          }
        });
        this.barCodeList = this.mapSetArray(newArr, 'modeCode');
        // 将表格数据按 modeCode 去重

        const fontTypeObj = { 1: '宋体', 2: '微软雅黑', 3: 'Arial' };
        const useModeList = res.data.useModeList;
        // 回显条码模板14个下拉数据
        this.config = {
          putType: res.data.putType,
          sizeWide: res.data.sizeWide,
          sizeLong: res.data.sizeLong,
          value: res.data.qrCode,
          code1: useModeList[0].sampleData,
          code2: useModeList[1].sampleData,
          code3: useModeList[2].sampleData,
          code4: useModeList[3].sampleData,
          code5: useModeList[4].sampleData,
          code6: useModeList[5].sampleData,
          code7: useModeList[6].sampleData,
          code8: useModeList[7].sampleData,
          code9: useModeList[8].sampleData,
          code10: useModeList[9].sampleData,
          code11: useModeList[10].sampleData,
          code12: useModeList[11].sampleData,
          code13: useModeList[12].sampleData,
          code14: useModeList[13].sampleData,
          fontSizeCode1: useModeList[0].fontSize,
          fontSizeCode2: useModeList[1].fontSize,
          fontSizeCode3: useModeList[2].fontSize,
          fontSizeCode4: useModeList[3].fontSize,
          fontSizeCode5: useModeList[4].fontSize,
          fontSizeCode6: useModeList[5].fontSize,
          fontSizeCode7: useModeList[6].fontSize,
          fontSizeCode8: useModeList[7].fontSize,
          fontSizeCode9: useModeList[8].fontSize,
          fontSizeCode10: useModeList[9].fontSize,
          fontSizeCode11: useModeList[10].fontSize,
          fontSizeCode12: useModeList[11].fontSize,
          fontSizeCode13: useModeList[12].fontSize,
          fontSizeCode14: useModeList[13].fontSize,
          typefaceCode1: fontTypeObj[useModeList[0].fontType],
          typefaceCode2: fontTypeObj[useModeList[1].fontType],
          typefaceCode3: fontTypeObj[useModeList[2].fontType],
          typefaceCode4: fontTypeObj[useModeList[3].fontType],
          typefaceCode5: fontTypeObj[useModeList[4].fontType],
          typefaceCode6: fontTypeObj[useModeList[5].fontType],
          typefaceCode7: fontTypeObj[useModeList[6].fontType],
          typefaceCode8: fontTypeObj[useModeList[7].fontType],
          typefaceCode9: fontTypeObj[useModeList[8].fontType],
          typefaceCode10: fontTypeObj[useModeList[9].fontType],
          typefaceCode11: fontTypeObj[useModeList[10].fontType],
          typefaceCode12: fontTypeObj[useModeList[11].fontType],
          typefaceCode13: fontTypeObj[useModeList[12].fontType],
          typefaceCode14: fontTypeObj[useModeList[13].fontType]
        };
        // console.log(this.barCodeList)
        // this.config = {
        //   imagePath: '',
        //   put_type: res.data.put_type,
        //   width:
        //     res.data.put_type == 0
        //       ? res.data.size_wide * 25
        //       : res.data.size_wide * 8,
        //   height:
        //     res.data.put_type == 0
        //       ? res.data.size_long * 25
        //       : res.data.size_long * 8,
        //   value: res.data.qrCode,
        //   code1: res.data.stripcodeset.code1,
        //   code2: res.data.stripcodeset.code2,
        //   code3: res.data.stripcodeset.code3,
        //   code4: res.data.stripcodeset.code4,
        //   code5: res.data.stripcodeset.code5,
        //   code6: res.data.stripcodeset.code6,
        //   code7: res.data.stripcodeset.code7,
        //   code8: res.data.stripcodeset.code8,
        //   code9: res.data.stripcodeset.code9,
        //   code10: res.data.stripcodeset.code10,
        //   code11: res.data.stripcodeset.code11,
        //   code12: res.data.stripcodeset.code12,
        //   code13: res.data.stripcodeset.code13,
        //   code14: res.data.stripcodeset.code14,
        //   fontSizeCode1: res.data.stripcodeset.fontSizeCode1,
        //   fontSizeCode2: res.data.stripcodeset.fontSizeCode2,
        //   fontSizeCode3: res.data.stripcodeset.fontSizeCode3,
        //   fontSizeCode4: res.data.stripcodeset.fontSizeCode4,
        //   fontSizeCode5: res.data.stripcodeset.fontSizeCode5,
        //   fontSizeCode6: res.data.stripcodeset.fontSizeCode6,
        //   fontSizeCode7: res.data.stripcodeset.fontSizeCode7,
        //   fontSizeCode8: res.data.stripcodeset.fontSizeCode8,
        //   fontSizeCode9: res.data.stripcodeset.fontSizeCode9,
        //   fontSizeCode10: res.data.stripcodeset.fontSizeCode10,
        //   fontSizeCode11: res.data.stripcodeset.fontSizeCode11,
        //   fontSizeCode12: res.data.stripcodeset.fontSizeCode12,
        //   fontSizeCode13: res.data.stripcodeset.fontSizeCode13,
        //   fontSizeCode14: res.data.stripcodeset.fontSizeCode14,
        //   typefaceCode1: res.data.stripcodeset.typefaceCode1,
        //   typefaceCode2: res.data.stripcodeset.typefaceCode2,
        //   typefaceCode3: res.data.stripcodeset.typefaceCode3,
        //   typefaceCode4: res.data.stripcodeset.typefaceCode4,
        //   typefaceCode5: res.data.stripcodeset.typefaceCode5,
        //   typefaceCode6: res.data.stripcodeset.typefaceCode6,
        //   typefaceCode7: res.data.stripcodeset.typefaceCode7,
        //   typefaceCode8: res.data.stripcodeset.typefaceCode8,
        //   typefaceCode9: res.data.stripcodeset.typefaceCode9,
        //   typefaceCode10: res.data.stripcodeset.typefaceCode10,
        //   typefaceCode11: res.data.stripcodeset.typefaceCode11,
        //   typefaceCode12: res.data.stripcodeset.typefaceCode12,
        //   typefaceCode13: res.data.stripcodeset.typefaceCode13,
        //   typefaceCode14: res.data.stripcodeset.typefaceCode14
        // };
        // }
        // }
      },
      //打印弹窗
      openPrint() {
        this.openWindows = true;
        console.log(this.config);
      },
      //编辑弹窗
      edit() {
        this.viewData = deepClone(this.data);
        this.dialogVisible = true;
      },
      // 修改提交
      async submit(info) {
        info.id = this.$route.query.id;
        let res = await barCode.saveBarcode(info);
        if (res.code == 0) {
          this.$message.success('修改成功！');
          this.getInfo();
          this.dialogVisible = false;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    padding: 10px;
  }
  .vue-qr {
    width: 200px;
    height: 200px;
    .vueQrSize {
      width: 100%;
      height: 100%;
    }
  }
  .page-title {
    background: #fff;
    font-size: 18px;
    padding: 6px 20px;
    font-weight: 500;
    .page-title-div {
      margin: 5px 0;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #eaeefb;
      .title-div-no {
        margin-left: 10px;
        font-weight: 400;
        color: #909090;
        font-size: 14px;
      }
    }
  }
  .page-data {
    padding-top: 10px;
  }
  .content-detail {
    background: #fff;
    padding: 20px;
  }
  .flows {
    .flow-left {
      width: 156px;
      height: 70px;
      border: 1px dashed #ccc;
      padding: 10px;
    }
    .row {
      margin-top: 13px;
    }
  }
  .basic-details-title {
    margin-bottom: 12px;
    margin-top: 20px;
    border-bottom: 1px solid #157a2c;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .basic-details-title .border-span {
    height: 18px;
    font-size: 16px;
    border-left: 4px solid #157a2c;
    padding-left: 8px;

    font-weight: 500;
  }
  .heade-right {
    // float: right;
    .heade-right-content {
      margin-right: 12px;
      font-size: 14px;
      display: inline-block;
      .content-key {
        color: #3e3e3e;
        margin-right: 12px;
        font-weight: 500;
      }
      .content-value {
        color: #000;
      }
    }
  }
  .list-title {
    font-size: 14px;
    color: #3e3e3e;
    margin: 10px 0px;
  }
  .goods {
    background: #a30014;
    border: 1px solid #a30014;
  }
  .details-title {
    display: inline-block;
    color: #6e6e6e;
    font-size: 14px;
    font-weight: bold;
    margin-right: 13px;
    width: 70px;
    text-align: right;
  }
  .details-con {
    color: #3e3e3e;
    font-size: 14px;
  }
  .detailed-tab {
    margin-left: 10px;
    margin-top: 10px;
  }
  ::v-deep .el-form-item--medium .el-form-item__label {
    color: #6e6e6e;
    font-size: 14px;
    font-weight: bold;
  }
  .warehouse {
    display: block;
    border-bottom: 1px solid #eaeefb;
    padding: 10px 0;
  }
  .box-card {
    .store-box {
      width: 80%;
      .store-box-span {
        display: inline-block;
        font-size: 14px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin: 2px;
      }
    }
  }
  .vacant {
    background: #3196fb;
  }
  .inUse {
    background: #157a2c;
  }
  .invalid {
    background: #cccccc;
  }
  .full {
    background: #cc3300;
  }
</style>