Merge remote-tracking branch 'origin/master'

package.json

@@ -46,6 +46,7 @@
     "element-ui": "2.13.2",
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
+    "html2canvas": "^1.1.4",
     "jquery": "^3.5.1",
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
@@ -60,6 +61,7 @@
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
+    "vue-qr": "^2.5.0",
     "vue-resource": "^1.5.2",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",

src/api/label/label.js

@@ -154,4 +154,13 @@ export function getOilNameList(data) {
     method: 'get',
     params: data
   })
-}
+}
+
+// 修改标签
+export function updateLabelRule(data) {
+    return request({
+      url: '/label/rule',
+      method: 'put',
+      data: data
+    })
+  }

src/components/QrCode/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div style="color: #97a8be; font-size: 12px; text-align: center">
+      点击图片进行下载
+    </div>
+    <div @click="downloadImg()" style="text-align: center" id="qrDiv_QrCode">
+      <vue-qr :text="text" :margin="0" :size="400" class="d-block mx-auto" />
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { scrollTo } from "@/utils/scroll-to";
+import vueQr from "vue-qr";
+import html2canvas from "html2canvas";
+
+export default {
+  name: "QrCode",
+  props: {
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50];
+      },
+    },
+    layout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper",
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+    pagerCount: {
+      type: Number,
+      default: 7,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+    name:{
+      type: String,
+      required: true,
+    }
+  },
+  components: {
+    vueQr,
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit("update:page", val);
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit("update:limit", val);
+      },
+    },
+  },
+  methods: {
+    downloadImg() {
+      try {
+        window.pageYoffset = 0;
+        document.documentElement.scrollTop = 0;
+        document.body.scrollTop = 0;
+
+        html2canvas(document.getElementById("qrDiv_QrCode"), {
+          allowTaint: false,
+        }).then((canvas) => {
+          const a = document.createElement("a");
+          const event = new MouseEvent("click");
+          a.download = this.name;
+          a.href = canvas.toDataURL();
+          a.dispatchEvent(event);
+          this.$emit("downloadImg")
+        });
+      } catch (error) {
+        this.msgError("导出二维码失败，请刷新重试~")
+      }
+    },
+    exportQr(text) {
+      this.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
+      this.exportQrDialog = true;
+    },
+    handleSizeChange(val) {
+      this.$emit("pagination", { page: this.currentPage, limit: val });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit("pagination", { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/utils/base64.js

@@ -0,0 +1,104 @@
+export default class Base64 {  
+   
+  // private property  
+  _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";  
+ 
+  // public method for encoding  
+  encode = function (input) {  
+      var output = "";  
+      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;  
+      var i = 0;  
+      input = this._utf8_encode(input);  
+      while (i < input.length) {  
+          chr1 = input.charCodeAt(i++);  
+          chr2 = input.charCodeAt(i++);  
+          chr3 = input.charCodeAt(i++);  
+          enc1 = chr1 >> 2;  
+          enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);  
+          enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);  
+          enc4 = chr3 & 63;  
+          if (isNaN(chr2)) {  
+              enc3 = enc4 = 64;  
+          } else if (isNaN(chr3)) {  
+              enc4 = 64;  
+          }  
+          output = output +  
+          this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +  
+          this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);  
+      }  
+      return output;  
+  }  
+ 
+  // public method for decoding  
+  decode = function (input) {  
+      var output = "";  
+      var chr1, chr2, chr3;  
+      var enc1, enc2, enc3, enc4;  
+      var i = 0;  
+      input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");  
+      while (i < input.length) {  
+          enc1 = this._keyStr.indexOf(input.charAt(i++));  
+          enc2 = this._keyStr.indexOf(input.charAt(i++));  
+          enc3 = this._keyStr.indexOf(input.charAt(i++));  
+          enc4 = this._keyStr.indexOf(input.charAt(i++));  
+          chr1 = (enc1 << 2) | (enc2 >> 4);  
+          chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);  
+          chr3 = ((enc3 & 3) << 6) | enc4;  
+          output = output + String.fromCharCode(chr1);  
+          if (enc3 != 64) {  
+              output = output + String.fromCharCode(chr2);  
+          }  
+          if (enc4 != 64) {  
+              output = output + String.fromCharCode(chr3);  
+          }  
+      }  
+      output = this._utf8_decode(output);  
+      return output;  
+  }  
+ 
+  // private method for UTF-8 encoding  
+  _utf8_encode(string) {  
+      string = string.replace(/\r\n/g,"\n");  
+      var utftext = "";  
+      for (var n = 0; n < string.length; n++) {  
+          var c = string.charCodeAt(n);  
+          if (c < 128) {  
+              utftext += String.fromCharCode(c);  
+          } else if((c > 127) && (c < 2048)) {  
+              utftext += String.fromCharCode((c >> 6) | 192);  
+              utftext += String.fromCharCode((c & 63) | 128);  
+          } else {  
+              utftext += String.fromCharCode((c >> 12) | 224);  
+              utftext += String.fromCharCode(((c >> 6) & 63) | 128);  
+              utftext += String.fromCharCode((c & 63) | 128);  
+          }  
+ 
+      }  
+      return utftext;  
+  }  
+ 
+  // private method for UTF-8 decoding  
+  _utf8_decode(utftext) {  
+
+      let [string, i, c, c1, c2, c3] = ['', 0, 0, 0, 0, 0]
+      
+      while ( i < utftext.length ) {  
+          c = utftext.charCodeAt(i);  
+          if (c < 128) {  
+              string += String.fromCharCode(c);  
+              i++;  
+          } else if((c > 191) && (c < 224)) {  
+              c2 = utftext.charCodeAt(i+1);  
+
+              string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));  
+              i += 2;  
+          } else {  
+              c2 = utftext.charCodeAt(i+1);  
+              c3 = utftext.charCodeAt(i+2);  
+              string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));  
+              i += 3;  
+          }  
+      }  
+      return string;  
+  }  
+}

src/views/label/Label_AddLabel.vue

@@ -21,6 +21,10 @@
         <span style="display: inline-block; width: 20px"> </span>
         2、标签的优先级高于营销方案。所以将用户加入标签后，此用户将优先执行标签的优惠规则，不会再执行营销方案。
       </div>
+      <div style="color: red; font-size: 12px">
+        <span style="display: inline-block; width: 20px"> </span>
+        3、标签码用于给用户扫码使用，从而让用户享受对应的标签优惠，实现灵活处理，方便快捷。您还可以配置是否强制拉用户进入标签，实现用户长期留在此标签。
+      </div>
     </div>
 
     <el-form
@@ -67,7 +71,7 @@
         >
           <el-input v-model="label.labelName" :disabled="editable"></el-input>
           <el-popconfirm
-            title="此标签在用，删除前请仔细检查，是否删除？"
+            title="此标签在用，删除后之前导出的支付码将失效，删除前请仔细检查，是否删除？"
             confirm-button-text="删除"
             @onConfirm="removeLabel(label)"
             v-if="!!label.id"
@@ -76,6 +80,7 @@
               slot="reference"
               :disabled="editable"
               :loading="label.loading"
+              class="mt-2"
               >删除</el-button
             >
           </el-popconfirm>
@@ -83,9 +88,17 @@
             @click="removeLabel(label)"
             :disabled="editable"
             :loading="label.loading"
+            class="mt-2"
             v-else
             >删除</el-button
           >
+          <el-button
+            @click="exportPayCode(label)"
+            v-show="editable"
+            :loading="label.loading"
+            class="mt-2 ml-3"
+            >导出标签码</el-button
+          >
         </el-form-item>
       </div>
       <el-form-item>
@@ -107,10 +120,98 @@
         >
       </el-form-item>
     </el-form>
