client-eam-v5/src/components/customer/AssetLabelPrint.vue

<template>
  <div>
    <Navbar
      :title="$t('lang.AssetLabelPrint.assetLabelPrint')"
      :is-go-back="false"
    />
    <div>
      <div class="form-inline" style="margin-top: 0px !important">
        <ul class="ulStyle">
          <li class="listStyle">
            <label class="labelStyle">所属部门</label>
            <div class="form-inline-div">
              <SearchWidget
                style="width: 200px"
                :info-window-no="organizationWindowNo"
                :field="organizationField"
                :field-value="organizationFieldValue"
                :display-name="organizationField.listDisplayFieldName"
                :where-clause-source="organizationWCS"
                @value-changed="organizationValueChanged"
              />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">责任人</label>
            <div class="form-inline-div">
              <SearchWidget
                style="width: 200px"
                :info-window-no="userWindowNo"
                :field="custodianNameField"
                :field-value="custodianNameFieldValue"
                :display-name="custodianNameField.listDisplayFieldName"
                :where-clause-source="custodianIdWhereClauseSource"
                @value-changed="custodianNameValueChanged"
              />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">保管人</label>
            <div class="form-inline-div">
              <SearchWidget
                style="width: 200px"
                :info-window-no="userWindowNo"
                :field="userField"
                :field-value="userFieldValue"
                :display-name="userField.listDisplayFieldName"
                :where-clause-source="custodianIdWhereClauseSource"
                @value-changed="userValueChanged"
              />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">申购人</label>
            <div class="form-inline-div">
              <SearchWidget
                style="width: 200px"
                :info-window-no="userWindowNo"
                :field="applyPurchaseUserField"
                :field-value="applyPurchaseUserFieldValue"
                :display-name="applyPurchaseUserField.listDisplayFieldName"
                :where-clause-source="custodianIdWhereClauseSource"
                @value-changed="applyPurchaseUserValueChanged"
              />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">资产名称</label>
            <div class="form-inline-div">
              <a-input
                v-model:value="searchParams.assetInstanceName"
                style="width: 200px"
              />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">资产编号</label>
            <div class="form-inline-div">
              <a-input
                v-model:value="searchParams.assetNo"
                style="width: 200px"
              />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">规格型号</label>
            <div class="form-inline-div">
              <a-input v-model:value="searchParams.type" style="width: 200px" />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">epc</label>
            <div class="form-inline-div">
              <a-input v-model:value="searchParams.epc" style="width: 200px" />
            </div>
          </li>
          <li class="listStyle">
            <label class="labelStyle">{{
              $t("lang.AssetLabelPrint.printStatus")
            }}</label>
            <div class="form-inline-div">
              <select
                v-model="searchParams.printStatus"
                class="form-control m-form-input"
                style="width: 15em"
              >
                <option value="">{{ $t("lang.AssetLabelPrint.all") }}</option>
                <option value="false">
                  {{ $t("lang.AssetLabelPrint.notPrint") }}
                </option>
                <option value="true">
                  {{ $t("lang.AssetLabelPrint.havePrint") }}
                </option>
              </select>
            </div>
          </li>
        </ul>
      </div>

      <div style="display: flex">
        <div style="margin-left: 18px">
          <button class="btn btn-default m-btn" @click="reQuery()">
            {{ $t("lang.AssetLabelPrint.query") }}
          </button>
          <button class="btn btn-default m-btn" @click="clearFilter()">
            {{ $t("lang.AssetLabelPrint.clear") }}
          </button>
        </div>
      </div>
      <div class="form-inline" style="margin-top: 0px !important">
        <div class="form-group m-form-group">
          <label for="assetNo" class="m-form-group-label" style="width: 100px;padding: 8px;">{{
            $t("lang.AssetLabelPrint.selectPrintTemplate")
          }}</label>
          <div class="form-inline-div">
            <select
              v-model="templateId"
              class="form-control m-form-input"
              style="width: 15em"
            >
              <option value="" />
              <option
                v-for="item in templates"
                :key="'templates' + item.name"
                :value="item.id"
              >
                {{ item.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group m-form-group">
          <label for="selectPrinter" class="m-form-group-label" style="width: 100px;padding: 8px;">{{
            $t("lang.AssetLabelPrint.selectPrinter")
          }}</label>
          <div class="form-inline-div">
            <select
              v-model="selectedPrinter"
              class="form-control m-form-input"
              style="width: 15em"
            >
              <option value="" />
              <option
                v-for="printer in printers"
                :key="printer.name"
                :value="printer.name"
              >
                {{ printer.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="form-group m-form-group">
          <button class="btn btn-default m-btn" @click="print()">
            {{ $t("lang.AssetLabelPrint.print") }}
          </button>
        </div>
        <div class="form-group m-form-group">
          <PrintEpc
            ref="printEpc"
            v-model:visible="printEpcVisible"
            :printer-name="selectedPrinterCard"
            @ok="closePrintEpc"
          />
          <button class="btn btn-default m-btn" @click="cardEpc()">发卡</button>
        </div>
      </div>
    </div>

    <div class="grid-item-3">
      <table class="fixed-table table table-striped table-bordered">
        <thead>
          <tr>
            <td style="width: 50px">
              {{ $t("lang.AssetLabelPrint.serialNumber") }}
            </td>
            <th style="width: 30px">
              <input v-model="checked" type="checkbox" @change="selectAll()" />
            </th>
            <td style="width: 100px">部门</td>
            <td style="width: 100px">责任人</td>
            <td style="width: 100px">保管人</td>
            <td style="width: 100px">申购人</td>
            <td style="width: 150px">资产名称</td>
            <td style="width: 150px">资产编号</td>
            <td style="width: 150px">规格型号</td>
            <td style="width: 150px">使用状态</td>
            <td style="width: 220px">epc</td>
            <td style="width: 100px">打印状态</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in assetInstanceDtoList" :key="item.id">
            <td>
              {{
                index + 1 + (pagination.current_page - 1) * pagination.per_page
              }}
            </td>
            <td>
              <input
                v-model="item.checked"
                type="checkbox"
                @change="templateChange(item.id)"
              />
            </td>
            <td>{{ item.organizationName }}</td>
            <td>{{ item.custodianName }}</td>
            <td>{{ item.depositoryUserName }}</td>
            <td>{{ item.applyPurchaseUserName }}</td>
            <td>{{ item.assetInstanceName }}</td>
            <td>{{ item.assetNo }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.useStatusName }}</td>
            <td>{{ item.epc }}</td>
            <td>{{ item.printStatus == true ? "已打印" : "未打印" }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="grid-item-4">
      <div class="m-row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="table-header-left">
            <span>{{ $t("lang.AssetInstancePrint.the")
            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
              pagination.current_page * pagination.per_page
            }}{{ $t("lang.AssetInstancePrint.strip") }},{{
              $t("lang.AssetInstancePrint.total")
            }}{{ pagination.total
            }}{{ $t("lang.AssetInstancePrint.strip") }},{{
              $t("lang.AssetInstancePrint.displayOnEachPage")
            }}</span>
            <PageSizeSelect @page-size-changed="gridSizeSelect" />
            <span>{{ $t("lang.AssetInstancePrint.strip") }}</span>
          </div>
          <div class="table-header-right">
            <VueBootstrapPagination
              :pagination="pagination"
              :callback="getAssetInstancePrint"
            />
          </div>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import { Common, PrintUtil, Notify, PrintEpc } from 'pc-component-v3';

export default {
  components: {
    PrintEpc,
  },
  data: function () {
    return {
      assetInstanceDtoList: [],
      checked: false, //全选,
      pagination: {
        total: 0, //总页数
        per_page: 20, // 每页大小
        current_page: 1, // 当前页数
        last_page: 0, // 最后一页编号
      },
      // 请求查询参数
      searchParams: {
        epc: null, // epc
        assetNo: null, // 资产编号
        assetInstanceName: null, // 资产名称
        printStatus: null, // 打印状态
        type: null, // 使用状态
        organizationId: null, // 部门id
        custodianId: null, //责任人id
        depositoryUserId: null, //保管人id
        applyPurchaseUserId: null, //申购人id
      },
      userWindowNo: '050408',
      organizationWindowNo: '20220420_233656',
      organizationField: {
        name: '',
        listDisplayFieldName: 'name',
      },
      organizationFieldValue: {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      },
      custodianNameField: {
        name: '',
        listDisplayFieldName: 'name',
      },
      custodianNameFieldValue: {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      },
      userField: {
        name: '',
        listDisplayFieldName: 'name',
      },
      userFieldValue: {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      },
      applyPurchaseUserField: {
        name: '',
        listDisplayFieldName: 'name',
      },
      applyPurchaseUserFieldValue: {
        id: null,
        displayValue: [''],
        fieldType: 'Key',
      },
      organizationWCS: {
        customerDataDimensions: [
          {
            fieldName: 'client.id',
            dataDimensionTypeNo: '202201191757',
            defaultDataDimensionTypeValueNo: '4',
          },
        ],
      },
      custodianIdWhereClauseSource: {
        customerDataDimensions: [
          {
            fieldName: 'client.id',
            dataDimensionTypeNo: '202201191757',
            defaultDataDimensionTypeValueNo: '4',
          },
        ],
      },
      templates: [], //打印模板
      printers: [], //打印机
      selectedPrinter: '', // 选择的打印机
      templateId: '',
      printPages: [],
      printPreviews: [],
      loading: false,
      modal: false,
      selectedPrinterCard: '发卡机',
      printEpcVisible: false,
    };
  },

  computed: {},

  watch: {},

  /**
   * 冻结表头
   */
  fixedTableHeader: function () {
    let _self = this;

    _self.$nextTick(function () {
      $('.fixed-table').tableFixer({
        left: 0,
        head: true,
      });
    });
  },

  mounted: function () {
    const _self = this;
    // $('.fixed-table').tableFixer({
    //   'left': 0,
    //   'head': true,
    // });

    // $('.fixed-table').colResizable({
    //   resizeMode: 'overflow',
    //   partialRefresh: true,
    // });
    _self.pagination.current_page = 1;
    _self.getAssetInstancePrint();
    _self.loadTemplateData();

    PrintUtil.getPrinters().then(
      successData => {
        if (successData != null && successData.length > 0) {
          successData.forEach(item => {
            _self.printers.push(item);
          });
        }
      },
      errorData => {
        console.log(errorData);
      },
    );
  },

  beforeUnmount: function () {},

  methods: {
    // 所属部门搜索框条件改变
    organizationValueChanged: function (newFieldValue) {
      this.organizationFieldValue = newFieldValue;
      this.searchParams.organizationId = newFieldValue.id;
    },
    // 责任人
    custodianNameValueChanged: function (newFieldValue) {
      this.custodianNameFieldValue = newFieldValue;
      this.searchParams.custodianId = newFieldValue.id;
    },
    // 保管人
    userValueChanged: function (newFieldValue) {
      this.userFieldValue = newFieldValue;
      this.searchParams.depositoryUserId = newFieldValue.id;
    },
    // 申购人
    applyPurchaseUserValueChanged: function (newFieldValue) {
      this.applyPurchaseUserFieldValue = newFieldValue;
      this.searchParams.applyPurchaseUserId = newFieldValue.id;
    },
    /**
     * 获取选择数据的id集合
     */
    getSelectedRecordIds: function () {
      const _self = this;
      let recordIds = [];

      for (let i = 0; i < _self.assetInstanceDtoList.length; i++) {
        if (_self.assetInstanceDtoList[i].checked == true) {
          recordIds.push(_self.assetInstanceDtoList[i].assetInstanceId);
        }
      }

      return recordIds;
    },

    getPrintData: function (recordIds) {
      const _self = this;
      let contents = [];

      $.ajax({
        url: Common.getApiURL(
          'AssetInstanceResource/print?printPreview=' +
            false +
            '&templateId=' +
            _self.templateId,
        ),
        dataType: 'json',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(recordIds),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
          _self.loading = true;
        },
        success: function (datas) {
          datas.forEach(function (item) {
            var printItem = {
              id: null,
              name: null,
              content: item,
            };
            if (
              printItem.content == null ||
              printItem.content.printItems == null ||
              printItem.content.printItems.length == 0
            ) {
              Notify.error('错误', '打印模板无数据，不能打印。');
              return;
            }
            var content = JSON.stringify(printItem.content);
            if (content == null || content == '' || content == '{}') {
              Notify.error('错误', '请先选择模板，再点击下载。');
              return;
            }
            contents.push(printItem.content);
          });
          _self.loading = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 打印文件
     */
    print: function () {
      const _self = this;
      let selectedPrinter = _self.selectedPrinter;
      if (selectedPrinter == null || selectedPrinter.length == 0) {
        Notify.error('提示', '请先选择打印机。', false);
        return;
      }

      let recordIds = _self.getSelectedRecordIds();
      if (recordIds == null || recordIds.length == 0) {
        Notify.error('提示', '请先选择打印数据。', false);
        return;
      }
      let contents = [];

      $.ajax({
        url: Common.getApiURL(
          'AssetInstanceResource/print?printPreview=' +
            false +
            '&templateId=' +
            _self.templateId,
        ),
        dataType: 'json',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(recordIds),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
          _self.loading = true;
        },
        success: function (datas) {
          datas.forEach(function (item) {
            var printItem = {
              id: null,
              name: null,
              content: item,
            };
            if (
              printItem.content == null ||
              printItem.content.printItems == null ||
              printItem.content.printItems.length == 0
            ) {
              Notify.error('错误', '打印模板无数据，不能打印。');
              return;
            }
            var content = JSON.stringify(printItem.content);
            if (content == null || content == '' || content == '{}') {
              Notify.error('错误', '请先选择模板，再点击下载。');
              return;
            }
            contents.push(printItem.content);
          });
          PrintUtil.printPrintPages(contents, selectedPrinter).then(
            success => {
              // 补充提示信息
              console.log(success);
            },
            error => {
              // 补充提示信息
              console.log(error);
            },
          );
          _self.loading = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    cardEpc: function () {
      const _self = this;
      let recordIds = _self.getSelectedRecordIds();
      if (recordIds == null || recordIds.length == 0) {
        Notify.error('提示', '请先选择发卡数据。', false);
        return;
      }

      if (recordIds.length > 1) {
        Notify.error('提示', '请先选择至多一条发卡数据。', false);
        return;
      }

      let contents = [];
      let contentCards = [];

      $.ajax({
        url: Common.getApiURL(
          'AssetInstanceResource/print?printPreview=' +
            false +
            '&templateId=' +
            _self.templateId,
        ),
        dataType: 'json',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(recordIds),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
          _self.loading = true;
        },
        success: function (datas) {
          datas.forEach(function (item) {
            var printItem = {
              id: null,
              name: null,
              content: item,
            };
            if (
              printItem.content == null ||
              printItem.content.printItems == null ||
              printItem.content.printItems.length == 0
            ) {
              Notify.error('错误', '打印模板无数据，不能打印。');
              return;
            }
            var content = JSON.stringify(printItem.content);
            if (content == null || content == '' || content == '{}') {
              Notify.error('错误', '请先选择模板，再点击下载。');
              return;
            }
            contents.push(printItem.content);
          });
          _self.printEpcVisible = true;
          _self.$refs.printEpc.printPrintPages(contents);
          _self.loading = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    closePrintEpc: function () {
      const _self = this;
      _self.printEpcVisible = false;
    },

    /**
     * 打印模板change
     */
    templateChange: function (assetInstanceId) {
      const _self = this;

      let templateId = _self.templateId;
      if (templateId == '' || templateId == null) {
        _self.templateId = '';
        Notify.error('错误', '未请先选择打印模板', false);
        return;
      }
      // let selectedPrinter = _self.selectedPrinter;
      // if (selectedPrinter == null || selectedPrinter.length == 0) {
      //     Notify.error("提示", "请先选择打印机。", false);
      //     return;
      // }
      this.setTemplate(assetInstanceId, _self.templateId);
    },

    /**
     * 设置模板
     */
    setTemplate: function (assetInstanceId, templateId) {
      var _self = this;
      _self.loading = true;
      $.ajax({
        url: Common.getApiURL('AssetInstanceResource/setPrintTemplate'),
        type: 'get',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: {
          assetInstanceId: assetInstanceId,
          templateId: templateId,
        },
        success: function (data) {
          _self.loading = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 加载打印模板数据
     */
    loadTemplateData: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('printPageResource/loadCustomerTemplate'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (baseListResponse) {
          if (baseListResponse.errorCode == 0) {
            if (
              baseListResponse.datas != undefined &&
              baseListResponse.datas.length > 0
            ) {
              baseListResponse.datas.forEach(function (item) {
                item.label = item.name;
                item.value = item.id;
              });
            }
            _self.templates = baseListResponse.datas;
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 20200615
     * 点击全选
     */
    selectAll: function () {
      var _self = this;
      for (var i = 0; i < _self.assetInstanceDtoList.length; i++) {
        _self.assetInstanceDtoList[i].checked = _self.checked;
      }
    },

    /**
     * 重新查询
     */
    reQuery: function () {
      let _self = this;
      _self.pagination.current_page = 1;
      _self.getAssetInstancePrint();
    },

    /**
     * 查询资产卡片打印的数据
     */
    getAssetInstancePrint: function () {
      var _self = this;
      _self.loading = true;

      _self.checked = false;
      const range = {
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
      };
      const searchParams = _self.searchParams;
      const params = { ...searchParams, ...{ range } };
      $.ajax({
        url: Common.getApiURL(
          'AssetInstancePrintResource/findByAssetInstancePrintRequest',
        ),
        type: 'post',
        contentType: 'application/json',

        dataType: 'json',
        data: JSON.stringify(params),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (successData) {
          if (successData.errorCode == 0) {
            _self.assetInstanceDtoList = successData.datas;
            _self.assetInstanceDtoList.forEach(function (item) {
              item.checked = false;
            });
            _self.pagination.total = successData.total;
            _self.pagination.last_page = Math.ceil(
              successData.total / successData.length,
            );
          }
          _self.loading = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
          _self.loading = false;
        },
      });
    },

    /**
     * 清空条件
     */
    clearFilter: function () {
      const _self = this;
      (_self.searchParams = {
        epc: null,
        assetNo: null,
        assetInstanceName: null,
        printStatus: null,
        type: null,
        organizationId: null,
        custodianId: null,
        depositoryUserId: null,
        applyPurchaseUserId: null,
      }),
      (_self.organizationFieldValue = {});
      _self.custodianNameFieldValue = {};
      _self.userFieldValue = {};
      _self.applyPurchaseUserFieldValue = {};
      _self.reQuery();
    },

    /**
     * 修改页Size
     */
    gridSizeSelect: function (newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
      this.getAssetInstancePrint();
    },
  },
};
</script>



<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 100%;
  /*将视图分为四个模块，每个模块的高度*/
  grid-template-rows: 53px min-content auto 40px;
  /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrgnizationSelect 的高度*/
  height: calc(100vh - 90px);
  width: 100%;
  overflow: hidden;
}

.grid-item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.grid-item-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid-item-3 {
  padding-top: 0px;
  padding-right: 10px;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 3/4;
  height: 100%;
}

.grid-item-4 {
  padding-top: 10px;
  grid-column: 1 / 2;
  grid-row: 4/5;
}
</style>


<style scoped>
.fixed-table {
  table-layout: fixed;
  width: 800px !important;
  min-width: 800px !important;
  border-top: 1px solid #ddd;
}

table.fixed-table tr {
  height: 40px;
  font-size: small;
}

table.fixed-table th,
table.fixed-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
}
</style>

<style scoped>
.m-form-group {
  margin-left: 5px !important;
  margin-right: 5px !important;
  margin-bottom: 5px !important;
}

@media (max-width: 768px) {
  .m-form-group-label {
    text-align: left;
    padding-right: 10px;
  }
}

@media (min-width: 768px) {
  .m-form-group-label {
    width: 100px;
    text-align: center;
    padding-right: 10px;
  }

  .input-switches {
    width: 100%;
  }
}

.form-control-complex {
  width: 200px !important;
}

.form-input {
  border-radius: 4px !important;
}

.m-form-input {
  border-radius: 4px !important;
  width: 200px !important;
}

.form-inline-div {
  display: inline-block;
  height: 34px;
}

.m-btn {
  margin-left: 5px !important;
  margin-right: 5px !important;
  margin-bottom: 5px !important;
}

.table-header-left {
  float: left;
  /* margin: 20px 0;*/
}

.table-header-right {
  float: right;
}
</style>

<style scoped>
.room_img {
  width: 150px;
  height: 100px;
  float: left;
  margin-right: 10px;
}

.room_img img {
  width: 100%;
  height: 100%;
}

.room_img span {
  position: relative;
  right: -130px;
  top: -100px;
  font-size: 20px;
  color: red;
}

.modal-img-box {
  width: 100%;
  height: 400px;
  text-align: center;
  overflow: auto;
}

.m-small-img {
  cursor: pointer;
}

.m-img {
  width: 100%;
}
.labelStyle {
  width: 100px;
  text-align: center;
  padding: 8px;
}

.ulStyle {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.listStyle {
  width: 32%;
  margin-top: 8px;
  list-style: none;
}
</style>