修改资产标签打印样式

src/components/customer/AssetLabelPrint.vue

@@ -6,101 +6,117 @@
     />
     <div>
       <div class="form-inline" style="margin-top: 0px !important">
-        <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>
-        <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>
-        <label class="labelStyle">保管人</label>
-        <div class="form-inline-div">
-          <SearchWidget
-            :info-window-no="userWindowNo"
-            :field="userField"
-            :field-value="userFieldValue"
-            :display-name="userField.listDisplayFieldName"
-            :where-clause-source="custodianIdWhereClauseSource"
-            @value-changed="userValueChanged"
-          />
-        </div>
-        <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>
-      </div>
-      <label class="labelStyle">资产名称</label>
-      <div class="form-inline-div">
-        <a-input
-          v-model:value="searchParams.assetInstanceName"
-          style="width: 200px"
-        />
-      </div>
-      <label class="labelStyle">资产编号</label>
-      <div class="form-inline-div">
-        <a-input
-          v-model:value="searchParams.assetNo"
-          style="width: 200px"
-        />
-      </div>
-      <label class="labelStyle">规格型号</label>
-      <div class="form-inline-div">
-        <a-input
-          v-model:value="searchParams.type"
-          style="width: 224px"
-        />
-      </div>
-      <label class="labelStyle">epc</label>
-      <div class="form-inline-div">
-        <a-input
-          v-model:value="searchParams.epc"
-          style="width: 200px"
-        />
+        <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">
-        <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>
         <div style="margin-left: 18px">
           <button class="btn btn-default m-btn" @click="reQuery()">
             {{ $t("lang.AssetLabelPrint.query") }}
@@ -112,7 +128,7 @@
       </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: 96px">{{
+          <label for="assetNo" class="m-form-group-label" style="width: 100px;padding: 8px;">{{
             $t("lang.AssetLabelPrint.selectPrintTemplate")
           }}</label>
           <div class="form-inline-div">
@@ -133,7 +149,7 @@
           </div>
         </div>
         <div class="form-group m-form-group">
-          <label for="selectPrinter" class="m-form-group-label">{{
+          <label for="selectPrinter" class="m-form-group-label" style="width: 100px;padding: 8px;">{{
             $t("lang.AssetLabelPrint.selectPrinter")
           }}</label>
           <div class="form-inline-div">
@@ -159,14 +175,17 @@
           </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>
+          <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>
@@ -344,22 +363,20 @@ export default {
     };
   },
 
-  computed: {
-    
-  },
+  computed: {},
 
   watch: {},
 
   /**
-         * 冻结表头
-         */
+   * 冻结表头
+   */
   fixedTableHeader: function () {
     let _self = this;
 
     _self.$nextTick(function () {
       $('.fixed-table').tableFixer({
-        'left': 0,
-        'head': true,
+        left: 0,
+        head: true,
       });
     });
   },
@@ -432,10 +449,10 @@ export default {
       return recordIds;
     },
 
-    getPrintData: function(recordIds) {
+    getPrintData: function (recordIds) {
       const _self = this;
       let contents = [];
-    
+
       $.ajax({
         url: Common.getApiURL(
           'AssetInstanceResource/print?printPreview=' +
@@ -499,7 +516,7 @@ export default {
         return;
       }
       let contents = [];
-    
+
       $.ajax({
         url: Common.getApiURL(
           'AssetInstanceResource/print?printPreview=' +
@@ -537,13 +554,16 @@ export default {
             }
             contents.push(printItem.content);
           });
-          PrintUtil.printPrintPages(contents, selectedPrinter).then(success => {
-            // 补充提示信息
-            console.log(success);
-          }, error =>{
-            // 补充提示信息
-            console.log(error);
-          });
+          PrintUtil.printPrintPages(contents, selectedPrinter).then(
+            success => {
+              // 补充提示信息
+              console.log(success);
+            },
+            error => {
+              // 补充提示信息
+              console.log(error);
+            },
+          );
           _self.loading = false;
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
@@ -551,26 +571,24 @@ export default {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      
-      
     },
 
-    cardEpc: function() {
+    cardEpc: function () {
       const _self = this;
       let recordIds = _self.getSelectedRecordIds();
       if (recordIds == null || recordIds.length == 0) {
         Notify.error('提示', '请先选择发卡数据。', false);
         return;
       }
-      
-      if(recordIds.length > 1) {
+
+      if (recordIds.length > 1) {
         Notify.error('提示', '请先选择至多一条发卡数据。', false);
         return;
       }
 
       let contents = [];
       let contentCards = [];
-    
+
       $.ajax({
         url: Common.getApiURL(
           'AssetInstanceResource/print?printPreview=' +
@@ -617,10 +635,9 @@ export default {
           Common.processException(XMLHttpRequest, textStatus, errorThrown);
         },
       });
-      
     },
 
-    closePrintEpc: function() {
+    closePrintEpc: function () {
       const _self = this;
       _self.printEpcVisible = false;
     },
@@ -967,4 +984,18 @@ table.fixed-table td {
   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>