309 lines
8.2 KiB
Vue
309 lines
8.2 KiB
Vue
<template>
|
|
<basic-container class="invoice-item-page">
|
|
<avue-crud
|
|
ref="crud"
|
|
v-model="form"
|
|
v-model:page="page"
|
|
:option="option"
|
|
:data="data"
|
|
:table-loading="loading"
|
|
:permission="permissionList"
|
|
:before-open="beforeOpen"
|
|
@row-save="rowSave"
|
|
@row-update="rowUpdate"
|
|
@row-del="rowDel"
|
|
@search-change="searchChange"
|
|
@search-reset="searchReset"
|
|
@selection-change="selectionChange"
|
|
@current-change="currentChange"
|
|
@size-change="sizeChange"
|
|
@refresh-change="refreshChange"
|
|
@on-load="onLoad"
|
|
>
|
|
<template #menu="scope">
|
|
<el-link
|
|
v-if="permission.invoice_item_edit"
|
|
type="primary"
|
|
@click="$refs.crud.rowEdit(scope.row, scope.index)"
|
|
>
|
|
修改
|
|
</el-link>
|
|
<el-link
|
|
v-if="permission.invoice_item_delete"
|
|
type="danger"
|
|
@click="rowDel(scope.row)"
|
|
>
|
|
删除
|
|
</el-link>
|
|
</template>
|
|
<template #defaultTaxRate="scope">{{ scope.row.defaultTaxRate }}%</template>
|
|
<template #defaultTaxRate-form>
|
|
<el-input
|
|
v-model="form.defaultTaxRate"
|
|
inputmode="decimal"
|
|
maxlength="6"
|
|
clearable
|
|
placeholder="请输入默认税率"
|
|
@input="handleTaxRateInput"
|
|
>
|
|
<template #append>%</template>
|
|
</el-input>
|
|
</template>
|
|
</avue-crud>
|
|
</basic-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { getList, getDetail, submit, remove } from '@/api/base/invoice-item';
|
|
import { mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
form: {},
|
|
data: [],
|
|
loading: true,
|
|
query: {},
|
|
selectionList: [],
|
|
page: {
|
|
pageSize: 10,
|
|
pageSizes: [10, 30, 50, 100, 200],
|
|
currentPage: 1,
|
|
total: 0,
|
|
},
|
|
option: {
|
|
height: 'auto',
|
|
calcHeight: 32,
|
|
tip: false,
|
|
border: true,
|
|
stripe: true,
|
|
index: true,
|
|
indexLabel: '序号',
|
|
indexWidth: 70,
|
|
selection: false,
|
|
addBtn: true,
|
|
editBtn: false,
|
|
delBtn: false,
|
|
viewBtn: false,
|
|
menuWidth: 140,
|
|
dialogWidth: 900,
|
|
dialogClickModal: false,
|
|
labelPosition: 'right',
|
|
labelWidth: 'auto',
|
|
searchShow: true,
|
|
searchIcon: true,
|
|
searchIndex: 4,
|
|
searchMenuSpan: 24,
|
|
searchMenuPosition: 'right',
|
|
column: [
|
|
{
|
|
label: '货物或服务简称',
|
|
prop: 'shortName',
|
|
minWidth: 160,
|
|
span: 12,
|
|
maxlength: 100,
|
|
rules: [{ required: true, message: '请输入货物或服务简称', trigger: 'blur' }],
|
|
},
|
|
{
|
|
label: '税收分类编码',
|
|
prop: 'taxClassificationCode',
|
|
minWidth: 190,
|
|
span: 12,
|
|
maxlength: 30,
|
|
rules: [{ required: true, message: '请输入税收分类编码', trigger: 'blur' }],
|
|
},
|
|
{
|
|
label: '商品和服务分类名称',
|
|
prop: 'categoryName',
|
|
minWidth: 220,
|
|
span: 12,
|
|
maxlength: 200,
|
|
rules: [{ required: true, message: '请输入商品和服务分类名称', trigger: 'blur' }],
|
|
},
|
|
{
|
|
label: '默认税率',
|
|
prop: 'defaultTaxRate',
|
|
type: 'input',
|
|
formslot: true,
|
|
slot: true,
|
|
minWidth: 120,
|
|
span: 12,
|
|
rules: [
|
|
{ required: true, message: '请输入默认税率', trigger: 'blur' },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
const text = String(value ?? '');
|
|
const rate = Number(text);
|
|
if (!/^\d+(\.\d+)?$/.test(text) || rate < 0 || rate > 100) {
|
|
callback(new Error('默认税率必须是0到100之间的数字'));
|
|
return;
|
|
}
|
|
callback();
|
|
},
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: '税收项目',
|
|
prop: 'taxProject',
|
|
search: true,
|
|
searchOrder: 2,
|
|
hide: true,
|
|
display: false,
|
|
searchPlaceholder: '请输入税收项目',
|
|
},
|
|
{
|
|
label: '税收项目简称',
|
|
prop: 'taxProjectShortName',
|
|
search: true,
|
|
searchOrder: 1,
|
|
hide: true,
|
|
display: false,
|
|
searchPlaceholder: '请输入税收项目简称',
|
|
},
|
|
{
|
|
label: '创建时间',
|
|
prop: 'createTime',
|
|
type: 'datetime',
|
|
format: 'YYYY-MM-DD HH:mm:ss',
|
|
addDisplay: false,
|
|
editDisplay: false,
|
|
viewDisplay: false,
|
|
display: false,
|
|
},
|
|
{
|
|
label: '更新人',
|
|
prop: 'updateUserName',
|
|
addDisplay: false,
|
|
editDisplay: false,
|
|
viewDisplay: false,
|
|
display: false,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['permission']),
|
|
permissionList() {
|
|
return {
|
|
addBtn: this.validData(this.permission.invoice_item_add, false),
|
|
editBtn: false,
|
|
delBtn: false,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
rowSave(row, done, loading) {
|
|
submit(this.normalizeTaxRateRow(row)).then(
|
|
() => {
|
|
this.onLoad(this.page);
|
|
this.$message.success('操作成功');
|
|
done();
|
|
},
|
|
() => loading()
|
|
);
|
|
},
|
|
rowUpdate(row, index, done, loading) {
|
|
submit(this.normalizeTaxRateRow(row)).then(
|
|
() => {
|
|
this.onLoad(this.page);
|
|
this.$message.success('操作成功');
|
|
done();
|
|
},
|
|
() => loading()
|
|
);
|
|
},
|
|
rowDel(row) {
|
|
this.$confirm('确定将选择数据删除?', '提示', { type: 'warning' })
|
|
.then(() => remove(row.id))
|
|
.then(() => {
|
|
this.onLoad(this.page);
|
|
this.$message.success('操作成功');
|
|
});
|
|
},
|
|
beforeOpen(done, type) {
|
|
if (['edit', 'view'].includes(type)) {
|
|
getDetail(this.form.id).then(res => {
|
|
this.form = res.data.data || {};
|
|
done();
|
|
});
|
|
return;
|
|
}
|
|
this.form = { defaultTaxRate: 0 };
|
|
done();
|
|
},
|
|
handleTaxRateInput(value) {
|
|
let normalized = String(value || '').replace(/[^\d.]/g, '');
|
|
normalized = normalized.replace(/(\..*)\./g, '$1');
|
|
if (normalized.startsWith('.')) normalized = `0${normalized}`;
|
|
this.form.defaultTaxRate = normalized;
|
|
},
|
|
normalizeTaxRateRow(row) {
|
|
const values = { ...row };
|
|
values.defaultTaxRate = Number(values.defaultTaxRate);
|
|
return values;
|
|
},
|
|
searchChange(params, done) {
|
|
this.query = {
|
|
...params,
|
|
categoryName: params.taxProject,
|
|
shortName: params.taxProjectShortName,
|
|
};
|
|
delete this.query.taxProject;
|
|
delete this.query.taxProjectShortName;
|
|
this.page.currentPage = 1;
|
|
this.onLoad(this.page);
|
|
done();
|
|
},
|
|
searchReset() {
|
|
this.query = {};
|
|
this.page.currentPage = 1;
|
|
this.onLoad(this.page);
|
|
},
|
|
selectionChange(list) {
|
|
this.selectionList = list;
|
|
},
|
|
currentChange(currentPage) {
|
|
this.page.currentPage = currentPage;
|
|
},
|
|
sizeChange(pageSize) {
|
|
this.page.pageSize = pageSize;
|
|
},
|
|
refreshChange() {
|
|
this.onLoad(this.page);
|
|
},
|
|
onLoad(page) {
|
|
this.loading = true;
|
|
getList(page.currentPage, page.pageSize, this.query).then(res => {
|
|
const result = res.data.data || {};
|
|
this.data = result.records || [];
|
|
this.page.total = result.total || 0;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.invoice-item-page :deep(.avue-crud__menu) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.invoice-item-page :deep(.avue-crud__dialog .el-form-item) {
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.invoice-item-page :deep(.avue-crud__dialog .el-form-item__error) {
|
|
position: relative;
|
|
line-height: 20px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.invoice-item-page :deep(.avue-crud__menu .el-link) {
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|