|
|
|
|
@ -1,7 +1,7 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<img class="sth bg" src="@/assets/img/integrated-counter-bg.png" alt="" /> |
|
|
|
|
<img class="sth guide" src="@/assets/img/guide.png" alt="" /> |
|
|
|
|
<!-- <img class="sth guide" src="@/assets/img/guide.png" alt="" /> --> |
|
|
|
|
<img class="sth man" src="@/assets/img/man.png" alt="" /> |
|
|
|
|
<img class="sth counter" src="@/assets/img/counter.png" alt="" /> |
|
|
|
|
<img class="sth glass" src="@/assets/img/glass.png" alt="" /> |
|
|
|
|
@ -9,7 +9,7 @@ |
|
|
|
|
<!-- 系统录入 --> |
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img style="height: 178px" src="@/assets/img/tooltip/system.png" alt="" /> |
|
|
|
|
<img style="height: 178px;position:relative;top:-450px;right:20px" src="@/assets/img/tooltip/system.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img @click="showManage" class="sth computer cp" src="@/assets/img/computer.png" alt="" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
@ -18,21 +18,21 @@ |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/cpl.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth summons cp" src="@/assets/img/summons.png" alt="" /> |
|
|
|
|
<img class="sth summons cp" src="@/assets/img/summons.png" alt="" @click="showData('传票箱')" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/ptpzx.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth voucher-box cp" src="@/assets/img/voucher-box.png" alt="" /> |
|
|
|
|
<img class="sth voucher-box cp" src="@/assets/img/voucher-box.png" alt="" @click="showData('普通凭证箱')" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top-start" popper-class="sth-popper" offset="250"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/zk.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth important cp" src="@/assets/img/important.png" alt="" /> |
|
|
|
|
<img class="sth important cp" src="@/assets/img/important.png" alt="" @click="showData('重要空白凭证箱')" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="left-start" popper-class="sth-popper"> |
|
|
|
|
@ -46,99 +46,153 @@ |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/yzh.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth seal-box cp" src="@/assets/img/seal-box.png" alt="" /> |
|
|
|
|
<img class="sth seal-box cp" src="@/assets/img/seal-box.png" @click="showData('印章盒')" alt="" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/ycj.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth currency-detector cp" src="@/assets/img/currency-detector.png" alt="" /> |
|
|
|
|
<img class="sth currency-detector cp" src="@/assets/img/currency-detector.png" @click="showData('验钞机')" alt="" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-400"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/dyj.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth printer cp" src="@/assets/img/printer.png" alt="" /> |
|
|
|
|
<img class="sth printer cp" src="@/assets/img/printer.png" alt="" @click="showData('打印机')" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="50"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/mmq.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth cipher-machine cp" src="@/assets/img/cipher-machine.png" alt="" /> |
|
|
|
|
<img class="sth cipher-machine cp" src="@/assets/img/cipher-machine.png" @click="showData('密码器')" alt="" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<img class="sth employee" src="@/assets/img/employee.png" alt="" /> |
|
|
|
|
<p class="employeeText">资料</p> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-50"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/data.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<p class="employeeText" @click="showData('资料')">资料</p> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="00"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/skj.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt="" /> |
|
|
|
|
<img class="sth card-machine cp" src="@/assets/img/card-machine.png" alt="" @click="showData('刷卡器')" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<el-tooltip placement="top" popper-class="sth-popper" offset="-100"> |
|
|
|
|
<div slot="content"> |
|
|
|
|
<img src="@/assets/img/tooltip/sfz.png" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
<img class="sth idCard-scanner cp" src="@/assets/img/idCard-scanner.png" alt="" /> |
|
|
|
|
<img class="sth idCard-scanner cp" src="@/assets/img/idCard-scanner.png" @click="showData('身份证扫描仪')" alt="" /> |
|
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
<div class="goods-dia" :class="{ active: showGoods }"> |
|
|
|
|
<img src="@/assets/img/idCard.png" alt="" /> |
|
|
|
|
<img src="@/assets/img/open-account.png" alt="" /> |
|
|
|
|
<img src="@/assets/img/cash.png" alt="" /> |
|
|
|
|
<!-- 物品栏 --> |
|
|
|
|
<div ref="goods" class="goods-dia" :class="{ active: showGoods }"> |
|
|
|
|
<div :id="item.name" v-for="(item, index) in goods" :key="index" :class="{ checked: checkList.includes(item.id),file:true }" @click="dblClickFn(item,'goods')"> |
|
|
|
|
<img :style="item.name==='开户申请书'?'margin-top:10px;':''" :src="item.src" alt="" /> |
|
|
|
|
<p>{{item.name}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="goods" :class="{ active: showGoods }" @click="toggleGoods"> |
|
|
|
|
<span>物品栏</span> |
|
|
|
|
<img class="icon" src="@/assets/svg/arrow-right.svg" alt="" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
|
:visible.sync="dataVisible" |
|
|
|
|
width="1280px" |
|
|
|
|
@close="closeData" |
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
:show-close="false" |
|
|
|
|
custom-class="data-dia" |
|
|
|
|
> |
|
|
|
|
<div slot="title" class="dia-header"> |
|
|
|
|
<div class="data-title">{{ dataTitle }}</div> |
|
|
|
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closeDataDia" /> |
|
|
|
|
</div> |
|
|
|
|
<p class="tips">- 请单击选中所需材料、双击可放大预览 -</p> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li :class="{ checked: checkList.includes(1) }" @click="checkData(1)"> |
|
|
|
|
<img src="@/assets/img/idCard-sm.png" alt="" /> |
|
|
|
|
<p>身份证</p> |
|
|
|
|
</li> |
|
|
|
|
<li :class="{ checked: checkList.includes(2) }" @click="checkData(2)"> |
|
|
|
|
<img src="@/assets/img/idCard-copy-sm.png" alt="" /> |
|
|
|
|
<p>身份证复印件</p> |
|
|
|
|
</li> |
|
|
|
|
<li :class="{ checked: checkList.includes(3) }" @click="checkData(3)"> |
|
|
|
|
<img style="margin-top: 0" src="@/assets/img/open-account-apply-sm.png" alt="" /> |
|
|
|
|
<p>开户申请书</p> |
|
|
|
|
</li> |
|
|
|
|
<li :class="{ checked: checkList.includes(4) }" @click="checkData(4)"> |
|
|
|
|
<img style="margin-top: 32px" src="@/assets/img/cash-sm.png" alt="" /> |
|
|
|
|
<p>现金</p> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<!-- 硬件交互--弹框 --> |
|
|
|
|
<div v-show="showPop" width="1280px" class="data-dia"> |
|
|
|
|
<div class="dia-header"> |
|
|
|
|
<div class="data-title">{{ popText }}</div> |
|
|
|
|
<img class="close" src="@/assets/svg/close.svg" alt="" @click="closePop" /> |
|
|
|
|
</div> |
|
|
|
|
<p v-if="popText=='密码器'" class="tips"></p> |
|
|
|
|
<p v-else-if="popText=='重要空白凭证箱'||popText=='普通凭证箱'" class="tips">- 请从以下物品中选取所需材料 -</p> |
|
|
|
|
<p v-else class="tips">- 请从物品栏选中或拖拽所需材料 -</p> |
|
|
|
|
|
|
|
|
|
<div v-if="popText==='密码器'" style="min-height:204;width:800px;padding-right:150px;padding-top:50px"> |
|
|
|
|
<el-form :model="passwordForm" :rules="passwordRules" ref="form" label-width="180px"> |
|
|
|
|
<el-form-item label="密码" prop="password"> |
|
|
|
|
<el-input v-focus v-model="passwordForm.password" maxlength="6" onkeyup="this.value=this.value.replace(/[^19]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" autocomplete="off"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="确认密码" prop="passwordAgain"> |
|
|
|
|
<el-input :disabled="!passwordForm.password||passwordForm.password.length!=6" v-model="passwordForm.passwordAgain" maxlength="6" onkeyup="this.value=this.value.replace(/[^19]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" autocomplete="off"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-else-if="popText==='印章盒'" class="seal" style="width:1200px;"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<div v-for="(item, index) in sealArr" :key="index" :class="{ checked: sealChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
|
|
|
<img :src="item.src" alt="" /> |
|
|
|
|
<p>{{item.name}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="box right" ref="goods"> |
|
|
|
|
<div v-for="(item, index) in goods" :key="index" :class="{ checked: checkList.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
|
|
|
<img :src="item.src" alt="" /> |
|
|
|
|
<p>{{item.name}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-else-if="popText==='重要空白凭证箱'" class="seal" style="width:1200px;"> |
|
|
|
|
<div class="left else"> |
|
|
|
|
<div v-for="(item, index) in importanceArr" :key="index" :class="{ checked: importantChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
|
|
|
<img :src="item.src" alt="" /> |
|
|
|
|
<p>{{item.name}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div v-else-if="popText==='普通凭证箱'" class="seal" style="width:1200px;"> |
|
|
|
|
<div class="left else"> |
|
|
|
|
<div v-for="(item, index) in commonArr" :key="index" :class="{ checked: commonChecked.includes(item.id),file:true }" @click="dblClickFn(item)"> |
|
|
|
|
<img :src="item.src" alt="" /> |
|
|
|
|
<p>{{item.name}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 暂时未确定是否公共使用一个弹框 --> |
|
|
|
|
<div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框 --> |
|
|
|
|
<div class="img-wrap" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" v-for="(item, index) in popArr" :key="index" v-if="checkList.includes(item.id)" > |
|
|
|
|
<img :src="item.src" class="file" alt="" /> |
|
|
|
|
<p class="text">{{item.name}}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="dia-footer"> |
|
|
|
|
<button type="button">确定</button> |
|
|
|
|
<button v-throttle @click="popSure" type="button">确定</button> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 蒙版 --> |
|
|
|
|
<div v-show="showPop" class="masking"></div> |
|
|
|
|
|
|
|
|
|
<!-- 商业银行系统的全屏功能实现 --> |
|
|
|
|
<div :class="full ? 'fullScreenSystem' : 'system'" v-if="manageVisible"> |
|
|
|
|
<router-view></router-view> |
|
|
|
|
</div> |
|
|
|
|
<el-dialog |
|
|
|
|
custom-class="data-dia" |
|
|
|
|
:visible.sync="showImg" |
|
|
|
|
width="45%" |
|
|
|
|
> |
|
|
|
|
<img :src="imgSrc" class="imgPop" alt=""> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { mapState } from 'vuex'; |
|
|
|
|
import Sortable from 'sortablejs' |
|
|
|
|
|
|
|
|
|
import manage from '../../manage/index'; |
|
|
|
|
export default { |
|
|
|
|
name: 'index', |
|
|
|
|
@ -146,19 +200,116 @@ export default { |
|
|
|
|
manage: manage |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
var validatePass = (rule, value, callback) => { |
|
|
|
|
if (value === '') { |
|
|
|
|
callback(new Error('请输入密码')); |
|
|
|
|
} else { |
|
|
|
|
if (this.passwordForm.password&&/^[0-9]*$/.test(this.passwordForm.password)&&this.passwordForm.password.length===6) { |
|
|
|
|
this.$refs.passwordForm.validateField('password'); |
|
|
|
|
callback(); |
|
|
|
|
}else{ |
|
|
|
|
callback(new Error('请注意密码格式以及密码长度')) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
var validatePass2 = (rule, value, callback) => { |
|
|
|
|
if (value === '') { |
|
|
|
|
callback(new Error('请再次输入密码')); |
|
|
|
|
} else if (value !== this.passwordForm.password) { |
|
|
|
|
callback(new Error('两次输入密码不一致!')); |
|
|
|
|
} else { |
|
|
|
|
callback(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
return { |
|
|
|
|
showGoods: false, |
|
|
|
|
dataTitle: '', |
|
|
|
|
dataVisible: false, |
|
|
|
|
manageVisible: false, // 显示系统录入 |
|
|
|
|
checkList: [] |
|
|
|
|
// fullScreen:this.$store.state.layout.fullScreen,// 是否全屏显示--未写完 |
|
|
|
|
checkList: [],// 物品栏选中 |
|
|
|
|
|
|
|
|
|
elseBoxCheck:[],/* 所有其他可从物品栏拖拽物品进入的弹框 */ |
|
|
|
|
// goods:[/* 物品栏物品 */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// ], |
|
|
|
|
popArr:[/* 弹窗展示的物品 */ |
|
|
|
|
{name:'银行卡',src:require('@/assets/img/seal/paid.png'),id:'银行卡'}, |
|
|
|
|
{name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:'定期存单'}, |
|
|
|
|
{name:'预留印签卡',src:require('@/assets/img/seal/paid.png'),id:'预留印签卡'}, |
|
|
|
|
{name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:'转账支票'}, |
|
|
|
|
{name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:'银行承兑汇票'}, |
|
|
|
|
{name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:'现金支票'}, |
|
|
|
|
// {name:'存款凭条',src:require('@/assets/img/seal/paid.png'),id:'存款凭条'}, |
|
|
|
|
{name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:'取款凭条'}, |
|
|
|
|
{name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:'转账凭条'}, |
|
|
|
|
{name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:'业务收费凭证'}, |
|
|
|
|
{name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:'利息清单'}, |
|
|
|
|
{name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:'普通空白凭证'}, |
|
|
|
|
{name:'身份证',src:require('@/assets/img/goods/idcard.png'),id:'身份证'}, |
|
|
|
|
{name:'身份证复印件',src:require('@/assets/img/idCard-copy-sm.png'),id:'身份证复印件'}, |
|
|
|
|
{name:'开户申请书',src:require('@/assets/img/goods/khsqs.png'),id:'开户申请书'}, |
|
|
|
|
{name:'现金',src:require('@/assets/img/goods/cash-sm.png'),id:'现金'}, |
|
|
|
|
{name:'存款凭条',src:require('@/assets/img/goods/ckpt.png'),id:'存款凭条'}, |
|
|
|
|
|
|
|
|
|
], |
|
|
|
|
sealArr:[/* 印章盒物品 */ |
|
|
|
|
{name:'收讫章',src:require('@/assets/img/seal/paid.png'),id:'收讫章'}, |
|
|
|
|
{name:'销户章',src:require('@/assets/img/seal/closing.png'),id:'销户章'}, |
|
|
|
|
{name:'私章',src:require('@/assets/img/seal/personal.png'),id:'私章'}, |
|
|
|
|
{name:'附件章',src:require('@/assets/img/seal/accessory.png'),id:'附件章'}, |
|
|
|
|
{name:'付讫章',src:require('@/assets/img/seal/paid.png'),id:'付讫章'}, |
|
|
|
|
{name:'业务专用章',src:require('@/assets/img/seal/business.png'),id:'业务专用章'}, |
|
|
|
|
{name:'转讫章',src:require('@/assets/img/seal/Transfer.png'),id:'转讫章'}, |
|
|
|
|
], |
|
|
|
|
importanceArr:[/* 重要空白凭证 */ |
|
|
|
|
{name:'银行卡',src:require('@/assets/img/seal/paid.png'),id:'银行卡'}, |
|
|
|
|
{name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:'定期存单'}, |
|
|
|
|
{name:'预留印签卡',src:require('@/assets/img/seal/paid.png'),id:'预留印签卡'}, |
|
|
|
|
{name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:'转账支票'}, |
|
|
|
|
{name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:'银行承兑汇票'}, |
|
|
|
|
{name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:'现金支票'}, |
|
|
|
|
], |
|
|
|
|
commonArr:[/* 普通凭证箱 */ |
|
|
|
|
{name:'存款凭条',src:require('@/assets/img/seal/paid.png'),id:'存款凭条'}, |
|
|
|
|
{name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:'取款凭条'}, |
|
|
|
|
{name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:'转账凭条'}, |
|
|
|
|
{name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:'业务收费凭证'}, |
|
|
|
|
{name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:'利息清单'}, |
|
|
|
|
{name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:'普通空白凭证'}, |
|
|
|
|
], |
|
|
|
|
sealChecked:[],/* 印章盒选中 */ |
|
|
|
|
importantChecked:[],// 重要凭证选中 |
|
|
|
|
commonChecked:[],// 普通凭证选中 |
|
|
|
|
passwordForm:{ |
|
|
|
|
password:'', |
|
|
|
|
}, |
|
|
|
|
passwordRules:{ |
|
|
|
|
password:[ |
|
|
|
|
{ validator: validatePass, trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
passwordAgain:[ |
|
|
|
|
{ validator: validatePass2, trigger: 'blur' }, |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
clickNum:0, |
|
|
|
|
showImg:false, |
|
|
|
|
imgSrc:'', |
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
full: function () { |
|
|
|
|
console.log(this.$store.state.layout.fullScreen, '当前full'); |
|
|
|
|
return this.$store.state.layout.fullScreen; |
|
|
|
|
full: function () {// 全屏 |
|
|
|
|
return this.$store.state.system.fullScreen; |
|
|
|
|
}, |
|
|
|
|
showPop:function(){/* 展示弹框 */ |
|
|
|
|
if(!this.showGoods) this.showGoods = this.$store.state.system.showPop |
|
|
|
|
if(!this.showGoods) this.checkList = [] |
|
|
|
|
return this.$store.state.system.showPop; |
|
|
|
|
}, |
|
|
|
|
popText:function(){/* 文字 */ |
|
|
|
|
return this.$store.state.system.popText; |
|
|
|
|
}, |
|
|
|
|
goods:function () {/* 物品栏的物品 */ |
|
|
|
|
return this.$store.state.system.goods |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -173,6 +324,9 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
console.log(/^[0-9]*$/.test('1234'),'/^[0-9]*$/'); |
|
|
|
|
console.log(/^\/d{6}$/.test('124056'),'/^[0-9]*$/'); |
|
|
|
|
|
|
|
|
|
let arr = this.$route.path.split('/').slice(-2); |
|
|
|
|
if (arr.pop() === 'manage' || arr[0] === 'manage') { |
|
|
|
|
this.manageVisible = true; |
|
|
|
|
@ -180,28 +334,196 @@ export default { |
|
|
|
|
this.manageVisible = false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() {}, |
|
|
|
|
mounted(){ |
|
|
|
|
// Promise.resolve(2).then(value => { |
|
|
|
|
// console.log(111, value) |
|
|
|
|
// return value |
|
|
|
|
// }) |
|
|
|
|
// .then(value => { |
|
|
|
|
// console.log(222, value) |
|
|
|
|
// return Promise.resolve(value) |
|
|
|
|
// }) |
|
|
|
|
// .then(value => { |
|
|
|
|
// console.log(333, value) |
|
|
|
|
// }) |
|
|
|
|
// .then(value => { |
|
|
|
|
// console.log(444, value) |
|
|
|
|
// return Promise.reject(value) |
|
|
|
|
// }) |
|
|
|
|
// .then(value => { |
|
|
|
|
// console.log(555, value) |
|
|
|
|
// }).catch(err => { |
|
|
|
|
// console.log(666, err) |
|
|
|
|
// }) |
|
|
|
|
let that = this |
|
|
|
|
// 拖拽-物品栏 |
|
|
|
|
new Sortable(this.$refs.goods, { |
|
|
|
|
animation: 150, |
|
|
|
|
group: { |
|
|
|
|
name:'shared', |
|
|
|
|
pull:'clone',// 是否可以被移出或克隆 |
|
|
|
|
put:false// 禁止拖入 |
|
|
|
|
}, |
|
|
|
|
sort: false,// 禁止排序 |
|
|
|
|
onEnd: function (/**Event*/evt) { // 结束拖拽 |
|
|
|
|
// 判断拖拽的地址 |
|
|
|
|
if(!that.$refs.popUp) return that.$message.warning('非可拖拽的交互！') |
|
|
|
|
let targetDom = that.$refs.popUp.getBoundingClientRect() |
|
|
|
|
if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){ |
|
|
|
|
if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){ |
|
|
|
|
/* oldindex识别是拖拽了哪个文件 */ |
|
|
|
|
console.log(that.goods[evt.oldIndex].name,'执行拖拽2'); |
|
|
|
|
that.checkList.push(that.goods[evt.oldIndex].name) |
|
|
|
|
alert('拉入到物品栏') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
// 拖拽-弹框 |
|
|
|
|
new Sortable(this.$refs.popUp, { |
|
|
|
|
animation: 150, |
|
|
|
|
group: { |
|
|
|
|
name:'shared', |
|
|
|
|
pull:'clone',// 是否可以被移出或克隆 |
|
|
|
|
put:false |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
sort: false,// 禁止排序 |
|
|
|
|
// 结束拖拽 |
|
|
|
|
onEnd: function (/**Event*/evt) { |
|
|
|
|
// console.log(refParamBox,'目标dom',refParamBox.getBoundingClientRect()); |
|
|
|
|
// 判断拖拽的地址 |
|
|
|
|
let targetDom = that.$refs.goods.getBoundingClientRect() |
|
|
|
|
if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){ |
|
|
|
|
if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){ |
|
|
|
|
alert('拉入到弹框') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
toggleGoods() { |
|
|
|
|
this.showGoods = !this.showGoods; |
|
|
|
|
}, |
|
|
|
|
showData(type) { |
|
|
|
|
this.dataTitle = type; |
|
|
|
|
this.dataVisible = true; |
|
|
|
|
showData(type) {/* 展示弹窗-type为弹窗标题文字 */ |
|
|
|
|
this.$store.commit('system/changePop',{show:true,text:type}) |
|
|
|
|
}, |
|
|
|
|
checkData(item) {/* 选中物品 */ |
|
|
|
|
let _this = this |
|
|
|
|
_this.clickNum++; |
|
|
|
|
if (_this.clickNum === 2) { |
|
|
|
|
_this.clickNum = 0; |
|
|
|
|
// 处理双击事件... |
|
|
|
|
_this.showImg = true |
|
|
|
|
_this.imgSrc = item.src |
|
|
|
|
} |
|
|
|
|
setTimeout(function () { |
|
|
|
|
if (_this.clickNum === 1) { |
|
|
|
|
_this.clickNum = 0; |
|
|
|
|
// 处理单击事件... |
|
|
|
|
console.log('单击事件'); |
|
|
|
|
_this.checkList.includes(item.id) ? _this.checkList.splice(_this.checkList.indexOf(item.id), 1) : _this.checkList.push(item.id); |
|
|
|
|
} |
|
|
|
|
}, 200) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
dblClickFn(item,val){/* 选中/预览 单/双击函数 */ |
|
|
|
|
let that = this |
|
|
|
|
this.clickNum++ |
|
|
|
|
if (this.clickNum === 2) { // 处理双击事件 |
|
|
|
|
this.clickNum = 0; |
|
|
|
|
this.showImg = true |
|
|
|
|
this.imgSrc = item.src |
|
|
|
|
} |
|
|
|
|
setTimeout(function () { |
|
|
|
|
let arr |
|
|
|
|
switch (that.popText) { |
|
|
|
|
case '普通凭证箱': arr = that.commonChecked |
|
|
|
|
break; |
|
|
|
|
case '印章盒':arr = that.sealChecked |
|
|
|
|
break; |
|
|
|
|
case '重要空白凭证箱':arr = that.importantChecked |
|
|
|
|
break; |
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
if(val==='goods') arr = that.checkList |
|
|
|
|
if (that.clickNum === 1) {// 处理单击事件 |
|
|
|
|
that.clickNum = 0; |
|
|
|
|
if(that.popText==='印章盒'){ |
|
|
|
|
arr.splice(0,1,item.id) |
|
|
|
|
}else if(val==='goods'&&that.popText==='印章盒'){ |
|
|
|
|
that.checkList.length=0 |
|
|
|
|
that.checkList.push(item.id) |
|
|
|
|
}else{ |
|
|
|
|
arr.includes(item.id) ? arr.splice(arr.indexOf(item.id), 1) : arr.push(item.id); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, 200) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
checkSeal(id) {/* 选中印章 */ |
|
|
|
|
this.sealChecked.includes(id) ? this.sealChecked.splice(this.sealChecked.indexOf(id), 1) : this.sealChecked.push(id); |
|
|
|
|
}, |
|
|
|
|
checkData(id) { |
|
|
|
|
this.checkList.includes(id) ? this.checkList.splice(this.checkList.indexOf(id), 1) : this.checkList.push(id); |
|
|
|
|
checkImportant(id){/* 选中重空凭证 */ |
|
|
|
|
this.importantChecked.includes(id) ? this.importantChecked.splice(this.importantChecked.indexOf(id), 1) : this.importantChecked.push(id); |
|
|
|
|
}, |
|
|
|
|
closeDataDia() { |
|
|
|
|
this.dataVisible = false; |
|
|
|
|
checkCommon(item){/* 选中普通凭证 */ |
|
|
|
|
this.commonChecked.includes(id) ? this.commonChecked.splice(this.commonChecked.indexOf(id), 1) : this.commonChecked.push(id); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
closePop() {// 关闭弹窗 |
|
|
|
|
this.$store.commit('system/changePop',{show:false,text:''}) |
|
|
|
|
}, |
|
|
|
|
closeData() { |
|
|
|
|
this.checkList = []; |
|
|
|
|
}, |
|
|
|
|
// 展示系统管理 |
|
|
|
|
showManage() { |
|
|
|
|
|
|
|
|
|
showManage() {// 展示系统管理 |
|
|
|
|
this.manageVisible = true; |
|
|
|
|
this.$router.push('/counter/list/manage/consumerClient'); |
|
|
|
|
}, |
|
|
|
|
popSure(){/* 弹框-确定 */ |
|
|
|
|
/* |
|
|
|
|
添加文件：处理选中的文件，commit到stor里，提示。 |
|
|
|
|
印章：添加一个字段，判断已盖章的图表 |
|
|
|
|
其他：直接展示已处理，或已完成，且添加处理过的文件到物品栏 |
|
|
|
|
*/ |
|
|
|
|
let arr = [] |
|
|
|
|
if(this.popText==='重要空白凭证箱'||this.popText==='普通凭证箱'){ |
|
|
|
|
let goods,clickList |
|
|
|
|
this.popText==='重要空白凭证箱'?(goods=this.importanceArr,clickList=this.importantChecked):(goods=this.commonArr ,clickList = this.commonChecked) |
|
|
|
|
if(clickList.length===0) return this.$message.warning(`请选择物品后再确定！`) |
|
|
|
|
// 把确定的数据传输进物品栏 |
|
|
|
|
goods.map(e=>{ |
|
|
|
|
clickList.map(el=>{ |
|
|
|
|
if(el===e.id){ |
|
|
|
|
arr.push(e) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
this.$store.commit('system/changeGoods',{push:arr}) |
|
|
|
|
clickList.length = 0 |
|
|
|
|
}else{ |
|
|
|
|
switch (this.popText) {/* 其他物品交互逻辑： */ |
|
|
|
|
case'': |
|
|
|
|
|
|
|
|
|
break; |
|
|
|
|
case'': |
|
|
|
|
|
|
|
|
|
break; |
|
|
|
|
default: |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.$message.success(`${this.popText}操作成功！`) |
|
|
|
|
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
this.$store.commit('system/changePop',{show:false,text:''}) |
|
|
|
|
|
|
|
|
|
},800) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -254,11 +576,16 @@ export default { |
|
|
|
|
} |
|
|
|
|
.employeeText { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 541px; |
|
|
|
|
left: 1263px; |
|
|
|
|
top: 503px; |
|
|
|
|
left: 1229px; |
|
|
|
|
color: #000; |
|
|
|
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
|
|
|
font-size: 18px; |
|
|
|
|
width: 100px; |
|
|
|
|
height: 100px; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 100px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.man { |
|
|
|
|
top: 82px; |
|
|
|
|
@ -364,6 +691,9 @@ export default { |
|
|
|
|
color: #000; |
|
|
|
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
|
|
|
font-size: 18px; |
|
|
|
|
width: 100px; |
|
|
|
|
height: 100px; |
|
|
|
|
cursor: pointer |
|
|
|
|
} |
|
|
|
|
.man { |
|
|
|
|
// 人 |
|
|
|
|
@ -463,6 +793,13 @@ export default { |
|
|
|
|
color: #000; |
|
|
|
|
transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg); |
|
|
|
|
font-size: 18px; |
|
|
|
|
|
|
|
|
|
width: 100px; |
|
|
|
|
text-align: center; |
|
|
|
|
height: 100px; |
|
|
|
|
line-height: 100px; |
|
|
|
|
cursor: pointer |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.man { |
|
|
|
|
// 人 |
|
|
|
|
@ -540,6 +877,7 @@ export default { |
|
|
|
|
width: 94px; |
|
|
|
|
height: 200px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
z-index: 9999; |
|
|
|
|
background: url(../../../assets/img/sth-bg.png) 0 0 / cover no-repeat; |
|
|
|
|
span { |
|
|
|
|
width: 30px; |
|
|
|
|
@ -563,35 +901,89 @@ export default { |
|
|
|
|
} |
|
|
|
|
.goods-dia { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: 100%; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow-x: auto; |
|
|
|
|
position: fixed; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: -100%; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 100%; |
|
|
|
|
padding: 20px 0; |
|
|
|
|
padding: 20px 300px 20px 300px; |
|
|
|
|
transition: all 0.5s; |
|
|
|
|
background-color: rgba(255, 255, 255, 0.7); |
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
min-width: 160px; |
|
|
|
|
height: 160px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; |
|
|
|
|
cursor: pointer; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
img { |
|
|
|
|
margin-top: 40px; |
|
|
|
|
width: 99px; |
|
|
|
|
max-height: 105px; |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
line-height: 54px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
&.checked { |
|
|
|
|
background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat, |
|
|
|
|
url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat; |
|
|
|
|
p { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.active { |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 9999; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
margin-right: 50px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
/deep/.data-dia { |
|
|
|
|
.imgPop{ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.masking{ |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
right: 0; |
|
|
|
|
opacity: .5; |
|
|
|
|
background: #e6e6e6; |
|
|
|
|
z-index: 99; |
|
|
|
|
} |
|
|
|
|
.data-dia { |
|
|
|
|
border-radius: 16px; |
|
|
|
|
margin-top: 11vh !important; |
|
|
|
|
.el-dialog__header { |
|
|
|
|
padding: 0; |
|
|
|
|
border-bottom: 0; |
|
|
|
|
margin-top: 4vh !important; |
|
|
|
|
background: #fff; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0%; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%, 0); |
|
|
|
|
padding: 0 15px 15px; |
|
|
|
|
z-index: 999; |
|
|
|
|
border: 1px solid #e6e6e6; |
|
|
|
|
max-height: 830px; |
|
|
|
|
overflow: auto; |
|
|
|
|
.dia-header { |
|
|
|
|
position: relative; |
|
|
|
|
.data-title { |
|
|
|
|
height:70px; |
|
|
|
|
width: 300px; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
line-height: 72px; |
|
|
|
|
@ -607,26 +999,35 @@ export default { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tips { |
|
|
|
|
margin: 20px 0 100px; |
|
|
|
|
margin: 20px 0 50px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
.list { |
|
|
|
|
width: 940px; |
|
|
|
|
min-height: 204px; |
|
|
|
|
max-height: 360px; |
|
|
|
|
overflow: auto; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
li { |
|
|
|
|
position: relative; |
|
|
|
|
width: 204px; |
|
|
|
|
height: 204px; |
|
|
|
|
text-align: center; |
|
|
|
|
.img-wrap{ |
|
|
|
|
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; |
|
|
|
|
width: 200px; |
|
|
|
|
height: 200px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
margin: 5px 10px; |
|
|
|
|
position: relative; |
|
|
|
|
cursor: pointer; |
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
max-width: 180px; |
|
|
|
|
max-height: 140px; |
|
|
|
|
text-align: center; |
|
|
|
|
margin: 10px 10px ; |
|
|
|
|
img { |
|
|
|
|
margin-top: 45px; |
|
|
|
|
} |
|
|
|
|
@ -639,6 +1040,15 @@ export default { |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.text{ |
|
|
|
|
font-size: 18px; |
|
|
|
|
white-space:nowrap; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 15px; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translate(-50%,0); |
|
|
|
|
} |
|
|
|
|
&.checked { |
|
|
|
|
background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat, |
|
|
|
|
url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat; |
|
|
|
|
@ -648,6 +1058,78 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.seal{ |
|
|
|
|
width: 1100px; |
|
|
|
|
padding: 0 5%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.box{ |
|
|
|
|
border: 2px solid #e6e6e6; |
|
|
|
|
width: 45%; |
|
|
|
|
min-height: 300px; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
.left{ |
|
|
|
|
display: flex; |
|
|
|
|
width: 50%; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
.file { |
|
|
|
|
position: relative; |
|
|
|
|
width: 164px; |
|
|
|
|
height: 164px; |
|
|
|
|
text-align: center; |
|
|
|
|
background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat; |
|
|
|
|
cursor: pointer; |
|
|
|
|
margin: 5px 7px; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
&:nth-child(n>1){ |
|
|
|
|
margin-top: 0; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
width: 130px; |
|
|
|
|
max-height: 108px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
z-index: 9; |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
line-height: 54px; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #000; |
|
|
|
|
} |
|
|
|
|
&.checked { |
|
|
|
|
background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat, |
|
|
|
|
url(../../../assets/svg/checked.svg) 163px 7% / auto no-repeat; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.active { |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 9999; |
|
|
|
|
} |
|
|
|
|
img { |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
margin-left: 5%; |
|
|
|
|
} |
|
|
|
|
.else{ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.dia-footer { |
|
|
|
|
margin-top: 140px; |
|
|
|
|
text-align: center; |
|
|
|
|
|
e
3 years ago