+
+    <el-dialog
+      :visible.sync="selectQrDialog"
+      width="700px"
+      append-to-body
+      title="选择导出标签"
+    >
+      <div
+        class="d-block mx-auto"
+        style="width: 600px; text-align: center"
+        id="qrDiv"
+      >
+        <h5>标签码设置</h5>
+        用户扫码支付后，是否<b>强制将用户拉入此标签</b>？
+        <el-switch
+          v-model="exportLabelQr.isAddLabel"
+          active-value="1"
+          inactive-value="0"
+          @change="handleStatusChange"
+        ></el-switch
+        ><br />
+        当前设置：{{
+          exportLabelQr.isAddLabel == "1"
+            ? "支付后强拉至此标签，下次扫员工码和站点码都可以实现此标签优惠~"
+            : "支付后不强拉到此标签，下次想再享受此标签优惠需要再次扫此标签码~"
+        }}
+        <hr />
+        <div v-if="personnelList.length != 1">
+          <h5>总标签码</h5>
+          <div>
+            用户可以先扫描<span style="color: red; font-weight: bold">
+              总标签码</span
+            >，再让用户扫描
+            <span style="color: red; font-weight: bold">{{
+              personnelList.length == 1 ? "站点码" : "员工码"
+            }}</span>
+            ，即可实现标签优惠。
+          </div>
+          <div>此码<b>适用所有的加油员</b>，不过需要<b>用户扫码两次</b>~</div>
+          <div class="btn btn-success mt-3" @click="exportSumLabel">导出【总标签码】</div>
+          <hr />
+        </div>
+        <div>
+          <h5>员工标签码</h5>
+          <div>
+            用户可以一次性扫描<span style="color: red; font-weight: bold">
+              员工标签码</span
+            >，实现标签优惠。
+          </div>
+          <div>
+            此码是<b>一个加油员一个标签码</b>，用户只需要<b>扫码一次</b>。
+          </div>
+          <div v-if="personnelList.length == 1">
+            <h5 style="color: red">
+              您的站点目前<b>仅有一个加油员</b>，请优先使用此码~
+            </h5>
+          </div>
+          <div v-for="emp in personnelList" :key="emp.personnelId">
+            <div class="btn btn-primary mt-3" @click="exportEmployeeLabel(emp)">
+              导出{{ emp.personnelName }}的【员工标签码】
+            </div>
+          </div>
+          <br />
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="exportQrDialog"
+      width="600px"
+      append-to-body
+      title="导出标签"
+    >
+      <div>
+        <qr :text="currentExport.text" @downloadImg="downloadImg" :name="currentExport.type==1 ? '员工标签码':'总标签码'">
+          <div v-if="currentExport.type==1">员工标签码：{{this.$store.state.user.deptName}}-{{currentExport.name}}-{{ currentExport.labelName }}</div>
+          <div v-if="currentExport.type==0">总标签码：{{this.$store.state.user.deptName}}-{{ currentExport.labelName }}</div>
+        </qr>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { sysDeptDemoList, addlabel, selectLabel } from "@/api/label/label";
+import {
+  sysDeptDemoList,
+  addlabel,
+  selectLabel,
+  updateLabelRule,
+} from "@/api/label/label";
+import qr from "@/components/QrCode";
+import { listPersonnel } from "@/api/station/personnel";
+import Base64 from "@/utils/base64";
 
 export default {
   name: "Label_AddLabel",
@@ -129,15 +230,49 @@ export default {
       editable: true,
       tempForm: undefined,
       pageStatus: 0,
+      selectQrDialog: false,
+      exportQrDialog: false,
+      exportLabelQr: {},
+      exportEmployeeQr: {},
+      personnelList: [],
+      currentExport:{
+        name:'李哈哈',
+        type:1, // 0 总标签码 1 员工标签码
+        text:'',
+        labelName:'',
+        labelId:'',
+      },
+      base:null
     };
   },
   created() {
     this.init();
   },
