Skip to content

V
vue-gjjs
Commit 1b56d318 by liuxin
Options

智能审单icon与单据详情

parent d1471069
Showing with 246 additions and 10 deletions
src/components/IntellectIcon.vue 0 → 100644
<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
src/views/Business/Ditopn/Tk.vue
......@@ -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