物业后台框架基本完成
This commit is contained in:
Zy
@@ -1,9 +1,106 @@
|
||||
<template>
|
||||
<div class=" "></div>
|
||||
<el-card style="margin-top: 20px; height: 100%">
|
||||
<div class="p-2 flex flex-col cashierbox h-full">
|
||||
<div class="flex">
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
<div style="margin: 0 80px">小区： 北境碧桂园小区</div>
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
</div>
|
||||
<div class="actionsbox">
|
||||
<el-button type="primary">收款</el-button>
|
||||
<el-button>添加临时收费</el-button>
|
||||
<el-button>预存</el-button>
|
||||
<el-button>打印</el-button>
|
||||
<el-button @click="emit('Back')">返回</el-button>
|
||||
</div>
|
||||
<div class="tablebox">
|
||||
<el-table>
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="房屋/车位/车辆">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费项目">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="单价">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应收金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="缴费状态">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="应缴金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
};
|
||||
|
||||
const emit = defineEmits(['Back']);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.cashierbox {
|
||||
font-size: 0.8rem;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,95 @@
|
||||
<template>
|
||||
<div class=" "></div>
|
||||
<div class="p-2 flex flex-col cashierbox h-full">
|
||||
<div class="flex">
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
<div style="margin: 0 80px">小区： 北境碧桂园小区</div>
|
||||
<div>小区： 北境碧桂园小区</div>
|
||||
</div>
|
||||
<div class="tablebox">
|
||||
<el-table>
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="房屋/车位/车辆">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费项目">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="收费周期">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="单价">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数量">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="应收金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="缴费状态">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="应缴金额">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.$index }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.cashierbox {
|
||||
font-size: 0.8rem;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="p-2 h-full flex flex-col">
|
||||
<Pageheader title="收银台管理"></Pageheader>
|
||||
<div class="">
|
||||
<div class="" v-if="isSearch">
|
||||
<p class="actionsmain">
|
||||
功能说明：可根据住户姓名、住户手机号、房屋号、车位号、车牌号，快速搜索对应的未缴费用，修改未缴费用的优惠及滞纳金金额，完成对未缴费用的收取。
|
||||
</p>
|
||||
@@ -34,39 +34,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div v-else style="margin-top: 20px; height: calc(100% - 210px)">
|
||||
<div class="tabsbox">
|
||||
<div @click="handleChecout(index)" v-for="(item, index) in tabs" :key="index" class="tabs_item" :class="{ active: checkouttabs === index }">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<component :is="tabs[checkouttabs].component" :key="checkouttabs"></component>
|
||||
<div class="h-full">
|
||||
<el-card style="height: 100%; margin-top: 20px" v-if="checkouttabs === 0">
|
||||
<cashier @Back="handleBack"></cashier>
|
||||
</el-card>
|
||||
<el-card style="height: 100%; margin-top: 20px" shadow="never" v-if="checkouttabs === 1">
|
||||
<history></history>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// TODO 收银台
|
||||
// TODO 历史缴费
|
||||
// TODO 添加临时收费
|
||||
// TODO 预存
|
||||
// TODO 缴费
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import cashier from './cashier.vue';
|
||||
import history from './history.vue';
|
||||
|
||||
const isSearch = ref(false);
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_cashier_type } = toRefs<any>(proxy?.useDict('com_cashier_type'));
|
||||
const searchform = ref({
|
||||
type: '0'
|
||||
});
|
||||
const list = ref([]);
|
||||
|
||||
// ! ===================================================================================
|
||||
const checkouttabs = ref(0);
|
||||
const tabs = [
|
||||
{
|
||||
name: "'收银台'",
|
||||
name: '收银台',
|
||||
component: cashier
|
||||
},
|
||||
{
|
||||
@@ -78,6 +87,22 @@ function handleChecout(index: number) {
|
||||
checkouttabs.value = index;
|
||||
}
|
||||
// ! ===================================================================================
|
||||
|
||||
// ! ===================================================================================
|
||||
const total = ref(100);
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const tableData1 = ref([]);
|
||||
const getList = () => {
|
||||
console.log('getList');
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
isSearch.value = true;
|
||||
};
|
||||
// ! ===================================================================================
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -171,4 +196,27 @@ function handleChecout(index: number) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
.cashierbox {
|
||||
font-size: 0.8rem;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.actionsbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tablebox {
|
||||
margin-top: 20px;
|
||||
height: 100%;
|
||||
.el-table {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Upload">批量更新固件</el-button>
|
||||
<!-- <el-button type="success" plain icon="Upload">批量更新固件</el-button> -->
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
Reference in New Issue
Block a user