+  components: {
+    qr,
+  },
   methods: {
     init() {
       this.setPageStatus();
       this.getList();
+      this.getEmployeeList();
+      this.base = new Base64();
+    },
+    getEmployeeList() {
+      listPersonnel({
+        pageNum: 1,
+        pageSize: 1000,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.personnelList = res.rows;
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.msgError("加载员工列表出错了~");
+        });
     },
     setPageStatus() {
       this.queryPageStatus([2]).then((res) => {
@@ -228,6 +363,70 @@ export default {
       }
       this.editable = !this.editable;
     },
+    exportPayCode(label) {
+      this.exportLabelQr = label;
+      this.currentExport.labelName = label.labelName;
+      this.currentExport.labelId = label.id;
+      this.selectQrDialog = true;
+    },
+    downloadImg() {
+      html2canvas(document.getElementById("qrDiv"), { allowTaint: true }).then(
+        (canvas) => {
+          const a = document.createElement("a");
+          const event = new MouseEvent("click");
+          a.download = "标签支付码";
+          a.href = canvas.toDataURL();
+          a.dispatchEvent(event);
+        }
+      );
+
+      // // const iconUrl = this.$refs['Qrcode'].$el.src
+      // const a = document.createElement('a')
+      // const event = new MouseEvent('click')
+      // console.log()
+      // a.download = '标签支付码'
+      // a.href = iconUrl
+      // a.dispatchEvent(event)
+    },
+    handleStatusChange(e) {
+      const old = this.exportLabelQr.isAddLabel;
+      updateLabelRule({
+        id: this.exportLabelQr.id,
+        isAddLabel: e,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.msgSuccess("恭喜你，修改成功了~");
+          } else {
+            throw new Error("");
+          }
+        })
+        .catch((err) => {
+          this.exportLabelQr.isAddLabel = old;
+          this.msgError("抱歉，修改失败了，请刷新网页重试~");
+        });
+    },
+    downloadImg(){
+      this.msgSuccess("亲，导出成功了~")
+    },
+    exportEmployeeLabel(emp){
+      this.currentExport.name = emp.personnelName;
+      this.currentExport.type = 1;
+
+      const encodeStr = "e" + emp.personnelId + "/l" + this.currentExport.labelId + "/";
+      const encodedStr = this.base.encode(encodeStr);
+      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
+      this.currentExport.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
+      this.exportQrDialog = true;
+    },
+    exportSumLabel(){
+      const encodeStr =  "l" + this.currentExport.labelId + "/";
+      const encodedStr = this.base.encode(encodeStr);
+      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
+      this.currentExport.text = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
+      this.currentExport.type = 0
+      this.exportQrDialog = true;
+    }
   },
 };
 </script>

src/views/station/Station_Employee.vue

@@ -1,7 +1,9 @@
 <template>
   <div v-if="pageStatus == 0">配置加载中...</div>
   <div v-else-if="pageStatus == 1">此页面不对此账号开放</div>
-  <div v-else-if="pageStatus == 2">没有此页内容的配置权限，请检查集团上的配置</div>
+  <div v-else-if="pageStatus == 2">
+    没有此页内容的配置权限，请检查集团上的配置
+  </div>
   <div v-else-if="pageStatus == 3">加载发生错误</div>
   <div v-else-if="pageStatus == 4" class="app-container">
     <el-form
@@ -16,27 +18,38 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          >添加员工</el-button
+          >添加加油员</el-button
         >
       </el-form-item>
     </el-form>
-    <el-table :data="personnelList">
+    <div
+      class="mt-5"
+      style="text-align: center"
+      v-if="personnelList.length == 0"
+    >
+      请至少添加一名加油员，否则小程序无法进行支付~
+    </div>
+    <el-table :data="personnelList" v-else>
       <el-table-column
-        label="油站员工主键id"
+        label="油站加油员主键id"
         v-if="false"
         align="center"
         prop="personnelId"
       />
-      <el-table-column label="员工姓名" align="center" prop="personnelName" />
+      <el-table-column label="加油员姓名" align="center" prop="personnelName" />
       <el-table-column label="负责枪号" align="center" prop="gunNo" />
       <el-table-column label="手机号" align="center" prop="personnelPhone" />
-      <el-table-column label="加油站名称" align="center" prop="stationName" 
-        v-if="jiBie!=2"
+      <el-table-column
+        label="加油站名称"
+        align="center"
+        prop="stationName"
+        v-if="jiBie != 2"
       />
       <el-table-column
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
+        width="200"
       >
         <template slot-scope="scope">
           <el-button
