更新代码

src/views/AllPersonnelBase/AllPersonnelBase.vue

@@ -123,7 +123,7 @@
       style="width: 100%"
       :class="{delSelection: !selectBoo}"
       @selection-change="handleSelectionChange"
-      @row-click="handle"
+      @row-click="isShowRyxxkBtn"
     >
       <el-table-column
         type="selection"
@@ -442,7 +442,7 @@
       <ryxxk
         :isShowRyxxk="isShowRyxxk"
         :rowData="rowData"
-        @closeXzry="closeXzry"
+        @closeRyxxk="closeRyxxk"
       > </ryxxk>
 
       <!-- <el-drawer
@@ -508,6 +508,7 @@ export default {
       isShowFztm: false, //复制条码
       isShowFcx: false, //发查询
       isShowXzry: false, // 新增人员
+      isShowRyxxk: false, // 人员信息卡
       type: "ry", // 人员还是案件
       rowData: {}, // 单行数据
       ysxtAsjxgrybh: null,
@@ -603,6 +604,17 @@ export default {
       this.isShowXzry = val;
       // this.search();
     },
+    // 人员信息卡操作
+    isShowRyxxkBtn () {
+      this.isShowRyxxk = true;
+    },
+    closeRyxxk (val) {
+      //console.log("新增人员关闭", val);
+      // 增加毛玻璃
+      this.$bus.emit('isBlur', val)
+      this.isShowRyxxk = val;
+      // this.search();
+    },
     // 时间格式化
     dateTimeFormat (row, colnum) {
       let prop = colnum.property;

src/views/AllPersonnelBase/modules/ajxxk.vue

+<template>
+  <div>
+    <el-drawer
+      class="ajxxkDrawer"
+      title="标题"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+      :with-header="false"
+      :modal='false'
+      append-to-body
+      size='36%'
+    >
+      <div class="header">
+        <div class="header-title">人员档案信息</div>
+        <div
+          class="header-close"
+          @click="closeDrawer"
+        >
+          <svg
+            class="icon"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-fanhui"></use>
+          </svg>
+        </div>
+      </div>
+
+    </el-drawer>
+  </div>
+</template>
+<script>
+export default {
+  name: "ryxxk",
+  props: {
+    isShowRyxxk: {
+      type: [Number, String, Boolean],
+      default: false
+    },
+    rowData: {
+      default: false
+    }
+  },
+  data () {
+    return {
+      drawer: false,
+      direction: 'rtl',
+    };
+  },
+  mounted () {
+    this.drawer = this.isShowRyxxk;
+
+  },
+  watch: {
+    isShowRyxxk (newVal, oldVal) {
+      this.drawer = newVal;
+    },
+    drawer (val) {
+      this.$emit('closeRyxxk', this.drawer);
+    }
+  },
+  methods: {
+    handleClose (done) {
+      console.log(1111111111111111)
+      // this.$confirm('确认关闭？')
+      //   .then(_ => {
+      //     done();
+
+      //   })
+      //   .catch(_ => { });
+      this.drawer = false
+      this.$emit('closeRyxxk', this.drawer);
+    },
+    closeDrawer () {
+      this.drawer = false
+      this.$emit('closeRyxxk', this.drawer);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.ajxxkDrawer {
+  width: 100%;
+  height: 100%;
+  /deep/ .el-drawer.rtl {
+    overflow: auto;
+  }
+}
+.header {
+  position: fixed;
+  background: #ffffff;
+  height: 50px;
+  width: 688px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+  border-bottom: 1px solid #eeeeee;
+  z-index: 999;
+
+  .header-title {
+    font-size: 16px;
+    font-family: MicrosoftYaHei;
+    color: #282f3c;
+  }
+
+  .header-close {
+    width: 20px;
+    height: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      cursor: pointer;
+      width: 20px;
+      height: 14px;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/views/AllPersonnelBase/modules/ryxxk.vue

 <template>
   <div>
     <el-drawer
+      class="ryxxkDrawer"
       title="标题"
       :visible.sync="drawer"
       :direction="direction"
       :before-close="handleClose"
       :with-header="false"
       :modal='false'
+      append-to-body
+      size='36%'
     >
-      <span>我来啦!</span>
+      <div class="header">
+        <div class="header-title">人员档案信息</div>
+        <div
+          class="header-close"
+          @click="closeDrawer"
+        >
+          <svg
+            class="icon"
+            aria-hidden="true"
+          >
+            <use xlink:href="#icon-fanhui"></use>
+          </svg>
+        </div>
+      </div>
+
     </el-drawer>
   </div>
 </template>
@@ -38,14 +55,68 @@ export default {
     isShowRyxxk (newVal, oldVal) {
       this.drawer = newVal;
     },
-    dialogVisible (val) {
-      //console.log(this.dialogVisible, 123)
-      this.$emit('closeGz', this.dialogVisible);
+    drawer (val) {
+      this.$emit('closeRyxxk', this.drawer);
     }
   },
   methods: {
+    handleClose (done) {
+      console.log(1111111111111111)
+      // this.$confirm('确认关闭？')
+      //   .then(_ => {
+      //     done();
 
+      //   })
+      //   .catch(_ => { });
+      this.drawer = false
+      this.$emit('closeRyxxk', this.drawer);
+    },
+    closeDrawer () {
+      this.drawer = false
+      this.$emit('closeRyxxk', this.drawer);
+    }
   }
 };
 </script>
+<style lang="scss" scoped>
+.ryxxkDrawer {
+  width: 100%;
+  height: 100%;
+  /deep/ .el-drawer.rtl {
+    overflow: auto;
+  }
+}
+.header {
+  position: fixed;
+  background: #ffffff;
+  height: 50px;
+  width: 688px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+  border-bottom: 1px solid #eeeeee;
+  z-index: 999;
 
+  .header-title {
+    font-size: 16px;
+    font-family: MicrosoftYaHei;
+    color: #282f3c;
+  }
+
+  .header-close {
+    width: 20px;
+    height: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      cursor: pointer;
+      width: 20px;
+      height: 14px;
+      overflow: hidden;
+    }
+  }
+}
+</style>