<template>
<div style="height:100%;">
<el-row style="height:100%;position:relative;" :style="{paddingRight:closed?'15px':'0px'}" :gutter="2">
<el-col :span="closed?24:18" style="height:100%">
<!-- <SunscanDialog ref="sunscan" :mode="mode" :params="sunscanParams"></SunscanDialog> -->
<!-- <NewSunscanDialog v-if="scanType == 'new'" ref="sunscan" :mode="mode" :params="sunscanParams"></NewSunscanDialog>
<SunscanDialog v-if="scanType == 'old'" ref="sunscan" :params="sunscanParams"></SunscanDialog> -->
</el-col>
<i :class="closed?'el-icon-d-arrow-left':'el-icon-d-arrow-right'" :style="{right:closed?'0':'calc(25% - 15px)'}" style="position:absolute;top:48%;cursor:pointer;z-index:999;font-weight:bolder" @click="toggleClosed" ></i>
<el-col v-show="!closed" :span="6" style="height:100%;padding-top: 6px;box-sizing: border-box;background: rgb(240, 240, 240);">
<button @click="newContent()">新增批注</button>
<el-table class="table-small" height="calc(100% - 40px)" :data="list" tooltip-effect="dark" fit>
<el-table-column label="日期" min-width="30%" show-overflow-tooltip>
<template slot-scope="scope">
{{format(scope.row.updtim)}}
</template>
</el-table-column>
<el-table-column label="柜员" prop="extkey" min-width="30%" show-overflow-tooltip></el-table-column>
<el-table-column label="批注" prop="note" min-width="25%" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" min-width="15%">
<template slot-scope="scope">
<el-dropdown @command="handleCommand($event,scope.row)">
<i class="el-icon-more"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="view">查看</el-dropdown-item>
<el-dropdown-item command="edit">修改</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-dialog v-dialogDrag :visible="visibleDes" title="批注" destory-on-close v-if="visibleDes" :append-to-body="true" style="z-index: 9999!important;">
<iframe v-if="isWin && visibleDes" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:absolute;visibulity:inherit;top:-50vw;left:-50vh;width:100vw;height:200vh;overflow-y:hidden;z-index:-1;filter:alpha(opacity=0)"></iframe>
<el-form :model="form" ref="form" :rules="rules">
<el-form-item label="批注内容" prop="note">
<el-input v-model="form.note" type="textarea" clearable></el-input>
</el-form-item>
</el-form>
<div style="text-align:right">
<el-button size="small" type="primary" v-if="type != 'view'" @click="add" v-loading="loading">确定</el-button>
<el-button size="small" @click="visibleDes = false">关闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Api from "~/service/Api";
import moment from "moment";
import { setTimeout } from "timers";
export default {
props: {
tradeCode: {
type: String
},
docid: {
type: String
},
date: {
type: String
},
ip: {
type: String
},
port: {
type: String
},
imginr: {
type: String
},
smhinr: {
type: String
},
trnName: {
type: String
},
oper: {
type: String
},
org: {
type: String
},
optionType: {
type: String
},
mode:{
type: String,//scan:批扫 view:查看 bind：绑定
},
scanType:String,//新老影像控件标志
},
//components: { SunscanDialog ,NewSunscanDialog },
data() {
return {
SUCCESS: "AAAAAA",
loading: false,
sunscanParams: {
optionType: "2",
docid: this.docid,
date: this.date,
ip: this.ip,
port: this.port,
imginr: this.imginr,
smhinr: this.smhinr,
trnName: "",
tradeCode: "",
oper: "",
org: ""
},
list: [],
closed:true,
visibleDes: false,
form: {
note: ""
},
rules: {
note: [
{ required: true, message: "批注内容不能为空！", trigger: "blur" }
]
},
type: "add",
inr: "",
isWin: false
};
},
watch: {
tradeCode: {
handler(val) {
if (!val) return;
},
immediate: true
},
ip: {
handler(val) {
if (!val) return;
},
immediate: true
},
port: {
handler(val) {
if (!val) return;
},
immediate: true
},
docid: {
handler(val) {
if (!val) return;
},
immediate: true
},
date: {
handler(val) {
if (!val) return;
},
immediate: true
},
imginr: {
handler(val) {
if (!val) return;
},
immediate: true
},
trnName: {
handler(val) {
if (!val) return;
},
immediate: true
},
oper: {
handler(val) {
if (!val) return;
},
immediate: true
},
org: {
handler(val) {
if (!val) return;
},
immediate: true
}
},
mounted() {
this.isWebScanOpen();
this.getList();
setTimeout(() => {
this.sunscanParams.tradeCode = this.tradeCode;
this.sunscanParams.ip = this.ip;
this.sunscanParams.port = this.port;
this.sunscanParams.docid = this.docid;
this.sunscanParams.date = this.date;
this.sunscanParams.imginr = this.imginr;
this.sunscanParams.smhinr = this.smhinr;
this.sunscanParams.trnName = this.trnName;
this.sunscanParams.org = this.org;
this.sunscanParams.oper = this.oper;
this.sunscanParams.optionType = this.optionType;
}, 10);
},
methods: {
toggleClosed(){
this.closed = !this.closed
},
format(date) {
return moment(date).format("YYYYMMDD");
},
isWebScanOpen() {
let isWin = this.isWinFunc();
let isIE = this.isIEFunc();
this.isWin = isWin && isIE;
},
isWinFunc() {
let platform = navigator.platform;
let isWin = false;
if (platform.indexOf("Win") > -1) isWin = true;
return isWin;
},
isIEFunc() {
let reg_Trident = /Trident/;
let appVesion = navigator.appVersion;
let isIE = reg_Trident.test(appVesion);
return isIE;
},
newContent() {
this.visibleDes = true;
this.form.note = "";
this.type = "add";
},
handleCommand(val, row) {
if (val == "view") {
this.form.note = row.note;
this.type = "view";
this.visibleDes = true;
} else if (val == "edit") {
this.form.note = row.note;
this.inr = row.inr;
this.type = "edit";
this.visibleDes = true;
} else {
this.delete(row);
}
},
add() {
this.$refs.form.validate(valid => {
if (valid) {
this.loading = true;
if (this.type == "add") {
let data = {
lotnum: this.docid,
note: this.form.note,
extkey: window.sessionStorage.userName
};
Api.post("/manager/img/addRemarkInfo", data).then(res => {
if (res.respCode == this.SUCCESS) {
this.visibleDes = false;
alert("新增批注成功！");
this.loading = false;
this.getList();
}
});
} else if (this.type == "edit") {
let data = {
inr: this.inr,
note: this.form.note,
extkey: window.sessionStorage.userName
};
Api.post("/manager/img/updateRemarkInfo", data).then(res => {
if (res.respCode == this.SUCCESS) {
this.visibleDes = false;
this.loading = false;
alert("修改批注成功！");
this.getList();
}
});
}
}
});
},
delete(row) {
let data = {
inr: row.inr
};
Api.post("/manager/img/deleteRemarkInfo", data).then(res => {
if (res.respCode == this.SUCCESS) {
alert("删除成功！");
this.getList();
}
});
},
getList() {
let data = {
lotnum: this.docid
};
Api.post("/manager/img/listRemarkInfo", data).then(res => {
if (res.respCode == this.SUCCESS) {
this.list = res.data;
}
});
}
}
};
</script>
<style scoped lang="less">
/deep/ .el-table__body-wrapper is-scrolling-none{
height:calc(100vh- 88px) !important;
}
.el-dialog__wrapper{
z-index: 999999!important;
}
.big-dialog {
::v-deep .el-dialog {
height: 90vh;
margin: 5vh auto;
.el-dialog__body {
position: relative;
height: calc(100% - 54px);
}
}
}
</style>