@@ -46,6 +59,29 @@
             @click="handleUpdate(scope.row)"
             >修改</el-button
           >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-download"
+            @click="exportQr(scope.row)"
+            v-if="personnelList.length != 1"
+            >导出员工码</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-download"
+            v-if="personnelList.length == 1"
+            @click="exportQr(scope.row)"
+            >导出油站码</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -57,11 +93,14 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改油站员工信息对话框 -->
+    <!-- 添加或修改油站加油员信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="姓名" prop="personnelName">
-          <el-input v-model="form.personnelName" placeholder="请输入员工姓名" />
+          <el-input
+            v-model="form.personnelName"
+            placeholder="请输入加油员姓名"
+          />
         </el-form-item>
         <el-form-item label="负责枪号" prop="checkedGunList">
           <template v-if="allGunList.length === 0">
@@ -83,7 +122,7 @@
         <el-form-item label="手机号" prop="personnelPhone">
           <el-input
             v-model="form.personnelPhone"
-            placeholder="请输入员工手机号"
+            placeholder="请输入加油员手机号"
           />
         </el-form-item>
       </el-form>
@@ -92,6 +131,120 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog
+      :title="
+        personnelList.length == 0
+          ? '添加加油员须知'
+          : personnelList.length == 1
+          ? '添加加油员确认'
+          : '删除加油员确认'
+      "
+      :visible.sync="confirmDialog"
+      width="500px"
+      append-to-body
+    >
+      <div class="m-2 mt-0" v-if="personnelList.length == 0">
+        <div style="text-align: center">关于加油员</div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-3">
+          1、请至少添加一名加油员，否则小程序无法进行支付。
+        </div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
+          2、当您只添加 【<b>一名加油员</b>】
+          ：小程序采取开放模式（即用户<b>可以不通过扫员工码进入</b>），小程序会拉取该加油员所管理的油枪，用户产生的订单全部算在该加油员的名下。
+        </div>
+        <div
+          style="color: red; font-size: 12px; text-indent: 2em"
+          class="mt-2 mb-3"
+        >
+          3、当您添加了 【<b>多名加油员</b>】
+          ：小程序采取限制模式（即<b>只能够通过扫员工码进入</b>），小程序会拉取对应员工码下的加油员所管理的油枪，用户扫员工码产生的订单算在对应加油员的名下。
+        </div>
+      </div>
+      <div class="m-2" v-else-if="personnelList.length == 1">
+        <div>你当前只有一名加油员，所有的订单都会计入该加油员名下。</div>
+        <div class="mt-2">
+          您正在添加第二名加油员，操作成功之后，<b>系统将发生以下变化：</b>
+        </div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-4">
+          1、小程序端会限制用户进入的方式，用户只能通过<b>扫描加油员的员工码</b>来进入小程序进行支付。其他方式进入小程序，会强制调用相机启动扫一扫功能。
+        </div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
+          2、用户扫描员工码产生的订单，会自动计入到员工码对应的加油员身上。
+        </div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
+          3、如果您启用了标签，可能需要导出多个<b>加油员标签码</b>~
+          当然，不想使用太多标签码，也可以组合搭配使用，详情可以到标签模块了解~
+        </div>
+        <div class="mt-4 text-secondary">
+          如果您对上述内容有清晰的了解，继续想添加加油员，请点击确认按钮。
+        </div>
+
+        <div class="mt-2 text-secondary">
+          如果您对上面的内容不够了解，请联系运营人员来辅助设置。
+        </div>
+      </div>
+      <div class="m-2" v-else-if="personnelList.length == 2">
+        <div>您目前有两名加油员，订单会根据员工码计入加油员名下。</div>
+        <div>
+          您正在删除一名加油员，操作成功之后，<b>系统将发生以下变化：</b>
+        </div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-4">
+          1、小程序端会开放用户进入的方式，用户可以通过多种方式进入小程序进行支付。
+        </div>
+        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
+          2、用户支付产生的所有订单，会自动计入到仅剩下的加油员的名下。
+        </div>
+        <div class="mt-4 text-secondary">
+          如果您对上述内容有清晰的了解，继续想删除加油员，请点击删除按钮。
+        </div>
+
+        <div class="mt-2 text-secondary">
+          如果您对上面的内容不够了解，请联系运营人员来辅助设置。
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          :type="
+            personnelList.length == 0 || personnelList.length == 1
+              ? 'primary'
+              : 'danger'
+          "
+          @click="confirmSubmit"
+          >{{
+            personnelList.length == 0
+              ? "我知道了~"
+              : personnelList.length == 1
+              ? "我已经了解，继续添加加油员"
+              : "我已经了解，确认删除该加油员"
+          }}</el-button
+        >
+        <el-button @click="confirmCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="exportQrDialog"
+      width="600px"
+      append-to-body
+      title="导出标签"
+    >
+      <div>
+        <qr :text="qrStr" @downloadImg="downloadImg" :name="personnelList.length==1 ? '油站码' : '员工码'">
+          <div v-if="personnelList.length==1">油站码：{{this.$store.state.user.deptName}}-{{ this.currentExport.personnelName }}</div>
+          <div v-else>员工码：{{this.$store.state.user.deptName}}-{{ this.currentExport.personnelName }}</div>
+          <div class='mx-auto d-flex' style="width:500px;justify-content:center;align-items:center;">
+            <span>负责枪号：</span> 
+            <div class="d-inline-flex" style="max-width:350px;flex-wrap:wrap;justify-content:space-between;">
+              <span v-for="ele in currentExport.checkedGunList" :key="ele" style="width: 85px;">
+                {{ ele + '号枪-' + transferGunnumToOilname(ele) + " "}}
+            </span>
+            </div>
+          </div>
+        </qr>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -106,13 +259,16 @@ import {
 } from "@/api/station/personnel";
 import { stationinfo, listGun } from "@/api/station/gun";
 import { getDept } from "@/api/system/dept";
