You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

342 lines
8.3 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--收入登记-->
<template>
<div style="padding: 0 20px">
<lx-header
icon="md-apps"
style="margin-bottom: 10px; border: 0px; margin-top: 15px"
text="收入登记"
>
<div slot="content"></div>
<slot>
<div class="select-bar">
<div>
<span style="padding: 0 6px">创建日期</span>
<span>
<DatePicker
:value="select.year"
placeholder="选择开始日期"
placement="bottom"
style="width: 114px"
type="date"
@on-change="(e) => (select.year = e)"
></DatePicker>
<DatePicker
:value="select.year"
placeholder="选择结束日期"
placement="bottom"
style="width: 114px; margin-left: 6px"
type="date"
@on-change="(e) => (select.year = e)"
></DatePicker>
</span>
</div>
<div>
<span style="padding: 0 6px"> 项目类型 </span>
<span>
<Select
v-model="select.type"
clearable
placeholder="选择项目类型"
style="width: 130px"
>
<Option v-for="item in types" :key="item.id" :value="item.id"
>{{ item.value }}
</Option>
</Select>
</span>
</div>
<div>
<span style="padding: 0 6px"> 科室 </span>
<span>
<Select
placeholder="科室选择"
clearable
v-model="select.department"
style="width: 130px"
>
<Option
v-for="item in departments"
:key="item.id"
:value="item.id"
>{{ item.name }}</Option
>
</Select>
</span>
</div>
<div>
<span style="padding: 0 6px"> 报销类型 </span>
<span>
<Select
v-model="select.type"
clearable
placeholder="选择报销类型"
style="width: 130px"
>
<Option v-for="item in types" :key="item.id" :value="item.id">{{
item.value
}}</Option>
</Select>
</span>
</div>
<div>
<span style="padding: 0 6px"> 报销金额 </span>
<span>
<InputNumber
style="width: 110px"
placeholder="最低价"
v-model="select.end_money"
:formatter="
(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
"
:parser="(value) => value.replace(/\s?|(,*)/g, '')"
></InputNumber>
<InputNumber
style="width: 110px; margin-left: 6px"
placeholder="最高价"
v-model="select.end_money"
:formatter="
(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
"
:parser="(value) => value.replace(/\s?|(,*)/g, '')"
></InputNumber>
</span>
</div>
<div>
<span style="padding: 0 6px"> 状态 </span>
<span>
<Select
v-model="select.type"
clearable
placeholder="选择状态"
style="width: 110px"
>
<Option v-for="item in types" :key="item.id" :value="item.id">{{
item.value
}}</Option>
</Select>
</span>
</div>
<Button
style="margin-left: 10px"
type="primary"
@click="
$refs['addIncomeRegistration'].setType('add'),
$refs['addIncomeRegistration'].show()
"
>新增</Button
>
<Button style="margin-left: 10px" type="primary" @click="getList"
>查询</Button
>
<Button style="margin-left: 10px" type="primary" @click="init"
>重置
</Button>
</div>
</slot>
</lx-header>
<xy-table
:list="list"
:table-item="table"
@delete="(row) => destroy(row.id)"
@editor="
(row) => {
$refs['addIncomeRegistration'].setId(row.id);
$refs['addIncomeRegistration'].setType('editor');
$refs['addIncomeRegistration'].show();
}
"
></xy-table>
<div style="display: flex; justify-content: flex-end; padding: 10px 0">
<Page
:total="total"
@on-change="
(e) => {
select.page = e;
getList();
}
"
show-elevator
show-sizer
@on-page-size-change="
(e) => {
select.page_size = e;
select.page = 1;
getList();
}
"
/>
</div>
<addIncomeRegistration
:type_ids="incomeType"
:way_ids="way"
ref="addIncomeRegistration"
@refresh="getList"
></addIncomeRegistration>
</div>
</template>
<script>
import { getparameter } from "@/api/system/dictionary";
import { index, destroy } from "@/api/income";
import { listdeptNoAuth } from "@/api/system/department";
import addIncomeRegistration from "@/views/inOut/component/addIncomeRegistration.vue";
export default {
components: {
addIncomeRegistration,
},
data() {
return {
way: [],
incomeType: [],
total: 0,
select: {
page: 1,
page_size: 10,
},
types: [],
departments: [],
list: [],
table: [
{
prop: "name",
label: "收入项目",
width: 180,
fixed: "left",
},
{
prop: "type.value",
label: "收入类型",
width: 160,
},
{
prop: "from",
label: "收入来源",
width: 160,
},
{
prop: "way.value",
label: "收入方式",
width: 160,
},
{
prop: "money",
label: "收入金额",
width: 140,
align: "right",
},
{
prop: "",
label: "实际收入金额",
width: 140,
align: "right",
},
{
prop: "",
label: "已入账金额",
width: 140,
align: "right",
},
{
prop: "department.name",
label: "业务科室",
width: 140,
},
{
prop: "",
label: "状态",
width: 140,
},
{
prop: "admin.name",
label: "经办人",
width: 140,
},
{
prop: "created_at",
label: "创建日期",
width: 180,
},
],
};
},
methods: {
init() {
for (let key in this.select) {
if (this.select[key] instanceof Array) {
this.select[key] = [];
} else {
this.select[key] = "";
}
}
this.select.page = 1;
this.select.page_size = 10;
},
async getWay() {
const res = await getparameter({
number: "income_way",
});
this.way = res.detail;
},
async getIncomeType() {
const res = await getparameter({
number: "income_type",
});
this.incomeType = res.detail;
},
async getDepartment() {
this.departments = await listdeptNoAuth();
},
async getList() {
const res = await index(this.select);
this.list = res.list.data;
this.total = res.list.total;
},
destroy(id) {
destroy({
id,
}).then((_) => {
this.getList();
});
},
},
computed: {},
created() {
this.getWay();
this.getIncomeType();
this.getDepartment();
this.getList();
},
beforeRouteEnter(to, from, next) {
console.log(to.path.split("_")[1]);
next();
},
};
</script>
<style scoped lang="scss">
.select-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
& > div {
margin: 4px;
}
}
</style>