first commit
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
let ADDRESS_DIALOG = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:modal-append-to-body="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="dialogVisible"
|
||||
title="收货地址"
|
||||
width="30%">
|
||||
|
||||
<el-form :model="formData" label-position="right" label-suffix="：" label-width="120px" ref="addForm">
|
||||
<el-form-item :rules="{required:true,message: '请选择地址信息', trigger: 'blur'}"
|
||||
label="地址信息"
|
||||
prop="addressList">
|
||||
<el-cascader
|
||||
:options="dzOptions"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange"
|
||||
clearable
|
||||
placeholder="请选择地址信息"
|
||||
style="width: 100%"
|
||||
v-model="formData.addressList"></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:rules="{required:true,message: '请填写您的详细地址', trigger: 'blur'}"
|
||||
label="详细地址"
|
||||
prop="addressDetail">
|
||||
<el-input maxlength="100"
|
||||
placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"
|
||||
rows="3"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
v-model="formData.addressDetail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:rules="{required:true,message: '请填写收货人姓名', trigger: 'blur'}"
|
||||
label="收货人姓名"
|
||||
prop="userName">
|
||||
<el-input maxlength="11"
|
||||
placeholder="请填写收货人姓名"
|
||||
v-model="formData.userName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:rules="{required:true,message: '请填写手机号码', trigger: 'blur'}"
|
||||
label="手机号码"
|
||||
prop="tel">
|
||||
<el-input maxlength="11" placeholder="请填写手机号码"
|
||||
type="tel"
|
||||
v-model="formData.tel"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span class="dialog-footer" slot="footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button @click="doSaveUserAddress" type="primary">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
`,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
dzOptions: chengShiList,
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
if (val) {
|
||||
let provinceName = ""
|
||||
let cityName = ""
|
||||
let countyName = ""
|
||||
const province = this.dzOptions.find(c => c.value === val[0])
|
||||
provinceName = province.label
|
||||
const city = province.children.find(p => p.value === val[1])
|
||||
cityName = city.label
|
||||
if (val.length === 3) {
|
||||
const county = city.children.find(p => p.value === val[2])
|
||||
countyName = county.label
|
||||
this.$set(this.formData, "areaCode", county.value)
|
||||
} else {
|
||||
this.$set(this.formData, "areaCode", city.value)
|
||||
}
|
||||
this.$set(this.formData, "province", provinceName)
|
||||
this.$set(this.formData, "city", cityName)
|
||||
this.$set(this.formData, "county", countyName)
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
doSaveUserAddress() {
|
||||
this.$refs["addForm"].validate(async (valid) => {
|
||||
if (valid) {
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/doSaveUserAddress", { data: JSON.stringify(this.formData) })
|
||||
if (resp.code === 0) {
|
||||
this.$message({
|
||||
message: resp.msg,
|
||||
type: "success"
|
||||
})
|
||||
this.$emit("select_user_address")
|
||||
this.dialogVisible = false
|
||||
} else {
|
||||
this.$message.error(resp.msg)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
openEdit(row) {
|
||||
row.addressList = []
|
||||
const province = chengShiList.find(c => c.label === row.province)
|
||||
row.addressList.push(province.value)
|
||||
const city = province.children.find(p => p.label === row.city)
|
||||
row.addressList.push(city.value)
|
||||
if (row.county) {
|
||||
const county = city.children.find(p => p.label === row.county)
|
||||
if (county) {
|
||||
row.addressList.push(county.value)
|
||||
}
|
||||
}
|
||||
|
||||
this.formData = row
|
||||
this.dialogVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
<!--#include("/platform/zhgh/welfare/include/chengSh.js"){}#-->
|
||||
@@ -0,0 +1,139 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<div id="app">
|
||||
<guava ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<table-tool :app="this" label="收货地址">
|
||||
<el-button @click="openAddress" size="small" type="primary">新增地址</el-button>
|
||||
</table-tool>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@sort-change="pageOrder"
|
||||
ref="table"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<el-table-column label="序号" type="index" width="80px"></el-table-column>
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<template scope="{row}" v-if="column.prop=='address'">{{row.province}} {{row.city}} {{row.county}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" header-align="center" label="操作" prop="userOnline" width="170px">
|
||||
<template scope="{row}">
|
||||
<el-button @click="openEdit(row)" size="mini" type="primary">修改</el-button>
|
||||
<el-button @click="doDelete(row.id)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" header-align="center" label="" prop="userOnline" width="170px">
|
||||
<template scope="{row}">
|
||||
<span v-if="row.isDefault">
|
||||
<el-tag type="danger">默认地址</el-tag>
|
||||
</span>
|
||||
<span v-else>
|
||||
<el-button @click="doDefault(row)" size="mini" type="primary">设为默认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
</guava>
|
||||
<address-dialog ref="addressDialog" @select_user_address="selectUserAddress"></address-dialog>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("addressDialog.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
dzOptions: chengShiList,
|
||||
dialogVisible: false,
|
||||
tableColumns: [
|
||||
{ prop: "userName", label: "收货人" },
|
||||
{ prop: "address", label: "所在地区" },
|
||||
{ prop: "addressDetail", label: "详细地址" },
|
||||
{ prop: "tel", label: "电话" }
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"address-dialog": ADDRESS_DIALOG
|
||||
},
|
||||
methods: {
|
||||
selectUserAddress(){
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios.post("/platform/welfare/addressManage/selectUserAddress", this.pageForm).then((resp) => {
|
||||
this.tableLoading = false
|
||||
if (resp.code === 0) {
|
||||
this.tableData = resp.data
|
||||
} else {
|
||||
this.$message.error(resp.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
openAddress() {
|
||||
this.$refs.addressDialog.dialogVisible = true
|
||||
this.$refs.addressDialog.formData = {}
|
||||
},
|
||||
doDelete(id) {
|
||||
this.$confirm("此操作将永久删除该地址, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/deleteAddress", { id: id })
|
||||
if (resp.code === 0) {
|
||||
this.doSearch()
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: resp.msg
|
||||
})
|
||||
} else {
|
||||
this.$message.error(resp.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
openEdit(row) {
|
||||
this.$refs.addressDialog.dialogVisible = true
|
||||
this.$refs.addressDialog.openEdit(row)
|
||||
},
|
||||
async doDefault(row) {
|
||||
const resp = await this.$axios.post(loc() + "/doDefault", { id: row.id })
|
||||
if (resp.code === 0) {
|
||||
this.doSearch()
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: resp.msg
|
||||
})
|
||||
} else {
|
||||
this.$message.error(resp.msg)
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,74 @@
|
||||
|
||||
let welfareCommonUrl = "/platform/welfare/common";
|
||||
|
||||
let getWelfareProjects = async () => {
|
||||
const {code, data} = await $.get(welfareCommonUrl + "/welfareProjects")
|
||||
if (!code) {
|
||||
return data
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
let exportWelfareList = (projectId, personType) => {
|
||||
let url = welfareCommonUrl + "/exportWelfareList?projectId=" + projectId
|
||||
if (personType.length > 0) {
|
||||
url += "&personType=" + JSON.stringify(personType)
|
||||
}
|
||||
window.open(url)
|
||||
}
|
||||
let doExportWelfare = (projectId) => {
|
||||
window.open(welfareCommonUrl + "/doExportWelfare?projectId=" + projectId)
|
||||
}
|
||||
|
||||
let doExportWelfareReceive = (projectId, welfareUnit, welfareTwoUnit = [], personTypes = [], userStates = []) => {
|
||||
window.open(welfareCommonUrl + "/exportReceive?projectId=" + projectId
|
||||
+ "&welfareUnit=" + welfareUnit
|
||||
+ "&welfareTwoUnit=" + welfareTwoUnit
|
||||
+ "&personTypes=" + JSON.stringify(personTypes)
|
||||
+ "&userStates=" + JSON.stringify(userStates))
|
||||
}
|
||||
|
||||
let exportWelfareListSummary = (projectId) => {
|
||||
window.open(welfareCommonUrl + "/exportWelfareListSummary?projectId=" + projectId)
|
||||
}
|
||||
|
||||
|
||||
const minixs = {
|
||||
methods: {
|
||||
async yearChange(val) {
|
||||
if (val) {
|
||||
const option = this.projectOptions.find(v => v.label === parseInt(val))
|
||||
if (option) {
|
||||
this.projectSelectOptions = this.projectOptions.find(v => v.label === parseInt(val)).children
|
||||
} else {
|
||||
this.pageForm.projectId = null
|
||||
this.projectSelectOptions = []
|
||||
}
|
||||
} else {
|
||||
this.projectSelectOptions = []
|
||||
this.projectOptions.forEach(v => {
|
||||
this.projectSelectOptions = this.projectSelectOptions.concat(v.children)
|
||||
})
|
||||
}
|
||||
if (this.projectSelectOptions && this.projectSelectOptions.length > 0) {
|
||||
this.pageForm.projectId = this.projectSelectOptions[0].value
|
||||
await this.getWelfareOptions()
|
||||
}
|
||||
this.doSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const sexOptions = ['男', '女']
|
||||
|
||||
let commonColumns = [
|
||||
{prop: 'loginname', label: '工号', width: "100"},
|
||||
{prop: 'username', label: '姓名', width: "80"},
|
||||
{prop: 'sex', label: '性别', sortable: true, width: '100px', checked: 0},
|
||||
{prop: 'personType', label: '人员类型', sortable: true, width: "100"},
|
||||
{prop: 'userState', label: '在职状态', sortable: true, width: "100"},
|
||||
{prop: 'unionname', label: '所属工会', sortable: true},
|
||||
{prop: 'unitname', label: '所属单位', sortable: true}
|
||||
// {prop: 'isReceive', label: '是否领取', sortable: true}
|
||||
]
|
||||
@@ -0,0 +1,443 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava :edit_scroll="false" ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="年度">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
></el-date-picker>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool label="我的福利"></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
|
||||
:key="column.prop"
|
||||
: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="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>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" header-align="center" label="操作" prop="userOnline" width="200px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button @click="openView(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>
|
||||
</guava>
|
||||
|
||||
<select-view ref="selectViewRef"></select-view>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('selectView.js'){}#-->
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
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 }
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"select-view": selectView
|
||||
},
|
||||
methods: {
|
||||
async openView(row) {
|
||||
this.$refs.selectViewRef.onOpen(row.id)
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.welfare-select-view-dialog .el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 项目信息卡片 */
|
||||
.project-info-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-info-header {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.project-info-header i {
|
||||
margin-right: 8px;
|
||||
color: var(--color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.project-info-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 100px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 选择卡片 */
|
||||
.my-selections-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selections-header {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.selections-header i {
|
||||
margin-right: 8px;
|
||||
color: var(--color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.selections-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.selection-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
background: #f8f9fb;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.selection-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.selection-item:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.selection-item-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.selection-item-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.selection-item-info {
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.selection-item-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.selection-item-meta {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.selection-item-count, .selection-item-time {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.selection-item-actions {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-primary);
|
||||
background: #ecf5ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detail-btn:hover {
|
||||
background: #dbecff;
|
||||
color: #3a8ee6;
|
||||
}
|
||||
|
||||
.detail-btn i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
background: #ecf5ff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.selection-item-status {
|
||||
flex-shrink: 0;
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.no-selections {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-selections i {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
.welfare-detail-dialog .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.welfare-detail-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.detail-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-title h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-count, .detail-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.detail-count i, .detail-time i {
|
||||
margin-right: 6px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.detail-divider {
|
||||
height: 1px;
|
||||
background: #EBEEF5;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 富文本内容样式 */
|
||||
.rich-text-content {
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.rich-text-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.rich-text-content p {
|
||||
margin: 8px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rich-text-content a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rich-text-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.rich-text-content ul, .rich-text-content ol {
|
||||
padding-left: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.rich-text-content blockquote {
|
||||
padding: 10px 15px;
|
||||
border-left: 4px solid #EBEEF5;
|
||||
background: #f8f9fb;
|
||||
margin: 10px 0;
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,523 @@
|
||||
const selectView = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog title="我的福利选择" :visible.sync="visible" width="700px" append-to-body custom-class="welfare-select-view-dialog">
|
||||
<div v-loading="loading">
|
||||
<!-- 项目基本信息 -->
|
||||
<div class="project-info-card">
|
||||
<div class="project-info-header">
|
||||
<i class="el-icon-s-flag"></i>
|
||||
<span>项目基本信息</span>
|
||||
</div>
|
||||
<div class="project-info-content">
|
||||
<div class="info-item">
|
||||
<div class="info-label">项目名称</div>
|
||||
<div class="info-value">{{ projectInfo.name }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">选择时间</div>
|
||||
<div class="info-value">{{ projectInfo.choiceTimeStart }} 至 {{ projectInfo.choiceTimeEnd }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">发放时间</div>
|
||||
<div class="info-value">{{ projectInfo.provideTimeStart }} 至 {{ projectInfo.provideTimeEnd }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">发放地点</div>
|
||||
<div class="info-value">{{ projectInfo.provideAddress }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<div class="project-info-card">
|
||||
<div class="project-info-header">
|
||||
<i class="el-icon-user"></i>
|
||||
<span>联系信息</span>
|
||||
</div>
|
||||
<div class="project-info-content">
|
||||
<div class="info-item">
|
||||
<div class="info-label">联系电话</div>
|
||||
<div class="info-value">{{ mergedSelections[0]?.mobile || '暂无' }}</div>
|
||||
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">收货地址</div>
|
||||
<div class="info-value">{{ mergedSelections[0]?.receiveAddress || '暂无' }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的选择 -->
|
||||
<div class="my-selections-card">
|
||||
<div class="selections-header">
|
||||
<i class="el-icon-shopping-cart-full"></i>
|
||||
<span>我的选择</span>
|
||||
</div>
|
||||
|
||||
<div v-if="mergedSelections.length > 0" class="selections-content">
|
||||
<div class="selection-item" v-for="item in mergedSelections" :key="item.id">
|
||||
<div class="selection-item-image">
|
||||
<el-image
|
||||
:src="item.imgUrl || '/static/images/default-welfare.png'"
|
||||
fit="cover"
|
||||
:preview-src-list="item.imgUrl ? [item.imgUrl] : []">
|
||||
<div slot="error" class="image-placeholder">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="selection-item-info">
|
||||
<div class="selection-item-name">{{ item.optionName }}</div>
|
||||
<div class="selection-item-meta">
|
||||
<div class="selection-item-count">
|
||||
<span>数量:</span>
|
||||
<span class="count-value">{{ item.selectNum }}</span>
|
||||
</div>
|
||||
<div class="selection-item-time">
|
||||
<span>选择时间:</span>
|
||||
<span>{{ item.selectTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selection-item-actions">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
class="detail-btn"
|
||||
@click="showOptionDetail(item)">
|
||||
<i class="el-icon-view"></i> 查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selection-item-status">
|
||||
<el-tag size="small" type="success">已选择</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="no-selections">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<span>您还未选择任何福利项目</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog
|
||||
title="福利详情"
|
||||
:visible.sync="detailDialogVisible"
|
||||
width="650px"
|
||||
append-to-body
|
||||
custom-class="welfare-detail-dialog">
|
||||
<div class="welfare-detail-content" v-if="currentOption">
|
||||
<!-- <div class="detail-header">-->
|
||||
<!-- <div class="detail-image">-->
|
||||
<!-- <el-image -->
|
||||
<!-- :src="currentOption.imgUrl || '/static/images/default-welfare.png'" -->
|
||||
<!-- fit="cover">-->
|
||||
<!-- <div slot="error" class="image-placeholder">-->
|
||||
<!-- <i class="el-icon-picture-outline"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-image>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="detail-title">-->
|
||||
<!-- <h3>{{ currentOption.optionName }}</h3>-->
|
||||
<!-- <div class="detail-meta">-->
|
||||
<!-- <span class="detail-count">-->
|
||||
<!-- <i class="el-icon-shopping-cart-2"></i> -->
|
||||
<!-- 数量: <span class="count-value">{{ currentOption.selectNum }}</span>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span class="detail-time">-->
|
||||
<!-- <i class="el-icon-time"></i> -->
|
||||
<!-- 选择时间: {{ currentOption.selectTime }}-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="detail-divider"></div>-->
|
||||
<div class="detail-description rich-text-content" v-html="currentOption.description"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
projectId: null,
|
||||
visible: false,
|
||||
loading: false,
|
||||
projectInfo: {
|
||||
name: "",
|
||||
choiceTimeStart: "",
|
||||
choiceTimeEnd: "",
|
||||
provideTimeStart: "",
|
||||
provideTimeEnd: "",
|
||||
provideAddress: "",
|
||||
options: []
|
||||
},
|
||||
selectedOptions: [],
|
||||
detailDialogVisible: false,
|
||||
currentOption: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mergedSelections() {
|
||||
return this.selectedOptions.map((item) => {
|
||||
const option = this.projectInfo.options?.find((opt) => opt.id === item.selectOptionId) || {}
|
||||
return {
|
||||
...item,
|
||||
optionName: option.optionName || "未知选项",
|
||||
imgUrl: option.imgUrl,
|
||||
description: option.description
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(id) {
|
||||
this.projectId = id
|
||||
this.visible = true
|
||||
this.loadData()
|
||||
},
|
||||
|
||||
async loadData() {
|
||||
this.loading = true
|
||||
await this.getProjectInfo()
|
||||
await this.getUserSelections()
|
||||
this.loading = false
|
||||
},
|
||||
|
||||
async getProjectInfo() {
|
||||
const { code, data, msg } = await this.$axios.post("/platform/welfare/common/projectInfo", {
|
||||
id: this.projectId
|
||||
})
|
||||
if (code === 0) {
|
||||
this.projectInfo = data
|
||||
}
|
||||
},
|
||||
|
||||
async getUserSelections() {
|
||||
const { code, data, msg } = await this.$axios.post("/platform/welfare/userSelect/getUserSelection", { projectId: this.projectId })
|
||||
if (code === 0) {
|
||||
this.selectedOptions = data || []
|
||||
}
|
||||
},
|
||||
|
||||
showOptionDetail(option) {
|
||||
this.currentOption = option
|
||||
this.detailDialogVisible = true
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.welfare-select-view-dialog .el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 项目信息卡片 */
|
||||
.project-info-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-info-header {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.project-info-header i {
|
||||
margin-right: 8px;
|
||||
color: var(--color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.project-info-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 100px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 选择卡片 */
|
||||
.my-selections-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.selections-header {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.selections-header i {
|
||||
margin-right: 8px;
|
||||
color: var(--color-primary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.selections-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.selection-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
background: #f8f9fb;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.selection-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.selection-item:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.selection-item-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.selection-item-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.selection-item-info {
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.selection-item-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.selection-item-meta {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.selection-item-count, .selection-item-time {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.selection-item-actions {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-primary);
|
||||
background: #ecf5ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detail-btn:hover {
|
||||
background: #dbecff;
|
||||
color: #3a8ee6;
|
||||
}
|
||||
|
||||
.detail-btn i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.count-value {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
background: #ecf5ff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.selection-item-status {
|
||||
flex-shrink: 0;
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.no-selections {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-selections i {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
.welfare-detail-dialog .el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.welfare-detail-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.detail-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detail-title h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-count, .detail-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.detail-count i, .detail-time i {
|
||||
margin-right: 6px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.detail-divider {
|
||||
height: 1px;
|
||||
background: #EBEEF5;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 富文本内容样式 */
|
||||
.rich-text-content {
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.rich-text-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.rich-text-content p {
|
||||
margin: 8px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rich-text-content a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rich-text-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.rich-text-content ul, .rich-text-content ol {
|
||||
padding-left: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.rich-text-content blockquote {
|
||||
padding: 10px 15px;
|
||||
border-left: 4px solid #EBEEF5;
|
||||
background: #f8f9fb;
|
||||
margin: 10px 0;
|
||||
color: #606266;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
const filterUser = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog title="选择用户生成福利名单" :visible.sync="visible" width="80%">
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="姓名">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入姓名"
|
||||
style="width: 100%" v-model="pageForm.userName">
|
||||
</el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="工号">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入工号"
|
||||
style="width: 100%" v-model="pageForm.loginName">
|
||||
</el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="性别">
|
||||
<el-select clearable placeholder="请选择性别" style="width: 100%" v-model="pageForm.sex">
|
||||
<el-option :key="sex" :label="sex" :value="sex"
|
||||
v-for="sex in sexOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="出生日期">
|
||||
<el-date-picker
|
||||
v-model="pageForm.birthday"
|
||||
type="date"
|
||||
placeholder="选择出生日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%">
|
||||
</el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="出生月份">
|
||||
<el-select
|
||||
v-model="pageForm.birthMonths"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择出生月份"
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="month in 12"
|
||||
:key="month"
|
||||
:label="month + '月'"
|
||||
:value="month">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属工会">
|
||||
<el-select clearable filterable placeholder="请选择所属工会"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.unionId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in unionOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属单位">
|
||||
<el-select clearable filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择所属单位" style="width: 100%"
|
||||
v-model="pageForm.unitIds">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in unitOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="人员类型：">
|
||||
<dict-select clearable code="USER_PERSON_TYPE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择人员类型"
|
||||
v-model="pageForm.personTypes"></dict-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="编制类别：">
|
||||
<dict-select clearable code="USER_PREPARED_BY_TYPE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择编制类别"
|
||||
v-model="pageForm.preparedBys"></dict-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="在职状态：">
|
||||
<dict-select clearable code="USER_STATE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择人员状态"
|
||||
v-model="pageForm.userStates"></dict-select>
|
||||
</search-item>
|
||||
<search-item label="是否会员">
|
||||
<el-select clearable placeholder="请选择是否会员" style="width: 100%"
|
||||
v-model="pageForm.isMember">
|
||||
<el-option label="全部" :value="null"></el-option>
|
||||
<el-option label="是" :value="true"></el-option>
|
||||
<el-option label="否" :value="false"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<table-tool label="此名单只显示未在此福利项目中的人员"></table-tool>
|
||||
<el-table :data="tableData"
|
||||
@sort-change="pageOrder"
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
v-loading="tableLoading"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
:index="indexMethod"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :loading="submitLoading">确认添加到福利名单</el-button>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
`,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
projectId: null,
|
||||
submitLoading: false,
|
||||
pageForm: {
|
||||
birthMonths: [],
|
||||
userStates: [],
|
||||
personTypes: [],
|
||||
preparedBys: [],
|
||||
unitIds: []
|
||||
},
|
||||
sexOptions: ["男", "女"],
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
tableColumns: [
|
||||
{ prop: "loginname", label: "工号" },
|
||||
{ prop: "username", label: "姓名" },
|
||||
{ prop: "sex", label: "性别", sortable: true, checked: 0 },
|
||||
{ prop: "birthday", label: "出生日期", sortable: true, checked: 0 },
|
||||
{ prop: "personType", label: "人员类型", sortable: true },
|
||||
{ prop: "preparedBy", label: "编制类别", sortable: true },
|
||||
{ prop: "userState", label: "在职状态", sortable: true },
|
||||
{ prop: "unionName", label: "所属工会", sortable: true },
|
||||
{ prop: "unitName", label: "所属单位", sortable: true }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onOpen(id) {
|
||||
this.visible = true
|
||||
this.resetPageForm()
|
||||
this.pageForm.projectId = id
|
||||
this.unionOptions = await this.$businessTool.listUnion()
|
||||
this.unitOptions = await this.$businessTool.listUnit()
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
resetPageForm() {
|
||||
this.$set(this.pageForm, "userName", null)
|
||||
this.$set(this.pageForm, "loginName", null)
|
||||
this.$set(this.pageForm, "sex", null)
|
||||
this.$set(this.pageForm, "birthday", null)
|
||||
this.$set(this.pageForm, "birthMonths", [])
|
||||
this.$set(this.pageForm, "unionId", null)
|
||||
this.$set(this.pageForm, "unitId", null)
|
||||
this.$set(this.pageForm, "personTypes", [])
|
||||
this.$set(this.pageForm, "preparedBys", [])
|
||||
this.$set(this.pageForm, "userStates", [])
|
||||
this.$set(this.pageForm, "isMember", null)
|
||||
},
|
||||
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios
|
||||
.post("/platform/welfare/project/mange/filterUserPageData", {
|
||||
pageForm: JSON.stringify(this.pageForm)
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
this.$confirm("当前筛选出" + this.pageForm.totalCount + "条数据,您确认添加到福利名单吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
try {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: "数据保存中，请稍后...",
|
||||
spinner: "el-icon-loading"
|
||||
})
|
||||
const { code, data, msg } = await this.$axios.post("/platform/welfare/project/mange/addWelfareUser", {
|
||||
pageForm: JSON.stringify(this.pageForm),
|
||||
projectId: this.projectId
|
||||
})
|
||||
loading.close()
|
||||
if (code === 0) {
|
||||
this.$message.success(msg)
|
||||
this.visible = false
|
||||
this.$emit("refresh")
|
||||
} else {
|
||||
this.$message.error(msg)
|
||||
}
|
||||
} finally {
|
||||
this.submitLoading = false;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="年度">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
></el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="项目名称">
|
||||
<el-input clearable placeholder="请输入项目名称" v-model="pageForm.name"></el-input>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="福利项目">
|
||||
<el-button @click="openAdd" icon="el-icon-plus" size="small" type="primary">新建福利项目</el-button>
|
||||
</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" label="序号" type="index" width="80px"></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<!-- <template scope="{row}" v-if="column.prop=='gift'">-->
|
||||
<!-- <span v-if="row.flexible">福利套餐</span>-->
|
||||
<!-- <span v-else>{{row.gift}}</span>-->
|
||||
<!-- </template>-->
|
||||
</el-table-column>
|
||||
|
||||
<!-- <el-table-column label="是否发布">-->
|
||||
<!-- <template scope="{row}">-->
|
||||
<!-- <span class="text-success" v-if="!row.isDisabled">是</span>-->
|
||||
<!-- <span class="text-danger" v-else>否</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
|
||||
<el-table-column label="操作" width="150px">
|
||||
<template scope="{row}">
|
||||
<el-dropdown @command="dropdownCommand">
|
||||
<el-button :loading="submitLoading" plain size="mini">
|
||||
<i class="ti-settings"></i>
|
||||
<span class="ti-angle-down"></span>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item :command="{type:'status',data:row}">{{row.isDisabled?'发布':'关闭'}}</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item :command="{type:'sendMsg',data:row}">通知未选择人员</el-dropdown-item>-->
|
||||
<el-dropdown-item :command="{type:'createList',data:row}">生成福利名单</el-dropdown-item>
|
||||
<el-dropdown-item :command="{type:'edit',data:row}">编辑</el-dropdown-item>
|
||||
<el-dropdown-item :command="{type:'delete',data:row}">删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<template #edit>
|
||||
<el-form :model="formData" :rules="formRules" label-width="150px" ref="form" v-loading="formLoading">
|
||||
<el-form-item label="项目名称" prop="name">
|
||||
<el-input maxlength="100" placeholder="项目名称" v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-row>
|
||||
<!--<el-col :span="12">
|
||||
<el-form-item label="发放节日" prop="festival">
|
||||
<el-select filterable placeholder="发放节日" style="width: 100%" v-model="formData.festival">
|
||||
<el-option :key="f.code" :label="f.code" :value="f.name" v-for="f in festival"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>-->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="选择时间" prop="choiceTime">
|
||||
<el-date-picker
|
||||
@change="choiceTimeChange"
|
||||
end-placeholder="结束时间"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
style="width: 100%"
|
||||
type="datetimerange"
|
||||
v-model="formData.choiceTime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="provideTime" label="发放时间">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="formData.provideTime"
|
||||
type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" @change="provideTimeChange">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="逾期选择时间" prop="overdueChoiceTimeEnd">
|
||||
<el-date-picker
|
||||
@change="choiceTimeChange"
|
||||
placeholder="逾期未选择最后选择截至时间"
|
||||
style="width: 100%"
|
||||
type="datetime"
|
||||
v-model="formData.overdueChoiceTimeEnd"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>-->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="是否福利套餐" prop="flexible">
|
||||
<el-switch @change="isCheckBoxChange" v-model="formData.flexible"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4">-->
|
||||
<!-- <el-form-item label="是否全年生日蛋糕券" prop="isYearBirthday">-->
|
||||
<!-- <el-switch v-model="formData.isYearBirthday"></el-switch>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col span="6">
|
||||
<el-form-item label="是否常规" prop="isRoutine" v-if="formData.flexible">
|
||||
<el-switch v-model="formData.isRoutine">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
</el-col>-->
|
||||
<el-col :span="4" v-if="formData.isRoutine">
|
||||
<el-form-item label="是否多选" prop="isCheckBox">
|
||||
<el-switch
|
||||
@change="isCheckBoxChange"
|
||||
active-value="checkBox"
|
||||
inactive-value="radio"
|
||||
v-model="formData.isCheckBox"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="formData.isCheckBox=='checkBox'">
|
||||
<el-col :span="4">
|
||||
<el-form-item label="是否支持单个多选" prop="singleOptionSupportMultipleSelection">
|
||||
<el-switch v-model="formData.singleOptionSupportMultipleSelection"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
<el-form-item label="最多选几个" prop="multiSelectNum">
|
||||
<el-input-number :max="10" :min="2" placeholder="最多选几个" v-model="formData.multiSelectNum"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
|
||||
<el-form-item label="发放形式" prop="provideMode">
|
||||
<el-radio-group size="medium" v-model="formData.provideMode">
|
||||
<el-radio-button :key="item.code" :label="item.code" v-for="item in welfareProvideMode">{{item.name}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="签收形式" prop="signMode">
|
||||
<el-radio-group size="medium" v-model="formData.signMode">
|
||||
<el-radio-button :key="item.code" :label="item.code" v-for="item in welfareSignMode">{{item.name}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="福利礼品" prop="gift" v-if="!formData.flexible">
|
||||
<el-input maxlength="100" placeholder="福利礼品" suffix-icon="el-icon-present" v-model="formData.gift"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- {{formData.welfareProjectSubjects}}-->
|
||||
<!-- <template v-if="formData.flexible">-->
|
||||
<!-- <el-form-item label="福利选项" v-if="[2,3,4].includes(formData.provideMode)">-->
|
||||
<!-- <welfare-option-table :subject="formData.welfareProjectSubjects" ref="welfareOptionTable"></welfare-option-table>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<template v-if="formData.flexible">
|
||||
<el-form-item label="福利选项">
|
||||
<welfare-option v-model="formData.options"></welfare-option>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-form-item label="封面图片" prop="cover">
|
||||
<file-upload
|
||||
:value.sync="formData.cover"
|
||||
:upload_number="1"
|
||||
upload_mode="image"
|
||||
upload_result_category="interval"
|
||||
upload_result_type="url"
|
||||
></file-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row justify="end" style="justify-content: end" type="flex">
|
||||
<el-button @click="$refs.guava.index()">取消</el-button>
|
||||
<el-button @click="save" type="primary" v-loading="submitLoading">提交</el-button>
|
||||
</el-row>
|
||||
</template>
|
||||
</guava>
|
||||
|
||||
<filter-user ref="filterUserRef"></filter-user>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhgh/welfare/include/common.js"){}#-->
|
||||
<!--#include("welfareOptionTable.js"){}#-->
|
||||
<!--#include("welfareOption.js"){}#-->
|
||||
<!--#include("filterUser.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
mixins: [initTableMixins],
|
||||
components: {
|
||||
"welfare-option-table": WELFARE_OPTION_TABLE,
|
||||
"welfare-option": welfareOption,
|
||||
"filter-user": filterUser
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
festival: [],
|
||||
welfareProvideMode: [],
|
||||
welfareSignMode: [],
|
||||
pageForm: {
|
||||
year: moment().format("YYYY")
|
||||
},
|
||||
tableColumns: [
|
||||
{ prop: "year", label: "年度" },
|
||||
{ prop: "name", label: "项目名称" },
|
||||
{ prop: "choiceTimeStart", label: "开始选择时间" },
|
||||
{ prop: "choiceTimeEnd", label: "结束选择时间" }
|
||||
|
||||
// { prop: "gift", label: "福利礼品" },
|
||||
// { prop: "provideTimeStart", label: "发放时间" }
|
||||
],
|
||||
formRules: {
|
||||
name: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
festival: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
provideTime: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
choiceTime: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
provideAddress: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
provideMode: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
signMode: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
noticePushMode: [{ required: true, message: "必选", trigger: ["blur", "change"] }],
|
||||
gift: [{ required: true, message: "必填", trigger: ["blur", "change"] }],
|
||||
multiSelectNum: [{ required: true, message: "必填", trigger: ["blur", "change"] }]
|
||||
},
|
||||
welfarePersonTypeList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dropdownCommand(command) {
|
||||
const { type, data } = command
|
||||
if (type === "edit") {
|
||||
this.openEdit(data)
|
||||
} else if (type === "delete") {
|
||||
this.doDelete(data.id)
|
||||
} else if (type === "createList") {
|
||||
this.$refs.filterUserRef.onOpen(data.id)
|
||||
} else if (type === "status") {
|
||||
this.projectStatusChange(data)
|
||||
} else if (type === "sendMsg") {
|
||||
this.sendMsg(data)
|
||||
}
|
||||
},
|
||||
async save() {
|
||||
const formValid = await this.$refs["form"].validate()
|
||||
if (formValid) {
|
||||
if (this.formData.flexible) {
|
||||
}
|
||||
const formData = clone(this.formData)
|
||||
formData.provideAddress = "工会"
|
||||
|
||||
try {
|
||||
this.submitLoading = true
|
||||
const resp = await this.$axios.post(loc() + "/save", { data: JSON.stringify(formData) })
|
||||
if (resp.code === 0) {
|
||||
this.$refs.guava.index()
|
||||
this.doSearch()
|
||||
this.$message.success(resp.msg)
|
||||
} else {
|
||||
this.$message.error(resp.msg)
|
||||
}
|
||||
} catch (e) {
|
||||
this.notifyWarning(e.status)
|
||||
} finally {
|
||||
this.submitLoading = false
|
||||
}
|
||||
}
|
||||
},
|
||||
isCheckBoxChange() {
|
||||
this.formData.welfareProjectSubjects = [
|
||||
{
|
||||
subjectName: "请输入福利信息",
|
||||
subjectType: this.formData.isCheckBox ? this.formData.isCheckBox : "radio",
|
||||
defaultOption: null,
|
||||
options: [
|
||||
{
|
||||
optionType: "套餐",
|
||||
optionName: "福利1",
|
||||
optionNameId: "",
|
||||
optionSort: "1",
|
||||
imgUrl: ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
provideTimeChange() {
|
||||
if (this.formData.provideTime && this.formData.provideTime.length) {
|
||||
this.formData.provideTimeStart = this.formData.provideTime[0]
|
||||
this.formData.provideTimeEnd = this.formData.provideTime[1]
|
||||
} else {
|
||||
this.formData.provideTimeStart = ""
|
||||
this.formData.provideTimeEnd = ""
|
||||
}
|
||||
},
|
||||
choiceTimeChange() {
|
||||
if (this.formData.choiceTime && this.formData.choiceTime.length) {
|
||||
this.formData.choiceTimeStart = this.formData.choiceTime[0]
|
||||
this.formData.choiceTimeEnd = this.formData.choiceTime[1]
|
||||
|
||||
this.formData.provideTimeStart = this.formData.choiceTime[0]
|
||||
this.formData.provideTimeEnd = this.formData.choiceTime[1]
|
||||
} else {
|
||||
this.formData.choiceTimeStart = ""
|
||||
this.formData.choiceTimeEnd = ""
|
||||
|
||||
this.formData.provideTimeStart = ""
|
||||
this.formData.provideTimeEnd = ""
|
||||
}
|
||||
},
|
||||
sendMsg(row) {},
|
||||
openAdd() {
|
||||
this.formData = {
|
||||
isPushHome: false,
|
||||
signMode: 4,
|
||||
isRoutine: true,
|
||||
isCheckBox: "radio",
|
||||
defaultFlexibleGifts: 0,
|
||||
flexible: false,
|
||||
noticePushMode: 1,
|
||||
welfareProjectSubjects: [],
|
||||
flexibleGifts: [{}]
|
||||
}
|
||||
this.$refs.guava.edit()
|
||||
if (this.$refs.form) this.$refs.form.resetFields()
|
||||
},
|
||||
async projectStatusChange({ id, isDisabled: val }) {
|
||||
const resp = await this.$axios.post(loc() + "/projectStatusChange", {
|
||||
id,
|
||||
val
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
this.pageData()
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
},
|
||||
|
||||
async openEdit(row) {
|
||||
this.submitLoading = true
|
||||
const resp = await this.$axios.post(loc() + "/findOne", { id: row.id })
|
||||
this.submitLoading = false
|
||||
if (resp.code === 0) {
|
||||
const data = resp.data
|
||||
data.provideTime = [data.provideTimeStart, data.provideTimeEnd]
|
||||
data.choiceTime = [data.choiceTimeStart, data.choiceTimeEnd]
|
||||
this.formData = data
|
||||
this.$refs.guava.edit()
|
||||
}
|
||||
},
|
||||
doDelete(id) {
|
||||
this.$confirm("确定要删除吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
this.submitLoading = true
|
||||
const resp = await this.$axios.post(loc() + "/delete", { id })
|
||||
if (resp.code === 0) {
|
||||
this.doSearch()
|
||||
this.$message.success(resp.msg)
|
||||
} else {
|
||||
this.notifyWarning(resp.msg)
|
||||
}
|
||||
this.submitLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.festival = await this.$businessTool.getDictOptions("welfareFestival")
|
||||
this.welfareProvideMode = await this.$businessTool.getDictOptions("welfareProvideMode")
|
||||
this.welfareProvideMode.map((v) => {
|
||||
v.code = Number(v.code)
|
||||
})
|
||||
this.welfareSignMode = await this.$businessTool.getDictOptions("welfareSignMode")
|
||||
this.welfareSignMode.map((v) => {
|
||||
v.code = Number(v.code)
|
||||
})
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,192 @@
|
||||
const welfareOption = {
|
||||
template: /*language=HTML*/ `
|
||||
<div class="welfare-option">
|
||||
<el-card shadow="never">
|
||||
<el-table :data="welfareList" border style="width: 100%; margin-top: 20px;">
|
||||
<el-table-column align="center" header-align="center" label="福利名称">
|
||||
<template slot-scope="{row}">
|
||||
<el-input
|
||||
v-model="row.optionName"
|
||||
placeholder="请输入福利名称">
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="图片" width="200">
|
||||
<template slot-scope="{row}">
|
||||
<file-upload :upload_number="1" :value.sync="row.imgUrl"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
class="imgUrl"
|
||||
upload_result_type="url"
|
||||
complete_result upload_mode="image"
|
||||
upload_result_category="interval"></file-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="说明" width="120">
|
||||
<template slot-scope="{row, $index}">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="openDescription(row, $index)">
|
||||
{{ row.description ? '编辑说明' : '添加说明' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="操作" width="100">
|
||||
<template slot-scope="{$index}">
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
circle
|
||||
size="mini"
|
||||
@click="deleteOption($index)">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" size="small" @click="addOption">添加福利选项</el-button>
|
||||
</el-card>
|
||||
|
||||
<!-- 说明编辑对话框 -->
|
||||
<el-dialog
|
||||
title="编辑福利说明"
|
||||
:visible.sync="descriptionDialog.visible"
|
||||
width="60%"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false">
|
||||
<text-editor v-model="descriptionDialog.content"></text-editor>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="descriptionDialog.visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="saveDescription">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
welfareList: [],
|
||||
descriptionDialog: {
|
||||
visible: false,
|
||||
content: '',
|
||||
currentIndex: -1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.welfareList = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
|
||||
},
|
||||
|
||||
watch: {
|
||||
welfareList: {
|
||||
handler(newVal) {
|
||||
this.$emit('input', newVal);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addOption() {
|
||||
const newSort = this.welfareList.length + 1;
|
||||
this.welfareList.push({
|
||||
optionName: '福利' + newSort,
|
||||
optionSort: newSort,
|
||||
imgUrl: '',
|
||||
description: ''
|
||||
});
|
||||
},
|
||||
|
||||
deleteOption(index) {
|
||||
this.$confirm('确认删除该福利选项?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.welfareList.splice(index, 1);
|
||||
this.updateSortNumbers();
|
||||
});
|
||||
},
|
||||
|
||||
openDescription(row, index) {
|
||||
this.descriptionDialog.content = row.description || '';
|
||||
this.descriptionDialog.currentIndex = index;
|
||||
this.descriptionDialog.visible = true;
|
||||
},
|
||||
|
||||
saveDescription() {
|
||||
if (this.descriptionDialog.currentIndex > -1) {
|
||||
this.welfareList[this.descriptionDialog.currentIndex].description = this.descriptionDialog.content;
|
||||
}
|
||||
this.descriptionDialog.visible = false;
|
||||
},
|
||||
|
||||
handleSortChange(value, index) {
|
||||
const item = this.welfareList[index];
|
||||
const oldSort = item.optionSort;
|
||||
|
||||
if (value < 1) value = 1;
|
||||
if (value > this.welfareList.length) value = this.welfareList.length;
|
||||
|
||||
this.welfareList.forEach(welfare => {
|
||||
if (welfare !== item) {
|
||||
if (value > oldSort && welfare.optionSort > oldSort && welfare.optionSort <= value) {
|
||||
welfare.optionSort--;
|
||||
} else if (value < oldSort && welfare.optionSort >= value && welfare.optionSort < oldSort) {
|
||||
welfare.optionSort++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
item.optionSort = value;
|
||||
this.welfareList.sort((a, b) => a.optionSort - b.optionSort);
|
||||
},
|
||||
|
||||
updateSortNumbers() {
|
||||
this.welfareList.forEach((item, index) => {
|
||||
item.optionSort = index + 1;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .welfare-option {
|
||||
|
||||
}
|
||||
|
||||
/deep/ .welfare-option .el-card__body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/deep/ .welfare-option .el-upload-list__item{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/deep/ .welfare-option .imgUrl .el-upload--picture-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/deep/ .welfare-option .imgUrl .el-upload--picture-card i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/deep/ .preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
`
|
||||
};
|
||||
@@ -0,0 +1,226 @@
|
||||
const WELFARE_OPTION_TABLE = {
|
||||
template: /*language=HTML*/ `
|
||||
<div>
|
||||
<el-card>
|
||||
<el-form ref="form">
|
||||
|
||||
<el-card :key="s.id" class="item" shadow="never" v-for="(s,idx) in subject">
|
||||
<!-- <el-form-item :label="(s.subjectType==='radio'?'(单选)':'(多选)')+ (idx+1)+'.'" prop="subjectName">-->
|
||||
<el-form-item label="" prop="subjectName">
|
||||
<div class="s-title-wrap">
|
||||
<el-row align="middle" style="width: 100%" type="flex">
|
||||
<el-col :xl="15"
|
||||
style="border: 1px dashed rgb(217, 217, 217);border-radius:6px;display: flex;align-items: center;">
|
||||
<el-input class="text-input" data-type="subject"
|
||||
v-model="s.subjectName"></el-input>
|
||||
</el-col>
|
||||
<el-col :xl="2" style="text-align: center"></el-col>
|
||||
<!-- <el-col :xl="2" style="text-align: center">
|
||||
<div class="option-delete">
|
||||
<el-button circle
|
||||
icon="el-icon-delete"
|
||||
size="mini" type="danger"
|
||||
@click="subject.splice(idx,1)"></el-button>
|
||||
</div>
|
||||
</el-col>-->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="s-options-list" style="margin-top: 10px;">
|
||||
<el-table :data="s.options" border>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="福利名称"
|
||||
>
|
||||
<template slot-scope="{row}">
|
||||
<div
|
||||
style="border: 1px dashed rgb(217, 217, 217);border-radius:6px;display: flex;align-items: center;padding-left: 10px;">
|
||||
<i class="fa fa-circle-o" style="cursor: pointer"
|
||||
v-if="s.subjectType==='radio'"></i>
|
||||
<i class="fa fa-square-o"
|
||||
style="cursor: pointer"
|
||||
v-else-if="s.subjectType==='checkBox'"></i>
|
||||
|
||||
<el-input autosize class="text-input"
|
||||
data-type="option"
|
||||
v-model="row.optionName"
|
||||
></el-input>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center"
|
||||
label="备注1">
|
||||
<template slot-scope="{row}">
|
||||
<el-input max="100" type="textarea"
|
||||
v-model="row.supplier"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center"
|
||||
label="备注2">
|
||||
<template slot-scope="{row}">
|
||||
<el-input max="100" type="textarea"
|
||||
v-model="row.simpleDesc"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="排序"
|
||||
width="120px">
|
||||
<template slot-scope="{row}">
|
||||
<div
|
||||
style="border: 1px dashed rgb(217, 217, 217);border-radius:6px;display: flex;align-items: center;padding-left: 10px;">
|
||||
<el-input autosize class="text-input"
|
||||
data-type="option"
|
||||
v-model="row.optionSort"
|
||||
></el-input>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="图片"
|
||||
width="120">
|
||||
<template slot-scope="{row,$index}">
|
||||
<file-upload :upload_number="1" :value.sync="row.imgUrl"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
class="imgUrl"
|
||||
upload_result_type="url"
|
||||
complete_result upload_mode="image"
|
||||
upload_result_category="interval"></file-upload>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="说明"
|
||||
width="100px ">
|
||||
<template slot-scope="scope">
|
||||
<el-link @click="openDescRichText(scope.row.description,idx,scope.$index)"
|
||||
type="primary">
|
||||
编辑说明
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="操作"
|
||||
width="100px">
|
||||
<template slot-scope="{row,$index}">
|
||||
<div class="option-delete">
|
||||
<el-button @click="deleteRow(s.options,row,$index)"
|
||||
circle
|
||||
icon="el-icon-delete" size="mini"
|
||||
type="danger"></el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="s-operation">
|
||||
<el-button
|
||||
@click="s.options.push({optionType:'套餐',optionNameId:'',optionName:'福利'+(s.options.length+1),optionSort:s.options.length+1,imgUrl:null,isDefaultOption:false,isSystemDefault:false})"
|
||||
size="small"
|
||||
type="primary">
|
||||
添加福利
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="richTextDialog"
|
||||
title="编辑说明"
|
||||
width="60%">
|
||||
<text-editor v-model="descRichTextContent"></text-editor>
|
||||
<span class="dialog-footer" slot="footer">
|
||||
<el-button @click="richTextDialog = false">取 消</el-button>
|
||||
<el-button @click="saveRichText" type="primary">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`,
|
||||
watch: {
|
||||
subject(val) {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
subject: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
descRichTextContent: "",
|
||||
files: [],
|
||||
shoppingTypeOptions: null,
|
||||
richTextDialog: false,
|
||||
subjectIndex: 0,
|
||||
optionIndex: 0,
|
||||
imgPopover: false,
|
||||
idx: null,
|
||||
oidx: null
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteRow(options, row, index) {
|
||||
options.splice(index, 1)
|
||||
const shoppingTypeOption = this.shoppingTypeOptions.find(v => v.id === row.optionNameId)
|
||||
shoppingTypeOption.disabled = false
|
||||
},
|
||||
addSubject(type) {
|
||||
let subject = {
|
||||
subjectName: "题目" + (this.subject.length + 1),
|
||||
subjectType: type,
|
||||
options: [
|
||||
{ optionName: "选项一", imgUrl: null },
|
||||
{ optionName: "选项一", imgUrl: null }
|
||||
]
|
||||
}
|
||||
this.subject.push(subject)
|
||||
},
|
||||
validate(fn) {
|
||||
if (this._validate()) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
|
||||
},
|
||||
_validate() {
|
||||
return this.subject.some(v => {
|
||||
if (!v.subjectName) return true
|
||||
return v.options.some(x => {
|
||||
if (!x.optionName) return true
|
||||
})
|
||||
})
|
||||
},
|
||||
openDescRichText(description, sIdx, oIdx) {
|
||||
this.descRichTextContent = description
|
||||
this.richTextDialog = true
|
||||
this.subjectIndex = sIdx
|
||||
this.optionIndex = oIdx
|
||||
},
|
||||
saveRichText() {
|
||||
this.subject[this.subjectIndex]["options"][this.optionIndex].description = this.descRichTextContent
|
||||
this.richTextDialog = false
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.imgUrl .el-upload--picture-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.imgUrl .el-upload--picture-card i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -0,0 +1,764 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<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
|
||||
@change="doSearch"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
></el-date-picker>
|
||||
</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"
|
||||
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
|
||||
:key="column.prop"
|
||||
: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'">
|
||||
<span v-if="row.gist_list">{{row.gist_list}}</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
|
||||
<template scope="{row}" v-else-if="column.prop=='receiveAddress'">
|
||||
<span v-if="row.receiveAddress">{{row.receiveAddress}}</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="操作" prop="userOnline" width="150px">
|
||||
<template scope="{row}">
|
||||
<el-button @click="openChoose(row)" size="mini" type="primary">{{confirmButtonInfo(row).text}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<template #edit>
|
||||
<option-select ref="optionSelectRef" @refresh="doSearch();$refs.guava.index();"></option-select>
|
||||
</template>
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("optionSelect.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
tableColumns: [
|
||||
{ prop: "year", label: "年度" },
|
||||
{ prop: "name", label: "项目名称" },
|
||||
{ prop: "choiceTime", label: "选择时间" },
|
||||
{ prop: "isChoose", label: "是否选择" },
|
||||
{ prop: "gist_list", label: "所选福利" }
|
||||
// { prop: "receiveAddress", label: "收货地址" }
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"option-select": optionSelect
|
||||
},
|
||||
methods: {
|
||||
go_back() {
|
||||
this.doSearch()
|
||||
this.$refs.guava.index()
|
||||
},
|
||||
confirmButtonInfo(row) {
|
||||
const { choiceTimeEnd, choiceTimeStart, overdueChoiceTimeEnd, isChoose, selectTime } = row
|
||||
const now = this.$moment().valueOf()
|
||||
if (overdueChoiceTimeEnd == null || overdueChoiceTimeEnd === "") {
|
||||
if (now > this.$moment(choiceTimeStart).valueOf() && now < moment(choiceTimeEnd).valueOf()) {
|
||||
return { text: isChoose ? "修改" : "确定选择", disabled: false }
|
||||
} else if (now > this.$moment(choiceTimeEnd).valueOf()) {
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else if (now < this.$moment(choiceTimeStart).valueOf()) {
|
||||
return { text: "选择未开始", disabled: true }
|
||||
}
|
||||
} else {
|
||||
//已选择了不能再动了
|
||||
if (isChoose) {
|
||||
if (
|
||||
this.$moment(selectTime).valueOf() > this.$moment(choiceTimeEnd).valueOf() &&
|
||||
now < this.$moment(overdueChoiceTimeEnd).valueOf()
|
||||
) {
|
||||
return { text: "确定修改", disabled: false }
|
||||
}
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else {
|
||||
if (now > this.$moment(choiceTimeStart).valueOf() && now < this.$moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: isChoose ? "修改" : "确定选择", disabled: false }
|
||||
} else if (now > this.$moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else if (now < this.$moment(choiceTimeStart).valueOf()) {
|
||||
return { text: "选择未开始", disabled: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async openChoose(row) {
|
||||
if (this.confirmButtonInfo(row).disabled) {
|
||||
this.$message.warning("当前时间段无法选择")
|
||||
return
|
||||
}
|
||||
this.$refs.guava.edit(() => {
|
||||
this.$refs.optionSelectRef.onOpen(row.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
/* 全局变量 */
|
||||
:root {
|
||||
--primary-color: #409EFF;
|
||||
--primary-light: #ecf5ff;
|
||||
--text-primary: #303133;
|
||||
--text-secondary: #606266;
|
||||
--text-light: #909399;
|
||||
--border-color: #EBEEF5;
|
||||
--success-color: #67c23a;
|
||||
--warning-color: #e6a23c;
|
||||
--danger-color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 主容器样式 */
|
||||
.welfare-select-container {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 截止时间提醒 */
|
||||
.welfare-deadline {
|
||||
background: linear-gradient(135deg, #fff7f7 0%, #fff 100%);
|
||||
border-left: 3px solid var(--danger-color);
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--danger-color);
|
||||
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.welfare-deadline i {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 选择提示 */
|
||||
.welfare-notice {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.welfare-notice .el-alert {
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.welfare-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 项目信息卡片 */
|
||||
.welfare-info-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.project-cover {
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: -10px -20px 16px;
|
||||
}
|
||||
|
||||
.project-cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.project-cover .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.welfare-info-header {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.welfare-info-header i {
|
||||
margin-right: 8px;
|
||||
color: var(--primary-color);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.info-item:hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 100px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 福利选项卡片 */
|
||||
.welfare-options-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.options-count {
|
||||
font-size: 14px;
|
||||
color: var(--text-light);
|
||||
font-weight: normal;
|
||||
margin-left: 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 选项网格 */
|
||||
.welfare-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 选项卡片 */
|
||||
.welfare-option {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 2px solid transparent;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.welfare-option:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.welfare-option.selected {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
.welfare-option.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--primary-color), #66b1ff);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 选项标签 */
|
||||
.option-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 2;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 选项图片 */
|
||||
.option-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-image::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
|
||||
.option-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.welfare-option:hover .option-image .el-image {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
/* 选项内容 */
|
||||
.option-content {
|
||||
padding: 12px 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff 0%, #f8f9fb 100%);
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.option-detail-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--primary-color);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--primary-light);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-detail-btn i {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.option-detail-btn:hover {
|
||||
background: #dceeff;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* 选择控件 */
|
||||
.option-radio {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.option-stepper {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.option-stepper .el-input-number {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.welfare-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.welfare-footer .el-button {
|
||||
min-width: 140px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.welfare-footer .el-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
|
||||
}
|
||||
|
||||
/* 确认弹窗样式 */
|
||||
.welfare-confirm-dialog {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.confirm-content {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.confirm-section-title {
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.confirm-section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.confirm-mobile-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.selected-items {
|
||||
background: #f8f9fb;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.selected-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.selected-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.selected-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.selected-item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.selected-item-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.selected-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.selected-item-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selected-item-quantity {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selected-item-quantity i {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.selected-item-right {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.selected-item-right .el-tag {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.confirm-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fb;
|
||||
border-radius: 6px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.confirm-warning {
|
||||
margin-top: 16px;
|
||||
padding: 10px 14px;
|
||||
background: #fff7e6;
|
||||
border-radius: 6px;
|
||||
color: var(--warning-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.confirm-warning.warning {
|
||||
background: #fef0f0;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.confirm-warning i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.deadline-info {
|
||||
margin-top: 12px;
|
||||
padding: 10px 14px;
|
||||
background: var(--primary-light);
|
||||
border-radius: 6px;
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.deadline-info i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 详情弹窗 */
|
||||
.welfare-detail-dialog {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.welfare-detail-popup {
|
||||
padding: 16px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.welfare-detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welfare-detail-content {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.welfare-loading {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.welfare-select-container > * {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,814 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava>
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="年度">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
@change="getWelfareList"
|
||||
></el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="福利项目">
|
||||
<el-select :clearable="false" filterable placeholder="请选择福利项目" style="width: 100%" v-model="pageForm.projectId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in projectOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="福利选项">
|
||||
<el-select clearable filterable placeholder="请选择福利选项" style="width: 100%" v-model="pageForm.welfareOptionId">
|
||||
<el-option :key="item.id" :label="item.optionName" :value="item.id" v-for="item in welfareOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="姓名">
|
||||
<el-input
|
||||
@keyup.enter.native="doSearch"
|
||||
clearable
|
||||
placeholder="请输入姓名"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.userName"
|
||||
></el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="工号">
|
||||
<el-input
|
||||
@keyup.enter.native="doSearch"
|
||||
clearable
|
||||
placeholder="请输入工号"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.loginName"
|
||||
></el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属工会">
|
||||
<el-select clearable filterable placeholder="请选择所属工会" style="width: 100%" v-model="pageForm.unionId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unionOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属单位">
|
||||
<el-select clearable filterable multiple collapse-tags placeholder="请选择所属单位" style="width: 100%" v-model="pageForm.unitIds">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unitOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="选择情况">
|
||||
<el-radio-group v-model="pageForm.isSelect" size="small" @change="doSearch">
|
||||
<el-radio-button :label="null">全部</el-radio-button>
|
||||
<el-radio-button :label="true">已选择</el-radio-button>
|
||||
<el-radio-button :label="false">未选择</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-button type="primary" size="small" icon="el-icon-download" style="margin-left: 10px" @click="exportXlsx">
|
||||
导出选择情况表
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" size="small" icon="el-icon-download" style="margin-left: 10px" @click="receiveXlsx">
|
||||
导出领取表
|
||||
</el-button>
|
||||
</table-tool>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@sort-change="pageOrder"
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<el-table-column :index="indexMethod" label="序号" type="index" width="80px"></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column label="收货地址" prop="receiveAddress" v-if="provideMode===3"></el-table-column>
|
||||
|
||||
<el-table-column align="center" fixed="right" header-align="center" label="操作" width="100px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button size="mini" type="primary" @click="proxySelect(row)">代选</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
|
||||
<el-dialog title="代选" :visible.sync="optionSelectVisible" width="60%">
|
||||
<option-select ref="optionSelectRef" @refresh="optionSelectVisible=false;doSearch();"></option-select>
|
||||
</el-dialog>
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../select/optionSelect.js"){}#-->
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
components: {
|
||||
"option-select": optionSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
searchName: "username",
|
||||
year: new Date().getFullYear().toString(),
|
||||
isSelect: null
|
||||
},
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
projectOptions: [],
|
||||
tableColumns: [
|
||||
{ prop: "loginName", label: "工号" },
|
||||
{ prop: "userName", label: "姓名" },
|
||||
{ prop: "sex", label: "性别", sortable: true, checked: 0 },
|
||||
{ prop: "birthday", label: "出生日期", sortable: true, checked: 0 },
|
||||
{ prop: "welfareUnionName", label: "所属工会", sortable: true },
|
||||
{ prop: "welfareUnitName", label: "所属单位", sortable: true },
|
||||
{ prop: "selectedOptions", label: "所选福利", sortable: true },
|
||||
{ prop: "mobile", label: "联系电话", sortable: true }
|
||||
],
|
||||
optionSelectVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
welfareOptions() {
|
||||
if (this.pageForm.projectId) {
|
||||
return this.projectOptions.find((item) => item.id === this.pageForm.projectId).options
|
||||
}
|
||||
return []
|
||||
},
|
||||
provideMode() {
|
||||
return this.projectOptions.find((item) => item.id === this.pageForm.projectId).provideMode
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取福利列表
|
||||
getWelfareList() {
|
||||
this.$axios.post("/platform/welfare/common/list", { year: this.pageForm.year }).then((res) => {
|
||||
this.projectOptions = res.data
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "projectId", res.data[0].id)
|
||||
} else {
|
||||
this.$set(this.pageForm, "projectId", null)
|
||||
}
|
||||
this.doSearch()
|
||||
})
|
||||
},
|
||||
|
||||
// 获取数据
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios
|
||||
.post("/platform/welfare/selection/situation/pageData", { pageForm: JSON.stringify(this.pageForm) })
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 导出选择情况表
|
||||
exportXlsx() {
|
||||
this.$downLoad("/platform/welfare/selection/situation/exportXlsx", { pageForm: JSON.stringify(this.pageForm) })
|
||||
},
|
||||
|
||||
// 导出选择情况表
|
||||
receiveXlsx() {
|
||||
this.$downLoad("/platform/welfare/selection/situation/receiveXlsx", { pageForm: JSON.stringify(this.pageForm) })
|
||||
},
|
||||
|
||||
// 管理员待选
|
||||
proxySelect(row) {
|
||||
this.optionSelectVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.optionSelectRef.onOpen(row.projectId, row.userId)
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.getWelfareList()
|
||||
this.unionOptions = await this.$businessTool.listUnion()
|
||||
this.unitOptions = await this.$businessTool.listUnit()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 全局变量 */
|
||||
:root {
|
||||
--primary-color: #409EFF;
|
||||
--primary-light: #ecf5ff;
|
||||
--text-primary: #303133;
|
||||
--text-secondary: #606266;
|
||||
--text-light: #909399;
|
||||
--border-color: #EBEEF5;
|
||||
--success-color: #67c23a;
|
||||
--warning-color: #e6a23c;
|
||||
--danger-color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 主容器样式 */
|
||||
.welfare-select-container {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 截止时间提醒 */
|
||||
.welfare-deadline {
|
||||
background: linear-gradient(135deg, #fff7f7 0%, #fff 100%);
|
||||
border-left: 3px solid var(--danger-color);
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--danger-color);
|
||||
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.1);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.welfare-deadline i {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 选择提示 */
|
||||
.welfare-notice {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.welfare-notice .el-alert {
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.welfare-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 项目信息卡片 */
|
||||
.welfare-info-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.project-cover {
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: -10px -20px 16px;
|
||||
}
|
||||
|
||||
.project-cover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.project-cover .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.welfare-info-header {
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f8f9fb 0%, #fff 100%);
|
||||
}
|
||||
|
||||
.welfare-info-header i {
|
||||
margin-right: 8px;
|
||||
color: var(--primary-color);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.info-item:hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 100px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 福利选项卡片 */
|
||||
.welfare-options-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.options-count {
|
||||
font-size: 14px;
|
||||
color: var(--text-light);
|
||||
font-weight: normal;
|
||||
margin-left: 8px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 选项网格 */
|
||||
.welfare-options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 选项卡片 */
|
||||
.welfare-option {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 2px solid transparent;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.welfare-option:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.welfare-option.selected {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
.welfare-option.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--primary-color), #66b1ff);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 选项标签 */
|
||||
.option-tag {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 2;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 选项图片 */
|
||||
.option-image {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.option-image::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
|
||||
}
|
||||
|
||||
.option-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.welfare-option:hover .option-image .el-image {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
/* 选项内容 */
|
||||
.option-content {
|
||||
padding: 12px 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff 0%, #f8f9fb 100%);
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.option-detail-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--primary-color);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--primary-light);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option-detail-btn i {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.option-detail-btn:hover {
|
||||
background: #dceeff;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* 选择控件 */
|
||||
.option-radio {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.option-stepper {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.option-stepper .el-input-number {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.welfare-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.welfare-footer .el-button {
|
||||
min-width: 140px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.welfare-footer .el-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
|
||||
}
|
||||
|
||||
/* 确认弹窗样式 */
|
||||
.welfare-confirm-dialog {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.confirm-content {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.confirm-section-title {
|
||||
font-size: 15px;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.confirm-section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.confirm-mobile-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.selected-items {
|
||||
background: #f8f9fb;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.selected-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.selected-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.selected-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.selected-item-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.selected-item-image .el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.selected-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.selected-item-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selected-item-quantity {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selected-item-quantity i {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.selected-item-right {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.selected-item-right .el-tag {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.confirm-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fb;
|
||||
border-radius: 6px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.confirm-warning {
|
||||
margin-top: 16px;
|
||||
padding: 10px 14px;
|
||||
background: #fff7e6;
|
||||
border-radius: 6px;
|
||||
color: var(--warning-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.confirm-warning.warning {
|
||||
background: #fef0f0;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.confirm-warning i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.deadline-info {
|
||||
margin-top: 12px;
|
||||
padding: 10px 14px;
|
||||
background: var(--primary-light);
|
||||
border-radius: 6px;
|
||||
color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.deadline-info i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 详情弹窗 */
|
||||
.welfare-detail-dialog {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.welfare-detail-popup {
|
||||
padding: 16px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.welfare-detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welfare-detail-content {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.welfare-loading {
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 动画 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.welfare-select-container > * {
|
||||
animation: fadeIn 0.5s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,182 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="年度">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
@change="getWelfareProjectList"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
></el-date-picker>
|
||||
</search-item>
|
||||
<search-item label="福利项目">
|
||||
<el-select @change="getWelfareOptions()" filterable placeholder="福利项目" style="width: 100%" v-model="pageForm.projectId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in welfareProjectList"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="所属工会">
|
||||
<el-select :clearable="clearable" clearable filterable placeholder="请选择所属工会" style="width: 100%" v-model="pageForm.unionId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unionOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never" v-loading="tableLoading">
|
||||
<table-tool label="工会列表">
|
||||
<el-button @click="exportByWelfareOptions" icon="el-icon-printer" size="small" type="primary">按福利选项导出</el-button>
|
||||
<template v-if="$auth.hasRoleOr(['SYSADMIN','SCHOOL_UNION_ADMIN','SCHOOL_UNION_WELFARE_ADMIN'])">
|
||||
<el-button :disabled="!pageForm.projectId" @click="exportSummary" icon="el-icon-printer" size="small" type="primary">
|
||||
导出汇总表
|
||||
</el-button>
|
||||
</template>
|
||||
</table-tool>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@sort-change="pageOrder"
|
||||
class="vi-table"
|
||||
lazy
|
||||
ref="table"
|
||||
row-key="id"
|
||||
show-summary
|
||||
style="width: 100%"
|
||||
v-if="tableData&&tableData.length>0"
|
||||
>
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<template scope="{row}" v-if="column.prop=='welfareUnitName'">{{row.welfareUnitName}}</template>
|
||||
<template scope="{row}" v-else-if="column.prop=='selectedNum'">
|
||||
<el-link @click="openSelected(row)" type="primary">{{row.selectedNum}}</el-link>
|
||||
</template>
|
||||
<template scope="{row}" v-else-if="column.prop=='unSelectedNum'">
|
||||
<el-link @click="openUnSelected(row)" type="primary">{{row.unSelectedNum}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
</guava>
|
||||
|
||||
<selected-user ref="selectedUserRef"></selected-user>
|
||||
<unselected-user ref="unSelectedUserRef"></unselected-user>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include('selectedUser.js'){}#-->
|
||||
<!--#include('unSelectedUser.js'){}#-->
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
components: {
|
||||
"selected-user": selectedUser,
|
||||
"unselected-user": unSelectedUser
|
||||
},
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
searchName: "username",
|
||||
year: new Date().getFullYear().toString()
|
||||
},
|
||||
unionOptions: [],
|
||||
welfareProjectList: [],
|
||||
welfareOptions: [],
|
||||
projectInfo: {},
|
||||
clearable: false,
|
||||
tableColumns: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 导出汇总表
|
||||
exportSummary() {
|
||||
this.$downLoad("/platform/welfare/statistics/exportSummary", {
|
||||
projectId: this.pageForm.projectId
|
||||
})
|
||||
},
|
||||
// 查看已选择的人员
|
||||
openSelected(row) {
|
||||
this.$refs.selectedUserRef.onOpen(this.pageForm.projectId, row)
|
||||
},
|
||||
|
||||
// 查看未选择的人员
|
||||
async openUnSelected(row) {
|
||||
this.$refs.unSelectedUserRef.onOpen(this.pageForm.projectId, row)
|
||||
},
|
||||
|
||||
// 按福利选项导出
|
||||
exportByWelfareOptions() {
|
||||
this.$downLoad("/platform/welfare/statistics/exportByWelfareOptions", {
|
||||
projectId: this.pageForm.projectId,
|
||||
unionId: this.pageForm.unionId
|
||||
})
|
||||
},
|
||||
|
||||
async pageData() {
|
||||
this.tableLoading = true
|
||||
const resp = await this.$axios.post("/platform/welfare/statistics/pageData", this.pageForm)
|
||||
if (resp.code === 0) {
|
||||
this.tableColumns = resp.data.tableColumn
|
||||
this.tableData = resp.data.tableList
|
||||
}
|
||||
this.tableLoading = false
|
||||
},
|
||||
async getWelfareProjectList() {
|
||||
const res = await this.$axios.post("/platform/welfare/project/mange/getWelfareList", { year: this.pageForm.year })
|
||||
this.welfareProjectList = res.data
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "projectId", res.data[0].id)
|
||||
} else {
|
||||
this.$set(this.pageForm, "projectId", null)
|
||||
}
|
||||
this.doSearch()
|
||||
},
|
||||
getWelfareOptions() {
|
||||
const data = this.welfareProjectList.find((p) => p.id === this.pageForm.projectId)
|
||||
this.projectInfo = data
|
||||
this.welfareOptions = data.options
|
||||
},
|
||||
async init() {
|
||||
await this.getWelfareProjectList()
|
||||
if (
|
||||
!this.$auth.hasRoleOr(["SYSADMIN", "SCHOOL_UNION_ADMIN", "SCHOOL_UNION_WELFARE_ADMIN"]) &&
|
||||
this.$auth.hasRoleOr(["BRANCH_UNION_CHAIRMAN"])
|
||||
) {
|
||||
this.unionOptions = await this.$businessTool.listUnion(this.$store.state.user.union.id)
|
||||
this.$set(this.pageForm, "unionId", this.unions[0].id)
|
||||
this.clearable = true
|
||||
} else {
|
||||
this.unionOptions = await this.$businessTool.listUnion()
|
||||
this.clearable = true
|
||||
}
|
||||
await this.pageData()
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,97 @@
|
||||
const selectedUser = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog :title="unionName+'已选择用户'" :visible.sync="visible" width="70%">
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="pageForm.searchKeyword"
|
||||
placeholder="请输入姓名或工号"
|
||||
style="width: 200px;"
|
||||
size="small"
|
||||
clearable
|
||||
@keyup.enter.native="doSearch"
|
||||
>
|
||||
<el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="序号" type="index" :index="indexMethod" width="50"></el-table-column>
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-dialog>
|
||||
`,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
projectId: null,
|
||||
unionId: null,
|
||||
unionName: null,
|
||||
searchKeyword: "",
|
||||
tableColumns: [
|
||||
{ label: "工号", prop: "loginName" },
|
||||
{ label: "姓名", prop: "userName" },
|
||||
{ label: "生日", prop: "birthday" },
|
||||
{ prop: "userState", label: "在职状态", width: 120, sortable: true },
|
||||
{ prop: "personType", label: "教职工类别", width: 120, sortable: true },
|
||||
{ prop: "preparedBy", label: "编制类别", width: 120, sortable: true },
|
||||
{ prop: "postDoctoralJoinDate", label: "进站时间", sortable: true },
|
||||
{ label: "单位", prop: "welfareUnitName" },
|
||||
{ label: "手机号", prop: "mobile" },
|
||||
{ label: "所选福利", prop: "selectOptionName" }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(projectId, { id, name }) {
|
||||
this.visible = true
|
||||
this.projectId = projectId
|
||||
this.unionId = id
|
||||
this.unionName = name
|
||||
this.searchKeyword = ""
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.$axios
|
||||
.post("/platform/welfare/statistics/selectedUnionUserPageData", {
|
||||
...this.pageForm,
|
||||
projectId: this.projectId,
|
||||
unionId: this.unionId,
|
||||
keyword: this.searchKeyword
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.pageForm.pageNum = 1
|
||||
this.pageData()
|
||||
},
|
||||
handleExport() {
|
||||
this.$downLoad("/platform/welfare/statistics/exportSelectedUnionUser", {
|
||||
projectId: this.projectId,
|
||||
unionId: this.unionId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
const unSelectedUser = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog :title="unionName+'未选择用户'" :visible.sync="visible" width="70%">
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="pageForm.searchKeyword"
|
||||
placeholder="请输入姓名或工号"
|
||||
style="width: 200px;"
|
||||
size="small"
|
||||
clearable
|
||||
@keyup.enter.native="doSearch"
|
||||
>
|
||||
<el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="handleExport">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="序号" type="index" :index="indexMethod" width="50"></el-table-column>
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-dialog>
|
||||
`,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
projectId: null,
|
||||
unionId: null,
|
||||
unionName: null,
|
||||
tableColumns: [
|
||||
{ label: "工号", prop: "loginName" },
|
||||
{ label: "姓名", prop: "userName" },
|
||||
{ label: "生日", prop: "birthday" },
|
||||
{ prop: "userState", label: "在职状态", width: 120, sortable: true },
|
||||
{ prop: "personType", label: "教职工类别", width: 120, sortable: true },
|
||||
{ prop: "preparedBy", label: "编制类别", width: 120, sortable: true },
|
||||
{ prop: "postDoctoralJoinDate", label: "进站时间", sortable: true },
|
||||
{ label: "单位", prop: "welfareUnitName" }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(projectId, { id, name }) {
|
||||
this.visible = true
|
||||
this.projectId = projectId
|
||||
this.unionId = id
|
||||
this.unionName = name
|
||||
this.pageData()
|
||||
},
|
||||
pageData() {
|
||||
this.$axios
|
||||
.post("/platform/welfare/statistics/unSelectedUnionUserPageData", {
|
||||
...this.pageForm,
|
||||
projectId: this.projectId,
|
||||
unionId: this.unionId
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
}
|
||||
})
|
||||
},
|
||||
handleExport() {
|
||||
this.$downLoad("/platform/welfare/statistics/exportUnSelectedUnionUser", {
|
||||
projectId: this.projectId,
|
||||
unionId: this.unionId
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,431 @@
|
||||
<!--#include("/platform/zhgh/welfare/addressManage/addressDialog.js"){}#-->
|
||||
let CHOOSE_WELFARE = {
|
||||
template: /*language=HTML*/ `
|
||||
<div>
|
||||
<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).name}}
|
||||
</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).name}}
|
||||
</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="8"
|
||||
v-for="(option, oidx) in subject.options">
|
||||
<el-card
|
||||
style="margin: 5px;">
|
||||
|
||||
<div slot="header"
|
||||
style="display: flex;justify-content: space-between">
|
||||
<div style="color:#000;font-size: 18px">
|
||||
{{option.optionName}}
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click.stop="viewDesc(option)"
|
||||
type="text">套餐详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex">
|
||||
<el-image
|
||||
style="width: 150px;height: 150px;"
|
||||
:src="option.imgUrl"
|
||||
fit="contain"
|
||||
></el-image>
|
||||
<div style="width:calc(100% - 150px);padding-left: 20px;position: relative">
|
||||
<div style="white-space: nowrap;display: flex">
|
||||
<span class="desc_label">服务专线</span>
|
||||
<el-tooltip :content="option.supplier" placement="top">
|
||||
<span class="desc_value"
|
||||
style="width: calc(100% - 80px);text-overflow: ellipsis;overflow: hidden">
|
||||
{{option.supplier}}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div v-if="option.simpleDesc">
|
||||
<span class="desc_label">备  注</span>
|
||||
<span class="desc_value">
|
||||
{{option.simpleDesc}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-input-number :disabled="is_view"
|
||||
:max="option.maxNum"
|
||||
:min="0"
|
||||
@change="numChange(option.selectNum,option,oidx)"
|
||||
style="width: 150px;position: absolute;right:0px;bottom: 0;"
|
||||
v-model="option.selectNum"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="projectInfo.provideMode===3">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" v-if="!is_view">
|
||||
<el-form-item label="收货地址" prop="receiveAddress">
|
||||
<div style="display: flex; column-gap: 10px">
|
||||
<div style="flex: 1">
|
||||
<el-select @change="addressChange"
|
||||
filterable placeholder="请选择收货地址"
|
||||
style="width: 100%"
|
||||
v-model="formData.addressId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name+' '+item.defaultName"
|
||||
:value="item.id"
|
||||
v-for="item in addressOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button
|
||||
@click="openAddress"
|
||||
type="primary">添加收货地址
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
:rules="{required:true,message: '请确认收货地址', trigger: 'blur'}"
|
||||
label="请确认收货地址"
|
||||
prop="receiveAddress">
|
||||
<el-input :rows="4" disabled maxlength="100"
|
||||
placeholder="选择收货地址联动" type="textarea"
|
||||
v-model="formData.receiveAddress"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-form-item :rules="{required:true,message: '请签字', trigger: 'blur'}"
|
||||
label="签字" prop="userSign" v-if="projectInfo.signMode===2">
|
||||
<template v-if="isChoice===0||!is_view">
|
||||
<pc-signature v-model="formData.userSign"></pc-signature>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-image :src="formData.userSign"
|
||||
fit="contain"
|
||||
style="height: 100px;width: 100%" v-if="formData.userSign">
|
||||
</el-image>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<el-row class="mt20" justify="end" type="flex">
|
||||
<el-button @click="$emit('go_back')">关闭</el-button>
|
||||
<el-button @click="doChoose" type="primary" v-if="!is_view">确定</el-button>
|
||||
</el-row>
|
||||
<el-drawer
|
||||
:modal-append-to-body="false"
|
||||
:append-to-body="true"
|
||||
:visible.sync="descDialogVisible"
|
||||
direction="rtl"
|
||||
size="50%"
|
||||
title="福利详情">
|
||||
<el-card shadow="never" style="margin: 20px">
|
||||
<div v-html="descData"></div>
|
||||
</el-card>
|
||||
</el-drawer>
|
||||
|
||||
<address-dialog ref="addressDialog" @select_user_address="selectUserAddress"></address-dialog>
|
||||
</div>
|
||||
`,
|
||||
store,
|
||||
props: {
|
||||
is_view: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
projectInfo: {},
|
||||
addressOptions: [],
|
||||
welfareProvideMode: [],
|
||||
welfareSignMode: [],
|
||||
isChoice: false,
|
||||
|
||||
addressDialogVisible: false,
|
||||
descDialogVisible: false,
|
||||
descData: "",
|
||||
dzOptions: chengShiList
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sumSelectNum() {
|
||||
if (this.projectInfo && this.projectInfo.welfareProjectSubjects) {
|
||||
return this.projectInfo.welfareProjectSubjects[0].options.map(v => v.selectNum).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||||
}
|
||||
return 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"address-dialog": ADDRESS_DIALOG
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
if (val) {
|
||||
let provinceName = ""
|
||||
let cityName = ""
|
||||
let countyName = ""
|
||||
const province = this.dzOptions.find(c => c.value === val[0])
|
||||
provinceName = province.label
|
||||
const city = province.children.find(p => p.value === val[1])
|
||||
cityName = city.label
|
||||
if (val.length === 3) {
|
||||
const county = city.children.find(p => p.value === val[2])
|
||||
countyName = county.label
|
||||
this.$set(this.formData, "areaCode", county.value)
|
||||
} else {
|
||||
this.$set(this.formData, "areaCode", city.value)
|
||||
}
|
||||
this.$set(this.formData, "province", provinceName)
|
||||
this.$set(this.formData, "city", cityName)
|
||||
this.$set(this.formData, "county", countyName)
|
||||
|
||||
}
|
||||
},
|
||||
openAddress() {
|
||||
this.$refs.addressDialog.dialogVisible = true
|
||||
this.$refs.addressDialog.formData = {}
|
||||
},
|
||||
|
||||
//数量更改
|
||||
numChange(value, option, optionIndex) {
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 查找+1按钮
|
||||
const plusButton = document.querySelector(".el-input-number__increase")
|
||||
// 添加点击事件监听器
|
||||
plusButton.addEventListener("click", this.handlePlusButtonClick(value, option, optionIndex))
|
||||
})
|
||||
|
||||
},
|
||||
handlePlusButtonClick(value, option, optionIndex) {
|
||||
const {
|
||||
isCheckBox,
|
||||
multiSelectNum,
|
||||
singleOptionSupportMultipleSelection
|
||||
} = this.projectInfo
|
||||
if (isCheckBox === "checkBox") {
|
||||
//判断是否支持单个多选
|
||||
if (!singleOptionSupportMultipleSelection && value > 1) {
|
||||
this.$set(this.projectInfo.welfareProjectSubjects[0].options[optionIndex], "selectNum", 1)
|
||||
this.$message.warning("此套餐最多只能选择1份")
|
||||
return
|
||||
}
|
||||
}
|
||||
//获取用户当前选择的数量
|
||||
const selectNums = this.projectInfo.welfareProjectSubjects[0].options.map(v => v.selectNum)
|
||||
const sum = selectNums.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||||
|
||||
if (sum > multiSelectNum) {
|
||||
this.$set(this.projectInfo.welfareProjectSubjects[0].options[optionIndex], "selectNum", 0)
|
||||
this.$message.warning("此次福利最多只能选择" + multiSelectNum + "份")
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
addressChange(val) {
|
||||
const address = this.addressOptions.find(a => a.id === val)
|
||||
if (address) {
|
||||
this.$set(this.formData, "receiveAddress", address.name)
|
||||
}
|
||||
},
|
||||
doChoose() {
|
||||
this.$refs["addForm"].validate(async (valid) => {
|
||||
if (valid) {
|
||||
const {
|
||||
isCheckBox,
|
||||
multiSelectNum,
|
||||
singleOptionSupportMultipleSelection
|
||||
} = this.projectInfo
|
||||
if (isCheckBox === "checkBox") {
|
||||
if (this.sumSelectNum < multiSelectNum) {
|
||||
//用户没有选择完
|
||||
this.$message("一共可以选择" + multiSelectNum + "份,您目前只选择了" + this.sumSelectNum + "份，快去选择吧！")
|
||||
return
|
||||
}
|
||||
}
|
||||
if (this.formData.receiveAddress == null || this.formData.receiveAddress === "") {
|
||||
this.$message.warning("请填写收货地址")
|
||||
return
|
||||
}
|
||||
if (this.projectInfo.signMode === 2 && this.formData.userSign == null || this.formData.userSign === "") {
|
||||
this.$message.warning("请签字")
|
||||
return
|
||||
}
|
||||
const formData = this.projectInfo.welfareProjectSubjects[0].options.filter(v => v.selectNum >= 1).map(v => {
|
||||
return {
|
||||
welfareId: this.projectInfo.id,
|
||||
subjectId: v.subjectId,
|
||||
selectOptionId: v.id,
|
||||
receiveAddress: this.formData.receiveAddress,
|
||||
userSign: this.formData.userSign,
|
||||
selectNum: v.selectNum
|
||||
}
|
||||
})
|
||||
const {
|
||||
code,
|
||||
msg,
|
||||
data
|
||||
} = await $.post("/platform/welfare/userChoose/confirmSelect", {
|
||||
welfareUserSelections: JSON.stringify(formData),
|
||||
projectId: this.projectInfo.id
|
||||
})
|
||||
if (code === 0) {
|
||||
this.$message({
|
||||
message: msg,
|
||||
type: "success"
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: msg,
|
||||
type: "warning"
|
||||
})
|
||||
}
|
||||
this.$emit("go_back")
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
viewDesc(val) {
|
||||
this.descData = val.description
|
||||
this.descDialogVisible = true
|
||||
},
|
||||
//回显用户选择的数据
|
||||
echoUserSelection() {
|
||||
//获取用户当前选择的数量
|
||||
this.projectInfo.welfareProjectSubjects[0].options.forEach(v => {
|
||||
const option = this.userSelection.find(x => x.selectOptionId === v.id)
|
||||
if (option) {
|
||||
v.selectNum = option.selectNum
|
||||
} else {
|
||||
v.selectNum = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
async selectUserAddress() {
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress")
|
||||
resp.data.map(r => {
|
||||
let defaultName = r.isDefault ? "默认地址" : ""
|
||||
r.defaultName = defaultName
|
||||
r.name = "收货地址：" + r.province + r.city + r.county + r.addressDetail + "，收件人：" + r.userName + "，联系方式：" + r.tel
|
||||
})
|
||||
this.addressOptions = resp.data
|
||||
},
|
||||
async getProjectInfo(id) {
|
||||
const resp = await this.$axios.post("/platform/welfare/project/mange/findOne", { id: id })
|
||||
if (resp.code === 0) {
|
||||
resp.data.multiSelectNum = resp.data.multiSelectNum ? resp.data.multiSelectNum : 1
|
||||
this.projectInfo = resp.data
|
||||
await this.getUserSelection(id)
|
||||
await this.getChoice()
|
||||
}
|
||||
},
|
||||
//获取用户选择的数据
|
||||
async getUserSelection(projectId) {
|
||||
const resp = await this.$axios.post("/platform/welfare/mine/getUserSelection", { projectId: projectId })
|
||||
this.userSelection = resp.data
|
||||
this.echoUserSelection()
|
||||
},
|
||||
async getChoice() {
|
||||
const resp = await this.$axios.post("/platform/welfare/mine/isChoice", { projectId: this.projectInfo.id })
|
||||
this.isChoice = resp.data
|
||||
},
|
||||
async openChoose(row) {
|
||||
await this.getProjectInfo(row.id)
|
||||
this.$set(this.formData, "userName", this.$store.state.user.username)
|
||||
this.$set(this.formData, "tel", this.$store.state.user.mobile)
|
||||
|
||||
//如果已选择
|
||||
if (row.isChoose > 0) {
|
||||
this.$set(this.formData, "receiveAddress", this.userSelection[0].receiveAddress)
|
||||
this.$set(this.formData, "addressId", null)
|
||||
this.$set(this.formData, "userSign", this.userSelection[0].userSign)
|
||||
} else {
|
||||
const address = this.addressOptions.find(a => a.isDefault)
|
||||
if (address) {
|
||||
this.$set(this.formData, "receiveAddress", address.name)
|
||||
this.$set(this.formData, "addressId", address.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pageData()
|
||||
this.selectUserAddress()
|
||||
this.welfareProvideMode = await this.$businessTool.getDictOptions("welfareProvideMode")
|
||||
this.welfareProvideMode.map(v => {
|
||||
v.code = Number(v.code)
|
||||
})
|
||||
this.welfareSignMode = await this.$businessTool.getDictOptions("welfareSignMode")
|
||||
this.welfareSignMode.map(v => {
|
||||
v.code = Number(v.code)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,196 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<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
|
||||
@change="doSearch"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
></el-date-picker>
|
||||
</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"
|
||||
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
|
||||
:key="column.prop"
|
||||
: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'">
|
||||
<span v-if="row.gist_list">{{row.gist_list}}</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
|
||||
<template scope="{row}" v-else-if="column.prop=='receiveAddress'">
|
||||
<span v-if="row.receiveAddress">{{row.receiveAddress}}</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" header-align="center" label="操作" prop="userOnline" width="150px">
|
||||
<template scope="{row}">
|
||||
<el-button @click="openChoose(row)" size="mini" type="primary">{{confirmButtonInfo(row).text}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<template #edit>
|
||||
<choose-welfare :is_view="false" ref="chooseWelfare" @go_back="go_back"></choose-welfare>
|
||||
</template>
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("chooseWelfare.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
tableColumns: [
|
||||
{ prop: "year", label: "年度" },
|
||||
{ prop: "name", label: "项目名称" },
|
||||
{ prop: "choiceTime", label: "选择时间" },
|
||||
{ prop: "isChoose", label: "是否选择" },
|
||||
{ prop: "gist_list", label: "所选福利" },
|
||||
{ prop: "receiveAddress", label: "收货地址" }
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"choose-welfare": CHOOSE_WELFARE
|
||||
},
|
||||
methods: {
|
||||
go_back() {
|
||||
this.doSearch()
|
||||
this.$refs.guava.index()
|
||||
},
|
||||
confirmButtonInfo(row) {
|
||||
const { choiceTimeEnd, choiceTimeStart, overdueChoiceTimeEnd, isChoose, selectTime } = row
|
||||
const now = this.$moment().valueOf()
|
||||
if (overdueChoiceTimeEnd == null || overdueChoiceTimeEnd === "") {
|
||||
if (now > this.$moment(choiceTimeStart).valueOf() && now < moment(choiceTimeEnd).valueOf()) {
|
||||
return { text: isChoose ? "确定修改" : "确定选择", disabled: false }
|
||||
} else if (now > this.$moment(choiceTimeEnd).valueOf()) {
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else if (now < this.$moment(choiceTimeStart).valueOf()) {
|
||||
return { text: "选择未开始", disabled: true }
|
||||
}
|
||||
} else {
|
||||
//已选择了不能再动了
|
||||
if (isChoose) {
|
||||
if (
|
||||
this.$moment(selectTime).valueOf() > this.$moment(choiceTimeEnd).valueOf() &&
|
||||
now < this.$moment(overdueChoiceTimeEnd).valueOf()
|
||||
) {
|
||||
return { text: "确定修改", disabled: false }
|
||||
}
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else {
|
||||
if (now > this.$moment(choiceTimeStart).valueOf() && now < this.$moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: isChoose ? "修改" : "确定选择", disabled: false }
|
||||
} else if (now > this.$moment(overdueChoiceTimeEnd).valueOf()) {
|
||||
return { text: "选择已结束", disabled: true }
|
||||
} else if (now < this.$moment(choiceTimeStart).valueOf()) {
|
||||
return { text: "选择未开始", disabled: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async openChoose(row) {
|
||||
if (this.confirmButtonInfo(row).disabled) {
|
||||
this.$message.warning("当前时间段无法选择")
|
||||
return
|
||||
}
|
||||
this.$refs.guava.edit(() => {
|
||||
this.$refs.chooseWelfare.openChoose(row)
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.desc_label {
|
||||
width: 75px;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
padding-right: 4px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.desc_value {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,261 @@
|
||||
const addUser = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog title="添加用户" :visible.sync="visible" width="80%">
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="姓名">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入姓名"
|
||||
style="width: 100%" v-model="pageForm.userName">
|
||||
</el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="工号">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入工号"
|
||||
style="width: 100%" v-model="pageForm.loginName">
|
||||
</el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="性别">
|
||||
<el-select clearable placeholder="请选择性别" style="width: 100%" v-model="pageForm.sex">
|
||||
<el-option :key="sex" :label="sex" :value="sex"
|
||||
v-for="sex in sexOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="出生日期">
|
||||
<el-date-picker
|
||||
v-model="pageForm.birthday"
|
||||
type="date"
|
||||
placeholder="选择出生日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%">
|
||||
</el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="出生月份">
|
||||
<el-select
|
||||
v-model="pageForm.birthMonths"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择出生月份"
|
||||
style="width: 100%">
|
||||
<el-option
|
||||
v-for="month in 12"
|
||||
:key="month"
|
||||
:label="month + '月'"
|
||||
:value="month">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属工会">
|
||||
<el-select clearable filterable placeholder="请选择所属工会"
|
||||
style="width: 100%"
|
||||
@change="unionIdChange"
|
||||
v-model="pageForm.unionId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in unionOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属单位">
|
||||
<el-select clearable
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择所属单位" style="width: 100%"
|
||||
v-model="pageForm.unitIds">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in unitOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="人员类型：">
|
||||
<dict-select clearable code="USER_PERSON_TYPE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择人员类型"
|
||||
v-model="pageForm.personTypes"></dict-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="编制类别：">
|
||||
<dict-select clearable code="USER_PREPARED_BY_TYPE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择编制类别"
|
||||
v-model="pageForm.preparedBys"></dict-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="在职状态：">
|
||||
<dict-select clearable code="USER_STATE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择人员状态"
|
||||
v-model="pageForm.userStates"></dict-select>
|
||||
</search-item>
|
||||
<search-item label="是否会员">
|
||||
<el-select clearable placeholder="请选择是否会员" style="width: 100%"
|
||||
v-model="pageForm.isMember">
|
||||
<el-option label="全部" :value="null"></el-option>
|
||||
<el-option label="是" :value="true"></el-option>
|
||||
<el-option label="否" :value="false"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table :data="tableData"
|
||||
:size="tableSize"
|
||||
@sort-change="pageOrder"
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
v-loading="tableLoading"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
:index="indexMethod"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
`,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
projectId: null,
|
||||
pageForm: {
|
||||
userName: null,
|
||||
loginName: null,
|
||||
sex: null,
|
||||
birthday: null,
|
||||
birthMonths: [],
|
||||
unionId: null,
|
||||
unitIds: [],
|
||||
personTypes: [],
|
||||
preparedBys: [],
|
||||
userStates: [],
|
||||
isMember: null
|
||||
},
|
||||
sexOptions: ["男", "女"],
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
tableColumns: [
|
||||
{ prop: "loginname", label: "工号" },
|
||||
{ prop: "username", label: "姓名" },
|
||||
{ prop: "sex", label: "性别", sortable: true, checked: 0 },
|
||||
{ prop: "birthday", label: "出生日期", sortable: true, checked: 0 },
|
||||
{ prop: "personType", label: "人员类型", sortable: true },
|
||||
{ prop: "preparedBy", label: "编制类别", sortable: true },
|
||||
{ prop: "userState", label: "在职状态", sortable: true },
|
||||
{ prop: "unionName", label: "所属工会", sortable: true },
|
||||
{ prop: "unitName", label: "所属单位", sortable: true }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onOpen(id) {
|
||||
this.visible = true
|
||||
this.resetPageForm()
|
||||
this.pageForm.projectId = id
|
||||
this.unionOptions = await this.$businessTool.listUnion()
|
||||
this.unitOptions = await this.$businessTool.listUnit()
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
resetPageForm() {
|
||||
this.$set(this.pageForm, "userName", null)
|
||||
this.$set(this.pageForm, "loginName", null)
|
||||
this.$set(this.pageForm, "sex", null)
|
||||
this.$set(this.pageForm, "birthday", null)
|
||||
this.$set(this.pageForm, "birthMonths", [])
|
||||
this.$set(this.pageForm, "unionId", null)
|
||||
this.$set(this.pageForm, "unitId", null)
|
||||
this.$set(this.pageForm, "personTypes", [])
|
||||
this.$set(this.pageForm, "preparedBys", [])
|
||||
this.$set(this.pageForm, "userStates", [])
|
||||
this.$set(this.pageForm, "isMember", null)
|
||||
},
|
||||
|
||||
async unionIdChange(val) {
|
||||
if (val) {
|
||||
this.unitOptions = await this.$businessTool.listUnit(val)
|
||||
} else {
|
||||
this.pageForm.unitIds = []
|
||||
}
|
||||
},
|
||||
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios
|
||||
.post("/platform/welfare/list/mange/notWelfareUserPageData", {
|
||||
pageForm: JSON.stringify(this.pageForm)
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
onSubmit() {
|
||||
this.$confirm("当前筛选出" + this.pageForm.totalCount + "条数据,您确认添加到福利名单吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: "数据保存中，请稍后...",
|
||||
spinner: "el-icon-loading"
|
||||
})
|
||||
const { code, data, msg } = await this.$axios.post("/platform/welfare/list/mange/addWelfareUser", {
|
||||
pageForm: JSON.stringify(this.pageForm),
|
||||
projectId: this.projectId
|
||||
})
|
||||
loading.close()
|
||||
if (code === 0) {
|
||||
this.$message.success(msg)
|
||||
this.visible = false
|
||||
this.$emit("refresh")
|
||||
} else {
|
||||
this.$message.error(msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
let ADD_WELFARE_LIST_BY_SELECT = {
|
||||
template: `
|
||||
<div >
|
||||
<el-drawer :visible.sync="welfareListUserDrawer" direction="rtl" size="70%" title="">
|
||||
<div style="margin: 10px">
|
||||
<el-timeline>
|
||||
<el-timeline-item placement="top" timestamp="">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入内容"
|
||||
style="width: 300px" v-model="pageForm.searchKeyword">
|
||||
<el-select slot="prepend" style="width: 80px;" v-model="pageForm.searchName">
|
||||
<el-option label="姓名" value="username"></el-option>
|
||||
<el-option label="工号" value="loginname"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary"></el-button>
|
||||
</el-timeline-item>
|
||||
|
||||
<el-timeline-item placement="top" timestamp="">
|
||||
<el-table :data="tableData" :size="tableSize"
|
||||
@sort-change="pageOrder" class="vi-table"
|
||||
ref="table" row-key="id" style="width: 100%"
|
||||
v-loading="tableLoading" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
|
||||
<el-table-column :index="indexMethod" align="center" header-align="center"
|
||||
label="序号" type="index"
|
||||
width="80px"></el-table-column>
|
||||
<el-table-column label="工号" prop="loginname" sortable width="150px"></el-table-column>
|
||||
<el-table-column label="姓名" prop="username" sortable width="150px"></el-table-column>
|
||||
<el-table-column label="在职状态" prop="userState" sortable width="150px"></el-table-column>
|
||||
<el-table-column label="人事编制" prop="personType" sortable width="150px"></el-table-column>
|
||||
<el-table-column label="所在单位" prop="unitName" show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column label="所在工会" prop="unionName" sortable></el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<div style="display: flex;justify-content: flex-end">
|
||||
<el-button type="primary" @click="welfareListUserDrawer=false">关闭</el-button>
|
||||
<el-button type="primary" @click="doWelfareListUser">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
`,
|
||||
store,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
searchName: "username"
|
||||
},
|
||||
selectUserIds: [],
|
||||
welfareListUserDrawer: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.selectUserIds = val.map(v => v.id)
|
||||
},
|
||||
pageData() {
|
||||
this.$axios.post("/platform/welfare/list/mange/selectNotWelfareList", this.pageForm).then((res) => {
|
||||
this.tableLoading = false
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
})
|
||||
},
|
||||
selectNotWelfareList(id) {
|
||||
this.pageForm.id = id
|
||||
this.pageForm.searchKeyword = ""
|
||||
this.pageData()
|
||||
},
|
||||
async doWelfareListUser() {
|
||||
const confirm = await this.$confirm("确定要将当前选择的人加入到当前福利名单中吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
if (confirm === "confirm") {
|
||||
this.$axios.post("/platform/welfare/list/mange/doWelfareListUser", {
|
||||
ids: JSON.stringify(this.selectUserIds),
|
||||
id: this.pageForm.id
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success(res.msg)
|
||||
this.pageData()
|
||||
this.$emit("search")
|
||||
this.$refs.table.clearSelection()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
<!--#include("/platform/zhgh/welfare/addressManage/addressDialog.js"){}#-->
|
||||
let EDIT_WELFARE_DIALOG = {
|
||||
template: `
|
||||
<div>
|
||||
<el-dialog :visible.sync="exportWelfareListDialog" title="修改福利" width="50%">
|
||||
<el-form :model="editWelfareData" label-width="120px" ref="editWelfareForm">
|
||||
<el-form-item label="姓名">
|
||||
<el-input :value="editWelfareData.username" readonly></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工号">
|
||||
<el-input :value="editWelfareData.loginname" readonly></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="福利"
|
||||
prop="optionIds">
|
||||
<el-row :gutter="10" :key="item.id" style="margin: 10px"
|
||||
v-for="(item,oidx) in welfareOptions">
|
||||
<el-col :span="12">
|
||||
<el-tag style="height:40px;line-height: 40px;width: 100%;">
|
||||
<span style="display: flex; justify-content: center;">{{item.optionName}}</span>
|
||||
</el-tag>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-input-number @change="numChange(item.selectNum,item,oidx)" :min="0"
|
||||
v-model="item.selectNum"></el-input-number>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择地址" style="color: red" v-if="ifReceiveAddress">
|
||||
<div style="display: flex; justify-content: space-between;column-gap: 20px">
|
||||
<div style="width: calc(100% - 126px)">
|
||||
<el-select @change="addressChange"
|
||||
filterable placeholder="请选择收货地址"
|
||||
style="width: 100%"
|
||||
v-model="editWelfareData.addressId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name+' '+item.defaultName"
|
||||
:value="item.id"
|
||||
v-for="item in addressOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-button
|
||||
@click="openAddress"
|
||||
type="primary">添加收货地址
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :rules="[{required:true,message:'选择收货地址后自动读取',trigger:['change','blur']}]"
|
||||
|
||||
label="收货地址"
|
||||
prop="receiveAddress"
|
||||
v-if="ifReceiveAddress">
|
||||
<el-input :rows="2" disabled placeholder="选择收货地址后自动读取" type="textarea"
|
||||
v-model="editWelfareData.receiveAddress"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row justify="end" type="flex">
|
||||
<el-button @click="exportWelfareListDialog=false">取消</el-button>
|
||||
<el-button @click="doEditWelfareData" type="primary">确定</el-button>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
|
||||
<address-dialog ref="addressDialog" @select_user_address="selectUserAddress"></address-dialog>
|
||||
</div>
|
||||
`,
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
addressOptions: [],
|
||||
userSelection: [],
|
||||
editWelfareData: {},
|
||||
ifReceiveAddress: false,
|
||||
exportWelfareListDialog: false,
|
||||
projectInfo: {},
|
||||
welfareOptions: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
welfare_options: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
project_type: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
"address-dialog": ADDRESS_DIALOG,
|
||||
},
|
||||
methods: {
|
||||
//数量更改
|
||||
numChange(value, option, optionIndex) {
|
||||
this.$nextTick(() => {
|
||||
// 查找+1按钮
|
||||
const plusButton = document.querySelector('.el-input-number__increase');
|
||||
// 添加点击事件监听器
|
||||
plusButton.addEventListener('click', this.handlePlusButtonClick(value, option, optionIndex));
|
||||
})
|
||||
},
|
||||
handlePlusButtonClick(value, option, optionIndex) {
|
||||
const {
|
||||
isCheckBox,
|
||||
multiSelectNum,
|
||||
singleOptionSupportMultipleSelection
|
||||
} = this.projectInfo
|
||||
if (isCheckBox === 'checkBox') {
|
||||
//判断是否支持单个多选
|
||||
if (!singleOptionSupportMultipleSelection && value > 1) {
|
||||
this.$set(this.welfareOptions[optionIndex], 'selectNum', 1)
|
||||
this.$message('此套餐最多只能选择1份');
|
||||
return;
|
||||
}
|
||||
}
|
||||
//获取用户当前选择的数量
|
||||
const selectNums = this.welfareOptions.map(v => v.selectNum)
|
||||
const sum = selectNums.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||||
if (sum > multiSelectNum) {
|
||||
this.$set(this.welfareOptions[optionIndex], 'selectNum', 0)
|
||||
this.$message('此次福利最多只能选择' + multiSelectNum + '份');
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
doEditWelfareData() {
|
||||
this.$refs['editWelfareForm'].validate(async valid => {
|
||||
if (valid) {
|
||||
//获取用户当前选择的数量
|
||||
const selectNums = this.welfareOptions.map(v => v.selectNum)
|
||||
const sum = selectNums.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
||||
if (sum === 0) {
|
||||
this.notifyWarning("请先选择份数")
|
||||
return
|
||||
}
|
||||
const resp = await this.$axios.post("/platform/welfare/list/mange/doEditWelfareData", {
|
||||
editWelfareData: JSON.stringify(this.editWelfareData),
|
||||
welfareOptions: JSON.stringify(this.welfareOptions)
|
||||
})
|
||||
this.exportWelfareListDialog = false
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
this.$emit("doSearch")
|
||||
} else {
|
||||
this.notifyWarning(resp.msg)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserSelection(id) {
|
||||
this.$axios.post('/platform/welfare/mine/getUserSelection', {
|
||||
projectId: this.editWelfareData.projectId,
|
||||
userId: id
|
||||
}).then(resp => {
|
||||
this.userSelection = resp.data
|
||||
this.echoUserSelection()
|
||||
})
|
||||
},
|
||||
echoUserSelection(){
|
||||
this.welfareOptions.map(v => {
|
||||
const selection = this.userSelection.find(u => u.selectOptionId === v.id)
|
||||
if (selection && selection.selectNum) {
|
||||
v.selectNum = selection.selectNum
|
||||
} else {
|
||||
v.selectNum = 0
|
||||
}
|
||||
})
|
||||
},
|
||||
openEditWelfare(row, projectSelectOptions) {
|
||||
this.welfareOptions = this.welfare_options
|
||||
this.exportWelfareListDialog = true
|
||||
this.editWelfareData = {
|
||||
mobile: "",
|
||||
username: row.username,
|
||||
loginname: row.loginname,
|
||||
receiveAddress: row.receiveAddress,
|
||||
projectId: row.projectId,
|
||||
userId: row.id
|
||||
}
|
||||
this.projectInfo = projectSelectOptions.find(p => p.id === row.projectId)
|
||||
this.getUserSelection(row.id)
|
||||
this.selectUserAddress()
|
||||
this.optionIdsChange()
|
||||
},
|
||||
selectUserAddress() {
|
||||
this.$axios.post('/platform/welfare/addressManage/selectUserAddress', {userId: this.editWelfareData.userId}).then(resp => {
|
||||
resp.data.map(r => {
|
||||
let defaultName = r.isDefault ? "默认地址" : ""
|
||||
r.defaultName = defaultName
|
||||
r.name = "收货地址：" + r.province + r.city + r.county + r.addressDetail + "，收件人：" + r.userName + "，联系方式：" + r.tel
|
||||
})
|
||||
this.addressOptions = resp.data
|
||||
})
|
||||
},
|
||||
addressChange(val) {
|
||||
const address = this.addressOptions.find(a => a.id === val)
|
||||
if (address) {
|
||||
this.$set(this.editWelfareData, "receiveAddress", address.name)
|
||||
}
|
||||
},
|
||||
optionIdsChange() {
|
||||
if (this.project_type === 3) {
|
||||
this.ifReceiveAddress = true
|
||||
} else {
|
||||
this.editWelfareData.receiveAddress = null
|
||||
this.ifReceiveAddress = false
|
||||
}
|
||||
|
||||
},
|
||||
openAddress() {
|
||||
|
||||
this.$refs.addressDialog.dialogVisible = true
|
||||
this.$refs.addressDialog.formData = {userId: this.editWelfareData.userId}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
let IMPORT_COURIER_NUMBER_DIALOG = {
|
||||
template: `
|
||||
<div>
|
||||
<el-dialog :visible.sync="importExpressExcelDialog" title="导入快递单号" width="65%">
|
||||
<el-timeline>
|
||||
<el-timeline-item placement="top"
|
||||
timestamp="下载选择数据（提供给各供货商），如已下载可直接进行下一步选择导入。">
|
||||
<el-card shadow="never">
|
||||
<el-button @click="exportSelectData" icon="el-icon-download"
|
||||
size="medium"
|
||||
type="">下载选择数据
|
||||
</el-button>
|
||||
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item placement="top" timestamp="选择套餐供货商">
|
||||
<el-select style="width: 440px" v-model="importWelfareOptionId">
|
||||
<el-option :label="item.optionName" :value="item.id" :key="item.id"
|
||||
v-for="item in welfareOptions"></el-option>
|
||||
</el-select>
|
||||
</el-timeline-item>
|
||||
<el-timeline-item placement="top" timestamp="导入供货商发货快递单号">
|
||||
<el-upload
|
||||
:action="'/platform/welfare/list/mange/importCourierNumber'"
|
||||
:auto-upload="false"
|
||||
:data="{
|
||||
projectId:projectId,
|
||||
optionId:importWelfareOptionId
|
||||
}"
|
||||
:file-list="importExpressExcelFile"
|
||||
:limit="1"
|
||||
:on-success="expressExcelHandleSuccess"
|
||||
drag
|
||||
ref="expressExcelUpload"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">只能上传xls,xlsx文件</div>
|
||||
</el-upload>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<el-row justify="end" type="flex">
|
||||
<el-button @click="importExpressExcelDialog=false">取消</el-button>
|
||||
<el-button @click="doImportCourierNumber" type="primary">导入</el-button>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
importExpressExcelDialog: false,
|
||||
welfareOptions: [],
|
||||
importWelfareOptionId: "",
|
||||
projectId: "",
|
||||
importExpressExcelFile: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportSelectData() {
|
||||
this.$downLoad("/platform/welfare/list/mange/exportSelectData", {
|
||||
projectId: this.projectId
|
||||
})
|
||||
},
|
||||
expressExcelHandleSuccess(response, file, fileList) {
|
||||
if (response.code !== 0) {
|
||||
this.notifyWarning(response.msg)
|
||||
this.$refs.expressExcelUpload.clearFiles()
|
||||
} else {
|
||||
this.$message.success(response.msg)
|
||||
this.$refs.expressExcelUpload.clearFiles()
|
||||
this.importExpressExcelDialog = false
|
||||
this.doSearch()
|
||||
}
|
||||
},
|
||||
openImportExpressExcel(projectId, welfareOptions) {
|
||||
this.projectId = projectId
|
||||
this.welfareOptions = welfareOptions
|
||||
this.importExpressExcelDialog = true
|
||||
if (this.$refs.expressExcelUpload) {
|
||||
this.$refs.expressExcelUpload.clearFiles()
|
||||
}
|
||||
},
|
||||
doImportCourierNumber() {
|
||||
if (this.importWelfareOptionId == null || this.importWelfareOptionId === "") {
|
||||
this.$message.warning("请选择套餐供货商")
|
||||
return
|
||||
}
|
||||
if (this.$refs.expressExcelUpload.uploadFiles.length === 0) {
|
||||
this.$message.warning("请选择快递单号文件")
|
||||
return
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append("file", this.$refs.expressExcelUpload.uploadFiles[0].raw, this.$refs.expressExcelUpload.uploadFiles[0].name)
|
||||
formData.append("projectId", this.projectId)
|
||||
formData.append("optionId", this.importWelfareOptionId)
|
||||
this.$axios
|
||||
.post("/platform/welfare/list/mange/importCourierNumber", formData, {})
|
||||
.then((response) => {
|
||||
if (response.code === 0) {
|
||||
this.$message.success("导入成功")
|
||||
this.importExpressExcelDialog = false
|
||||
} else {
|
||||
this.$message.warning(response.msg)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message.warning("导入失败，请联系管理员")
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<search @search="doSearch">
|
||||
<search-item label="年度">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
placeholder="请选择年度"
|
||||
style="width: 100%"
|
||||
type="year"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
@change="getWelfareList"
|
||||
></el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="福利项目">
|
||||
<el-select :clearable="false" filterable placeholder="请选择福利项目" style="width: 100%" v-model="pageForm.projectId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in projectSelectOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="姓名">
|
||||
<el-input
|
||||
@keyup.enter.native="doSearch"
|
||||
clearable
|
||||
placeholder="请输入姓名"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.userName"
|
||||
></el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="工号">
|
||||
<el-input
|
||||
@keyup.enter.native="doSearch"
|
||||
clearable
|
||||
placeholder="请输入工号"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.loginName"
|
||||
></el-input>
|
||||
</search-item>
|
||||
|
||||
<search-item label="性别">
|
||||
<el-select clearable placeholder="请选择性别" style="width: 100%" v-model="pageForm.sex">
|
||||
<el-option :key="sex" :label="sex" :value="sex" v-for="sex in sexOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="出生日期">
|
||||
<el-date-picker
|
||||
v-model="pageForm.birthday"
|
||||
type="date"
|
||||
placeholder="选择出生日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%"
|
||||
></el-date-picker>
|
||||
</search-item>
|
||||
|
||||
<search-item label="出生月份">
|
||||
<el-select v-model="pageForm.birthMonths" multiple collapse-tags placeholder="请选择出生月份" style="width: 100%">
|
||||
<el-option v-for="month in 12" :key="month" :label="month + '月'" :value="month"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属工会">
|
||||
<el-select clearable filterable placeholder="请选择所属工会" style="width: 100%" v-model="pageForm.unionId">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unionOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="所属单位">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择所属单位"
|
||||
style="width: 100%"
|
||||
v-model="pageForm.unitIds"
|
||||
>
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in unitOptions"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="人员类型：">
|
||||
<dict-select
|
||||
clearable
|
||||
code="USER_PERSON_TYPE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择人员类型"
|
||||
v-model="pageForm.personTypes"
|
||||
></dict-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="编制类别：">
|
||||
<dict-select
|
||||
clearable
|
||||
code="USER_PREPARED_BY_TYPE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择编制类别"
|
||||
v-model="pageForm.preparedBys"
|
||||
></dict-select>
|
||||
</search-item>
|
||||
|
||||
<search-item label="在职状态：">
|
||||
<dict-select
|
||||
clearable
|
||||
code="USER_STATE"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择人员状态"
|
||||
v-model="pageForm.userStates"
|
||||
></dict-select>
|
||||
</search-item>
|
||||
|
||||
<!-- <search-item label="所选福利：">-->
|
||||
<!-- <el-select clearable placeholder="请选择所选福利" style="width: 100%" v-model="pageForm.optionId">-->
|
||||
<!-- <el-option :key="item.id" :label="item.optionName" :value="item.id" v-for="item in pageFormProject"></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </search-item>-->
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="福利名单">
|
||||
<el-button :disabled="!pageForm.projectId" @click="openExport" icon="el-icon-download" size="small" type="primary">
|
||||
导出名单
|
||||
</el-button>
|
||||
<el-button :disabled="!pageForm.projectId" @click="openImport" icon="el-icon-document-add" size="small" type="primary">
|
||||
导入名单
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="!pageForm.projectId"
|
||||
@click="$refs.addUserRef.onOpen(pageForm.projectId)"
|
||||
icon="el-icon-document-add"
|
||||
size="small"
|
||||
type="primary"
|
||||
>
|
||||
添加人员
|
||||
</el-button>
|
||||
</table-tool>
|
||||
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:size="tableSize"
|
||||
@sort-change="pageOrder"
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
style="width: 100%"
|
||||
v-loading="tableLoading"
|
||||
>
|
||||
<el-table-column :index="indexMethod" label="序号" type="index" width="80px"></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:key="column.prop"
|
||||
:label="column.label"
|
||||
:prop="column.prop"
|
||||
:sortable="column.sortable"
|
||||
:width="column.width"
|
||||
align="center"
|
||||
header-align="center"
|
||||
show-overflow-tooltip
|
||||
v-for="column in tableColumns"
|
||||
>
|
||||
<template scope="{row}" v-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'">{{row.gist_list?row.gist_list:'暂无'}}</template>
|
||||
<template scope="{row}" v-else-if="column.prop=='userSign'">
|
||||
<el-image :src="row.userSign" fit="cover" style="height: 60px" v-if="row.userSign"></el-image>
|
||||
<el-tag type="warning" v-else>暂无</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" fixed="right" header-align="center" label="操作" width="200px">
|
||||
<template scope="{row}">
|
||||
<el-button @click="$refs.updateRemarkRef.onOpen(row)" size="mini" type="primary">备注</el-button>
|
||||
<el-button @click="doDelete(row)" size="mini" type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</template>
|
||||
</guava>
|
||||
|
||||
<el-dialog :close-on-click-modal="false" :visible.sync="importDialog" title="福利名单导入" width="50%">
|
||||
<file-import
|
||||
ref="viewImport"
|
||||
temp_url="/platform/welfare/list/mange/downloadImport"
|
||||
post_url="/platform/welfare/list/mange/doImport"
|
||||
is_show_radio
|
||||
@flush="successImport"
|
||||
:business_id="pageForm.projectId"
|
||||
></file-import>
|
||||
</el-dialog>
|
||||
|
||||
<add_welfare_list_by_select ref="addWelfareListUser" @search="doSearch"></add_welfare_list_by_select>
|
||||
|
||||
<!--添加福利人员-->
|
||||
<add-user ref="addUserRef" @refresh="doSearch"></add-user>
|
||||
|
||||
<!--人员备注-->
|
||||
<update-remark ref="updateRemarkRef" @refresh="doSearch"></update-remark>
|
||||
|
||||
<!--导入福利名单-->
|
||||
<excel-import
|
||||
ref="excelImportRef"
|
||||
url="/platform/welfare/list/mange/importByExcel"
|
||||
template_url="/platform/welfare/list/mange/downloadTemplate"
|
||||
:visible.sync="showImportDialog"
|
||||
title="导入用户数据"
|
||||
width="700px"
|
||||
:extra_params="{projectId:pageForm.projectId}"
|
||||
></excel-import>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("importCourierNumberDialog.js"){}#-->
|
||||
<!--#include("addWelfareListBySelect.js"){}#-->
|
||||
<!--#include("addUser.js"){}#-->
|
||||
<!--#include("updateRemark.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
mixins: [initTableMixins],
|
||||
computed: {
|
||||
pageFormProject() {
|
||||
if (this.pageForm.projectId) {
|
||||
const projectInfo = this.projectSelectOptions.find((v) => v.id === this.pageForm.projectId)
|
||||
if (projectInfo) {
|
||||
return projectInfo.optionList
|
||||
}
|
||||
return null
|
||||
}
|
||||
return null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
add_welfare_list_by_select: ADD_WELFARE_LIST_BY_SELECT,
|
||||
"file-import": httpVueLoader("/components/plugins/sysImport/index.vue?v=" + new Date().getTime()),
|
||||
"add-user": addUser,
|
||||
"update-remark": updateRemark
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
searchName: "username",
|
||||
year: new Date().getFullYear().toString()
|
||||
},
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
sexOptions: ["男", "女"],
|
||||
projectSelectOptions: [],
|
||||
tableColumns: [
|
||||
{ prop: "loginname", label: "工号" },
|
||||
{ prop: "username", label: "姓名" },
|
||||
{ prop: "sex", label: "性别", sortable: true, checked: 0 },
|
||||
{ prop: "birthday", label: "出生日期", sortable: true, checked: 0 },
|
||||
{ prop: "personType", label: "人员类型", sortable: true },
|
||||
{ prop: "preparedBy", label: "编制类别", sortable: true },
|
||||
{ prop: "userState", label: "在职状态", sortable: true },
|
||||
{ prop: "welfareUnionName", label: "所属工会", sortable: true },
|
||||
{ prop: "welfareUnitName", label: "所属单位", sortable: true },
|
||||
{ prop: "remark", label: "备注", sortable: true }
|
||||
],
|
||||
|
||||
importData: { fileList: [], isfg: 1 },
|
||||
importLoading: false,
|
||||
importDialog: false,
|
||||
|
||||
welfareListUserDrawer: false,
|
||||
|
||||
showImportDialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 导出名单
|
||||
openExport() {
|
||||
this.$downLoad("/platform/welfare/list/mange/exportXlsx", {
|
||||
pageForm: JSON.stringify(this.pageForm)
|
||||
})
|
||||
},
|
||||
|
||||
successImport() {
|
||||
this.doSearch()
|
||||
this.importDialog = false
|
||||
},
|
||||
|
||||
// 打开导入名单
|
||||
openImport() {
|
||||
this.importData = {
|
||||
isfg: 1,
|
||||
fileList: []
|
||||
}
|
||||
this.showImportDialog = true
|
||||
},
|
||||
doDelete(row) {
|
||||
this.$confirm("您确定要删除吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
const resp = await this.$axios.post("/platform/welfare/list/mange/delete", { id: row.id })
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg)
|
||||
this.doSearch()
|
||||
} else {
|
||||
this.$message.error(resp.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
getWelfareList() {
|
||||
this.$axios.post("/platform/welfare/project/mange/getWelfareList", { year: this.pageForm.year }).then((res) => {
|
||||
this.projectSelectOptions = res.data
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "projectId", res.data[0].id)
|
||||
} else {
|
||||
this.$set(this.pageForm, "projectId", null)
|
||||
}
|
||||
this.doSearch()
|
||||
})
|
||||
},
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios
|
||||
.post("/platform/welfare/list/mange/pageData", {
|
||||
pageForm: JSON.stringify(this.pageForm)
|
||||
})
|
||||
.then((res) => {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
})
|
||||
.finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.getWelfareList()
|
||||
this.unionOptions = await this.$businessTool.listUnion()
|
||||
this.unitOptions = await this.$businessTool.listUnit()
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,59 @@
|
||||
const updateRemark = {
|
||||
template: /*language=HTML*/ `
|
||||
<el-dialog title="修改备注" :visible.sync="visible">
|
||||
<el-form :model="formData" label-width="80px">
|
||||
<el-form-item label="姓名">
|
||||
<el-input :value="formData.username" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="工号">
|
||||
<el-input :value="formData.loginname" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位">
|
||||
<el-input :value="formData.welfareUnitName" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分工会">
|
||||
<el-input :value="formData.welfareUnionName" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" placeholder="请填写备注" :maxlength="100" type="textarea" maxlength="100" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(row) {
|
||||
this.visible = true
|
||||
this.formData = { ...row }
|
||||
},
|
||||
onSubmit() {
|
||||
this.$confirm("您确定修改吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
this.$axios
|
||||
.post("/platform/welfare/list/mange/updateRemark", {
|
||||
id: this.formData.id,
|
||||
remark: this.formData.remark
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success(res.msg)
|
||||
this.$emit("refresh")
|
||||
this.visible = false
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user