zhangzl
/
nsgk_mobile
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
移动端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1494 Commits
7 Branches
79 MiB
 
 
Tree: 7929c97c72
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '7929c97c72'
${ noResults }
nsgk_mobile/src/views/homesteadSurvey/add4.vue

667 lines
25 KiB
Raw Blame History 

  1. <template>

  2.   <div class="app-container">

  3.     <van-sticky style="position:relative;">

  4.       <div class="bannerBg">

  5.         <van-nav-bar

  6.           style="background:transparent;border-bottom-width:0;margin-bottom:.5rem;"

  7.           @click-left="goBack()"

  8.           right-text ="首页"

  9.           @click-right="goRightBack()"

  10.         >

  11.           <template #left>

  12.             <van-icon name="arrow-left" size="18" color="#fff" />

  13.           </template>

  14.           <!-- <template #right>

  15.           <van-icon name="map-marked" size="18" color="#fff" />

  16.         </template>-->

  17.           <template #title>

  18.             <p style="color:#fff">入户调查</p>

  19.           </template>

  20.         </van-nav-bar>

  21.       </div>

  22.       <div style="width:95%;left:2.5%;position:absolute;background:#fff;border-radius:15px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: .3rem;top:1.2rem">

  23.         <van-row>

  24.           <van-col span="4" :offset="1" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add'})">

  25.             <van-icon :name="require('../../assets/images/housesteadSurvey/zjd'+(active==1?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>

  26.             <p :style="{color:(active==1?'rgb(34, 183, 242)':'#000')}">宅基地</p>

  27.           </van-col>

  28.           <van-col span="2">

  29.             <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>

  30.           </van-col>

  31.           <van-col span="4"  style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add2'})" >

  32.             <van-icon :name="require('../../assets/images/housesteadSurvey/nhxx'+(active==2?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>

  33.             <p :style="{color:(active==2?'rgb(34, 183, 242)':'#000')}">使用权人</p>

  34.           </van-col>

  35.           <van-col span="2">

  36.             <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>

  37.           </van-col>

  38.           <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add3'})" >

  39.             <van-icon :name="require('../../assets/images/housesteadSurvey/fwxx'+(active==3?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>

  40.             <p  :style="{color:(active==3?'rgb(34, 183, 242)':'#000')}">房屋</p>

  41.           </van-col>

  42.           <van-col span="2">

  43.             <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>

  44.           </van-col>

  45.           <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add4'})">

  46.             <van-icon :name="require('../../assets/images/housesteadSurvey/fsss'+(active==4?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>

  47.             <p :style="{color:(active==4?'rgb(34, 183, 242)':'#000')}">附属物</p>

  48.           </van-col>

  49.         </van-row>

  50.       </div>

  51.     </van-sticky>

  52.     <div style="margin:1.6rem auto 0;width: 95%;">

  53.       <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-bottom: 5px;">附属设施</p>

  54.     </div>

  55.     <van-list

  56.       v-model:loading="loading"

  57.       :finished="finished"

  58.       finished-text="没有更多了"

  59.       :immediate-check="false"

  60.       @load="onRefreshFsss"

  61.     >

  62.     <van-swipe-cell v-for="(item,index) in fssslist" :key="'fsss'+index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:15px auto 0;background:#fff;">

  63.       <div style="padding:15px;">

  64.         <p style="display: flex;align-items: center;">

  65.           <img src="../../assets/images/housesteadSurvey/add03.png" alt="" style="margin-right: 5px;">

  66.           <span style="line-height: 1;font-size: 16px;">{{ formatDict(fssslxList, item.fssslx) }}</span>

  67.         </p>

  68.         <div style="display:flex;line-height:20px;margin-top: 15px;font-size: 14px;color: #999999;">

  69.           <p style="flex:1;text-align:left;">建筑面积(㎡):</p>

  70.           <p  style="flex:1;text-align:right;">{{item.jzmj}}</p>

  71.         </div>

  72.         <div style="display:flex;line-height:20px;margin-top: 5px;font-size: 14px;color: #999999;">

  73.           <p style="flex:1;text-align:left;">建筑物情况:</p>

  74.           <p style="flex:1;text-align:right;">{{ formatDict(jzwqkList, item.jzwqk) }} </p>

  75.         </div>

  76.         <div style="text-align:center;overflow:auto;display: flex;justify-content: center;margin-top: 10px;">

  77.           <p style="width:49%;display: flex;align-items: center;justify-content:center;border: 1px solid #22B7F2;padding: 3px 0;border-radius: 50px;" @click="showPopupzrz(item)">

  78.             <img src="../../assets/images/housesteadSurvey/add02.png" alt="">

  79.             <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;" >查看附属设施信息</span>

  80.           </p>

  81.         </div>

  82.       </div>

  83.       <template #right>

  84.         <van-row style="height: 100%">

  85.           <van-col style="height: 100%">

  86.             <van-button  square type="info" class="delete-button" style="position: relative;" @click="showUploadList(item.id)"><van-icon style="bottom: -3px;"  name="photo-o" size=".4rem" color="#FFFFFF"/>附件</van-button>

  87.           </van-col>

  88.           <van-col style="height: 100%">

  89.             <van-button v-show="permission == 'true'" square type="danger" class="delete-button" @click="deletefsss(item)"><img width="10px" src="../../assets/images/sunVillage_info/list_icon_7.png" alt="">删除</van-button>

  90.           </van-col>

  91.         </van-row>

  92.       </template>

  93.     </van-swipe-cell>

  94.     </van-list>

  95.     <div v-if="permission == 'true' " style=" width:95%;margin:20px auto;display: flex;justify-content: center;">

  96.       <div style="width:100%;text-align:center;overflow:auto;border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: 15px 0px;background: #ffffff;color: #22B7F2;">

  97.         <p style="font-size: 16px;"  @click="showPopupAddzrz()">+ 添加附属设施信息</p>

  98.       </div>

  99.     </div>

  100.     <div  style="width:95%;margin:20px auto;text-align:center;overflow:auto;display: flex;justify-content: space-around;">

  101.       <p v-if="permission == 'true' && zjdzdxx.surveyStatus != '3' && zjdzdxx.surveyStatus != '5'" style="width:32%;border: 1px solid transparent;background: #FA5353;padding: 5px 0;border-radius: 50px;">

  102.         <span style="font-size: 14px;color: #fff;margin-left: 5px;"  @click="ycbj()">异常标记</span>

  103.       </p>

  104.       <p v-if="zjdzdxx.surveyStatus == '4'" style="width:32%;border: 1px solid transparent;background: #FFA500;padding: 5px 0;border-radius: 50px;">

  105.         <span style="font-size: 14px;color: #fff;margin-left: 5px;"  @click="bhyyLook()">驳回原因</span>

  106.       </p>

  107.       <p  v-if="showSh" style="width:32%;border: 1px solid transparent;background: #22B7F2;padding: 5px 0;border-radius: 50px;">

  108.         <span style="font-size: 14px;color: #fff;margin-left: 5px;"  @click="qmqr()">{{qzqr}}</span>

  109.       </p>

  110.       <p v-if = "showDcsh" style="width:32%;border: 1px solid #22B7F2;background: #ffffff;padding: 5px 0;border-radius: 50px;">

  111.         <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;"  @click="dcsh()">调查审核</span>

  112.       </p>

  113.     </div>

  114.     <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"

  115.                close-icon="close">

  116.       <van-row style="margin:0 10%">

  117.         <p class="title" style="margin:20px 0;position:relative;padding-left:20px;font-size:0.5rem">电子签名</p>

  118.       </van-row>

  119.       <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">

  120.         <vue-esign

  121.           ref="esign"

  122.           class="mySign"

  123.           :width="500"

  124.           :height="height"

  125.           :isCrop="signature.isCrop"

  126.           :lineWidth="signature.lineWidth"

  127.           :lineColor="signature.lineColor"

  128.           :bgColor.sync="signature.bgColor"

  129.           v-if="zjdzdxx.surveyStatus == '4' || zjdzdxx.surveyStatus == '2' || !signature.resultImg"

  130.         />

  131.       </div>

  132.         <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="zjdzdxx.surveyStatus == '4' || zjdzdxx.surveyStatus == '2' ||!signature.resultImg"

  133.              style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">

  134.         <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg && zjdzdxx.surveyStatus != '4' && zjdzdxx.surveyStatus != '2'"/>

  135.       <div class="signature-footer"  v-if="zjdzdxx.surveyStatus == '4' || zjdzdxx.surveyStatus == '2' || !signature.resultImg && permission == 'true'">

  136.           <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>

  137.           <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>

  138.       </div>

  139.     </van-popup>

  140.     <van-dialog v-model="ycbzShow" title="异常标记" show-cancel-button   confirmButtonText="保存" cancelButtonText="关闭" confirmButtonColor="#323233" :before-close="onBeforeClose" >

  141.       <van-form  ref="ycbzForm">

  142.       <van-row>

  143.         <van-col span="24">

  144.           <van-field v-model="zjdzdxx.surveyBz" label="异常备注" placeholder="异常备注" input-align="right" :rules="[{ required: true }]" required />

  145.         </van-col>

  146.         <van-col span="12">

  147.         <p style="margin-left: 10%;color: #646566;    font-size: 0.373333rem;">备注图片</p>

  148.         </van-col>

  149.         <van-col span="12">

  150.           <MultiImageUploadComp :value="zjdzdxx.surveyBztp" :uploadDisabled="false"  @fileUpdate="fileUpdate"/>

  151.         </van-col>

  152.       </van-row>

  153.       </van-form>

  154. 

  155.     </van-dialog>

  156. 

  157.     <van-dialog v-model="dcshShow" title="调查审核" show-cancel-button   confirmButtonText="保存" cancelButtonText="关闭" confirmButtonColor="#323233" :before-close="onBeforeCloseSh" >

  158.       <van-form  ref="dcshForm">

  159.         <van-row>

  160.           <van-col span="24">

  161.             <van-field v-model="zjddcsh.auditRemark" label="备注" placeholder="审核备注" input-align="right" />

  162.           </van-col>

  163.           <van-col span="8">

  164.             <p style="margin-left: 10%;color: #646566;    font-size: 0.373333rem;">审核</p>

  165.           </van-col>

  166.           <van-col span="16">

  167.             <van-radio-group v-model="zjddcsh.surveyStatus" direction="horizontal">

  168.               <van-radio name="5">通过</van-radio>

  169.               <van-radio name="4">驳回</van-radio>

  170.             </van-radio-group>

  171.           </van-col>

  172.         </van-row>

  173.       </van-form>

  174. 

  175.     </van-dialog>

  176.     <van-popup v-model:show="showImageList" position="bottom" style="height:40vh;padding:50px 10px 0" closeable

  177.                close-icon="close">

  178.       <p style="color:#000;position:absolute;top:0.426667rem;left:0.426667rem">图片上传</p>

  179.       <div style="width:100%;height:calc( 40vh - 100px);overflow-y: scroll;">

  180. 

  181.         <van-uploader accept="image/*" v-model="uploadImgList" :after-read="beforeReadImageList" @delete="deleteFileImageList" multiple :max-count="50"  />

  182.       </div>

  183.       <van-row justify="space-around" style=" position:fixed;bottom:0;left:0;width:100%;height:50px;text-align: center;">

  184.         <van-col span="12"><van-button type="primary" style="width:100px;" round  @click="qkClick">清空</van-button></van-col>

  185.         <van-col span="12"><van-button type="primary" style="width:100px;" round  @click="submitUploadList(zjdId)">上传</van-button></van-col>

  186.       </van-row>

  187.     </van-popup>

  188.   </div>

  189. </template>

  190. 

  191. <script>

  192. import {attach} from "@/api/onlineHome/homestead/application";

  193. import {getZjdzd,updateZjdzd,zjddcSign} from "@/api/homesteadSurvey/zjdzd";

  194. import MapGisDrawing from "@/components/Map/MapGisDrawing";

  195. import {listFsss,addFsss,updateFsss,delFsss,getFsssZjdDmList,updateFsssStatus} from "@/api/homesteadSurvey/fsss";

  196. import MultiImageUploadComp from "@/components/house/MultiImageUploadComp"

  197. import {uploadFile} from "@/api/homesteadSurvey/zjdzd";

  198. import {attachmentFind} from "@/api/sunVillage_info/homestead/application";

  199. import {systemAttachment} from "@/api/onlineHome/bankAgriculture/paymentApproval";

  200. import {base64Attach} from "@/api/user";

  201. import {Dialog} from "vant";

  202. import $ from "jquery";

  203. export default {

  204.   name: "homesteadAdd",

  205.   components: { MapGisDrawing,MultiImageUploadComp},

  206.   data() {

  207.     return {

  208.       active:4,

  209.       dcshShow:false,

  210.       showesign:false,

  211.       showDcsh:false,

  212.       qzqr:"签名确认",

  213.       showSh:false,

  214.       loading:false,

  215.       finished:false,

  216.       countyhc:1,

  217.       ycbzShow:false,

  218.       permission:false,

  219.       showImageList:false,

  220.       zjdId:null,

  221.       uploadImgList:[],

  222.       uploadImgList1:[],

  223.       bztp:"",

  224.       ycbz:"",

  225.       jzwqkList:[],

  226.       fssslxList:[],

  227.       zjdzdxx:{surveyStatus:"5"},

  228.       zjddcsh:{surveyStatus:"5",auditRemark:""},

  229.       fssslist:[],

  230.       //电子签名

  231.       signature: {

  232.         lineWidth: 6, // 画笔的线条粗细

  233.         lineColor: "#000000", // 画笔的颜色

  234.         bgColor: "", // 画布的背景颜色

  235.         resultImg: "", // 最终画布生成的base64图片

  236.         isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分

  237.       },

  238.     };

  239.   },

  240.   created(){

  241.     this.houseGetDicts("jzwqk").then((response) => {

  242.       this.jzwqkList = response.data;

  243.     });

  244.     this.houseGetDicts("fsss_type").then((response) => {

  245.       this.fssslxList = response.data;

  246.     });

  247. 

  248.     this.zjdzdxx = JSON.parse(localStorage.getItem("zjdzdxxItem"));

  249.     this.permission = localStorage.getItem("executePermission");

  250.     let businessLevel = this.$store.state.user.businessLevel;

  251.     if(this.zjdzdxx.surveySign != null){

  252.       this.signature.resultImg = this.$store.getters.baseRoutingUrl+this.zjdzdxx.surveySign;

  253.     }

  254.     if(this.zjdzdxx.id !== undefined){

  255.       getZjdzd(this.zjdzdxx.id).then((response) => {

  256.         if(response.data.surveyStatus === "3"  && businessLevel === "2"){

  257.           this.showDcsh =  true;

  258.         }

  259.         if(response.data.surveyStatus === '5' || response.data.surveyStatus === '3'){

  260.           this.qzqr = "签名图片";

  261.         }else{

  262.           this.qzqr = "签名确认";

  263.         }

  264.         this.showSh =  true;

  265.       });

  266.       this.getList();

  267.     }

  268.     this.height = window.screen.height * 1.28 - 20;

  269.   },

  270.   mounted(){

  271. 

  272.   },

  273.   methods: {

  274.     getList(){

  275.       let params = {

  276.         zjddm:this.zjdzdxx.zjddm,

  277.         pageNum: this.countyhc+1,

  278.         pageSize:10,

  279.       }

  280.       listFsss(params).then(response => {

  281.         this.fssslist = response.rows;

  282.         if(response.rows.length>0&&response.rows.length<response.total){

  283.           this.countyhc++

  284.           this.loading = false

  285.         }else{

  286.           this.loading = false

  287.           this.finished = true

  288.         }

  289.       });

  290.     },

  291.     fileUpdate(val){

  292.       this.$set(this.zjdzdxx, 'surveyBztp',val.path);

  293.     },

  294.     canvasTTdown() {

  295.       $('#canvasTT').css('display', 'none');

  296.     },

  297.     bhyyLook(){

  298.       if(this.zjdzdxx.auditRemark !== null && this.zjdzdxx.auditRemark !== ''){

  299.         Dialog({ type: 'success', message: this.zjdzdxx.auditRemark });

  300.       }else{

  301.         Dialog({ type: 'success', message: "无"});

  302.       }

  303.     },

  304.     onBeforeCloseSh(action, done){

  305.       if (action === 'confirm') {

  306.         if(this.zjddcsh.surveyStatus === '4') {

  307.           let surveyItem = JSON.parse(localStorage.getItem("surveyItem"));

  308.           this.$set(this.zjddcsh, 'surveyId', surveyItem.id);

  309.         }

  310.         this.$set(this.zjddcsh, 'id', this.zjdzdxx.id);

  311.           updateZjdzd(this.zjddcsh).then(response => {

  312.             if(response.code === 200){

  313.               let _this =this

  314.               _this.$toast({

  315.                 icon: 'success', // 找到自己需要的图标

  316.                 message: '保存成功',

  317.                 duration:"1000",

  318.                 onClose:function(){

  319.                   _this.dcshShow = false;

  320.                   _this.goRightBack();

  321.                 }

  322.               })

  323.             }

  324.           });

  325.       } else {

  326.         return done();

  327.       }

  328. 

  329.     },

  330.     onRefreshFsss(){

  331.       if(this.loading){

  332.         let params = {

  333.           zjddm:this.zjdzdxx.zjddm,

  334.           pageNum: this.countyhc+1,

  335.           pageSize:10,

  336.         }

  337.         listFsss(params).then(response => {

  338.           if(response.rows.length>0&&response.rows.length<response.total){

  339.             response.rows.map(res => {

  340.               this.fssslist.push(res)

  341.             })

  342.             this.countyhc++

  343.             this.loading = false

  344.           }else{

  345.             this.loading = false

  346.             this.finished = true

  347.           }

  348.         });

  349.       }

  350.     },

  351.     goRightBack(){

  352.       this.$router.push({path:'/homesteadSurvey/list'});

  353.     },

  354.     // 清空画板

  355.     handleReset() {

  356.       this.resultImg = null

  357.       if(this.$refs.esign){

  358.         this.$refs.esign.reset();

  359.       }

  360.       $('#canvasTT').css('display', 'block')

  361.     },

  362.     // 生成签字图

  363.     handleGenerate() {

  364.       console.info( this.$refs.esign

  365.         .generate() );

  366.       this.$refs.esign

  367.         .generate() // 使用生成器调用把签字的图片转换成为base64图片格式

  368.         .then((res) => {

  369.           this.signature.resultImg = res;

  370.           let wj = this.dataURLtoBlob(res);

  371.           let surveyItem = JSON.parse(localStorage.getItem("surveyItem"));

  372.           let param = new FormData()  // 创建form对象

  373.           param.append('file', wj)  // 通过append向form对象添加数据

  374.           param.append('id', surveyItem.id)

  375.           param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据

  376.           zjddcSign(param, this.zjdzdxx.zjddm,surveyItem.id).then(response => {

  377.             this.$notify({type: 'success', message: '签字成功'});

  378.             getZjdzd(this.zjdzdxx.id).then((response) => {

  379.               localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))

  380.               location.reload();

  381.             });

  382.           });

  383. 

  384.         })

  385.         .catch((err) => {

  386.           // 画布没有签字时会执行这里提示一下

  387.           this.$toast.fail('请签名后再保存签字');

  388.         });

  389.     },

  390.     formatDict(dict, value) {

  391.       return this.selectDictLabel(dict, value);

  392.     },

  393.     dataURLtoBlob (dataurl, filename = 'file') {

  394.       let arr = dataurl.split(',')

  395.       let mime = arr[0].match(/:(.*?);/)[1]

  396.       let suffix = mime.split('/')[1]

  397.       let bstr = atob(arr[1])

  398.       let n = bstr.length

  399.       let u8arr = new Uint8Array(n)

  400.       while (n--) {

  401.         u8arr[n] = bstr.charCodeAt(n)

  402.       }

  403.       return new File([u8arr], `${filename}.${suffix}`, {

  404.         type: mime

  405.       })

  406.     },

  407.     goBack(){

  408.       if(this.ztMap && this.enterMap ==1){

  409.         if(this.form.id == null){

  410.           this.backMap.backMapZjdAData.theGeom= "";

  411.         }else{

  412.           this.backMap.backMapZjdAData = this.form;

  413.         }

  414.         this.$cookies.set("search",this.backMap);

  415.       } else {

  416.         this.$cookies.set("search","");

  417.       }

  418.       this.$router.push({name: this.$router.back(-1)});

  419.       // }

  420.     },

  421.     showPopupzrz(item){     this.$router.push({name:'fsssAdd',query:item});},

  422.     showPopupAddzrz(){

  423.       this.$router.push({name:'fsssAdd',query:{zjddm:this.zjdzdxx.zjddm}});

  424.     },

  425.     deletefsss(val){

  426.       const ids = val.id || this.ids;

  427.       Dialog.confirm({

  428.         title: '系统提示',

  429.         message: '是否确认删除附属物的数据项?',

  430.         confirmButtonText: '确定',

  431.         cancelButtonText: '取消'

  432.       })

  433.         .then(function() {

  434.           return delFsss(ids);

  435.         }).then(() => {

  436.         this.$notify({ type: 'success' , message: "删除成功" });

  437.         location.reload(true);

  438.       }).catch(() => {});

  439.     },

  440.     qmqr(){

  441.       if(this.zjdzdxx.surveySign != null){

  442.         this.signature.resultImg = this.$store.getters.baseRoutingUrl+this.zjdzdxx.surveySign;

  443.       }

  444.       this.showesign = true;

  445.     },

  446.     ycbj(){

  447.       this.ycbzShow = true;

  448.     },

  449.     // van-dialog 点击confirm事件不自动关闭

  450.     onBeforeClose(action, done) {

  451.       if (action === 'confirm') {

  452.         this.$refs.ycbzForm.validate().then(() => {

  453.           this.$set(this.zjdzdxx, 'surveyStatus', "2");

  454.           updateZjdzd(this.zjdzdxx).then(response => {

  455.             localStorage.setItem("zjdzdxxItem",JSON.stringify(this.zjdzdxx));

  456.             let _this =this

  457.             this.$toast({

  458.               icon: 'success', // 找到自己需要的图标

  459.               message: '保存成功',

  460.               duration:"1000",

  461.               onClose:function(){

  462.                 _this.getList();

  463.               }

  464.             })

  465.             return done(true);

  466.           });

  467.         }).catch(() => {

  468.           return done(false);

  469.         });

  470.       } else {

  471.         return done();

  472.       }

  473.     },

  474.     dcsh(){

  475.       this.$set(this.zjdzdxx, 'surveyStatus', "5");

  476.       this.dcshShow = true;

  477.     },

  478.     showUploadList(id){

  479.       this.getAttachments(id);

  480.       this.showImageList = true;

  481.       this.zjdId = id;

  482.     },

  483.     getAttachments(id) {

  484.       this.uploadImgList = [];

  485.       let cond = {

  486.         tableId: id,

  487.         tableName: 't_homestead_fsss',

  488.         fileType: 0,

  489.       };

  490.       attachmentFind(cond).then(resp => {

  491.         this.uploadImgList = resp.data.map(function(item){

  492.           return {id:item.id,url:'/api'+item.fileUrl,isImage: true}

  493.         });

  494.       });

  495.     },

  496.     deleteFileImageList(file){

  497.       if(file.id !== undefined ){

  498.         systemAttachment(file.id);

  499.       }

  500.     },

  501.     // 图片上传前

  502.     beforeReadImageList(file){

  503.       let _this = this;

  504.       if(file.length!=undefined){

  505.         file.map(res => {

  506.           let zjddm = res.file.name

  507.           //zjddm=zjddm.substring(0,zjddm.lastIndexOf("\("));

  508.           // 创建Canvas对象(画布)

  509.           let canvas =  document.createElement('canvas')

  510.           // 获取对应的CanvasRenderingContext2D对象(画笔)

  511.           let context = canvas.getContext('2d')

  512.           // 创建新的图片对象

  513.           let img = new Image()

  514.           // 指定图片的DataURL(图片的base64编码数据)

  515.           img.src = res.content

  516.           // 监听浏览器加载图片完成，然后进行进行绘制

  517.           img.onload = () => {

  518.             /*const h = img.height

  519.             const w = img.width*/

  520.             let ch = img.height/5

  521.             let cw = img.width/5

  522.             let canvas = document.createElement('canvas')

  523.             let ctx = canvas.getContext('2d')

  524.             canvas.height = ch

  525.             canvas.width = cw

  526.             ctx.clearRect(0,0,cw,ch)

  527.             ctx.drawImage(img,0,0,cw,ch)

  528.             let base_img = canvas.toDataURL('image/jpeg')

  529.             let blobBin = atob(base_img.split(',')[1])

  530.             let d = []

  531.             for (let i=0;i<blobBin.length;i++){

  532.               d.push(blobBin.charCodeAt(i))

  533.             }

  534.             let data2 = new FormData();

  535.             data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));

  536.             uploadFile(data2);

  537.           }

  538.         })

  539.       }else{

  540.         let zjddm = file.file.name

  541.         //zjddm=zjddm.substring(0,zjddm.lastIndexOf("\("));

  542.         // 创建Canvas对象(画布)

  543.         let canvas =  document.createElement('canvas')

  544.         // 获取对应的CanvasRenderingContext2D对象(画笔)

  545.         let context = canvas.getContext('2d')

  546.         // 创建新的图片对象

  547.         let img = new Image()

  548.         // 指定图片的DataURL(图片的base64编码数据)

  549.         img.src = file.content

  550.         // 监听浏览器加载图片完成，然后进行进行绘制

  551.         img.onload = () => {

  552.           /*const h = img.height

  553.           const w = img.width*/

  554.           let ch = img.height/5

  555.           let cw = img.width/5

  556.           let canvas = document.createElement('canvas')

  557.           let ctx = canvas.getContext('2d')

  558.           canvas.height = ch

  559.           canvas.width = cw

  560.           ctx.clearRect(0,0,cw,ch)

  561.           ctx.drawImage(img,0,0,cw,ch)

  562.           let base_img = canvas.toDataURL('image/jpeg')

  563.           let blobBin = atob(base_img.split(',')[1])

  564.           let d = []

  565.           for (let i=0;i<blobBin.length;i++){

  566.             d.push(blobBin.charCodeAt(i))

  567.           }

  568.           let data2 = new FormData();

  569.           data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));

  570.           uploadFile(data2);

  571.         }

  572.       }

  573. 

  574.     },

  575.     qkClick(){

  576.       this.uploadImgList1 = this.uploadImgList;

  577.       for(let i = 0; i < this.uploadImgList1.length; i++){

  578.         if(this.uploadImgList[i].id !== undefined ){

  579.           systemAttachment(this.uploadImgList[i].id);

  580.         }

  581.       }

  582.       this.uploadImgList = [];

  583.     },

  584.     submitUploadList(val){

  585.       let f = []

  586.       for (let i of this.uploadImgList){

  587.         if(i.content !== undefined){

  588.           f.push(i.content)

  589.         }

  590.       }

  591.       if(f.length === 0){

  592.         return this.$toast.fail("请上传照片");

  593.       }

  594.       this.$toast.loading({

  595.         message: "数据处理中",

  596.         forbidClick: true,

  597.         duration: 10000000000,

  598.       });

  599.       let _this = this;

  600.       let file = {

  601.         tableId:val,

  602.         tableName:"t_homestead_fsss",

  603.         bizPath:"upload",

  604.         fileType:"0",

  605.         files: f

  606.       };

  607.       base64Attach(file).then((resp) => {

  608.         this.$toast({

  609.           icon: 'success', // 找到自己需要的图标

  610.           message: '上传成功',

  611.           duration:"1000",

  612.           onClose:function(){

  613.             _this.showImageList = false

  614.           }

  615.         })

  616.       });

  617.     },

  618.   }

  619. }

  620. </script>

  621. 

  622. <style scoped>

  623. >>> .bannerBg{

  624.   width: 100%;

  625.   color:#fff;

  626.   padding:10px;

  627.   background: linear-gradient(134deg,#7ac943 1%, #22b7f2);

  628. }

  629. >>> .van-hairline--bottom::after {

  630.   border-bottom-width: 0;

  631. }

  632. >>> .title:before

  633. {

  634.   content:"";

  635.   width: 6px;

  636.   height: 20PX;

  637.   background: #7ac943;

  638.   border-radius: 3px;

  639.   position:absolute;

  640.   left:0;

  641.   bottom:0;

  642. }

  643. >>> .delete-button {

  644.   height: 100%;

  645. }

  646. >>> .van-swipe-cell__wrapper{

  647.   margin-right:-3px;

  648. }

  649. >>> .label-class .van-collapse-item__title--expanded{

  650.   font-weight: bold;

  651. }

  652. /deep/ .van-nav-bar__text {

  653.   color: #fff;

  654. }

  655. .signature-footer {

  656.   transform: rotate(90deg);

  657.   width: auto;

  658.   position: absolute;

  659.   top: 50%;

  660.   left: 0px;

  661. 

  662. }

  663. .clearBtn {

  664.   margin-left: 15px;

  665. }

  666. </style>