first commit
This commit is contained in:
@@ -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%);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user