+import Base64 from "@/utils/base64";
+import qr from "@/components/QrCode";
+
 export default {
   name: "Station_Employee",
   data() {
     return {
       // 总条数
       total: 0,
-      // 油站员工信息表格数据
+      // 油站加油员信息表格数据
       personnelList: [],
       allGunList: [],
       // 弹出层标题
@@ -125,8 +281,6 @@ export default {
         pageSize: 10,
         personnelName: null,
         gunNo: null,
-        stationId: null,
-        stationName: null,
         qrCode: null,
         personnelPhone: null,
       },
@@ -142,24 +296,38 @@ export default {
       // 表单校验
       rules: {
         personnelName: [
-          { required: true, message: "请输入员工姓名", trigger: "blur" },
+          { required: true, message: "请输入加油员姓名", trigger: "blur" },
         ],
         checkedGunList: [
           { required: true, message: "请选择油枪", trigger: "change" },
-        ]
+        ],
       },
-      pageStatus:0
+      pageStatus: 0,
+      confirmDialog: false,
+      deletePersonnelId: undefined,
+      exportQrDialog: false,
+      qrStr: "",
+      currentExport: {},
     };
   },
+  components: {
+    qr,
+  },
   created() {
+    const base = new Base64();
+    const a = base.encode("12李哈哈");
+    console.log("加密", a);
+    console.log("解密", base.decode(a));
     this.init();
     this.setPageStatus();
   },
   methods: {
-    /** 查询油站员工信息列表 */
+    downloadImg() {
+      this.msgSuccess("导出成功~");
+    },
+    /** 查询油站加油员信息列表 */
     getList() {
       listPersonnel(this.queryParams).then((response) => {
-        this.queryParams.stationId = null;
         this.personnelList = response.rows;
         this.total = response.total;
       });
@@ -169,6 +337,25 @@ export default {
         this.pageStatus = res;
       });
     },
+    confirmSubmit() {
+      if (this.personnelList.length == 1 || this.personnelList.length == 0) {
+        this.confirmDialog = false;
+        this.open = true;
+      } else if (this.personnelList.length == 2) {
+        this.confirmDialog = false;
+        delPersonnel(this.deletePersonnelId)
+          .then((res) => {
+            this.getList();
+            this.msgSuccess("删除成功~");
+          })
+          .catch((res) => {
+            this.msgError("删除失败~");
+          });
+      }
+    },
+    confirmCancel() {
+      this.confirmDialog = false;
+    },
     init() {
       //加载所有油枪
       this.getList();
@@ -176,6 +363,7 @@ export default {
         stationId: this.deptId,
       }).then((response) => {
         this.allGunList = response.rows;
+        console.log('this.allGunList',this.allGunList);
       });
     },
     // 取消按钮
