增加立即发送

This commit is contained in:
2019-05-28 21:08:58 +08:00
parent b55ffb3f17
commit 707ee18ba0
+299 -186
View File
@@ -4,107 +4,154 @@
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="80px"> -->
<!-- <el-form ref="form" :model="form" label-width="800px"> -->
<el-form ref="billForm" :model="bill" :rules="rules" label-width="80px">
<el-form-item label="邮寄地址" prop="postContact">
<!--邮寄地址-->
<el-autocomplete
class="posts"
popper-class="my-autocomplete"
v-model="bill.postContact"
:fetch-suggestions="querySearchAsyncPosts"
placeholder="请输选择邮寄地址"
@select="handleSelectPosts" :disabled="disabled">
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClickPosts"></i>
<template slot-scope="{ item }">
<div class="name">{{ item.contact }}</div>
<span class="subtitle">{{ item.address }}</span>
<span class="subtitle">;</span>
<span class="subtitle">{{ item.mobile }}</span>
<span class="subtitle">;</span>
</template>
</el-autocomplete>
</el-form-item>
<el-row>
<el-col :span="17">
<el-form-item label="邮寄地址" prop="postContact">
<!--邮寄地址-->
<el-autocomplete
class="posts"
popper-class="my-autocomplete"
v-model="bill.postContact"
:fetch-suggestions="querySearchAsyncPosts"
placeholder="请输选择邮寄地址"
@select="handleSelectPosts"
:disabled="disabled"
>
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClickPosts"></i>
<template slot-scope="{ item }">
<div class="name">{{ item.contact }}</div>
<span class="subtitle">{{ item.address }}</span>
<span class="subtitle">;</span>
<span class="subtitle">{{ item.mobile }}</span>
<span class="subtitle">;</span>
</template>
</el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="3">
<el-form-item label="" label-width="80px">
<el-checkbox v-model="bill.sentQuick" checked="true" :disabled="disabled">立即发送</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<div class="gTable">
<!--增删改查-->
<!--明细-->
<!-- <el-form-item label="明细" prop="username"> -->
<!--分割线-->
<!-- <span><el-divider></el-divider></span> -->
<el-table :data="bill.billItems" height="400px" style="width: 100%">
<el-table-column prop="dating" label="日期" width="100" ></el-table-column>
<el-table-column prop="titleAbbr" label="抬头" width="150">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>税号: {{ scope.row.taxNo }}</p>
<p>抬头: {{ scope.row.titleName }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.titleAbbr }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="merchantAbbr" label="餐饮商户" width="150" ></el-table-column>
<el-table-column prop="amount" label="金额" width="80" ></el-table-column>
<el-table-column align="right" >
<template slot="header" slot-scope="scope">
<!-- <el-button class="itemBtn" type="primary" size="medium" @click="clearFocusRow();isAddShow = true;resetForm('addForm');" :disabled="disabled">添加</el-button> -->
<el-button class="itemBtn" type="primary" size="small" @click="clearFocusRow();isAddShow = true;resetForm('addForm');" :disabled="disabled">添加</el-button>
</template>
<template slot-scope="scope">
<el-button-group>
<!-- type="success" -->
<el-button
size="mini"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)" :disabled="disabled">编辑</el-button>
<!-- type="danger" -->
<el-button
size="mini"
icon="el-icon-delete"
@click.native.prevent="handleDelete(scope.$index,bill.billItems)" :disabled="disabled">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!--分割线-->
<!-- <span><el-divider></el-divider></span> -->
<el-table :data="bill.billItems" height="400px" style="width: 100%">
<el-table-column prop="dating" label="日期" width="100"></el-table-column>
<el-table-column prop="titleAbbr" label="抬头" width="150">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>税号: {{ scope.row.taxNo }}</p>
<p>抬头: {{ scope.row.titleName }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.titleAbbr }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="merchantAbbr" label="餐饮商户" width="150"></el-table-column>
<el-table-column prop="amount" label="金额" width="80"></el-table-column>
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<!-- <el-button class="itemBtn" type="primary" size="medium" @click="clearFocusRow();isAddShow = true;resetForm('addForm');" :disabled="disabled">添加</el-button> -->
<el-button
class="itemBtn"
type="primary"
size="small"
@click="clearFocusRow();isAddShow = true;resetForm('addForm');"
:disabled="disabled"
>添加</el-button>
</template>
<template slot-scope="scope">
<el-button-group>
<!-- type="success" -->
<el-button
size="mini"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)"
:disabled="disabled"
>编辑</el-button>
<!-- type="danger" -->
<el-button
size="mini"
icon="el-icon-delete"
@click.native.prevent="handleDelete(scope.$index,bill.billItems)"
:disabled="disabled"
>删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
<!-- </el-form-item> -->
</div>
<el-form-item label-width="2px">
<el-button class="submit" type="primary" @click="onSubmit('billForm')" :disabled="disabled">提交</el-button>
<el-button
class="submit"
type="primary"
@click="onSubmit('billForm')"
:disabled="disabled"
>提交</el-button>
</el-form-item>
</el-form>
</div>
<!--增加-->
<div width="600px">
<el-dialog title="增加" :visible.sync="isAddShow" width="700px" >
<el-dialog title="增加" :visible.sync="isAddShow" width="700px">
<el-form ref="addForm" :model="focusRow" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24">
<!--抬头-->
<el-form-item label="抬头简称" prop="titleAbbr">
<el-autocomplete class="titles" popper-class="my-autocomplete" v-model="focusRow.titleAbbr" :fetch-suggestions="querySearchAsyncTitles" placeholder="请输选择抬头" @select="handleSelectTitles" >
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClickTitles" ></i>
<template slot-scope="{ item }">
<div class="name">{{ item.abbr }}</div>
<span class="subtitle">{{ item.name }}</span>
<span class="subtitle">{{ item.taxNo }}</span>
</template>
</el-autocomplete>
</el-form-item>
<!--抬头-->
<el-form-item label="抬头简称" prop="titleAbbr">
<el-autocomplete
class="titles"
popper-class="my-autocomplete"
v-model="focusRow.titleAbbr"
:fetch-suggestions="querySearchAsyncTitles"
placeholder="请输选择抬头"
@select="handleSelectTitles"
>
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClickTitles"
></i>
<template slot-scope="{ item }">
<div class="name">{{ item.abbr }}</div>
<span class="subtitle">{{ item.name }}</span>
<span class="subtitle">{{ item.taxNo }}</span>
</template>
</el-autocomplete>
</el-form-item>
</el-col>
</el-row>
<!--商户-->
<el-row>
<el-col :span="24">
<el-form-item label="开票商家" prop="merchantAbbr">
<el-autocomplete class="merchants" v-model="focusRow.merchantAbbr" :fetch-suggestions="querySearchAsyncMerchant" placeholder="请选择餐饮商户" @select="handleSelectMerchant">
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClickTitles" ></i>
<el-form-item label="开票商家" prop="merchantAbbr">
<el-autocomplete
class="merchants"
v-model="focusRow.merchantAbbr"
:fetch-suggestions="querySearchAsyncMerchant"
placeholder="请选择餐饮商户"
@select="handleSelectMerchant"
>
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClickTitles"
></i>
<template slot-scope="{ item }">
<div class="name">{{ item.abbr }}</div>
<span class="subtitle">{{ item.name }}</span>
</template>
</el-autocomplete>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
@@ -113,13 +160,26 @@
<el-col :span="12">
<!--开票日期-->
<el-form-item label="开票日期" prop="dating">
<el-date-picker type="date" placeholder="选择日期" v-model="focusRow.dating" style="width: 100%;" value-format="yyyy-MM-dd"> </el-date-picker>
<el-date-picker
type="date"
placeholder="选择日期"
v-model="focusRow.dating"
style="width: 100%;"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="1">
<!--金额-->
<el-form-item label="开票金额" prop="amount">
<el-input-number v-model="focusRow.amount" :precision="2" :step="100" controls-position="right" :min="0" :max="5000"></el-input-number>
<el-input-number
v-model="focusRow.amount"
:precision="2"
:step="100"
controls-position="right"
:min="0"
:max="5000"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
@@ -133,35 +193,56 @@
<!--编辑-->
<div width="600px">
<el-dialog title="编辑" :visible.sync="isEditShow" width="700px" >
<el-dialog title="编辑" :visible.sync="isEditShow" width="700px">
<el-form ref="editForm" :model="focusRow" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24">
<!--抬头-->
<el-form-item label="抬头简称" prop="titleAbbr">
<el-autocomplete class="titles" popper-class="my-autocomplete" v-model="focusRow.titleAbbr" :fetch-suggestions="querySearchAsyncTitles" placeholder="请输选择抬头" @select="handleSelectTitles" >
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClickTitles" ></i>
<template slot-scope="{ item }">
<div class="name">{{ item.abbr }}</div>
<span class="subtitle">{{ item.name }}</span>
<span class="subtitle">{{ item.taxNo }}</span>
</template>
</el-autocomplete>
</el-form-item>
<!--抬头-->
<el-form-item label="抬头简称" prop="titleAbbr">
<el-autocomplete
class="titles"
popper-class="my-autocomplete"
v-model="focusRow.titleAbbr"
:fetch-suggestions="querySearchAsyncTitles"
placeholder="请输选择抬头"
@select="handleSelectTitles"
>
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClickTitles"
></i>
<template slot-scope="{ item }">
<div class="name">{{ item.abbr }}</div>
<span class="subtitle">{{ item.name }}</span>
<span class="subtitle">{{ item.taxNo }}</span>
</template>
</el-autocomplete>
</el-form-item>
</el-col>
</el-row>
<!--商户-->
<el-row>
<el-col :span="24">
<el-form-item label="开票商家" prop="merchantAbbr">
<el-autocomplete class="merchants" v-model="focusRow.merchantAbbr" :fetch-suggestions="querySearchAsyncMerchant" placeholder="请选择餐饮商户" @select="handleSelectMerchant">
<i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClickTitles" ></i>
<el-form-item label="开票商家" prop="merchantAbbr">
<el-autocomplete
class="merchants"
v-model="focusRow.merchantAbbr"
:fetch-suggestions="querySearchAsyncMerchant"
placeholder="请选择餐饮商户"
@select="handleSelectMerchant"
>
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClickTitles"
></i>
<template slot-scope="{ item }">
<div class="name">{{ item.abbr }}</div>
<span class="subtitle">{{ item.name }}</span>
</template>
</el-autocomplete>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
@@ -170,13 +251,26 @@
<el-col :span="12">
<!--开票日期-->
<el-form-item label="开票日期" prop="dating">
<el-date-picker type="date" placeholder="选择日期" v-model="focusRow.dating" style="width: 100%;" value-format="yyyy-MM-dd"> </el-date-picker>
<el-date-picker
type="date"
placeholder="选择日期"
v-model="focusRow.dating"
style="width: 100%;"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="1">
<!--金额-->
<el-form-item label="开票金额" prop="amount">
<el-input-number v-model="focusRow.amount" :precision="2" :step="100" controls-position="right" :min="0" :max="5000"></el-input-number>
<el-input-number
v-model="focusRow.amount"
:precision="2"
:step="100"
controls-position="right"
:min="0"
:max="5000"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
@@ -188,13 +282,19 @@
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { addPost, fetchPosts, getPost, fetchTitles, fetchMerchants, newBill } from "../api/basic.js";
import {
addPost,
fetchPosts,
getPost,
fetchTitles,
fetchMerchants,
newBill
} from "../api/basic.js";
export default {
name: "Bill",
data() {
@@ -212,35 +312,34 @@ export default {
bill: {
postId: "",
// postAddress: "",
postContact : "",
postContact: "",
// postMobile : "",
postId: "",
// postAddress: "",
sendQuick: false,
billItems: [
// { dating: "2019-05-28", titleId: null, titleAbbr: "上海沐融",titleName:"",taxNo: "" ,merchantId: null, merchantAbbr: "华容月",amount: 0.0 },
// { dating: "2019-05-28", titleId: null, titleAbbr: "上海沐融",titleName:"",taxNo: "" ,merchantId: null, merchantAbbr: "华容月",amount: 0.0 },
// { dating: "2019-05-28", titleId: null, titleAbbr: "上海沐融",merchantId: null, merchantAbbr: "华容月",amount: 0.0 },
// { dating: "2019-05-28", titleId: null, titleAbbr: "上海沐融",merchantId: null, merchantAbbr: "华容月",amount: 0.0 },
// { dating: "2019-05-28", titleId: null, titleAbbr: "上海沐融",merchantId: null, merchantAbbr: "华容月",amount: 0.0 },
],
]
},
rules: {
postContact: [
{ required: true, message: "请选择邮寄地址",trigger: "change"},
{ required: true, message: "请选择邮寄地址", trigger: "change" }
// { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" }
],
merchantAbbr: [
{ required: true, message: "请选择餐饮商户", trigger: "change"},
{ required: true, message: "请选择餐饮商户", trigger: "change" }
],
titleAbbr: [
{ required: true, message: "请选择抬头", trigger: "change" },
],
dating: [
{ required: true, message: "选择日期", trigger: "blur" },
{ required: true, message: "请选择抬头", trigger: "change" }
],
dating: [{ required: true, message: "选择日期", trigger: "blur" }],
amount: [
{ required: true, message: "请输入金额", trigger: "blur" },
{ type: 'number', message: '金额必须为数字值'}
{ type: "number", message: "金额必须为数字值" }
]
}
};
@@ -254,42 +353,50 @@ export default {
/** 在表格中添加明细 */
addItem(formName) {
var oriForm = formName;
this.$refs[formName].validate((valid) => {
if (valid) {
console.info('addItem');
console.info('focusRow:' + JSON.stringify(this.focusRow));
console.info('this.bill.billItems:' + JSON.stringify(this.bill.billItems));
this.bill.billItems.splice(0,0,this.focusRow);
console.info('this.bill.billItems:' + JSON.stringify(this.bill.billItems));
this.clearFocusRow();
console.info('focusRow:' + JSON.stringify(this.focusRow));
this.isAddShow = false;
// this.resetForm(oriForm);
} else {
console.log('error submit!!');
return false;
}
});
this.$refs[formName].validate(valid => {
if (valid) {
console.info("addItem");
console.info("focusRow:" + JSON.stringify(this.focusRow));
console.info(
"this.bill.billItems:" + JSON.stringify(this.bill.billItems)
);
this.bill.billItems.splice(0, 0, this.focusRow);
console.info(
"this.bill.billItems:" + JSON.stringify(this.bill.billItems)
);
this.clearFocusRow();
console.info("focusRow:" + JSON.stringify(this.focusRow));
this.isAddShow = false;
// this.resetForm(oriForm);
} else {
console.log("error submit!!");
return false;
}
});
},
/** 在表格中添加明细 */
updateItem(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.info('index:' + index);
console.info('updateItem');
console.info('focusRow:' + JSON.stringify(this.focusRow));
console.info('this.bill.billItems:' + JSON.stringify(this.bill.billItems));
var index = this.focusRow.index;
this.bill.billItems.splice(index,1,this.focusRow);
console.info('this.bill.billItems:' + JSON.stringify(this.bill.billItems));
this.clearFocusRow();
console.info('focusRow:' + JSON.stringify(this.focusRow));
this.isEditShow = false;
} else {
console.log('error submit!!');
return false;
}
});
this.$refs[formName].validate(valid => {
if (valid) {
console.info("index:" + index);
console.info("updateItem");
console.info("focusRow:" + JSON.stringify(this.focusRow));
console.info(
"this.bill.billItems:" + JSON.stringify(this.bill.billItems)
);
var index = this.focusRow.index;
this.bill.billItems.splice(index, 1, this.focusRow);
console.info(
"this.bill.billItems:" + JSON.stringify(this.bill.billItems)
);
this.clearFocusRow();
console.info("focusRow:" + JSON.stringify(this.focusRow));
this.isEditShow = false;
} else {
console.log("error submit!!");
return false;
}
});
},
/** 表格-编辑一行 */
handleEdit(index, row) {
@@ -303,19 +410,19 @@ export default {
row.splice(index, 1);
},
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.info("bill:" + JSON.stringify(this.bill));
newBill(this.bill).then(function(response){
console.info("response:" + response)
})
this.disabled = true;
this.$message({ message: "提交成功", type: "success" });
} else {
console.log('error submit!!');
return false;
}
});
this.$refs[formName].validate(valid => {
if (valid) {
console.info("bill:" + JSON.stringify(this.bill));
newBill(this.bill).then(function(response) {
console.info("response:" + response);
});
this.disabled = true;
this.$message({ message: "提交成功", type: "success" });
} else {
console.log("error submit!!");
return false;
}
});
},
reset(formName) {
// this.$refs[formName].resetFields();
@@ -331,14 +438,14 @@ export default {
/** AutoComplete Posts 处理*/
querySearchAsyncPosts(queryString, cb) {
var list = [{}];
fetchPosts().then(function(response){
for(let i of response.data){
i.value = i.contact; //将想要展示的数据作为value
// i.value = i.contact; //将想要展示的数据作为value
fetchPosts().then(function(response) {
for (let i of response.data) {
i.value = i.contact; //将想要展示的数据作为value
// i.value = i.contact; //将想要展示的数据作为value
}
list = response.data;
cb(list);
})
});
// var posts = this.posts;
// console.error("posts:" + posts);
@@ -354,12 +461,12 @@ export default {
};
},
loadPosts() {
console.error('loadPosts');
console.error("loadPosts");
},
handleSelectPosts(item) {
this.bill.postId = item.id;
console.log('postId:' + this.bill.postId );
console.log('postContact:' + this.bill.postContact );
console.log("postId:" + this.bill.postId);
console.log("postContact:" + this.bill.postContact);
},
handleIconClickPosts(ev) {
console.log(ev);
@@ -368,14 +475,14 @@ export default {
/** AutoComplete Titles 处理*/
querySearchAsyncTitles(queryString, cb) {
var list = [{}];
fetchTitles().then(function(response){
console.info(response)
for(let i of response.data){
i.value = i.abbr; // 将想要展示的数据作为value
fetchTitles().then(function(response) {
console.info(response);
for (let i of response.data) {
i.value = i.abbr; // 将想要展示的数据作为value
}
list = response.data;
cb(list);
})
});
},
createFilterTitles(queryString) {
return titles => {
@@ -385,15 +492,15 @@ export default {
};
},
loadTitles() {
console.error('loadTitles');
console.error("loadTitles");
},
handleSelectTitles(item) {
this.focusRow.titleId = item.id;
this.focusRow.titleName = item.name;
this.focusRow.taxNo = item.taxNo;
console.log('titleId:' + this.focusRow.titleId );
console.log('titleAbbr:' + this.focusRow.titleAbbr );
console.log('titleName:' + this.focusRow.titleName );
console.log("titleId:" + this.focusRow.titleId);
console.log("titleAbbr:" + this.focusRow.titleAbbr);
console.log("titleName:" + this.focusRow.titleName);
},
handleIconClickTitles(ev) {
console.log(ev);
@@ -401,39 +508,40 @@ export default {
/** AutoComplete Merchant 处理*/
querySearchAsyncMerchant(queryString, cb) {
var list = [{}];
fetchMerchants().then(function(response){
for(let i of response.data){
i.value = i.abbr; // 将想要展示的数据作为value
fetchMerchants().then(function(response) {
for (let i of response.data) {
i.value = i.abbr; // 将想要展示的数据作为value
}
list = response.data;
cb(list);
})
});
},
createFilterMerchant(queryString) {
return merchants => {
return (
merchants.contact.toLowerCase().indexOf(queryString.toLowerCase()) === 0
merchants.contact.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
handleSelectMerchant(item) {
this.focusRow.merchantId = item.id;
this.focusRow.merchantsAbbr = item.abbr;
console.log('merchantId:' + this.focusRow.merchantId );
console.log('merchantsAbbr:' + this.focusRow.merchantsAbbr );
console.log('merchantsName:' + item.name );
console.log("merchantId:" + this.focusRow.merchantId);
console.log("merchantsAbbr:" + this.focusRow.merchantsAbbr);
console.log("merchantsName:" + item.name);
},
handleIconClickMerchant(ev) {
console.log(ev);
},
loadMerchant() {
console.error('loadTitles');
console.error("loadTitles");
},
/** 清理当前缓存 */
clearFocusRow() {
this.focusRow = {}
console.info('clearFocusRow');
},
this.focusRow = {};
console.info("clearFocusRow");
}
},
mounted() {
// this.posts = this.loadPosts();
@@ -444,7 +552,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.subtitle{
.subtitle {
font-size: 12px;
color: #b4b4b4;
}
@@ -464,10 +572,10 @@ a {
color: #42b983;
}
.el-form-item{
.el-form-item {
/* width: 200px; */
/* margin: 10px; */
float:inherit ;
float: inherit;
padding: 20px;
}
.group {
@@ -487,7 +595,7 @@ a {
right: 0;
bottom: 0;
}
.gTable{
.gTable {
/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
text-align: left;
@@ -506,7 +614,7 @@ a {
}
.itemBtn {
width: 100px;
float:right;
float: right;
}
.el-form {
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
@@ -519,9 +627,14 @@ a {
text-align: left;
/* width: 800px; */
}
.posts,.titles,.merchants{
.posts,
.titles,
.merchants {
width: 487px;
}
/* .posts {
width: 300px;
} */
.el-form-item {
margin-bottom: 0px;
}