339 lines
14 KiB
HTML
339 lines
14 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.el-tabs__content {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.el-dialog__body div div {
|
|
color: #ff0000;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.query-row {
|
|
height: 70px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.query-row:not(:last-child) {
|
|
border-bottom: 1px dashed rgb(230, 230, 230);
|
|
}
|
|
|
|
/*.query-row:not(:last-child,:first-child) {*/
|
|
/* height: 70px;*/
|
|
/*}*/
|
|
|
|
.query-row-title {
|
|
width: 120px;
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 13px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.button {
|
|
padding: 0;
|
|
float: right;
|
|
}
|
|
|
|
.image {
|
|
margin: 10px;
|
|
width: 100px;
|
|
display: block;
|
|
}
|
|
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.time {
|
|
font-size: 16px;
|
|
color: #999;
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
|
|
</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"
|
|
type="year"
|
|
style="width: 100%"
|
|
@change="doSearch"
|
|
value-format="yyyy"
|
|
placeholder="请选择">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="search-item">
|
|
<div class="search-item-label">项目名称：</div>
|
|
<div class="search-item-option">
|
|
<div class="search-item-option">
|
|
<el-select v-model="pageForm.projectId" placeholder="请选择项目名称"
|
|
style="width: 100%;"
|
|
clearable
|
|
@change="doSearch();"
|
|
filterable="true">
|
|
<el-option v-for="o in projectList"
|
|
:label="o.projectName"
|
|
:value="o.id"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="search-item">
|
|
<div class="search-item-label">货物名称：</div>
|
|
<div class="search-item-option">
|
|
<el-input placeholder="请输入内容" clearable v-model="pageForm.goodsName"
|
|
@keyup.enter.native="doSearch" style="width:100%"></el-input>
|
|
</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" style="margin-top: 10px">
|
|
<el-row type="flex" align="middle" class="query-row">
|
|
<el-col class="query-row-title">货物类型：</el-col>
|
|
<el-col class="query-row-content">
|
|
<el-tag
|
|
style="margin-right: 10px;cursor: pointer"
|
|
v-for="item in typeList"
|
|
:key="item.id"
|
|
:type="item.typeName"
|
|
:effect="pageForm.types.includes(item.id)?'dark':'plain'"
|
|
@click="checkType(item.id)">
|
|
{{ item.typeName }}
|
|
</el-tag>
|
|
|
|
<el-link type="danger" v-if="typeList.length&&pageForm.types.length"
|
|
:underline="false"
|
|
@click="pageForm.types=[];doSearch()">清空
|
|
</el-link>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="mt10">
|
|
<template>
|
|
<vi-title2 title="货物列表">
|
|
<!--<template #func>
|
|
<el-button @click="openAdd" size="medium" type="primary">添加货物</el-button>
|
|
</template>-->
|
|
</vi-title2>
|
|
</template>
|
|
<el-table :data="tableData" style="width: 100%" row-key="id"
|
|
@sort-change="pageOrder" :size="tableSize"
|
|
v-loading="tableLoading" ref="table" class="vi-table">
|
|
<el-table-column align="center" header-align="center" type="index"
|
|
:index="indexMethod" label="序号"
|
|
width="80px"></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
header-align="center"
|
|
v-for="column in tableColumns"
|
|
show-overflow-tooltip
|
|
:sortable="column.sortable"
|
|
:label="column.label"
|
|
:prop="column.prop" :width="column.width" min-width="100px">
|
|
<template v-if="column.prop==='imgUrl'" scope="{row}">
|
|
<el-image
|
|
:src="CREATE_PREVIEW_URL(row.imgUrl)"
|
|
@click="preview(row.imgUrl,row.imgUrl)"
|
|
fit="cover"
|
|
v-if="row.imgUrl"
|
|
style="width: 50px; height: 50px;"></el-image>
|
|
<div v-else>暂无</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userOnline" align="center" header-align="center"
|
|
label="操作" width="100px">
|
|
<template scope="{row}">
|
|
<el-button size="mini" @click="showInfo(row)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
<!--<div class="right">
|
|
<vi-title2 title="货物列表">
|
|
<!–<template #func>
|
|
<el-button @click="openAdd" size="medium" type="primary">添加货物</el-button>
|
|
</template>–>
|
|
</vi-title2>
|
|
</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="4" v-for="(o, index) in tableData" :key="o"
|
|
:offset="index > 0 ? tableData.length : 0">
|
|
<el-card :body-style="{ padding: '0px' }"
|
|
style="height: 200px;width: 300px;margin: 10px auto;padding: 10px">
|
|
<div style="display: flex">
|
|
<div>
|
|
<el-image :src="CREATE_PREVIEW_URL(o.imgUrl)"
|
|
@click="preview(o.imgUrl,o.imgUrl)"
|
|
fit="cover"
|
|
v-if="o.imgUrl"
|
|
class="image"></el-image>
|
|
</div>
|
|
<div>
|
|
<h4>{{o.goodsName}}</h4>
|
|
<h5>¥{{o.goodsPrice}}</h5>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 14px;">
|
|
<!–<span>{{o.goodsName}}</span>–>
|
|
<div style="margin-top: 10px">
|
|
<span class="time">厂商:{{ o.manufacturer }}</span>
|
|
<el-button type="text" style="font-size: 16px" @click="showInfo(o.id)"
|
|
class="button">详情
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>-->
|
|
</el-card>
|
|
</template>
|
|
|
|
<template #view>
|
|
<el-descriptions :column="4" border class="table_fixed">
|
|
<template>
|
|
<el-descriptions-item :span="2" label="货物名称">
|
|
{{viewData.goodsName}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item :span="2" label="货物价格">
|
|
¥{{viewData.goodsPrice}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item :span="2" label="货物类别">
|
|
{{viewData.typeId}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item :span="2" label="厂商">
|
|
{{viewData.manufacturer}}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item :span="4" label="货物详情">
|
|
<span v-html="viewData.description"></span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item :span="2" label="货物图片">
|
|
<el-image
|
|
:src="CREATE_PREVIEW_URL(viewData.imgUrl)"
|
|
@click="preview(viewData.imgUrl,viewData.imgUrl)"
|
|
fit="cover"
|
|
v-if="viewData.imgUrl"
|
|
style="width: 100px; height: 100px;"></el-image>
|
|
<div v-else>暂无</div>
|
|
</el-descriptions-item>
|
|
</template>
|
|
</el-descriptions>
|
|
</template>
|
|
</guava>
|
|
</div>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
tableColumns: [
|
|
{prop: 'goodsName', label: '货物名称'},
|
|
{prop: 'imgUrl', label: '图片'},
|
|
{prop: 'goodsPrice', label: '单价'},
|
|
{prop: 'typeName', label: '类别'},
|
|
{prop: 'manufacturer', label: '厂商'},
|
|
],
|
|
pageForm: {
|
|
year: moment().format('YYYY'),
|
|
types: [],
|
|
},
|
|
projectList: [],
|
|
typeList: [],
|
|
viewData: {},
|
|
formData: {
|
|
benefitingExhibits: [],
|
|
},
|
|
formRules: {
|
|
projectName: [{required: true, message: '必填', trigger: ['blur', 'change']}],
|
|
benefitingExhibits: [{
|
|
required: true,
|
|
message: '必填',
|
|
trigger: ['blur', 'change']
|
|
}],
|
|
},
|
|
projectInfo:{},
|
|
}
|
|
},
|
|
components: {},
|
|
methods: {
|
|
pageData() {
|
|
sublime.showLoadingbar();
|
|
const pageForm = clone(this.pageForm)
|
|
pageForm.types = JSON.stringify(pageForm.types)
|
|
|
|
$.post(loc() + "/pageData", pageForm, (data) => {
|
|
sublime.closeLoadingbar();
|
|
if (data.code === 0) {
|
|
this.tableData = data.data.list;
|
|
this.pageForm.totalCount = data.data.totalCount;
|
|
} else {
|
|
this.$message.error(data.msg);
|
|
}
|
|
}, "json");
|
|
},
|
|
showInfo(id) {
|
|
this.viewData = this.tableData.find(v => v.id = id);
|
|
const obj = this.typeList.find(v=> v.id=this.viewData.typeId)
|
|
this.viewData.typeId = obj.typeName
|
|
this.$refs.guava.view()
|
|
},
|
|
checkType(id) {
|
|
let idx = this.pageForm.types.indexOf(id)
|
|
if (idx !== -1) {
|
|
this.pageForm.types.splice(idx, 1)
|
|
} else {
|
|
this.pageForm.types.push(id)
|
|
}
|
|
this.doSearch();
|
|
},
|
|
async getAllProject() {
|
|
const resp = await $.get('/platform/benefiting/manage/getAll')
|
|
this.projectList = resp.data
|
|
this.pageForm.projectId = this.projectList[0].id
|
|
},
|
|
async getAllType() {
|
|
const resp = await $.get('/platform/benefiting/type/findAllType')
|
|
if (resp.code === 0) {
|
|
this.typeList = resp.data;
|
|
}
|
|
},
|
|
async openAdd() {
|
|
window.location.href='/platform/benefiting/manage'
|
|
},
|
|
},
|
|
async created() {
|
|
this.pageData();
|
|
await this.getAllProject();
|
|
await this.getAllType();
|
|
},
|
|
});
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|