@@ -194,14 +382,18 @@ export default {
     // },
     /** 新增按钮操作 */
     handleAdd() {
-      this.title = "添加油站员工";
+      this.title = "添加油站加油员";
       //【**】
       this.form = {
         stationId: this.deptId,
         checkedGunList: [],
       };
       this.form.stationId = this.deptId;
-      this.open = true;
+      if (this.personnelList.length == 0 || this.personnelList.length == 1) {
+        this.confirmDialog = true;
+      } else {
+        this.open = true;
+      }
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -215,21 +407,21 @@ export default {
       }
       this.form = { ...row, checkedGunList };
       this.open = true;
-      this.title = "修改油站员工";
+      this.title = "修改油站加油员";
     },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          let list=[];
-          for(let i=0;i<this.form.checkedGunList.length;i++){
-            for(let j=0;j<this.allGunList.length;j++){
-              if(this.form.checkedGunList[i]== this.allGunList[j].oilGunNo){
+          let list = [];
+          for (let i = 0; i < this.form.checkedGunList.length; i++) {
+            for (let j = 0; j < this.allGunList.length; j++) {
+              if (this.form.checkedGunList[i] == this.allGunList[j].oilGunNo) {
                 list.push(this.allGunList[j].oilGunNo);
               }
             }
           }
-          this.form.gunNo=list.toString();
+          this.form.gunNo = list.toString();
           if (!!this.form.personnelId) {
             updatePersonnel(this.form).then((response) => {
               this.msgSuccess("修改成功");
@@ -248,25 +440,31 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const personnelIds = row.personnelId;
-      this.$confirm("是否确认删除油站员工信息", "警告", {
+      this.deletePersonnelId = row.personnelId;
+      if (this.personnelList.length == 2) {
+        this.confirmDialog = true;
+        return;
+      }
+      this.$confirm("是否确认删除油站加油员信息", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
-      })
-        .then(function () {
-          return delPersonnel(personnelIds);
-        })
-        .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-        .catch(() => {});
+      }).then(() => {
+        console.log(123);
+        delPersonnel(this.deletePersonnelId)
+          .then(() => {
+            this.getList();
+            this.msgSuccess("删除成功~");
+          })
+          .catch(() => {
+            this.msgError("删除失败~");
+          });
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有油站员工信息数据项?", "警告", {
+      this.$confirm("是否确认导出所有油站加油员信息数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -278,6 +476,30 @@ export default {
           this.download(response.msg);
         });
     },
+    exportQr(row) {
+      this.currentExport = JSON.parse(JSON.stringify(row));
+      if (row.gunNo !== null) {
+        this.currentExport.checkedGunList = [
+          ...new Set(row.gunNo.split(",")),
+        ].filter((ele) => {
+          return ele.toString().trim() !== "";
+        });
+      } else {
+        this.currentExport.checkedGunList = [];
+      }
+      const base = new Base64();
+      const encodeStr = "e" + row.personnelId + "/";
+      const encodedStr = base.encode(encodeStr);
+      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
+      this.qrStr = "https://goto.huijy.net/" + this.deptId + "/" + trimEqualStr;
+      this.exportQrDialog = true;
+    },
+    transferGunnumToOilname(gunNo){
+      const gun = this.allGunList.find((ele)=>{
+        return ele.oilGunNo == gunNo;
+      })
+      return gun.oilName
+    }
   },
 };
 </script>