first commit
This commit is contained in:
@@ -0,0 +1,338 @@
|
||||
<!--#
|
||||
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>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user