236 lines
8.8 KiB
HTML
236 lines
8.8 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.el-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.el-row .el-card {
|
|
min-width: 100%;
|
|
height: 100%;
|
|
margin-right: 20px;
|
|
transition: all .5s;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.pagination-container {
|
|
margin-top: -3px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.box-card {
|
|
.header {
|
|
min-height: 20px;
|
|
position: relative;
|
|
|
|
.label {
|
|
padding: 1px 6px;
|
|
background-color: #fdf0da;
|
|
font-size: 15px;
|
|
color: #f19901;
|
|
}
|
|
|
|
.header-label {
|
|
padding: 1px 6px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
width: 200px;
|
|
}
|
|
|
|
.card-header-tag-blue {
|
|
position: absolute;
|
|
width: 68px;
|
|
height: 30px;
|
|
top: -14px;
|
|
right: -15px;
|
|
/*background-image: url("~@/assets/images/img_dpj_t.png");*/
|
|
display: inline-block;
|
|
}
|
|
|
|
.card-header-tag-green {
|
|
position: absolute;
|
|
width: 68px;
|
|
height: 30px;
|
|
top: -14px;
|
|
right: -15px;
|
|
/*background-image: url("~@/assets/images/img_ypj_t.png");*/
|
|
display: inline-block;
|
|
}
|
|
|
|
}
|
|
|
|
.footer {
|
|
font-size: 18px !important;
|
|
background-color: rgb(245, 247, 251);
|
|
display: flex;
|
|
height: 50px;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.card-label {
|
|
color: rgb(197, 197, 197);
|
|
margin-right: 8px;
|
|
width: 70px;
|
|
display: inline-block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<template>
|
|
<el-card shadow="never">
|
|
<div class="search">
|
|
<div class="search-item">
|
|
<div class="search-item-label">年度：</div>
|
|
<div class="search-item-option">
|
|
<el-date-picker
|
|
v-model="pageForm.year"
|
|
value-format="yyyy"
|
|
formData="yyyy"
|
|
type="year"
|
|
@change="doSearch"
|
|
style="width: 100%"
|
|
placeholder="请选择年度">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="search-item">
|
|
<div class="search-item-label">所属工会：</div>
|
|
<div class="search-item-option">
|
|
<el-select placeholder="所属工会" v-model="pageForm.unionId"
|
|
style="width: 100%;"
|
|
clearable="true"
|
|
@change="doSearch"
|
|
filterable="true">
|
|
<el-option v-for="item in unions" :label="item.unionname"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-query">
|
|
<el-button type="primary" icon="el-icon-search" @click="doSearch">搜索
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="mt10">
|
|
<table-tool label="展示列表" :app="this">
|
|
<template #func>
|
|
<!--<el-button type="primary" size="small">添加信息</el-button>-->
|
|
</template>
|
|
</table-tool>
|
|
<el-row :gutter="20" style="margin-right: 15px;margin-left: -5px" type="flex" v-loading="loading">
|
|
<el-col v-for="(item, index) in tableData" :key="index" :span="6" style="margin-top: 10px">
|
|
<el-card class="box-card" shadow="always" :body-style="{ padding: '0px' }">
|
|
<div slot="header" class="header" style="display: flex">
|
|
<span class="label">{{item.unionName}}</span>
|
|
<div style="display:flex; align-items: center;color: #cccccc;margin-left: 20px">|</div>
|
|
<el-tooltip class="item" effect="dark" :content="item.position" placement="top-start">
|
|
<el-button type="text" class="header-label">查看位置</el-button>
|
|
</el-tooltip>
|
|
<!--<span class="header-label"></span>-->
|
|
</div>
|
|
<div style="margin: 15px">
|
|
<div>
|
|
<el-carousel height="150px">
|
|
<el-carousel-item v-for="o in item.picFiles" :key="item">
|
|
<el-image @click="PREVIEW_IMAGE(o.filepath)"
|
|
:src="CREATE_PREVIEW_URL(o.filepath)"
|
|
style="width: 100%;height: 100%"></el-image>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div style="display: flex;align-items: center">
|
|
<span style="color: #18c8bd;font-size: 14px">面积：{{item.area}}(㎡)</span>
|
|
<div style="display:flex; align-items: center;color: #cccccc;margin: 0 10px">|</div>
|
|
<span style="color: #18c8bd;font-size: 14px">申报日期：{{item.applyTime}}</span>
|
|
</div>
|
|
<div style="display:flex; align-items: center;color: #cccccc">|</div>
|
|
<div style="display: flex;align-items: center">
|
|
<el-button type="text"
|
|
:style="item.status === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'"
|
|
style="color: #18c8bd"></el-button>
|
|
<el-button type="text" style="color: #18c8bd;" @click="openView(item.id)">查看
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
</template>
|
|
<template #view>
|
|
<wakes-info ref="viewInfo"></wakes-info>
|
|
</template>
|
|
</guava>
|
|
</div>
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
unions: [],
|
|
tableData: [],
|
|
pageForm: {
|
|
year: moment().format('YYYY'),
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
openView(row) {
|
|
this.$refs.guava.view()
|
|
this.$refs.viewInfo.openView(row)
|
|
},
|
|
async pageData() {
|
|
const resp = await $.post(loc() + '/pageData', this.pageForm)
|
|
if (resp.code === 0) {
|
|
this.tableData = resp.data
|
|
this.tableData.forEach(item => {
|
|
item.picFiles = JSON.parse(item.picFiles)
|
|
})
|
|
}
|
|
},
|
|
flushUnits() {
|
|
},
|
|
|
|
},
|
|
components: {
|
|
'wakes-info': httpVueLoader('/components/wakeshome/info/WakesHomeInfo.vue')
|
|
},
|
|
async created() {
|
|
if ("${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')||@shiro.hasRole('H03')}" === 'true') {
|
|
this.unions = await getUnions(null, false)
|
|
} else {
|
|
this.unions = await getUnions(null, true)
|
|
this.$set(this.pageForm, 'unionId', this.unions ? this.unions[0].id : null)
|
|
this.flushUnits()
|
|
}
|
|
this.unions.unshift({id: '校工会', unionname: '校工会'})
|
|
this.pageData()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|