gongdan/ruoyi-ui-gongdan/src/views/gongdan/kehurenyuan/index.vue

<template>
  <div class="app-container">
    <div >
      <div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0;">
              <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
                <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
               <span style="margin-left: 10px;">搜索条件</span>
              </p>
              <div style="padding-bottom: 0;margin-bottom: 20px;">
                <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="108px">
                  <el-row>

                    <el-col :span="24">
                      <el-col :span="8">
                        <el-form-item label="单位名称" prop="unitName">
                                <el-input
                                  v-model="queryParams.unitName"
                                  placeholder="请输入单位名称"
                                  clearable
                                  @keyup.enter.native="handleQuery"
                                />
                              </el-form-item>
                      </el-col>
                      <el-col :span="8">
                       <el-form-item label="联系方式" prop="staffPhone">
                               <el-input
                                 v-model="queryParams.staffPhone"
                                 placeholder="请输入人员联系方式"
                                 clearable
                                 @keyup.enter.native="handleQuery"
                               />
                             </el-form-item>
                      </el-col>
                      <el-col :span="5">
                        <el-form-item class="butt" style="border: 0;">
                          <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini"  @click="handleQuery">查询 </el-button>
                          <el-button size="mini"  @click="resetQuery">重置</el-button>
                        </el-form-item>
                      </el-col>

                    </el-col>



                  </el-row>

                </el-form>
              </div>
            </div>


      <div class="casr"  >
              <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="1.5">
                  <div style="font-weight: bold;font-size: 14px;color: #343434; display: flex;align-items: center;">
                    当夜全选
                  </div>
                </el-col> -->
                <!-- <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['manage:staffManage:add']"
                  >添加</el-button>
                </el-col> -->
                <!-- <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:post:edit']"
                  >修改</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:post:remove']"
                  >删除</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['manage:staffManage:export']"
                  >导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              <div class=" infinite-list" :style="dynamicStyle">
                <el-row :gutter="10" v-if="staffManageList.length !=0" style="width:100%;margin-left: 0;">
                  <el-col :span="6" v-for="(item,index) in staffManageList" :key="index"  >
                    <!-- @click="isac(item)" -->
                    <div v-if="isshoe"  :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 4px;margin-bottom: 10px;">
                      <div style="display: flex; align-items: center;padding: 15px 20px; position: relative;padding-bottom: 0;">
                      <div style="width: 22%;margin-top: -60px;">
                         <!-- <image-preview :src="item.staffImage" :width="50" :height="50"  style="border-radius:50%;margin-top: -10px;"/> -->
                         <img src="../../../assets/images/icon_htgl_rylb_mrtx.png" alt="" style="width: 50px;height: 50px;border-radius: 50%;" >
                      </div>
                      <div class="haned" style="width: 88%; padding-right: 20px;">
                        <p style="margin-bottom: 5px;">
                          <span style="font-weight: bold;font-size: 16px;color: #161616;margin-left: 15px;margin-right: 10px;">{{item.personName ==null?'暂无数据' : item.personName}}</span>
                          <!-- <img v-hasPermi="['manage:staffManage:edit']" src="../../../assets/images/icon_htgl_rylb_bj.png" alt=""  style="cursor: pointer;" @click="handleUpdate(item)"> -->
                          <!-- <img v-hasPermi="['manage:staffManage:remove']" src="../../../assets/images/icon_htgl_rylb_del.png" alt=""  style="float: right;cursor: pointer;" @click="handleDelete(item)"> -->
                        </p>
                        <div style="display: flex; margin-left: 15px;font-size: 14px;color: #666666;margin-top: 5px;">
                          <p  style="text-align: left; width: 70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" > 电话号码:</p>
                          <p style="width: 62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left: 5px;font-size: 14px;color: #666666;">
                            {{item.phonenumber ==null?'暂无数据' : item.phonenumber}}
                          </p>
                        </div>
                        <div style="display: flex; margin-left: 15px;font-size: 14px;color: #666666;margin-top: 5px;">
                          <p style="width: 70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" >单位名称:</p>
                          <el-tooltip class="item" effect="dark" :content="item.unitName ==null?'暂无数据' : item.unitName" placement="top-start">
                          <p style="width: 62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left: 5px;font-size: 14px;color: #666666;">
                            {{item.unitName ==null?'暂无数据' : item.unitName}}
                          </p>
                          </el-tooltip>
                        </div>
                        <div style=" display: flex; margin-left: 15px;font-size: 14px;color: #666666;margin-top: 5px;">

                          <p style="width: 70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">详细地址:</p>
                          <el-tooltip class="item" effect="dark" :content="item.detailedAddress ==null?'暂无数据' : item.city + item.region +item.detailedAddress" placement="top-start">
                          <p style="width: 62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left: 5px;font-size: 14px;color: #666666;">
                            {{item.detailedAddress ==null?'暂无数据' : (item.city + item.region +item.detailedAddress)}}
                          </p>
                          </el-tooltip>
                        </div>



                      </div>




                      </div>
                       <!-- <div class="weit">
                                              <p>开发部</p>
                                              <p>白名单</p>
                                            </div> -->


                     <!-- <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;"> -->
                     <div class="bortt tongty" style="justify-content: space-between; margin-top: 0;">
                        <p style="cursor: pointer;" @click="handleUpdate(item)"><span  >查看</span></span>  </p>
                       <!-- <span @click="handleUpdatef(item)">查看</span> -->
                       <p  v-hasPermi="['basic:info:remove']" style="color:red;cursor: pointer;" @click="handleDelete(item)">删除  </p>
                     </div>
                    </div>
                  </el-col>
                </el-row>
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="staffManageList.length ==0">
                   <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
                </div>
              </div>
      </div>



      <paginations
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="20" class="ite">
              <el-col :span="16">
                <el-col :span="24">
                  <el-form-item label="人员姓名" prop="staffName">
                            <el-input v-model="form.staffName" placeholder="请输入人员姓名" />
                          </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="人员联系方式" prop="staffPhone">
                            <el-input v-model="form.staffPhone" placeholder="请输入人员联系方式" />
                          </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="紧急联系人" prop="emergencyContact">
                           <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" />
                         </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="紧急联系人手机" prop="emergencyContactPhone">
                            <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系人手机" />
                          </el-form-item>
                </el-col>
              </el-col>


              <el-col :span="8" class="sgwe unimg" style="border: 1px solid #F8F8F8;height: 235px;">
                  <div style=" margin:10px 0; font-weight: bold;font-size: 14px;color: #333333;text-align: center;">人脸照片</div>

                  <image-uploadr :limit="1" v-model="form.staffImage"/>
                  <div style="font-weight: bold;font-size: 14px;color: #03BF8A;text-align: center;margin-top: 10px;" @click="openClick">点击拍照</div>
                  <!-- onTake -->
              </el-col>

               <!-- <el-col :span="24"> -->


               <!-- </el-col> -->
              </el-col>
            </el-row>

          </el-form>
         <div slot="footer" class="dialog-footer">
                       <el-button style="background-color:#03BF8A ; border-color: #03BF8A;" type="primary" @click="submitForm">确 定</el-button>
                       <el-button style="background-color:#DDEBE7 ; border-color: #DDEBE7; color: #475669;" @click="cancel">取 消</el-button>
                     </div>
        </el-dialog>
        <photo ref="photo" v-model="form.staffImage" :title="'图片拍照上传'" />
                   <!--开启摄像头的弹窗-->
                  <!-- <div class="info2" @click="onTake">
                     <el-image :src="form.url" style="padding-left: 200px;width: 600px; height:400px"></el-image>
                   </div> -->
                   <!--开启摄像头的拍照和-->
                   <el-dialog title="拍照上传" :visible.sync="visible" @close="onCancel1" width="1065px" append-to-body>
                     <div class="box">
                       <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
                       <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
                     </div>
                     <div slot="footer">
                       <el-button @click="drawImage" icon="el-icon-camera" size="small">
                         拍照
                       </el-button>
                       <el-button v-if="os" @click="getCompetence" icon="el-icon-video-camera" size="small">
                         打开摄像头
                       </el-button>
                       <el-button v-else @click="stopNavigator" icon="el-icon-switch-button" size="small">
                         关闭摄像头
                       </el-button>
                       <el-button @click="resetCanvas" icon="el-icon-refresh" size="small">
                         重置
                       </el-button>
                       <el-button @click="onCancel" icon="el-icon-circle-close"
                                  v-hasPermi="['system:oss:upload']"
                                  type="primary" size="small">
                         完成
                       </el-button>
                     </div>
                   </el-dialog>

  </div>
</template>

<script>
const defaultSettings = require("@/settings.js");
import { listStaffManage, getStaffManage, delStaffManage, addStaffManage, updateStaffManage,unploa } from "@/api/system/staffManage"
export default {
   name: "ResidentInfo",
    dicts: ['affiliation_personnel', 'sys_yes_no', 'gender','zhuhu_type', 'relationship_householder','renzhen_sh'],
  data() {
    return {
     // 遮罩层
          // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 人员管理表格数据
                staffManageList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                  pageNum: 1,
                  pageSize: 10,
                  staffName: null,
                  staffPhone: null,
                  emergencyContact: null,
                  emergencyContactPhone: null,
                  staffImage: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                  staffName: [
                            { required: true, message: "不能为空", trigger: "blur" }
                          ],
                  staffPhone: [
                      { required: true, message: "不能为空", trigger: "blur" },
                                       {
                                         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                                         message: "请输入正确的手机号码",
                                          trigger: "blur"
                                         }
                  ],

                },
      activeName:'first',
      videoState: false, // 视频播放状态
      poster:true,
      controls:true,
      videoData:{},
       player: null,
       isshoe:true,
       tableMaxHeight:'200',
       tenantListtw:[],
       houseInfoLisen:[],
       isxin:false,
      imgSrc: "",
              visible: false,//弹窗
              loading: false,//上传按钮加载
              open: false,//控制摄像头开关
              thisVideo: null,
              thisContext: null,
              thisCancas: null,
              videoWidth: 500,
              videoHeight: 400

    };
  },
  computed: {
    dynamicStyle() {
      return {
        overflow:'auto',
        height: this.tableMaxHeight+ 'px',
        paddingTop:'10px'
      }
    }
    },
  created() {
    // if(this.$route.query.id != undefined){
    //    this.queryParams.houseId = this.$route.query.id  - 0
    // }
    // this.usename = this.$store.state.user.name
    this.getList();

 window.onresize = () => {
 	      this.changeTableMaxHeight()
 	    }
 	    this.changeTableMaxHeight()
 },
 mounted() {
 	window.onresize = () => {
 	          this.changeTableMaxHeight()
 	        }
 	        this.changeTableMaxHeight()
 },
  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    },
  methods: {
    openClick() {
            this.$refs['photo'].dialogPhotoVisible = true
        },
    /** 查询岗位列表 */
    getList() {
   this.loading = true;
      listStaffManage(this.queryParams).then(response => {
        this.staffManageList   = response.rows;
        this.staffManageList  .filter(rou=>{
          rou.imges = []
          if(rou.idCardFront != null && rou.idCardFront != ''){
            rou.imges.push(rou.idCardFront)
          }
          if(rou.idCardBack != null && rou.idCardBack != ''){
            rou.imges.push(rou.idCardBack)
          }
          rou.isnum = false
        })
        this.total = response.total;
        this.loading = false;
      });
    },

     shiegw(val){
       console.log(val)
       	var _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
       	// var _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
       	// 校验身份证：
       	// return (_IDRe18.test(idNo) || _IDre15.test(idNo)) ? true : false;
        if(_IDRe18.test(this.form.residentIdCard) == true){
          let sge = this.getInfo( this.form.residentIdCard)
          this.form.yearsOld = sge.age
          this.form.residentGender = sge.sex + ''
          this.form.residentBirthday = sge.birth
          console.log(sge)
        }

     },

   uploadedSuccessfully(row){
     console.log('上传重构',row)
     if(row.length !=0){
       row.filter(ru=>{
         this.form.residentName = ru.realName
         this.form.residentIdCard = ru.idCard
         let sge = this.getInfo( this.form.residentIdCard)
         this.form.yearsOld = sge.age
         this.form.residentGender = sge.sex + ''
         // this.form.residentBirthday = sge.birth
       })

     }
   },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
   this.form = {
           staffId: null,
           staffName: null,
           staffPhone: null,
           emergencyContact: null,
           emergencyContactPhone: null,
           staffImage: null,
           delFlag: null,
           createBy: null,
           createTime: null,
           updateBy: null,
           updateTime: null,
           remark: null
         }
      this.resetForm("form");
    },
     /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm")
          this.handleQuery()
        },
    // 多选框选中数据
       handleSelectionChange(selection) {
         this.ids = selection.map(item => item.staffId)
         this.single = selection.length!==1
         this.multiple = !selection.length
       },
    /** 新增按钮操作 */
        handleAdd() {
          this.reset()
          this.open = true
          this.title = "添加人员管理"
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset()
          const staffId = row.staffId || this.ids
          getStaffManage(staffId).then(response => {
            this.form = response.data
            this.open = true
            this.title = "修改人员管理"
          })
        },
    /** 提交按钮 */
        submitForm() {

          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.staffId != null) {
                updateStaffManage(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功")
                  this.open = false
                  this.getList()
                })
              } else {
                addStaffManage(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功")
                  this.open = false
                  this.getList()
                })
              }
            }
          })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
          const staffIds = row.staffId || this.ids
          this.$modal.confirm('是否确认删除人员管理编号为"' + staffIds + '"的数据项？').then(function() {
            return delStaffManage(staffIds)
          }).then(() => {
            this.getList()
            this.$modal.msgSuccess("删除成功")
          }).catch(() => {})
        },
    /** 导出按钮操作 */
       handleExport() {
         this.download('manage/staffManage/export', {
           ...this.queryParams
         }, `staffManage_${new Date().getTime()}.xlsx`)
       },

      handleClick(){

      },
    isac(val){
      console.log(5,val)
      val.isnum = !val.isnum
      this.isshoe = false
      this.isshoe = true
    },
    itneg(item){
      this.queryParams.houseId = item.houseId
      this.queryParams.detailedAddress = item.detailedAddress
    },
    itnegadd(item){
      this.form.houseId = item.houseId
      this.form.detailedAddress = item.detailedAddress
    },
    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },

        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 150
          // }
          console.log(height)
        },
     onTake() {
          this.visible = true;
          this.getCompetence();
        },

        /*关闭弹窗，以及关闭摄像头功能*/
        onCancel1() {
          this.visible = false;
          this.stopNavigator(); // 关闭摄像头
        },

        // 调用摄像头权限
        getCompetence() {
          //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点
          this.$nextTick(() => {
            const _this = this;
            this.os = false; //切换成关闭摄像头
            // 获取画布节点
            this.thisCancas = document.getElementById("canvasCamera");
            // 为画布指定绘画为2d类型
            this.thisContext = this.thisCancas.getContext("2d");
            //获取video节点
            this.thisVideo = document.getElementById("videoCamera");
            // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
            if (navigator.mediaDevices === undefined) {
              navigator.menavigatordiaDevices = {};
            }
            // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
            // 使用getUserMedia，因为它会覆盖现有的属性。
            // 这里，如果缺少getUserMedia属性，就添加它。
            if (navigator.mediaDevices.getUserMedia === undefined) {
              navigator.mediaDevices.getUserMedia = function(constraints) {
                // 首先获取现存的getUserMedia(如果存在)
                let getUserMedia =
                  navigator.webkitGetUserMedia ||
                  navigator.mozGetUserMedia ||
                  navigator.getUserMedia;
                // 有些浏览器不支持，会返回错误信息
                // 保持接口一致
                if (!getUserMedia) {
                  return Promise.reject(
                    new Error("getUserMedia is not implemented in this browser")
                  );
                }
                // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
                return new Promise(function(resolve, reject) {
                  getUserMedia.call(navigator, constraints, resolve, reject);
                });
              };
            }
            const constraints = {
              audio: false,
              video: {
                width: _this.videoWidth,
                height: _this.videoHeight,
                transform: "scaleX(-1)"
              }
            };
            navigator.mediaDevices
              .getUserMedia(constraints)
              .then(function(stream) {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in _this.thisVideo) {
                  _this.thisVideo.srcObject = stream;
                } else {
                  // 避免在新的浏览器中使用它，因为它正在被弃用。
                  _this.thisVideo.src = window.URL.createObjectURL(stream);
                }
                _this.thisVideo.onloadedmetadata = function(e) {
                  console.log(e)
                  _this.thisVideo.play();
                };
              })
              .catch(err => {
                console.log(err)
                this.$notify({
                  title: "警告",
                  message: "没有开启摄像头权限或浏览器版本不兼容.",
                  type: "warning"
                });
              });
          });
        },

        //调用摄像头 --- 进行绘制图片
        drawImage() {
          // 点击，canvas画图
          this.thisContext.drawImage(
            this.thisVideo,
            0,
            0,
            this.videoWidth,
            this.videoHeight
          );
          // 获取图片base64链接
          this.imgSrc = this.thisCancas.toDataURL("image/png");

          /*const imgSrc=this.imgSrc;*/
        },
        //清空画布
        clearCanvas(id) {
          let c = document.getElementById(id);
          let cxt = c.getContext("2d");
          cxt.clearRect(0, 0, c.width, c.height);
        },

        //重置画布
        resetCanvas() {
          // this.imgSrc = "";
          this.clearCanvas("canvasCamera");
        },

        //关闭摄像头
        stopNavigator() {
          if (this.thisVideo && this.thisVideo !== null) {
            this.thisVideo.srcObject.getTracks()[0].stop();
            this.os = true; //切换成打开摄像头
          }
        },
        /*调用摄像头拍照结束*/
         /*完成拍照并对其照片进行上传*/
            onCancel() {
              this.visible = false;
              /* this.resetCanvas();*/
              // console.log(this.imgSrc);
               const file = this.imgSrc; // 把整个base64给file
                        const time = (new Date()).valueOf();//生成时间戳
                        const name = time + ".png"; // 定义文件名字（例如：abc.png ， cover.png）
                        const conversions = this.base64ImgtoFile(file, name); // 调用base64转图片方法
                        const data = new FormData();
                        data.append('file', conversions);

              // this.imgFile = this.dataURLtoFile(this.imgSrc, new Date() + ".png");
              // console.log(this.imgFile);
              // this.stopNavigator();
              // // let par = {
              // //   photo: this.imgFile,
              // // };
              // let data = new FormData();
              // data.append("file", this.imgFile); //1是图片，2是视频
              // // data.append("code", this.addForm.code);
              // // checkbeforepersonalphoto上传图片的接口
              unploa(data).then(res => {
                console.log(res)
                if (res.code == "200") {
                  this.$message({
                    message: "上传成功",
                    type: "success"
                  });
                  this.form.url = res.data.url;
                  this.form.osid = res.data.ossId;
                }
              });
            },
         base64ImgtoFile(dataurl, filename = 'file') {
           console.log(dataurl)
           let arr = dataurl.split(',')
           let mime = arr[0].match(/:(.*?);/)[1]
           let suffix = mime.split('/')[1]
           let bstr = atob(arr[1])
           let n = bstr.length
           console.log(bstr)
           let u8arr = new Uint8Array(n)
           while (n--) {
             u8arr[n] = bstr.charCodeAt(n)
           }
           console.log(u8arr)
           console.log(new File([u8arr], `${filename}.${suffix}`, {
             type: mime
           }))
           return new File([u8arr], `${filename}.${suffix}`, {
             type: mime
           })
         },

           dataURLtoFile(dataurl, filename) {
                   let arr = dataurl.split(',');
                   let mime = arr[0].match(/:(.*?);/)[1];
                   let bstr = atob(arr[1]);
                   let n = bstr.length;
                   let u8arr = new Uint8Array(n);
                   while (n--) {
                     u8arr[n] = bstr.charCodeAt(n)
                   }
                   console.log(new File([u8arr], filename, {type: mime}))
                   return new File([u8arr], filename, {type: mime})
                 },




  }
};
</script>
<style  lang="scss">
  .ite{
    .el-form-item{
      margin-bottom: 30px;
    }
  }
  .ingsek{
   .el-carousel__container{
  	 height: 150px;
   }
   .el-carousel--horizontal{
     width: 100%;
   }
  }
  .shefnze{
    .el-upload--picture-card{
      width: 80px;
      height: 80px;
      line-height: 80px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 80px;
      height: 80px;
    }
    .el-upload__tip{
      overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
  }
  .ngeshimg{
    .el-upload--picture-card{
      width: 36px;
      height: 36px;
      line-height: 36px;
      position: absolute;
      top:0;
      right: 0;
    }
    .component-upload-image{
      position: absolute;
      top:0;
      right: 0;
    }
    .el-upload--picture-card i{
      font-size: 20px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 58px;
      height: 36px;
      position: absolute;
      top:0;
      right: -10px;
    }
  }
  .unimg{
    .el-upload--picture-card{
      width:140px;
      height: 160px;
      margin-left: 15px;
      // line-height: 102px;
      background-color:#f8f8f8;
      border: 0;
    }
   .el-upload-list--picture-card .el-upload-list__item{
       margin-left: 15px;
    }
  }

  .bnjle{
    margin-left: 20px;
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
    }
  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    p{
      margin: 0;
      font-weight: 800;
      font-size: 16px;
      color: #161616;
      margin-top: 10px;
      margin-bottom: 3px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
    }
    p:nth-child(2){

    }
  }
  .ingwe{
    border: 2px solid #196CFF;
  }
  .renyuangs{
    p{
      font-weight: 500;
      font-size: 14px;
      color: #161616;
      padding: 0;
    }
    div{
      font-weight: 500;
      font-size: 14px;
      color: #161616;
      padding: 0;
      display: flex;
    }
  }
  .tongty{
    display: flex;
    align-items: center;
  }
  .bortt{
    border-top: 1px solid #DADADA;
    margin-top: 15px;

    p{
      margin: 0;
      font-weight: bold;
      font-size: 14px;
      color: #5F8BF4;
      width:50%;
      padding: 10px;
      text-align: center;
    }
  }
  .wide{
      width:100% !important;
    }
    .haned{
      flex:1;
      padding-bottom: 15px;
      p{
        margin: 0;
      }
    }
    .weit{
      display: flex;
      padding-left: 85px;
      padding-bottom: 10px;
      margin-top: 10px;
      p{
        margin: 0;
        font-weight: 500;
        font-size: 14px;
        color: #009FE8;
        border-radius: 10px;
        border: 1px solid #009FE8;
        padding: 2px  5px;
        margin-right: 10px;
      }
      p:nth-child(2){
        color: #FFAB2B;
        border: 1px solid #FFAB2B;
      }
    }
  </style>