Explorar el Código

更改添加员工 引入二维码生成

Joe hace 3 años
padre
commit
550ddd736a
Se han modificado 3 ficheros con 212 adiciones y 36 borrados
  1. 1 0
      package.json
  2. 58 2
      src/views/label/Label_AddLabel.vue
  3. 153 34
      src/views/station/Station_Employee.vue

+ 1 - 0
package.json

@@ -60,6 +60,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",

+ 58 - 2
src/views/label/Label_AddLabel.vue

@@ -53,7 +53,7 @@
           您没有添加标签,所以标签功能尚未生效
         </el-form-item>
       </div>
-      <div v-if="labelForm.labelFlag == 1">
+      <div v-if="labelForm.labelFlag == 1" >
         <el-form-item
           v-for="(label, index) in labelForm.labelArr"
           :label="'标签' + (index + 1)"
@@ -67,7 +67,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 +76,7 @@
               slot="reference"
               :disabled="editable"
               :loading="label.loading"
+              class="mt-2"
               >删除</el-button
             >
           </el-popconfirm>
@@ -83,9 +84,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 +116,35 @@
         >
       </el-form-item>
     </el-form>
+
+    <el-dialog
+      :visible.sync="exportDialog"
+      width="700px"
+      append-to-body
+      title="导出标签"
+    >
+      <div 
+        @click="downloadImg()"
+        class="d-block mx-auto" 
+        style="width:600px"
+        id="qrDiv"
+      >
+        <vue-qr
+          :ref="'Qrcode'"
+          text="http://qrcode.html"
+          :margin="10"
+          :size="500"
+          
+        />
+        <div>你好</div>
+      </div>
+
+    </el-dialog>
   </div>
 </template>
 <script>
 import { sysDeptDemoList, addlabel, selectLabel } from "@/api/label/label";
+import vueQr from 'vue-qr'
 
 export default {
   name: "Label_AddLabel",
@@ -129,8 +163,12 @@ export default {
       editable: true,
       tempForm: undefined,
       pageStatus: 0,
+      exportDialog: false
     };
   },
+  components: {
+    vueQr
+  },
   created() {
     this.init();
   },
@@ -228,6 +266,24 @@ export default {
       }
       this.editable = !this.editable;
     },
+    exportPayCode(){
+      this.exportDialog = true;
+    },
+    downloadImg(link_id) {
+        html2canvas(document.getElementById('qrDiv'), {
+            onrendered: function(ca) {
+                // $('#saveImages').attr('src',ca.toDataURL('image/jpeg'));
+                console.log(ca);
+            }
+        });
+      // 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)
+    }
   },
 };
 </script>

+ 153 - 34
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,22 +18,28 @@
           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="操作"
@@ -46,6 +54,13 @@
             @click="handleUpdate(scope.row)"
             >修改</el-button
           >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -57,11 +72,11 @@
       @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 +98,7 @@
         <el-form-item label="手机号" prop="personnelPhone">
           <el-input
             v-model="form.personnelPhone"
-            placeholder="请输入员手机号"
+            placeholder="请输入加油员手机号"
           />
         </el-form-item>
       </el-form>
@@ -92,6 +107,80 @@
         <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>
   </div>
 </template>
 
@@ -112,7 +201,7 @@ export default {
     return {
       // 总条数
       total: 0,
-      // 油站员信息表格数据
+      // 油站加油员信息表格数据
       personnelList: [],
       allGunList: [],
       // 弹出层标题
@@ -142,13 +231,15 @@ 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,
     };
   },
   created() {
@@ -156,7 +247,7 @@ export default {
     this.setPageStatus();
   },
   methods: {
-    /** 查询油站员信息列表 */
+    /** 查询油站加油员信息列表 */
     getList() {
       listPersonnel(this.queryParams).then((response) => {
         this.queryParams.stationId = null;
@@ -169,6 +260,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();
@@ -194,14 +304,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 +329,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 +362,30 @@ 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(() => {
+      }).then( ()=> {
+        console.log(123);
+        delPersonnel(this.deletePersonnelId).then(() => {
           this.getList();
-          this.msgSuccess("删除成功");
-        })
-        .catch(() => {});
+          this.msgSuccess("删除成功~");
+        }).catch(() => {
+          this.msgError("删除失败~");
+        });
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有油站员信息数据项?", "警告", {
+      this.$confirm("是否确认导出所有油站加油员信息数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",