feat: 结款记录
This commit is contained in:
duan
parent
af5ba4c954
commit
6cd651d545
|
|
@ -531,10 +531,11 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
affix: false,
|
||||
hidden: true
|
||||
},
|
||||
}, {
|
||||
path: "PaymentRecord",
|
||||
component: () => import("@/views/inventory/PaymentRecord.vue"),
|
||||
name: "PaymentRecord",
|
||||
},
|
||||
{
|
||||
path: "paymentRecord",
|
||||
component: () => import("@/views/inventory/paymentRecord.vue"),
|
||||
name: "paymentRecord",
|
||||
meta: {
|
||||
title: "结款记录",
|
||||
affix: false,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
<template>
|
||||
<!-- 结款记录 -->
|
||||
<div class="PaymentRecord">12
|
||||
</div>
|
||||
</template>
|
||||
<template>
|
||||
<!-- 结款记录 -->
|
||||
<div style="padding: 15px;">
|
||||
<!-- 搜索 -->
|
||||
<Search></Search>
|
||||
<!-- 数据统计 -->
|
||||
<DataStatistics></DataStatistics>
|
||||
<!-- 表格 -->
|
||||
<Content></Content>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Search from './paymentRecordconfig/Search.vue'
|
||||
import DataStatistics from './paymentRecordconfig/DataStatistics.vue'
|
||||
import Content from './paymentRecordconfig/Content.vue'
|
||||
</script>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div class="Table">
|
||||
<!-- 按钮 -->
|
||||
<AddButton @add="add"></AddButton>
|
||||
<!-- 表格 -->
|
||||
<Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></Table>
|
||||
<!-- 分页 -->
|
||||
<Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
|
||||
<!-- 其他模板 -->
|
||||
<!-- 新增/编辑 -->
|
||||
<myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
|
||||
<el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
|
||||
<el-form-item label="供应商" prop="name">
|
||||
<el-input v-model="datas.DialogForm.name" placeholder="请输入供应商名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="datas.DialogForm.telephone" placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="datas.DialogForm.address" placeholder="请输入地址" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="datas.DialogForm.remark" placeholder="请输入备注" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</myDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AddButton from './component/AddButton.vue'
|
||||
import Table from './component/Table.vue'
|
||||
import Paging from './component/Paging.vue'
|
||||
import myDialog from '@/components/mycomponents/myDialog.vue'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import API from './api'
|
||||
|
||||
const datas = reactive({
|
||||
tableData: [], // 表格数据
|
||||
title: '新增数据',
|
||||
pagingConfig: {
|
||||
total: 0, // 总数
|
||||
pageSize: 10, // 每页数据数量
|
||||
pageNumber: 1, // 当前页码
|
||||
},
|
||||
DialogForm: { // 弹窗表单数据
|
||||
name: "",
|
||||
telephone: "",
|
||||
address: "",
|
||||
remark: ""
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
})
|
||||
const myDialogRef = ref(null)
|
||||
const ruleFormRef = ref(null)
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
eventBus.on('search', (res) => {
|
||||
getList(res)
|
||||
})
|
||||
async function getList(data = {}) {
|
||||
const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
|
||||
datas.tableData = res.records
|
||||
datas.pagingConfig.total = res.totalRow
|
||||
datas.pagingConfig.pageSize = res.pageSize
|
||||
datas.pagingConfig.pageNumber = res.pageNumber
|
||||
}
|
||||
function add() {
|
||||
rest()
|
||||
datas.title = '新增数据'
|
||||
myDialogRef.value.open()
|
||||
}
|
||||
async function handleEdit(row) {
|
||||
datas.title = '编辑数据'
|
||||
const res = await API.getinfo(row.id)
|
||||
datas.DialogForm = res
|
||||
myDialogRef.value.open()
|
||||
}
|
||||
async function confirm() {
|
||||
ruleFormRef.value.validate(async valid => {
|
||||
if (valid) {
|
||||
let res = null
|
||||
if (datas.title == '新增数据') {
|
||||
res = await API.add(datas.DialogForm)
|
||||
} else {
|
||||
res = await API.update(datas.DialogForm)
|
||||
}
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: '成功',
|
||||
type: 'success',
|
||||
})
|
||||
rest()
|
||||
getList()
|
||||
myDialogRef.value.close()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
function rest() {
|
||||
datas.DialogForm = { sort: "1" }
|
||||
}
|
||||
async function handleDelete(id) {
|
||||
ElMessageBox.confirm("是否删除数据项?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(
|
||||
async () => {
|
||||
let res = await API.deleteByIds(id)
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
getList()
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
// 分页
|
||||
function sizeChange(val) {
|
||||
datas.pagingConfig.pageSize = val
|
||||
getList()
|
||||
}
|
||||
function currentChange(val) {
|
||||
datas.pagingConfig.pageNumber = val
|
||||
getList()
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.Table {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div class="DataStatistics">
|
||||
<div style="width: 200px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<span>耗材种数</span>
|
||||
<span>{{ datas.totalRow }}</span>
|
||||
</div>
|
||||
<div style="width: 300px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<div>
|
||||
<div><span>增加数量：</span><span>0</span></div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<span>手动增加：</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>入库：</span><span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 500px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<div>
|
||||
<div><span>减少数量：</span><span>0</span></div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<span>手动减少：</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>消耗：</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>报损：</span><span>0</span>
|
||||
</div><span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>出库：</span><span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import API from "@/api/product/index";
|
||||
import { onMounted, reactive } from "vue";
|
||||
onMounted(() => {
|
||||
getPage();
|
||||
})
|
||||
let datas = reactive({
|
||||
totalRow: 0
|
||||
})
|
||||
async function getPage() {
|
||||
let res = await API.getPage();
|
||||
datas.totalRow = res.totalRow
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.DataStatistics {
|
||||
border: 1px solid #e4e7ed;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
>div {
|
||||
height: 80px;
|
||||
background-color: #f4f9ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
.iconStyle {
|
||||
background-color: #d4e9fe;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
font-size: 36px;
|
||||
color: #3f9eff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="Search">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="耗材分类">
|
||||
<el-select v-model="formInline.region" placeholder="请选择耗材分类" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="耗材名称">
|
||||
<el-input v-model="formInline.user" placeholder="请输入耗材名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker v-model="formInline.value1" type="daterange" range-separator="-" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排列方式">
|
||||
<el-select v-model="formInline.region" placeholder="请选择排列方式" clearable>
|
||||
<el-option label="创建时间" value="shanghai" />
|
||||
<el-option label="数量由低到高" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import eventBus from '@/utils/eventBus'
|
||||
const formInline = reactive({
|
||||
user: '',
|
||||
region: '',
|
||||
date: '',
|
||||
value1: ""
|
||||
})
|
||||
const onSubmit = () => {
|
||||
eventBus.emit('search', formInline)
|
||||
}
|
||||
const reset = () => {
|
||||
formInline.user = ''
|
||||
formInline.region = ''
|
||||
formInline.date = ''
|
||||
formInline.value1 = ''
|
||||
eventBus.emit('search', formInline)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.Search {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-input {
|
||||
--el-input-width: 220px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-select {
|
||||
--el-select-width: 220px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import request from "@/utils/request";
|
||||
const baseURL = "/product/admin/prod/group";
|
||||
// XXX-配置
|
||||
const AuthAPI = {
|
||||
// 列表
|
||||
getList(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/list`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
/** 分页*/
|
||||
getPage(params: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/page`,
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
},
|
||||
// 新增
|
||||
add(data: any) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}`,
|
||||
method: "post",
|
||||
data: { ...data },
|
||||
});
|
||||
},
|
||||
// 详情
|
||||
getinfo(id: number) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
},
|
||||
// 编辑
|
||||
update(data: Object) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}`,
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteByIds(id: number | String) {
|
||||
return request<any, Responseres>({
|
||||
url: `${baseURL}/${id}`,
|
||||
method: "delete",
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
export interface Responseres {
|
||||
code?: number | null;
|
||||
data?: any;
|
||||
msg?: null | string;
|
||||
[property: string]: any;
|
||||
}
|
||||
|
||||
export default AuthAPI;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<el-button type="success" icon="Plus" @click="addEvent">新增</el-button>
|
||||
<el-button @click="toUrl('supplier')">其他按钮</el-button>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const emit = defineEmits(['add']);
|
||||
function toUrl(name) {
|
||||
router.push({ name });
|
||||
}
|
||||
function addEvent() {
|
||||
emit('add');
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
|
||||
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
|
||||
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
pagingConfig: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['sizeChange', 'currentChange'])
|
||||
// 当前条改变
|
||||
function handleSizeChange(val) {
|
||||
emit('sizeChange', val)
|
||||
}
|
||||
// 当前页改变
|
||||
function handleCurrentChange(val) {
|
||||
emit('currentChange', val)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-table :data="props.list" border style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link icon="Delete" style="color: #f89797;"
|
||||
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(['handleDelete'])
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
function handleEdit(row) {
|
||||
emit('handleEdit', row)
|
||||
}
|
||||
async function handleDelete(index, row) {
|
||||
emit('handleDelete', row.id)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -39,7 +39,7 @@ const datas = reactive({
|
|||
title: '新增数据',
|
||||
pagingConfig: {
|
||||
total: 0, // 总数
|
||||
pageSize: "10", // 每页数据数量
|
||||
pageSize: 10, // 每页数据数量
|
||||
pageNumber: 1, // 当前页码
|
||||
},
|
||||
DialogForm: { // 弹窗表单数据
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
<el-table-column label="操作" width="250">
|
||||
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="text" icon="Delete" style="color: #f89797;"
|
||||
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link icon="Delete" style="color: #f89797;"
|
||||
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
|
||||
<el-button size="small" type="text" @click="PaymentRecord(scope.$index, scope.row)">结款记录</el-button>
|
||||
<el-button size="small" type="primary" link @click="PaymentRecord()">结款记录</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['handleDelete'])
|
||||
const props = defineProps({
|
||||
|
|
@ -42,8 +42,7 @@ async function handleDelete(index, row) {
|
|||
emit('handleDelete', row.id)
|
||||
}
|
||||
function PaymentRecord() {
|
||||
router.push({
|
||||
name: 'PaymentRecord'
|
||||
})
|
||||
router.push({ name: 'paymentRecord' });
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const datas = reactive({
|
|||
title: '新增数据',
|
||||
pagingConfig: {
|
||||
total: 0, // 总数
|
||||
pageSize: "10", // 每页数据数量
|
||||
pageSize: 10, // 每页数据数量
|
||||
pageNumber: 1, // 当前页码
|
||||
},
|
||||
DialogForm: { // 弹窗表单数据
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<el-table-column prop="address" label="Address" />
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="text" icon="Delete" style="color: #f89797;"
|
||||
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" link icon="Delete" style="color: #f89797;"
|
||||
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
|
|||
Loading…
Reference in New Issue