master
parent
06e95b862a
commit
50f8b5f714
@ -1,223 +1,152 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div ref="lxHeader">
|
<div ref="lxHeader">
|
||||||
<lx-header icon="md-apps" text="填报查看" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
<lx-header icon="md-apps" text="填报查看" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||||
<slot>
|
<slot>
|
||||||
|
<div style="display: flex">
|
||||||
</slot>
|
<div style="margin-right:10px">
|
||||||
</lx-header>
|
<DatePicker v-model="select.year" @on-change="changeYear" type="year" placeholder="选择总览年份" style="width: 150px" />
|
||||||
</div>
|
</div>
|
||||||
<div class="wrapper">
|
<div style="margin-right:10px">
|
||||||
<div style="padding:15px">
|
<Select v-model="select.department_id" placeholder="请选择部门" style="width:150px">
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<Option v-for="item in depList"
|
||||||
<el-tab-pane v-for="(item,index) in categoryTypeList" :label="item.title" :name="index+'查看'">
|
:value="item.id" :key="item.id">{{ item.name }}</Option>
|
||||||
<div></div>
|
</Select>
|
||||||
</el-tab-pane>
|
</div>
|
||||||
</el-tabs>
|
<div style="margin-right:10px">
|
||||||
<el-radio-group v-model="select.year">
|
<Input v-model="select.keyword" placeholder="请输入关键字" style="width: 150px" />
|
||||||
<el-radio v-for="item in years" :label="item">{{item}}</el-radio>
|
</div>
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
<Button
|
||||||
<xy-table ref="xyTable"
|
type="primary"
|
||||||
:is-page="false"
|
@click="$refs['xyTable'].getTableData(true)"
|
||||||
|
>查询</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</lx-header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<xy-table ref="xyTable"
|
||||||
:table-item="table"
|
:table-item="table"
|
||||||
:list="list"
|
:auths="auths_auth_mixin"
|
||||||
:indent="20"
|
:action="index">
|
||||||
:row-key="row => row.id"
|
<template v-slot:btns>
|
||||||
>
|
<el-table-column align='center' fixed="right" label="操作" width="100" header-align="center">
|
||||||
<template #btns>
|
|
||||||
<el-table-column align='center' label="操作" width="100" header-align="center">
|
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<template v-if="scope.row._type === 'doc'">
|
<div style="display: flex;">
|
||||||
<Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="getDetail">查看</Button>
|
<Button size="small" type="primary" @click="">查看</Button>
|
||||||
</template>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</template>
|
</template>
|
||||||
</xy-table>
|
</xy-table>
|
||||||
</div>
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
</div>
|
<script>
|
||||||
</template>
|
import { index,destroy } from "@/api/person"
|
||||||
|
import { authMixin } from "@/mixin/authMixin";
|
||||||
<script>
|
import headerContent from "@/components/LxHeader/XyContent.vue";
|
||||||
import {
|
import LxHeader from "@/components/LxHeader/index.vue";
|
||||||
index as getCategory
|
export default {
|
||||||
} from "@/api/category"
|
mixins: [authMixin],
|
||||||
import {
|
components: {
|
||||||
index
|
headerContent,
|
||||||
} from "@/api/categoryType"
|
LxHeader,
|
||||||
import headerContent from "@/components/LxHeader/XyContent.vue";
|
},
|
||||||
import LxHeader from "@/components/LxHeader/index.vue";
|
data() {
|
||||||
export default {
|
return {
|
||||||
components: {
|
select:{
|
||||||
headerContent,
|
year:'',
|
||||||
LxHeader
|
department_id:'',
|
||||||
},
|
keyword:''
|
||||||
data() {
|
},
|
||||||
return {
|
depList:[],
|
||||||
activeName: "0查看",
|
table: [
|
||||||
categoryTypeList: [],
|
{
|
||||||
years: [],
|
type: "index",
|
||||||
select: {
|
width: 46,
|
||||||
page: 1,
|
label: "序号"
|
||||||
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",
|
prop: "name",
|
||||||
label: "清单类型名称",
|
label: "姓名",
|
||||||
align: "left",
|
width:120
|
||||||
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: "department.name",
|
||||||
prop: "year",
|
label: "部门",
|
||||||
width:120,
|
width: 120
|
||||||
customFn:row => {
|
},
|
||||||
return row._type === 'type' ? '--' : row.year;
|
{
|
||||||
}
|
prop: "person.name",
|
||||||
|
label: "清单类型",
|
||||||
|
width: 120
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: "start_date",
|
||||||
|
label: "开始填报日期",
|
||||||
|
width: 160
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: "当前逾期",
|
prop: "end_date",
|
||||||
prop: "",
|
label: "结束填报日期",
|
||||||
width:120,
|
width: 160
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: "records_count",
|
prop: "status",
|
||||||
label: "填报数量",
|
label: "填报状态",
|
||||||
width:120,
|
width: 160,
|
||||||
customFn:row => {
|
customFn: (row) => {
|
||||||
if (!row.children?.length) {
|
return ( <el-switch
|
||||||
return (<span>{row.records_count}</span>)
|
v-model={row.status}
|
||||||
|
on = {
|
||||||
|
{
|
||||||
|
['change']: (e) => {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}></el-switch>)
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
// {
|
||||||
]
|
// prop: "position",
|
||||||
}
|
// label: "职位"
|
||||||
},
|
// },
|
||||||
created() {
|
// {
|
||||||
this.getCategoryTypeList()
|
// prop: "is_active",
|
||||||
this.getSelectYear()
|
// label: "是否在职",
|
||||||
this.getCategoryList()
|
// width: 80,
|
||||||
},
|
// formatter:(v1,v2,val) => {
|
||||||
methods: {
|
// return val ? "在职" : "离职"
|
||||||
async getCategoryTypeList() {
|
// }
|
||||||
const res = await index({
|
// },
|
||||||
page: 1,
|
{
|
||||||
page_size: 999
|
prop: "username",
|
||||||
})
|
label: "用户名"
|
||||||
this.categoryTypeList = res.data
|
},
|
||||||
},
|
|
||||||
async getCategoryList(){
|
|
||||||
let res = await getCategory()
|
|
||||||
this.formatList(res);
|
|
||||||
this.list = res;
|
|
||||||
},
|
|
||||||
getDetail(row,scope){
|
|
||||||
|
|
||||||
},
|
{
|
||||||
getSelectYear() {
|
width: 80,
|
||||||
const currentYear = this.$moment().format('YYYY');
|
prop: "myindex",
|
||||||
const years = [];
|
label: "排序"
|
||||||
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
|
]
|
||||||
},
|
}
|
||||||
|
},
|
||||||
|
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">
|
<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>
|
</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