标签打印机管理页面

src/views/print/printerconfig/index.vue

@@ -38,6 +38,15 @@
     </el-row>
     <el-table v-loading="loading" :data="printerconfigList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="打印机编号" align="center" prop="printerCode" >
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            @click="handleView(scope.row)"
+            v-hasPermi="['print:printerconfig:query']"
+          >{{scope.row.printerCode}}</el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="打印机类型" align="center" prop="printerType">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.mes_printer_type" :value="scope.row.printerType"/>
@@ -53,7 +62,6 @@
       </el-table-column>
       <el-table-column label="打印机IP" align="center" prop="printerIp" />
       <el-table-column label="打印机端口" align="center" prop="printerPort" />
-      <el-table-column label="客户端SID" align="center" prop="clientSid" />
       <el-table-column label="客户端IP" align="center" prop="clientIp" />
       <el-table-column label="客户端端口" align="center" prop="clientPort" />
       <el-table-column label="启用状态" align="center" prop="enableFlag">
@@ -66,7 +74,7 @@
           <dict-tag :options="dict.type.mes_printer_status" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="200px" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -82,6 +90,20 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['print:printerconfig:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-star-off"
+            @click="handleDefault(scope.row)"
+            v-hasPermi="['print:printerconfig:list']"
+          >设置为默认</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-video-play"
+            @click="handleTest(scope.row)"
+            v-hasPermi="['print:printerconfig:list']"
+          >设置为默认</el-button>          
         </template>
       </el-table-column>
     </el-table>
@@ -98,36 +120,110 @@
     <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
-          <el-col span="8">
+          <el-col :span="16">
-            <el-form-item label="打印机类型" prop="printerType">
+            <el-row>
-              <el-select v-model="form.printerType" placeholder="请选择打印机类型">
+              <el-col :span="16">
-                <el-option
+                <el-form-item label="打印机编号" prop="printerCode">
-                  v-for="dict in dict.type.mes_printer_type"
+                  <el-input v-model="form.printerCode" placeholder="请输入打印机编号" />
-                  :key="dict.value"
+                </el-form-item>
-                  :label="dict.label"
+              </el-col>
-                  :value="dict.value"
+              <el-col :span="8">
-                ></el-option>
+                <el-form-item  label-width="80">
-              </el-select>
+                  <el-switch v-model="autoGenFlag"
-            </el-form-item>
+                      active-color="#13ce66"
+                      active-text="自动生成"
+                      @change="handleAutoGenChange(autoGenFlag)" v-if="optType != 'view'">               
+                  </el-switch>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="打印机名称" prop="printerName">
+                  <el-input v-model="form.printerName" placeholder="请输入打印机名称" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="打印机类型" prop="printerType">
+                  <el-select v-model="form.printerType" placeholder="请选择打印机类型">
+                    <el-option
+                      v-for="dict in dict.type.mes_printer_type"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="启用状态" prop="enableFlag">
+                  <el-radio-group v-model="form.enableFlag">
+                    <el-radio
+                      v-for="dict in dict.type.sys_yes_no"
+                      :key="dict.value"
+                      :label="dict.value"
+                    >{{dict.label}}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="品牌" prop="brand">
+                  <el-input v-model="form.brand" placeholder="请输入品牌" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="型号" prop="printerModel">
+                  <el-input v-model="form.printerModel" placeholder="请输入型号" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="打印机IP" prop="printerIp">
+                  <el-input v-model="form.printerIp" placeholder="请输入打印机IP" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="打印机端口" prop="printerPort">
+                  <el-input v-model="form.printerPort" placeholder="请输入打印机端口" />
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-col>
-          <el-col span="16">
+          <el-col :span="8">
-            <el-form-item label="打印机名称" prop="printerName">
+            <el-form-item label="图片URL" prop="printerUrl">
-              <el-input v-model="form.printerName" placeholder="请输入打印机名称" />
+              <ImageUpload :limit="1" :value="form.printerUrl" :fileSize="5" @onUploaded="handleImgUplaoded" @onRemoved="handleImgRemoved" ></ImageUpload>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-          <el-col span="8">
+          <el-col :span="8">
-            <el-form-item label="品牌" prop="brand">
+            <el-form-item label="客户端IP" prop="clientIp">
-              <el-input v-model="form.brand" placeholder="请输入品牌" />
+              <el-input v-model="form.clientIp" placeholder="请输入打印客户端IP" />
             </el-form-item>
           </el-col>
-          <el-col span="8">
+          <el-col :span="8">
-            <el-form-item label="型号" prop="printerModel">
+            <el-form-item label="客户端端口" prop="clientPort">
-              <el-input v-model="form.printerModel" placeholder="请输入型号" />
+              <el-input v-model="form.clientPort" placeholder="请输入打印客户端端口" />
             </el-form-item>
           </el-col>
-          <el-col span="8">
+          <el-col :span="8">
+            <el-form-item label="客户端">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-download"
+                @click="handleDownloadClient()"
+              >客户端下载</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
             <el-form-item label="连接类型">
               <el-radio-group v-model="form.connectionType">
                 <el-radio
@@ -138,48 +234,7 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-        </el-row>
+          <el-col :span="12">
-        <el-row>
-          <el-col span="8">
-            <el-form-item label="打印机IP" prop="printerIp">
-              <el-input v-model="form.printerIp" placeholder="请输入打印机IP" />
-            </el-form-item>
-          </el-col>
-          <el-col span="8">
-            <el-form-item label="打印机端口" prop="printerPort">
-              <el-input v-model="form.printerPort" placeholder="请输入打印机端口" />
-            </el-form-item>
-          </el-col>
-          <el-col span="8">
-            <el-form-item label="启用状态" prop="enableFlag">
-              <el-input v-model="form.enableFlag" placeholder="请输入启用状态" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col span="8">
-            <el-form-item label="客户端SID" prop="clientSid">
-              <el-input v-model="form.clientSid" placeholder="请输入打印客户端SID" />
-            </el-form-item>
-          </el-col>
-          <el-col span="8">
-            <el-form-item label="客户端IP" prop="clientIp">
-              <el-input v-model="form.clientIp" placeholder="请输入打印客户端IP" />
-            </el-form-item>
-          </el-col>
-          <el-col span="8">
-            <el-form-item label="客户端端口" prop="clientPort">
-              <el-input v-model="form.clientPort" placeholder="请输入打印客户端端口" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col span="12">
-            <el-form-item label="图片URL" prop="printerUrl">
-              <el-input v-model="form.printerUrl" placeholder="请输入图片URL" />
-            </el-form-item>
-          </el-col>
-          <el-col span="12">
             <el-form-item label="打印机状态">
               <el-radio-group v-model="form.status">
                 <el-radio
@@ -192,7 +247,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <el-col span="24">
+          <el-col :span="24">
             <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
@@ -200,8 +255,9 @@
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm" v-else>确 定</el-button>
+        <el-button @click="cancel">关 闭</el-button>
       </div>
     </el-dialog>
   </div>
@@ -212,9 +268,12 @@ import { listPrinterconfig, getPrinterconfig, delPrinterconfig, addPrinterconfig
 
 export default {
   name: "Printerconfig",
-  dicts: ['mes_printer_status', 'mes_printer_type', 'mes_conn_type'],
+  dicts: ['mes_printer_status', 'mes_printer_type', 'mes_conn_type','sys_yes_no'],
   data() {
     return {
+      //自动生成编码
+      autoGenFlag:false,
+      optType: undefined,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -237,14 +296,28 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        printerType: null,        printerName: null,        brand: null,        printerModel: null,        connectionType: null,        printerUrl: null,        printerIp: null,        printerPort: null,        clientSid: null,        clientIp: null,        clientPort: null,        enableFlag: null,        status: null,      },
+        printerType: null,    printerCode: null,    printerName: null,        brand: null,        printerModel: null,        connectionType: null,        printerUrl: null,        printerIp: null,        printerPort: null,        clientSid: null,        clientIp: null,        clientPort: null,        enableFlag: null,        status: null,      },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
+        printerCode: [
+          { required: true, message: "打印机编号不能为空", trigger: "blur" }
+        ],  
+
         printerName: [
           { required: true, message: "打印机名称不能为空", trigger: "blur" }
-        ],      }
+        ],      
+
+        printerIp: [
+          { required: true, message: "打印机IP地址不能为空", trigger: "blur" }
+        ],  
+        printerPort: [
+          { required: true, message: "打印机端口地址不能为空", trigger: "blur" }
+        ],  
+      
+      }
+
     };
   },
   created() {
@@ -268,7 +341,7 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        printerId: null,        printerType: null,        printerName: null,        brand: null,        printerModel: null,        connectionType: "0",        printerUrl: null,        printerIp: null,        printerPort: null,        clientSid: null,        clientIp: null,        clientPort: null,        enableFlag: null,        status: "0",        remark: null,        attr1: null,        attr2: null,        attr3: null,        attr4: null,        createBy: null,        createTime: null,        updateBy: null,        updateTime: null      };
+        printerId: null,  printerCode: null,   printerType: null,        printerName: null,        brand: null,        printerModel: null,        connectionType: "0",        printerUrl: null,        printerIp: null,        printerPort: null,        clientSid: null,        clientIp: null,        clientPort: null,        enableFlag: 'Y',        status: "READY",        remark: null,        attr1: null,        attr2: null,        attr3: null,        attr4: null,        createBy: null,        createTime: null,        updateBy: null,        updateTime: null      };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -292,6 +365,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加打印机配置";
+      this.optType = 'add';
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -301,6 +375,18 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改打印机配置";
+        this.optType = 'edit';
+      });
+    },
+    /** 修改按钮操作 */
+    handleView(row) {
+      this.reset();
+      const printerId = row.printerId || this.ids
+      getPrinterconfig(printerId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "查看打印机配置";
+        this.optType = 'view';
       });
     },
     /** 提交按钮 */
@@ -338,6 +424,38 @@ export default {
       this.download('print/printerconfig/export', {
         ...this.queryParams
       }, `printerconfig_${new Date().getTime()}.xlsx`)
+    },
+    //图片上传成功
+    handleImgUplaoded(imgUrl){
+        this.form.printerUrl = imgUrl;
+    },
+    //图片移除
+    handleImgRemoved(imgUrl){
+        this.form.printerUrl = null;            
+    },
+    handleDownloadClient(){
+      const resource = "https://foruda.gitee.com/images/1699583353182586077/41820ab8_1151004.png";
+      this.$download.saveAs(resource,'client');
+    },
+    /**
+     * 将指定打印机作为默认打印机，存储在浏览器本地
+     * @param row 
+     */
+    handleDefault(row){
+      const key = 'defaultPrinter';
+      const value = JSON.stringify(row);
+      localStorage.setItem(key, value);
+      this.$modal.msgSuccess("设置成功!");
+    },
+    //自动生成编码
+    handleAutoGenChange(autoGenFlag){
+      if(autoGenFlag){
+        genCode('PRINTER_CODE').then(response =>{
+          this.form.printerCode = response;
+        });
+      }else{
+        this.form.printerCode = null;
+      }      
     }
   }
 };