Commit 1b56d318 by liuxin

智能审单icon与单据详情

parent d1471069
<template>
<c-col :span="24">
<el-row>
<el-col :span="spanVal" v-for="(item, idx) in displayIconList" :key="idx" :offset="1">
<el-card :body-style="{ padding: '0px' }" style="height:100%">
<img :src="item.src" class="image">
<div style="padding: 5px;">
<span style="text-align:center;font-size:5px">{{item.name}}</span>
<el-button type="text" class="button" icon="el-icon-delete" @click="DeleteIcon(item.id)"></el-button>
</div>
</el-card>
</el-col>
<el-col :span="spanVal" :offset="1">
<el-card :body-style="{ padding: '0px' }">
<img :src="require('~/assets/add.png')" class="image" @click="AddIcon">
</el-card>
</el-col>
</el-row>
<el-dialog :visible.sync="IconDialog" :title="'单据列表'">
<div style="height:200px">
<el-col :span="14">
<el-col :span="spanVal" v-for="(item, idx) in hideIconList" :key="idx" :offset="1">
<el-card :body-style="{ padding: '0px' }" style="height:100%">
<img :src="item.src" class="image">
<div style="padding: 5px;">
<span style="text-align:center;font-size:5px">{{item.name}}</span>
<el-button type="text" class="button" icon="el-icon-plus" @click="InsertIcon(item.id)"></el-button>
</div>
</el-card>
</el-col>
</el-col>
</div>
</el-dialog>
</c-col>
</template>
<script>
import Api from "~/service/Api"
export default {
props: {
IconList: {
type: [Array],
default: () => {
return [];
},
},
spanVal:{
type : [Number],
default: () => {
return 4;
},
}
},
data(){
return {
IconDialog: false,
IconsData:[
{
id:"invoice",
src: require("~/assets/发票1.png"),
name:"发票",
},
{
id:"receipt",
src: require("~/assets/收据1.png"),
name:"货物收据",
},
{
id:"oceanShipping",
src: require("~/assets/海运舱单.png"),
name:"海运提单",
}
],
}
},
computed: {
displayIconList: function(){
const arr = []
for(var i = 0; i < this.IconList.length; i++){
for(var j = 0; j < this.IconsData.length; j++){
if(this.IconsData[j].id == this.IconList[i]){
arr.push(this.IconsData[j]);
continue;
}
}
}
return arr;
},
hideIconList() {
const arr = []
for(var j = 0; j < this.IconsData.length; j++){
if(!this.IconList.includes(this.IconsData[j].id)){
arr.push(this.IconsData[j]);
continue;
}
}
return arr;
}
},
methods: {
DeleteIcon(id){
this.$emit("deleteIcon", id)
},
AddIcon(){
this.IconDialog = true;
},
InsertIcon(id){
this.$emit("insertIcon", id)
}
},
watch:{
},
created:function(){
}
};
</script>
<style>
</style>
\ No newline at end of file
......@@ -132,19 +132,50 @@
<!-- =================已交单据====================== -->
<c-col :span="24">
<!-- :list="model.bdtp.docgrdm.docgrd" -->
<c-table
:border="true"
:paginationShow="false"
:list="model.bdtp.docgrdm.docgrd"
:list="docgrdData"
:span-method="arraySpanMethod"
style="width:80%,text-align:center"
>
<el-table-column prop="cmail1" label="1st" width="auto">
<el-table-column prop="cmail1" label="1st" width="auto">
<template slot-scope="scope">
<div v-if="!scope.row.states">
{{scope.row.cmail1}}
</div>
<div v-else>
<div v-for="(item, idx) in scope.row.list" :key="idx" >
<c-col :span="6" :offset="1" >
<div style="border:1px solid #eaeaea;padding:8px 8px 8px 15px;margin:5px;background:#f5ffff;height:75px">
<div style="height:20px">
<span>{{item.discribe}}</span>
<el-button type="text" class="button" icon="el-icon-delete" @click="DeleteError(scope.$index, idx)" style="float:right"></el-button>
</div>
<br>
<div style="height:20px;float:right;">
<el-radio v-model="item.state" :label="true">接受</el-radio>
<el-radio v-model="item.state" :label="false">忽略</el-radio>
</div>
</div>
</c-col>
</div>
<c-col :span="6" :offset="1" >
<div class="addCss" style="border:1px dashed;padding:8px;margin:5px;height:75px;text-align:center">
<el-button type="text" class="button" icon="el-icon-plus" @click="InsertErrorDialog(scope.$index)" style="text-align:center"></el-button><br>
</div>
</c-col>
</div>
</template>
</el-table-column>
<el-table-column prop="cmail2" label="2st" width="auto">
</el-table-column>
<el-table-column prop="docnam" label="Document" width="auto">
</el-table-column>
<el-table-column label="操作" prop="det" width="80px" fixed="right">
<el-table-column prop="state" label="状态" width="auto">
</el-table-column>
<el-table-column label="操作" prop="det" width="100px" fixed="right">
<template slot="header">
<span>操作</span>
<el-button
......@@ -155,58 +186,45 @@
@click="addDialogVisible = true"
>
</el-button>
<!--
style="padding:4px"
circle
class="el-icon-minus"
size="mini"
@click="removeRow(scope)"
>
</el-button> -->
</template>
<template slot-scope="scope">
<c-button
style="margin-left: 0"
size="small"
@click="removeRow(scope.$index)"
>
删除
</c-button>
<el-popover
placement="right"
width="400px"
trigger="click">
<el-table :data="gridPDFData">
<el-table-column width="300px" property="name" label="name"></el-table-column>
<el-table-column label="操作" width="80px">
<template slot-scope="scoped">
<el-button
style="margin-left:0"
size="small"
type="primary"
@click="selectGridPDF(scope.row.id, scoped.$index)"
>选择</el-button
>
</template>
</el-table-column>
</el-table>
<el-button slot="reference" @click="addPDF(scope.row.id)">添加</el-button>
</el-popover>
</template>
</el-table-column>
</c-table>
</c-col>
<c-col>
<el-dialog :visible.sync="addDialogVisible" center width="500px">
<c-col :span="24">
<c-col :span="20">
<el-form-item label="1st" label-width="100px">
<c-input v-model="dialog.cmail1"></c-input>
</el-form-item>
</c-col>
</c-col>
<el-dialog :visible.sync="InsertErrorDialogVisibal" center width="500px">
<c-col :span="24">
<c-col :span="20">
<el-form-item label="2st" label-width="100px">
<c-input v-model="dialog.cmail2"></c-input>
<el-form-item label="错误信息" label-width="100px">
<c-input v-model="newInsertError"></c-input>
</el-form-item>
</c-col>
</c-col>
<c-col :span="24">
<c-col :span="20">
<el-form-item label="Document" label-width="100px">
<!-- <c-select v-model="dialog.docnam" style="width:100%"></c-select> -->
<c-inputselect :liData="liData" v-model="dialog.docnam">
</c-inputselect>
</el-form-item>
</c-col>
</c-col>
<!-- <c-col :span="24"> -->
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="addRow">确定</el-button>
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button type="primary" @click="InsertError()">确定</el-button>
<el-button @click="InsertErrorDialogVisibal = false">取消</el-button>
</span>
<!-- </c-col> -->
</el-dialog>
</c-col>
</div>
......@@ -224,31 +242,219 @@ export default {
data() {
return {
addDialogVisible: false,
InsertErrorDialogVisibal: false,
newInsertError:"",
newInsertErrorIndex: -1,
dialog: {
cmail1: "",
cmail2: "",
docnam: "",
docnam:"",
state:"",
},
liData:["增值税发票","发票","装箱单","空运单","海运提单","铁路运单","货物收据","邮政收据","出库单","保险单","质检证","受益人证明"],
docgrdDataStore:[
{
id:"invoice",
cmail1:"发票",
cmail2:"",
docnam:"",
state:"缺失",
},
{
id:"receipt",
cmail1:"货物收据",
cmail2:"",
docnam:"",
state:"缺失",
},
{
id:"oceanShipping",
cmail1:"海运提单",
cmail2:"",
docnam:"",
state:"缺失",
},
],
docgrdData:[],
gridData:[
{
id:"invoice",
data:[
{
name:"KZ3500220597AA-001.pdf",
errorData:[
{
discribe:"发票金额不符",
state:true
},
{
discribe:"发票非原始正本",
state:true
},
{
discribe:"未批注交单情况",
state:true
},
]
}
],
},
{
id:"receipt",
data:[
{
name:"KZ3500220597AA-002.pdf",
errorData:[
{
discribe:"货物收据金额不符",
state:true
},
{
discribe:"货物收据缺失",
state:true
},
]
},
{
name:"KZ3500220597AA-003.pdf",
errorData:[
{
discribe:"货物数量有误",
state:true
},
]
},
],
},
{
id:"oceanShipping",
data:[
{
name:"KZ3500220597AA-004.pdf",
errorData:[
]
},
]
}
],
gridPDFData:[],
selectPDFData:"",
};
},
methods: {
...Event,
addRow(){
this.addDialogVisible=false;
let newRow = {...this.dialog};
this.model.bdtp.docgrdm.docgrd.push(newRow);
},
this.addDialogVisible=false;
let newRow = {...this.dialog};
this.model.bdtp.docgrdm.docgrd.push(newRow);
},
removeRow(idx){
this.model.bdtp.docgrdm.docgrd.pop(idx);
}
},
addPDF(idx){
this.selectPDFData = idx;
},
selectGridPDF(id, idx){
var tempData = [];
var list = [];
var flag = false;
for(let i = 0; i < this.gridData.length; i++){
if(this.gridData[i].id == this.selectPDFData){
list = [...this.gridData[i].data[idx].errorData]
break;
}
}
for (let i = 0; i < this.docgrdData.length; i++) {
if (this.docgrdData[i].id == id && id == this.selectPDFData){
if(list.length > 0){
this.docgrdData[i].state = "内容不符"
}else{
this.docgrdData[i].state = "符合"
}
}
if(flag){
let tempListData = this.docgrdData[i];
tempListData.list.push(...list);
tempData.push(tempListData);
flag = false;
}else{
tempData.push(this.docgrdData[i]);
if (this.docgrdData[i].id == id && id == this.selectPDFData && list.length > 0){
if(i < this.docgrdData.length - 1 && this.docgrdData[i + 1].hasOwnProperty("list")){
flag = true;
}else{
tempData.push({
list,
states: true,
});
}
}
}
}
this.docgrdData = tempData;
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (this.docgrdData[rowIndex].states) {
return [1, 5];
}
},
DeleteError(index, idx){
this.docgrdData[index].list.splice(idx, 1);
if(this.docgrdData[index].list.length == 0){
this.docgrdData.splice(index, 1);
this.docgrdData[index - 1].state = "符合"
}
},
InsertErrorDialog(index){
this.InsertErrorDialogVisibal = true;
this.newInsertErrorIndex = index;
},
InsertError(){
var temp = {
discribe:this.newInsertError,
state:true
};
this.docgrdData[this.newInsertErrorIndex].list.push(temp);
this.newInsertError = "";
this.InsertErrorDialogVisibal = false;
},
},
created: function () {
var IconList = JSON.parse(sessionStorage.getItem("IconList"));
var list = [];
for(let i = 0; i < IconList.length; i++){
for(let j = 0; j < this.docgrdDataStore.length; j++){
if(IconList[i] == this.docgrdDataStore[j].id){
list.push(this.docgrdDataStore[j]);
break;
}
}
}
this.docgrdData = list;
},
computed:{
},
created: function () {},
watch:{
selectPDFData(){
if(this.selectPDFData.length > 0){
const arr = []
for(let i = 0; i < this.gridData.length; i++){
if(this.gridData[i].id == this.selectPDFData){
// arr.push({"id" : this.gridData[i].id});
for(let j = 0; j < this.gridData[i].data.length; j++){
arr.push({"name" : this.gridData[i].data[j].name});
}
break;
}
}
this.gridPDFData = arr;
}
}
}
};
</script>
<style scoped>
.el-checkbox >>> .el-checkbox__label {
width: 70px;
.addCss {
}
</style>
\ No newline at end of file
......@@ -4,8 +4,9 @@
<c-col :span="24">
<span v-text="model.ditp.hwfwms" data-path=".ditp.hwfwms" > </span>
</c-col>
-->
<c-col :span="24">
-->
<c-col :span="16">
<c-col :span="24">
<el-form-item label="货物描述" prop="didgrp.blk.lcrgod">
<c-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" v-model="model.didgrp.blk.lcrgod" style="width:70%;margin-right:20px;" maxlength="1430" show-word-limit placeholder="请输入Description of Goods" ></c-input>
</el-form-item>
......@@ -28,12 +29,47 @@
<c-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" v-model="model.didgrp.blk.insbnk" style="width:70%;margin-right:20px;" maxlength="325" show-word-limit placeholder="请输入付行的指示" ></c-input>
</el-form-item>
</c-col>
</c-col>
<c-col :span="8">
<IntellectIcon :IconList="IconList" :span="spanVal" v-on:deleteIcon="deleteIcon" v-on:insertIcon="insertIcon"></IntellectIcon>
</c-col>
<!-- <c-col :span="8">
<el-row>
<el-col :span="4" v-for="(item, idx) in tkData" :key="idx" :offset="1">
<div v-if="item.show">
<el-card :body-style="{ padding: '0px' }" style="height:100%">
<img :src="item.src" class="image">
<div style="padding: 5px;">
<span style="text-align:center;font-size:5px">{{item.name}}</span>
<el-button type="text" class="button" icon="el-icon-delete" @click="DeleteTK(idx)"></el-button>
</div>
</el-card>
</div>
</el-col>
<el-col :span="4" :offset="1">
<el-card :body-style="{ padding: '0px' }">
<img src="../../../assets/add.png" class="image" @click="AddTK">
</el-card>
</el-col>
</el-row>
<el-dialog :visible.sync="TKdialog" :title="'单据列表'">
<div style="height:200px">
<el-col :span="2" v-for="(item, idx) in tkData" :key="idx" :offset="1">
<div v-if="item.show == false">
<el-card :body-style="{ padding: '0px' }" style="height:100%">
<img :src="item.src" class="image">
<div style="padding: 5px;">
<span style="text-align:center;font-size:5px">{{item.name}}</span>
<el-button type="text" class="button" icon="el-icon-plus" @click="InsertTK(idx)"></el-button>
</div>
</el-card>
</div>
</el-col>
</div>
</el-dialog>
</c-col> -->
<!-- <c-col :span="24">-->
<!-- <el-form-item label="" prop="didgrp.rec.redclsflg">-->
<!-- <c-checkbox v-model="model.didgrp.rec.redclsflg">红/绿条款</c-checkbox>-->
<!-- </el-form-item>-->
<!-- </c-col> -->
</div>
</template>
<script>
......@@ -41,22 +77,98 @@ import Api from "~/service/Api"
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Ditopn/Event"
import IntellectIcon from "~/components/IntellectIcon"
export default {
inject: ['root'],
props:["model","codes"],
mixins: [CommonProcess],
components: { IntellectIcon },
data(){
return {
TKdialog: false,
tkData:[
{
id:"invoice",
src: require("~/assets/invoice.png"),
name:"发票",
show:true
},
{
id:"receipt",
src: require("~/assets/receipt.png"),
name:"货物收据",
show:true
},
{
id:"oceanShipping",
src: require("~/assets/oceanShipping.png"),
name:"海运提单",
show:true
},
// {
// id:"add",
// src: require("~/assets/add.png"),
// name:"添加",
// show:true
// },
],
IconList:[
"invoice","receipt",
],
spanVal:4,
}
},
methods:{
...Event,
deleteIcon(id){
const arr = []
for (let i = 0; i < this.IconList.length; i++) {
const icon = this.IconList[i];
if (icon != id) {
arr.push(icon)
}
}
this.IconList = arr;
},
insertIcon(id){
this.IconList = [...this.IconList, id];
}
},
watch: {
IconList(){
sessionStorage.setItem('IconList', JSON.stringify(this.IconList));
}
},
methods:{...Event},
created:function(){
sessionStorage.setItem('IconList', JSON.stringify(this.IconList));
}
}
</script>
<style>
.bottom {
margin-top: 6px;
line-height: 5px;
}
.button {
padding: 0;
float: right;
}
.image {
width: 100%;
height: 100%;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment