zc

src/components/qrCodeDialog/index.vue

@@ -21,6 +21,8 @@
   qrCodeDialogButton(type,id,name){
     if(type == 1){
       this.$set(this,'qrCodeDialogData',{
+        title:'化学品名称',                                       //标题名称(非必填)
+        download:true,                                            //下载按钮(非必填)
         type:'chemicalsCabinet',                                  //二维码类型 用于区分二维码功能类型
         parameter:id,                                             //二维码参数
         name:name,                                                //二维码名称用于下载时命名
@@ -36,15 +38,18 @@
 <template>
   <div>
     <!--添加/编辑弹窗-->
-    <el-dialog class="trainingCourseAddDialog" title=' 1'
+    <el-dialog class="trainingCourseAddDialog" title=' '
+               :modal-append-to-body="false"
                :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
                :visible.sync="dialogType" v-if="dialogType" width="394px">
-      <div class="trainingCourseAddDialog-title-box">
-        <p></p>
-        <p class="el-icon-close" @click="buttonClick"></p>
-      </div>
+      <p class="title-p">{{qrCodeDialogData.title?qrCodeDialogData.title:''}}</p>
       <vue-qr v-if="vueQrImgType" ref="vueQr" class="trainingCourseAddDialog-vue-qr" :text="vueQrCodeData" :size="200"></vue-qr>
-      <p class="trainingCourseAddDialog-button-p" @click="buttonClick(1)">下载二维码</p>
+      <div class="button-bottom-box">
+        <p class="null-p"></p>
+        <p class="out-p" @click="buttonClick">取消</p>
+        <p v-if="qrCodeDialogData.download" class="trainingCourseAddDialog-button-p" @click="buttonClick(1)">下载</p>
+        <p class="null-p"></p>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -99,6 +104,7 @@
 
 <style scoped lang="scss">
   .trainingCourseAddDialog{
+    z-index: 10000;
     font-weight:500;
     .trainingCourseAddDialog-title-box{
       display: flex;
@@ -115,22 +121,45 @@
         cursor: pointer;
       }
     }
+    .title-p{
+      text-align: center;
+      margin-top:40px;
+      font-size:16px;
+    }
     .trainingCourseAddDialog-vue-qr{
       display: block!important;
       height:200px;
       width:200px;
       margin:20px auto 27px;
     }
-    .trainingCourseAddDialog-button-p{
-      width:150px;
-      height:40px;
-      line-height:40px;
+    .button-bottom-box{
+      display: flex;
       margin:0 auto 30px;
-      color:#fff;
-      background:#0045AF;
-      border-radius:10px;
-      text-align: center;
-      cursor: pointer;
+      .null-p{
+        flex:1;
+      }
+      .out-p{
+        width:100px;
+        height:40px;
+        line-height:40px;
+        color:#A9A9A9;
+        background:#fff;
+        border:1px solid #A9A9A9;
+        border-radius:4px;
+        text-align: center;
+        cursor: pointer;
+      }
+      .trainingCourseAddDialog-button-p{
+        margin-left:20px;
+        width:100px;
+        height:40px;
+        line-height:40px;
+        color:#fff;
+        background:#0045AF;
+        border-radius:4px;
+        text-align: center;
+        cursor: pointer;
+      }
     }
     ::v-deep .el-dialog__header{
       display: none;

src/views/chemicalManage/basicManagement/chemicalsCabinetManage/index.vue

@@ -51,7 +51,7 @@
           <el-table-column label="柜锁数量" prop="content" width="100" show-overflow-tooltip/>
           <el-table-column label="开门方式" prop="content" width="150" show-overflow-tooltip/>
           <el-table-column label="化学品数量" prop="content" width="120" show-overflow-tooltip/>
-          <el-table-column label="操作" width="200" show-overflow-tooltip v-if="tableButtonType">
+          <el-table-column label="操作" width="230" show-overflow-tooltip v-if="tableButtonType">
             <template slot-scope="scope">
               <div class="table-button-box">
                 <p class="table-button-null"></p>
@@ -63,10 +63,15 @@
                    @click="tableButton(3,scope.row)"
                    v-hasPermiRouter="['demo:demo:edit']"
                 >开门记录</p>
-                <p class="table-button-p"
-                   @click="tableButton(4,scope.row)"
-                   v-hasPermiRouter="['demo:demo:del']"
-                >更多</p>
+                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                             v-hasPermiRouter="['demo:demo:move']">
+                  <p class="table-button-p">更多>></p>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="1">二维码</el-dropdown-item>
+                    <el-dropdown-item command="2">编辑</el-dropdown-item>
+                    <el-dropdown-item command="3">删除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
                 <p class="table-button-null"></p>
               </div>
             </template>
@@ -81,6 +86,7 @@
         />
       </div>
     </div>
+    <qr-code-dialog v-if="qrCodeDialogType" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
     <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
   </div>
 </template>
@@ -89,12 +95,13 @@
   //import { systemUserSelect } from "@/api/commonality/permission";
   //import { getInfo } from "@/api/basicsModules/index";
   //import addPage from "./addPage.vue";
+  import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
   import { getDeptDropList,systemBuildingGetTreeList,} from "@/api/commonality/permission";
   export default {
     name: 'index',
-    //components: {
-    //  addPage
-    //},
+    components: {
+      qrCodeDialog
+    },
     data () {
       return {
         tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
@@ -141,6 +148,9 @@
         total:0,
         //组件传参
         propsData:{},
+        //二维码相关
+        qrCodeDialogType:false,
+        qrCodeDialogData:{},
       }
     },
     created () {
@@ -197,6 +207,21 @@
           obj.showType = false;
           this.$set(this,'propsData',obj);
         }else if(type == 4){
+          //返回并刷新
+          this.$set(this,'pageType',1);
+          this.getList();
+        }
+      },
+      //更多
+      handleCommand(val,row){
+        let self = this;
+        if(val == '1'){
+          //二维码
+          this.qrCodeDialogButton(1,'asd','名称');
+        }else if(val == '2'){
+          //编辑
+
+        }else if(val == '3'){
           //删除
           this.$confirm('是否确认删除?', "警告", {
             confirmButtonText: "确定",
@@ -209,24 +234,19 @@
               self.getList();
             });
           }).catch(() => {});
-        }else if(type == 5){
-          //启用&停用
-          let text = row.state  ? "停用" : "启用";
-          this.$confirm('是否确认' + text + '?', "警告", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          }).then(function() {
-          }).then(() => {
-            stateFunction({id:row.id,state:!row.state,}).then(response => {
-              self.msgSuccess(response.message)
-              self.getList();
-            });
-          }).catch(() => {});
-        }else if(type == 6){
-          //返回并刷新
-          this.$set(this,'pageType',1);
-          this.getList();
+        }
+      },
+      //二维码组件开关
+      qrCodeDialogButton(type,id,name){
+        if(type == 1){
+          this.$set(this,'qrCodeDialogData',{
+            type:'chemicalsCabinet',                                  //二维码类型 用于区分二维码功能类型
+            parameter:id,                                             //二维码参数
+            name:name,                                                //二维码名称用于下载时命名
+          });
+          this.$set(this,'qrCodeDialogType',true);
+        }else{
+          this.$set(this,'qrCodeDialogType',false);
         }
       },
       //查询学院列表
@@ -255,6 +275,7 @@
           }
         })
       },
+      //处理楼栋楼层数据
       forBuildFloor(list){
         let self = this;
         for(let i=0;i<list.length;i++){