效果图
<template>
<div>
<vxe-modal
v-model="dlgShow"
:position="{ top: 30 }"
width="1200"
min-width="550"
min-height="260"
height="500"
resize
size="small"
show-zoom
destroy-on-close
@show="show"
>
<template #title>
<div class="vxe-modal-header-set">
<div class="header-btn-list">
<h3 class="header-title">发票明细</h3>
<div class="btn-wrap-set">
<vxe-button
class="btn"
status="primary"
content="添加"
@click="add"
></vxe-button>
<vxe-button
class="btn"
status="info"
@click="close"
content="取消"
></vxe-button>
</div>
</div>
</div>
</template>
<vxe-grid
border
resizable
ref="table"
size="small"
:loading="loading"
:columns="tableColumn"
:data="tableData"
height="auto"
:edit-rules="validRules"
:edit-config="{ trigger: 'manual', mode: 'row' }"
@edit-closed="editClose"
>
<template #fwmc_edit="{ row }">
<vxe-input v-model="row.fwmc"></vxe-input>
</template>
<template #ggxh_edit="{ row }">
<vxe-input v-model="row.ggxh"></vxe-input>
</template>
<template #fpdw_edit="{ row }">
<vxe-input v-model="row.fpdw"></vxe-input>
</template>
<template #fpdj_edit="{ row }">
<vxe-input type="number" v-model="row.fpdj"></vxe-input>
</template>
<template #fpshl_edit="{ row }">
<vxe-input type="integer" v-model="row.fpshl"></vxe-input>
</template>
<template #fpsl_edit="{ row }">
<vxe-select v-model="row.fpsl" placeholder="请选择" size="small">
<vxe-option
v-for="item in shuilOptions"
:key="item.dictValue"
:value="item.dictValue"
:label="item.dictLabel"
></vxe-option>
</vxe-select>
</template>
<template #fpsl_default="{ row }">
<span>{{ row.fpsl }}%</span>
</template>
<template #fpse_edit="{ row }">
<span>{{ row.fpse }}</span>
</template>
<template #sjhj_edit="{ row }">
<span>{{ row.sjhj }}</span>
</template>
<template #fpje_edit="{ row }">
<span>{{ row.fpje }}</span>
</template>
<template #operate="{ row }">
<template v-if="$refs.table.isActiveByRow(row)">
<vxe-button
size="mini"
icon="fa fa-save"
status="primary"
title="保存"
circle
@click="saveRowEvent(row)"
></vxe-button>
<vxe-button
size="mini"
icon="fa vxe-icon--close"
circle
title="取消"
@click="canCelRowEvent(row)"
></vxe-button>
</template>
<template v-else>
<vxe-button
size="mini"
circle
icon="fa fa-edit"
title="编辑"
@click="editRowEvent(row)"
></vxe-button>
<vxe-button
size="mini"
icon="fa fa-trash"
circle
title="删除"
@click="delRowEvent(row)"
></vxe-button>
</template>
</template>
</vxe-grid>
</vxe-modal>
</div>
</template>
<script>
import {
listCwfpglmx,
addCwfpglmx,
updateCwfpglmx,
delCwfpglmx,
} from "@/api/erp/cw/cwfpglmx";
import { guid } from "@/utils/tool";
export default {
name: "wzjxfpmxwin",
data() {
return {
dlgShow: false,
loading: false,
editRow: null,
//发票id
fpid: "",
//发票类型
fplx: "",
validRules: {
fwmc: [{ required: true, message: "必须填写" }],
ggxh: [{ required: true, message: "必须填写" }],
fpdw: [{ required: true, message: "必须填写" }],
fpdj: [
{ required: true, message: "必须填写" },
{
validator: ({ cellValue }) => {
return new Promise((resolve, reject) => {
if (/^\d+(.\d{1,8})?$/.test(cellValue) == false) {
reject(new Error("小数位的长度需在1-8之间"));
} else {
resolve();
}
});
},
},
],
fpshl: [{ required: true, message: "必须填写" }],
fpsl: [{ required: true, message: "必须填写" }],
},
tableColumn: [
{ type: "seq", title: "序号", width: 60, align: "center" },
{
field: "fwmc",
title: "名称",
align: "left",
width: 140,
editRender: {},
slots: { edit: "fwmc_edit" },
},
{
field: "ggxh",
title: "规格型号",
width: 120,
align: "left",
showOverflow: "tooltip",
editRender: {},
slots: { edit: "ggxh_edit" },
},
{
field: "fpdw",
title: "单位",
align: "left",
width: 100,
editRender: {},
slots: { edit: "fpdw_edit" },
},
{
field: "fpshl",
title: "数量",
align: "left",
width: 100,
editRender: {},
slots: { edit: "fpshl_edit" },
},
{
field: "fpdj",
title: "不含税单价",
align: "left",
width: 120,
editRender: {},
slots: { edit: "fpdj_edit" },
},
{
field: "fpje",
title: "金额",
align: "left",
width: 100,
editRender: {},
slots: { edit: "fpje_edit" },
},
{
field: "fpsl",
title: "税率",
align: "left",
width: 100,
editRender: {},
slots: { edit: "fpsl_edit", default: "fpsl_default" },
},
{
field: "fpse",
title: "税额",
align: "left",
width: 100,
editRender: {},
slots: { edit: "fpse_edit" },
},
{
field: "sjhj",
title: "税价合计",
align: "left",
width: 100,
editRender: {},
slots: { edit: "sjhj_edit" },
},
{ title: "操作", slots: { default: "operate" } },
],
tableData: [],
shuilOptions: [],
};
},
created() {
this.getFPSL();
},
watch: {
editRow: {
handler: function (val) {
if (val == null) return;
try {
this.editRow.fpje = val.fpshl * val.fpdj;
} catch {
this.editRow.fpje = 0;
}
try {
let se = (this.editRow.fpje * val.fpsl) / 100;
this.editRow.fpse = Math.round((se + Number.EPSILON) * 100) / 100;
} catch {
this.editRow.fpse = 0;
}
try {
this.editRow.sjhj = this.editRow.fpje + this.editRow.fpse;
} catch {
this.editRow.sjhj = 0;
}
},
deep: true,
},
},
methods: {
async validAllEvent(back) {
const $table = this.$refs.table;
const errMap = await $table.validate(true).catch((errMap) => errMap);
if (errMap) {
back(false);
} else {
back(true);
}
},
getFPSL() {
this.getDicts("tax_ratio").then((response) => {
let options = response.data;
this.shuilOptions = options;
});
},
openDlg(fpid, type) {
this.fpid = fpid;
this.fplx = type + "";
this.editRow = null;
this.getList();
this.dlgShow = true;
},
close() {
this.dlgShow = false;
},
editClose({ row }) {
if (this.editRow != null) this.$refs.table.setActiveRow(this.editRow);
},
add() {
this.validAllEvent((ret) => {
if (ret == false) return;
if (this.editRow != null) return;
let row = {
pkid: guid(),
fpid: this.fpid,
fplx: this.fplx,
fwmc: "",
ggxh: "",
fpdw: "",
fpje: "",
fpdj: "",
fpshl: "",
fpsl: "",
fpse: "",
sjhj: "",
_state: "add",
};
this.tableData.push(row);
this.editRow = row;
this.$refs.table.setActiveRow(row);
});
},
show() {
if (this.editRow != null) {
this.$refs.table.setActiveRow(this.editRow);
}
},
canCelRowEvent(row) {
this.editRow = null;
this.$refs.table.clearActived();
this.getList();
},
delRowEvent(row) {
this.$XModal.confirm("您确定要删除吗？").then((type) => {
if (type == "confirm") {
delCwfpglmx(row.pkid)
.then((response) => {
this.loading = false;
this.editRow = null;
if (response.code == 200) {
this.$refs.table.remove(row);
this.$XModal.message({
content: response.msg,
status: "success",
});
} else {
this.$XModal.message({
content: response.msg,
status: "error",
});
}
})
.finally(() => {
this.loading = false;
});
}
});
},
saveRowEvent() {
this.validAllEvent((ret) => {
if (ret == false) return;
this.loading = true;
if (this.editRow._state == "add") {
addCwfpglmx(this.editRow)
.then((response) => {
this.loading = false;
if (response.code == 200) {
this.editRow = null;
this.$refs.table.clearActived();
this.$XModal.message({
content: response.msg,
status: "success",
});
} else {
this.$XModal.message({
content: response.msg,
status: "error",
});
}
})
.finally(() => {
this.loading = false;
});
} else if (this.editRow._state == "edit") {
updateCwfpglmx(this.editRow)
.then((response) => {
this.loading = false;
if (response.code == 200) {
this.editRow = null;
this.$refs.table.clearActived();
this.$XModal.message({
content: response.msg,
status: "success",
});
} else {
this.$XModal.message({
content: response.msg,
status: "error",
});
}
})
.finally(() => {
this.loading = false;
});
}
});
},
editRowEvent(row) {
this.editRow = row;
this.editRow._state = "edit";
this.$refs.table.setActiveRow(row);
},
getList() {
this.loading = true;
listCwfpglmx({
fpid: this.fpid,
fplx: this.fplx,
}).then((response) => {
this.tableData = response.rows;
this.loading = false;
});
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/global.scss";
::v-deep .vxe-modal--wrapper .vxe-modal--content {
padding: 2px 2px 0px 2px;
}
</style>
?
