master
parent
06e95b862a
commit
50f8b5f714
@ -1,223 +1,152 @@
|
||||
<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"
|
||||
<template>
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="填报查看" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<slot>
|
||||
<div style="display: flex">
|
||||
<div style="margin-right:10px">
|
||||
<DatePicker v-model="select.year" @on-change="changeYear" type="year" placeholder="选择总览年份" style="width: 150px" />
|
||||
</div>
|
||||
<div style="margin-right:10px">
|
||||
<Select v-model="select.department_id" placeholder="请选择部门" style="width:150px">
|
||||
<Option v-for="item in depList"
|
||||
:value="item.id" :key="item.id">{{ item.name }}</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div style="margin-right:10px">
|
||||
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 150px" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
@click="$refs['xyTable'].getTableData(true)"
|
||||
>查询</Button
|
||||
>
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
|
||||
<xy-table ref="xyTable"
|
||||
: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">
|
||||
:auths="auths_auth_mixin"
|
||||
:action="index">
|
||||
<template v-slot:btns>
|
||||
<el-table-column align='center' fixed="right" 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>
|
||||
<div style="display: flex;">
|
||||
<Button size="small" type="primary" @click="">查看</Button>
|
||||
</div>
|
||||
|
||||
</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;
|
||||
}
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index,destroy } from "@/api/person"
|
||||
import { authMixin } from "@/mixin/authMixin";
|
||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||
import LxHeader from "@/components/LxHeader/index.vue";
|
||||
export default {
|
||||
mixins: [authMixin],
|
||||
components: {
|
||||
headerContent,
|
||||
LxHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select:{
|
||||
year:'',
|
||||
department_id:'',
|
||||
keyword:''
|
||||
},
|
||||
depList:[],
|
||||
table: [
|
||||
{
|
||||
type: "index",
|
||||
width: 46,
|
||||
label: "序号"
|
||||
},
|
||||
{
|
||||
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>)
|
||||
}
|
||||
prop: "name",
|
||||
label: "姓名",
|
||||
width:120
|
||||
},
|
||||
{
|
||||
label: "年份",
|
||||
prop: "year",
|
||||
width:120,
|
||||
customFn:row => {
|
||||
return row._type === 'type' ? '--' : row.year;
|
||||
}
|
||||
prop: "department.name",
|
||||
label: "部门",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
prop: "person.name",
|
||||
label: "清单类型",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
prop: "start_date",
|
||||
label: "开始填报日期",
|
||||
width: 160
|
||||
},
|
||||
|
||||
{
|
||||
label: "当前逾期",
|
||||
prop: "",
|
||||
width:120,
|
||||
prop: "end_date",
|
||||
label: "结束填报日期",
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
prop: "records_count",
|
||||
label: "填报数量",
|
||||
width:120,
|
||||
customFn:row => {
|
||||
if (!row.children?.length) {
|
||||
return (<span>{row.records_count}</span>)
|
||||
prop: "status",
|
||||
label: "填报状态",
|
||||
width: 160,
|
||||
customFn: (row) => {
|
||||
return ( <el-switch
|
||||
v-model={row.status}
|
||||
on = {
|
||||
{
|
||||
['change']: (e) => {
|
||||
|
||||
}
|
||||
}
|
||||
}></el-switch>)
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
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){
|
||||
},
|
||||
// {
|
||||
// prop: "position",
|
||||
// label: "职位"
|
||||
// },
|
||||
// {
|
||||
// prop: "is_active",
|
||||
// label: "是否在职",
|
||||
// width: 80,
|
||||
// formatter:(v1,v2,val) => {
|
||||
// return val ? "在职" : "离职"
|
||||
// }
|
||||
// },
|
||||
{
|
||||
prop: "username",
|
||||
label: "用户名"
|
||||
},
|
||||
|
||||
},
|
||||
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);
|
||||
{
|
||||
width: 80,
|
||||
prop: "myindex",
|
||||
label: "排序"
|
||||
}
|
||||
return str
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
index,destroy,
|
||||
getList(){},
|
||||
changeYear(){
|
||||
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
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>
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" text="填报总览" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<slot>
|
||||
<el-date-picker
|
||||
v-model="select.year"
|
||||
@change="changeYear"
|
||||
type="year"
|
||||
placeholder="选择总览年份">
|
||||
</el-date-picker>
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<div>5</div>
|
||||
<div>清单类型</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>5</div>
|
||||
<div>填报清单项</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>5</div>
|
||||
<div>“一把手”和领导班子</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>5</div>
|
||||
<div>条填报记录</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>5</div>
|
||||
<div>超期未报</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
select:{
|
||||
year:''
|
||||
},
|
||||
viewlist:{}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
changeYear(e){}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
}
|
||||
.content>div{
|
||||
border:1px solid #333;
|
||||
width:18%;
|
||||
padding:60px 0;
|
||||
background-color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.content>div>div:first-child{
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue