parent
48db3c4a18
commit
9cbf549508
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="填报查看" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div style="padding:15px">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item,index) in categoryTypeList" :label="item.title" :name="index+'查看'">
|
||||
<div></div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-radio-group v-model="select.year">
|
||||
<el-radio v-for="item in years" :label="item">{{item}}</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<xy-table ref="xyTable"
|
||||
:is-page="false"
|
||||
:table-item="table"
|
||||
:list="list"
|
||||
:indent="20"
|
||||
:row-key="row => row.id"
|
||||
>
|
||||
<template #btns>
|
||||
<el-table-column align='center' label="操作" width="100" header-align="center">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row._type === 'doc'">
|
||||
<Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="getDetail">查看</Button>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</xy-table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
index as getCategory
|
||||
} from "@/api/category"
|
||||
import {
|
||||
index
|
||||
} from "@/api/categoryType"
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
headerContent,
|
||||
LxHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "0查看",
|
||||
categoryTypeList: [],
|
||||
years: [],
|
||||
select: {
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
year: this.$moment().format('YYYY')
|
||||
},
|
||||
list: [],
|
||||
table: [{
|
||||
type: "",
|
||||
label: "",
|
||||
prop: "index",
|
||||
customFn:row => {
|
||||
return row._type === 'type' ? row._text : row._index;
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: "title",
|
||||
label: "清单类型名称",
|
||||
align: "left",
|
||||
customFn:row => {
|
||||
return row._type === 'type' ? (<span><i style="padding: 0 8px;color: rgb(239, 216, 117);" class="el-icon-folder-opened"></i><span>{row.title}</span></span>) : (
|
||||
<span><i style="padding: 0 8px;" class="el-icon-document"></i><span>{row.title}</span></span>)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "年份",
|
||||
prop: "year",
|
||||
width:120,
|
||||
customFn:row => {
|
||||
return row._type === 'type' ? '--' : row.year;
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
label: "当前逾期",
|
||||
prop: "",
|
||||
width:120,
|
||||
},
|
||||
{
|
||||
prop: "records_count",
|
||||
label: "填报数量",
|
||||
width:120,
|
||||
customFn:row => {
|
||||
if (!row.children?.length) {
|
||||
return (<span>{row.records_count}</span>)
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCategoryTypeList()
|
||||
this.getSelectYear()
|
||||
this.getCategoryList()
|
||||
},
|
||||
methods: {
|
||||
async getCategoryTypeList() {
|
||||
const res = await index({
|
||||
page: 1,
|
||||
page_size: 999
|
||||
})
|
||||
this.categoryTypeList = res.data
|
||||
},
|
||||
async getCategoryList(){
|
||||
let res = await getCategory()
|
||||
this.formatList(res);
|
||||
this.list = res;
|
||||
},
|
||||
getDetail(row,scope){
|
||||
|
||||
},
|
||||
getSelectYear() {
|
||||
const currentYear = this.$moment().format('YYYY');
|
||||
const years = [];
|
||||
for (let i = currentYear; i >= 2017; i--) {
|
||||
years.push(i);
|
||||
}
|
||||
this.years = years
|
||||
},
|
||||
toChineseNum(number) {
|
||||
const chineseNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
|
||||
const chineseUnit = ["", "十", "百", "千", "万", "亿"];
|
||||
let numStr = number.toString();
|
||||
let len = numStr.length;
|
||||
let str = "";
|
||||
for (let i = 0; i < len; i++) {
|
||||
str += chineseNum[parseInt(numStr[i])] + chineseUnit[len - 1 - i];
|
||||
}
|
||||
str = str.replace(/零[十百千]/g, "零");
|
||||
str = str.replace(/零+/g, "零");
|
||||
str = str.replace(/^零+/, "");
|
||||
str = str.replace(/零+$/, "");
|
||||
if (str[str.length - 1] === "零") {
|
||||
str = str.slice(0, -1);
|
||||
}
|
||||
return str
|
||||
},
|
||||
|
||||
formatList (data=[],pid) {
|
||||
data.forEach((item,index) => {
|
||||
if (item.hasOwnProperty('categories_tree')) {
|
||||
item._id = item.id
|
||||
delete item.id;
|
||||
item._disabled = true
|
||||
item._type = 'type'
|
||||
item.children = item.categories_tree
|
||||
item._text = this.toChineseNum(index+1)
|
||||
} else {
|
||||
item._type = 'doc'
|
||||
item._index = pid ? `${pid}-${index+1}` : (index+1)
|
||||
}
|
||||
if (item.children instanceof Array && item.children.length > 0) {
|
||||
this.formatList(item.children,item._index ? item._index : false)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick() {},
|
||||
},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper{
|
||||
background-color: #fff;
|
||||
}
|
||||
::v-deep .el-radio__input.is-checked+.el-radio__label {
|
||||
color: #c4312b;
|
||||
}
|
||||
|
||||
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
||||
background-color: #c4312b;
|
||||
border-color: #c4312b;
|
||||
}
|
||||
::v-deep .el-radio__inner{
|
||||
width:18px;
|
||||
height:18px;
|
||||
}
|
||||
::v-deep .el-radio__input.is-checked .el-radio__inner:after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
margin-top:-1px;
|
||||
border: 2px solid white;
|
||||
border-top: transparent;
|
||||
border-right: transparent;
|
||||
text-align: center;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
vertical-align: middle;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
border-radius: 0px;
|
||||
background: none;
|
||||
}
|
||||
::v-deep .el-tabs__nav-wrap::after{
|
||||
background-color: #EBEEF5;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue