549 lines
23 KiB
HTML
549 lines
23 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.optionImg {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.optionImg .el-image {
|
|
height: 100px;
|
|
width: 50%;
|
|
border-radius: 10px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.descriptionClass {
|
|
height: 80px;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
text-overflow: ellipsis;
|
|
font-size: 13px;
|
|
color: #868282;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<div id="app" v-cloak>
|
|
<guava :edit_scroll="false" 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
|
|
:clearable="true"
|
|
placeholder="选择年"
|
|
type="year"
|
|
style="width: 100%"
|
|
v-model="pageForm.year"
|
|
value-format="yyyy">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="search-item">
|
|
<div class="search-item-label">福利项目：</div>
|
|
<div class="search-item-option">
|
|
<el-select @change="doSearch" clearable v-model="pageForm.projectId">
|
|
<el-option :key="item.value" :label="item.label" :value="item.value"
|
|
v-for="item in projectSelectOptions"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>-->
|
|
|
|
<div class="search-query">
|
|
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="mt10" shadow="never">
|
|
<table-tool :app="this" label="我的福利">
|
|
<template #func>
|
|
|
|
</template>
|
|
</table-tool>
|
|
|
|
<el-table :data="tableData" :size="tableSize" @sort-change="pageOrder"
|
|
class="vi-table" ref="table"
|
|
row-key="id" style="width: 100%" v-loading="tableLoading">
|
|
|
|
|
|
<el-table-column :index="indexMethod" align="center" header-align="center"
|
|
label="序号" type="index"
|
|
width="80px"></el-table-column>
|
|
|
|
<el-table-column
|
|
:label="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
:width="column.width"
|
|
align="center"
|
|
header-align="center"
|
|
min-width="100px" show-overflow-tooltip v-for="column in tableColumns">
|
|
<template scope="{row}" v-if="column.prop=='choiceTime'">
|
|
<i class="el-icon-time"></i> 
|
|
{{moment(row.choiceTimeStart).format('YYYY/MM/DD HH:mm')}}
|
|
<span>- {{moment(row.choiceTimeEnd).format('YYYY/MM/DD HH:mm')}}</span>
|
|
</template>
|
|
|
|
<template scope="{row}" v-else-if="column.prop=='isChoose'">
|
|
<span class="text-primary" v-if="row.isChoose">已选择</span>
|
|
<span class="text-danger" v-else>未选择</span>
|
|
</template>
|
|
|
|
<template scope="{row}" v-else-if="column.prop=='gist_list'">
|
|
<template v-if="!projectInfo.flexible">{{projectInfo.gift}}</template>
|
|
<template v-if="row.gist_list">
|
|
{{row.gist_list}}
|
|
</template>
|
|
</template>
|
|
|
|
<template scope="{row}" v-else-if="column.prop=='receiveAddress'">
|
|
<span v-if="row.receiveAddress">{{row.receiveAddress}}</span>
|
|
<span v-else>暂无</span>
|
|
</template>
|
|
|
|
<template scope="{row}" v-else-if="column.prop=='courierNumber'">
|
|
<span @click="viewCourierNumber(row)" class="text-primary"
|
|
style="cursor: pointer">点击查看</span>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column align="center" fixed="right" header-align="center"
|
|
label="操作" prop="userOnline"
|
|
width="250px">
|
|
<template scope="{row}">
|
|
<el-button @click="openView(row)" size="mini" type="primary">
|
|
查看
|
|
</el-button>
|
|
<!--<el-button :disabled="!row.courierNumber" @click="openExpress(row)"
|
|
size="mini"
|
|
type="primary">
|
|
查看物流
|
|
</el-button>-->
|
|
<el-button :disabled="!row.courierNumber" @click="openEvaluate(row)"
|
|
size="mini"
|
|
type="primary">
|
|
评价
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</el-card>
|
|
</template>
|
|
|
|
<template #edit>
|
|
<el-card shadow="never">
|
|
<el-form :model="formData" label-width="120px" ref="addForm">
|
|
<el-form-item label="福利名称">
|
|
<span style="font-weight: bold;font-size: 20px">{{projectInfo.name}}</span>
|
|
</el-form-item>
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item label="福利节日">
|
|
{{projectInfo.festival}}
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8" v-if="!projectInfo.flexible">
|
|
<el-form-item label="福利礼品">
|
|
{{projectInfo.gift}}
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
|
|
<el-form-item label="选择形式">
|
|
{{projectInfo.isCheckBox==='checkBox'?'多选':'单选'}}
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8" v-if="projectInfo.isCheckBox==='checkBox'">
|
|
<el-form-item label="最多选几个">
|
|
{{projectInfo.multiSelectNum}}个
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item label="发放形式">
|
|
<template>
|
|
{{welfareProvideMode.find(v=>v.code==projectInfo.provideMode) &&
|
|
welfareProvideMode.find(v=>v.code==projectInfo.provideMode).description}}
|
|
</template>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item label="签收形式">
|
|
<template>
|
|
{{welfareSignMode.find(v=>v.code==projectInfo.signMode) &&
|
|
welfareSignMode.find(v=>v.code==projectInfo.signMode).description}}
|
|
</template>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item label="选择时间">
|
|
{{projectInfo.choiceTimeStart}}至{{projectInfo.choiceTimeEnd}}
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="福利套餐">
|
|
<el-row :gutter="0">
|
|
<div :key="subject.id"
|
|
v-for="subject in projectInfo.welfareProjectSubjects">
|
|
<el-col :key="oidx" :span="6"
|
|
v-for="(option, oidx) in subject.options">
|
|
<el-card shadow="never"
|
|
style="margin: 5px">
|
|
|
|
<div slot="header"
|
|
style="display: flex;justify-content: space-between">
|
|
<div>
|
|
{{option.optionName}}
|
|
</div>
|
|
<div>
|
|
<el-button @click.stop="viewDesc(option)"
|
|
type="text">套餐详情
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<div class="optionImg">
|
|
<el-image
|
|
:src="CREATE_PREVIEW_URL(option.imgUrl)"
|
|
fit="contain"
|
|
></el-image>
|
|
</div>
|
|
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10" v-if="option.supplier">
|
|
<el-col :span="24">
|
|
<div class="descriptionClass">
|
|
{{removeHTMLTag(option.supplier)}}
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<div style="display: flex; justify-content: space-between">
|
|
<span v-if="option.selectSpecs">规格参数：{{option.selectSpecs}}</span>
|
|
<span v-if="option.selectNum" style="color: #0a84ff">选择份数：{{option.selectNum}}</span>
|
|
<span v-else style="color: #bc2a25">{{ '未选择此项' }}</span>
|
|
</div>
|
|
<!--<el-input-number disabled
|
|
style="width: 100%"
|
|
v-model="option.selectNum"></el-input-number>-->
|
|
</el-row>
|
|
|
|
</el-card>
|
|
</el-col>
|
|
</div>
|
|
</el-row>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="收货地址"
|
|
prop="receiveAddress" v-if="projectInfo.provideMode===3">
|
|
{{formData.receiveAddress}}
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="签字" prop="sign" v-if="projectInfo.signMode===2">
|
|
<el-image :src="'/signature/getSignData?path=' +formData.imageUrl"
|
|
fit="contain"
|
|
style="height: 100px;width: 100%" v-if="formData.imageUrl">
|
|
</el-image>
|
|
<span v-else>暂无</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</template>
|
|
</guava>
|
|
|
|
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:visible.sync="evaluateDialogVisible"
|
|
title="福利评价"
|
|
width="40%">
|
|
<el-form :model="formData" label-width="80px" ref="form">
|
|
<el-form-item :rules="[{ required: true, message: ''}]" label="评价套餐">
|
|
<el-radio-group
|
|
@change="finOneWelfareEvaluate(formData.projectId,formData.optionId)"
|
|
v-model="formData.optionId">
|
|
<el-row gutter="10">
|
|
<el-col :key="item.selectOptionId" class="mt10" span="24"
|
|
v-for="item in userSelection">
|
|
<el-radio :label="item.selectOptionId" border style="width: 100%;position: relative">
|
|
{{item.optionName}}
|
|
<span style="color: red;position: absolute;right: 10px;" v-if="!item.isPj">未评价</span>
|
|
</el-radio>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item :rules="[{ required: true, message: ''}]" label="评分">
|
|
<div style="position: absolute; top: 20%;">
|
|
<el-rate :disabled="formData.id"
|
|
show-score text-color="#ff9900"
|
|
v-model="formData.evaluateScore"></el-rate>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="评价">
|
|
<el-input :disabled="formData.id"
|
|
maxlength="500"
|
|
placeholder="请输入评价"
|
|
rows="5"
|
|
show-word-limit
|
|
type="textarea"
|
|
v-model="formData.evaluateText"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span class="dialog-footer" slot="footer">
|
|
<el-button @click="evaluateDialogVisible = false" type="primary">关 闭</el-button>
|
|
<el-button :loading="evaluateLoading" @click="doEvaluate" type="primary"
|
|
v-if="!formData.id">提 交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-drawer
|
|
:visible.sync="descDialogVisible"
|
|
direction="rtl"
|
|
size="50%"
|
|
title="福利详情">
|
|
<el-card style="margin: 20px">
|
|
<div v-html="descData"></div>
|
|
</el-card>
|
|
</el-drawer>
|
|
|
|
<el-drawer
|
|
:visible.sync="expressDrawer"
|
|
direction="rtl"
|
|
size="50%">
|
|
<template #title>
|
|
<div style="font-size: 20px">物流详情
|
|
<span style="color: red"> 温馨提示：物流信息一小时更新一次</span>
|
|
</div>
|
|
</template>
|
|
<el-card style="margin: 30px">
|
|
<el-timeline reverse="true">
|
|
<el-timeline-item
|
|
:color="item.color"
|
|
:key="index"
|
|
:timestamp="moment().format('YYYY-MM-DD HH:mm:ss')"
|
|
v-for="(item, index) in logisticsTrace.logisticsTraceDetailList">
|
|
{{item.desc}}
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
|
|
|
|
</el-card>
|
|
</el-drawer>
|
|
|
|
<!--快递物流信息-->
|
|
<courier-number-info ref="courierNumberInfo"></courier-number-info>
|
|
</div>
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
descData: "",
|
|
descDialogVisible: false,
|
|
projectInfo: {},
|
|
userSelection: [],
|
|
userId: '',
|
|
projectOptions: [],
|
|
units: [],
|
|
welfareUnits: [],
|
|
|
|
welfareProvideMode: [],
|
|
welfareSignMode: [],
|
|
welfareNoticePushMode: [],
|
|
pageForm: {
|
|
year: moment().format('YYYY'),
|
|
searchName: 'username'
|
|
},
|
|
tableColumns: [
|
|
{prop: 'year', label: '年度'},
|
|
{prop: 'name', label: '项目名称'},
|
|
{prop: 'choiceTime', label: '选择时间'},
|
|
{prop: 'isChoose', label: '是否选择'},
|
|
{prop: 'gist_list', label: '所选福利'},
|
|
{prop: 'receiveAddress', label: '收货地址'},
|
|
{prop: 'courierNumber', label: '快递单号', sortable: true},
|
|
|
|
],
|
|
formRules: {},
|
|
selPersonType: [],
|
|
welfare_id: null,
|
|
welfarePersonTypeList: [],
|
|
projectSelectOptions: [],
|
|
evaluateDialogVisible: false,
|
|
evaluateLoading: false,
|
|
|
|
expressDrawer: false,
|
|
logisticsTrace: {},
|
|
|
|
}
|
|
},
|
|
components: {
|
|
'courier-number-info': httpVueLoader('/components/welfare/CourierNumberInfo.vue?v=' + new Date().getTime())
|
|
},
|
|
methods: {
|
|
//查看快递单号
|
|
viewCourierNumber(row) {
|
|
this.$refs.courierNumberInfo.openView(row.projectId, row.userId)
|
|
},
|
|
async openExpress(row) {
|
|
await this.getExpressInfo(row)
|
|
this.expressDrawer = true
|
|
},
|
|
async doEvaluate() {
|
|
if (!this.formData.evaluateScore || !this.formData.optionId) {
|
|
this.$message({
|
|
message: '请打分后再提交',
|
|
type: 'warning'
|
|
});
|
|
return
|
|
}
|
|
const confirm = await this.$confirm('提交后将不能修改，确定要提交评价吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
if (confirm === "confirm") {
|
|
this.evaluateLoading = true
|
|
const resp = await $.post(loc() + "/doEvaluate", this.formData)
|
|
if (resp.code === 0) {
|
|
this.$message({
|
|
message: resp.msg,
|
|
type: 'success'
|
|
});
|
|
this.doSearch()
|
|
this.evaluateDialogVisible = false
|
|
} else {
|
|
this.$message.error(resp.msg);
|
|
}
|
|
this.evaluateLoading = false
|
|
}
|
|
|
|
},
|
|
async finOneWelfareEvaluate(projectId, optionId) {
|
|
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = await $.post(loc() + "/finOneWelfareEvaluate", {
|
|
projectId: projectId,
|
|
optionId: optionId
|
|
})
|
|
if (code === 0) {
|
|
if (data) {
|
|
this.formData = data
|
|
} else {
|
|
this.formData = {
|
|
projectId: projectId,
|
|
optionId: optionId
|
|
}
|
|
}
|
|
} else {
|
|
this.$message.warning(msg)
|
|
}
|
|
},
|
|
async openEvaluate(row) {
|
|
await this.getUserSelection(row.id)
|
|
if (this.userSelection && this.userSelection.length > 0) {
|
|
await this.finOneWelfareEvaluate(row.id, this.userSelection[0].selectOptionId)
|
|
}
|
|
|
|
this.evaluateDialogVisible = true
|
|
},
|
|
async getProjectInfo(id) {
|
|
const resp = await $.get('/platform/welfare/common/findOne', {projectId: id})
|
|
if (resp.code === 0) {
|
|
this.projectInfo = resp.data
|
|
await this.getUserSelection(id)
|
|
this.echoUserSelection()
|
|
}
|
|
},
|
|
//获取用户选择的数据
|
|
async getUserSelection(projectId) {
|
|
const resp = await $.get('/platform/welfare/mine/getUserSelection', {projectId: projectId})
|
|
this.userSelection = resp.data
|
|
},
|
|
//回显用户选择的数据
|
|
echoUserSelection() {
|
|
//获取用户当前选择的数量
|
|
this.projectInfo.welfareProjectSubjects[0].options.forEach(v => {
|
|
const option = this.userSelection.find(x => x.selectOptionId === v.id)
|
|
if (option) {
|
|
v.selectNum = option.selectNum
|
|
if (option.selectSpecs) {
|
|
v.selectSpecs = option.selectSpecs
|
|
}
|
|
} else {
|
|
v.selectNum = 0
|
|
}
|
|
})
|
|
},
|
|
viewDesc(val) {
|
|
this.descData = val.description
|
|
this.descDialogVisible = true
|
|
},
|
|
async openView(row) {
|
|
await this.getProjectInfo(row.id)
|
|
if (row.isChoose > 0) {
|
|
this.$set(this.formData, "receiveAddress", this.userSelection[0].receiveAddress)
|
|
this.$set(this.formData, "imageUrl", this.userSelection[0].userSign)
|
|
}
|
|
|
|
this.$refs.guava.edit()
|
|
},
|
|
async getExpressInfo(row) {
|
|
const resp = await $.get(loc() + '/getExpressInfo', {courierNumber: row.courierNumber})
|
|
if (resp.code === 0) {
|
|
for (let i = 0; i < resp.data.logisticsTraceDetailList.length; i++) {
|
|
if (i === resp.data.logisticsTraceDetailList.length - 1) {
|
|
resp.data.logisticsTraceDetailList[i].color = "#0bbd87"
|
|
} else {
|
|
}
|
|
}
|
|
this.logisticsTrace = resp.data
|
|
} else {
|
|
this.$message.error(resp.msg);
|
|
}
|
|
},
|
|
|
|
},
|
|
async created() {
|
|
this.pageData()
|
|
getEnumOptions("WelfareProvideMode").then(res => {
|
|
this.welfareProvideMode = res
|
|
})
|
|
getEnumOptions("WelfareSignMode").then(res => {
|
|
this.welfareSignMode = res
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|