386 lines
15 KiB
Vue
386 lines
15 KiB
Vue
<template>
|
|
<a-form layout="vertical" ref="formRef" @finish="onFinish" @finishFailed="onFinishFailed" :model="activity"
|
|
:label-col="labelCol" :wrapper-col="wrapperCol">
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="activeKey_content" :tab="activity_content">
|
|
<a-form-item :label="activity_type" name="type">
|
|
<a-radio-group v-model:value="activity.type">
|
|
<a-radio-button value="1">{{ activity_cycle }}</a-radio-button>
|
|
<a-radio-button value="2">{{ activity_custom }}</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item v-if="activity.type === '2'" v-model:label="RangePicker.showTime" name="range_time"
|
|
v-bind="rangeConfig">
|
|
<a-range-picker v-model:value="activity.range_time" format="YYYY-MM-DD HH:mm:ss" show-time
|
|
value-format="YYYY-MM-DD HH:mm:ss"/>
|
|
</a-form-item>
|
|
<a-form-item v-if="activity.type === '1'" :label="cycle_type"
|
|
:rules="[{ required: true, message: cycle_type_required }]"
|
|
name="cycle_type">
|
|
<a-select v-model:value="activity.cycle_type" :placeholder="placeholder_cycle_type"
|
|
style="width: 200px"
|
|
@change="handleProvinceChange">
|
|
<a-select-option v-for="(cycle_type, index) in cycleTypes" :key="cycle_type" :value="cycle_type">
|
|
{{ cycle_type }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item v-if="activity.type === '1'" :label="cycle_data"
|
|
:rules="[{ required: true, message: cycle_data_required }]"
|
|
name="cycle_data">
|
|
<a-select v-model:value="activity.cycle_data" :placeholder="placeholder_cycle_data"
|
|
style="width: 200px">
|
|
<a-select-option v-for="(cycle_data, index) in cycleDatas" :key="cycle_data" :value="index">
|
|
{{ cycle_data }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item hidden name="id">
|
|
<a-input v-model:value="activity.id" name="id" type="hidden"/>
|
|
</a-form-item>
|
|
<a-tabs v-model:activeKey="activeKey_lang_content">
|
|
<a-tab-pane v-for="(lang, lang_index) in langs" :key="lang_index" :tab="lang.value" forceRender="true">
|
|
<a-form-item :label="activity_picture" :name="['activity_content', lang.key, 'picture']"
|
|
:rules="[{ required: true, message: picture_required }]">
|
|
<a-upload v-model:file-list="activity.activity_content[lang.key].picture"
|
|
:before-upload="beforeUpload" :headers="headers"
|
|
:max-count="1" action="/ex-admin/addons-webman-controller-IndexController/activityUpload"
|
|
list-type="picture-card">
|
|
<div>
|
|
<PlusOutlined/>
|
|
<div style="margin-top: 8px">Upload</div>
|
|
</div>
|
|
</a-upload>
|
|
</a-form-item>
|
|
<a-form-item :name="['activity_content', lang.key, 'id']" hidden>
|
|
<a-input v-model:value="activity.activity_content[lang.key].id" type="hidden"/>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="activity_name" :name="['activity_content', lang.key, 'name']"
|
|
:rules="[{ required: true, message: name_required }]">
|
|
<a-input v-model:value="activity.activity_content[lang.key].name" :maxlength="100"
|
|
:rules="[{ required: true, message: activity_name_required }]"
|
|
show-count/>
|
|
</a-form-item>
|
|
<a-form-item :label="recharge_setting" :rules="[{ required: true, message: recharge_setting_required }]"
|
|
name="recharge_id">
|
|
<a-select v-model:value="activity.recharge_id" allowClear="true">
|
|
<a-select-option v-for="option in options" :key="option.id" :value="option.id">
|
|
{{ option.title }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
<a-form-item>
|
|
<a-button type="primary" html-type="submit">{{ Submit }}</a-button>
|
|
<a-button style="margin-left: 10px" @click="resetForm">{{ reset }}</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
<script>
|
|
const cycleType = ['Week', 'Month'];
|
|
const cycleData = {
|
|
Week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
|
Month: ['1', '2', '3', '4', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
|
};
|
|
|
|
const messages = {
|
|
//简体中文
|
|
'zh-CN': {
|
|
rangTime: '请选择开放时间',
|
|
showTime: '开放时间',
|
|
submit: '提交',
|
|
reset: '重置',
|
|
activity_content: '活动内容',
|
|
activity_picture: '活动图片',
|
|
activity_type: '活动时间模式',
|
|
activity_cycle: '周期模式',
|
|
activity_custom: '自定义模式',
|
|
activity_cycle_data: '周期数据',
|
|
activity_picture_required: '请上传活动图片',
|
|
activity_name: '活动名称',
|
|
activity_name_required: '请填写活动名称',
|
|
activity_link: '活动链接',
|
|
upload_type: '支持png, jpeg, png图片格式',
|
|
picture_required: '请上传活动图片',
|
|
name_required: '请填写活动名称',
|
|
recharge_setting: '充值配置',
|
|
recharge_setting_required: '请选择充值配置',
|
|
placeholder_cycle_type: '请选择周期模式',
|
|
placeholder_cycle_data: '请选择周期配置数据',
|
|
cycle_type_help: '周期模式下,周期类型以及周期配置为必选项',
|
|
cycle_type: '周期类型',
|
|
cycle_data: '周期配置',
|
|
cycle_type_required: '请选择周期类型',
|
|
cycle_data_required: '请选择周期配置',
|
|
},
|
|
//英文
|
|
en: {
|
|
rangTime: '请选择开放时间',
|
|
showTime: '开放时间',
|
|
submit: '提交',
|
|
reset: '重置',
|
|
activity_content: '活动内容',
|
|
activity_picture: '活动图片',
|
|
activity_type: '活动时间模式',
|
|
activity_cycle: '周期模式',
|
|
activity_custom: '自定义模式',
|
|
activity_cycle_data: '周期数据',
|
|
activity_picture_required: '请上传活动图片',
|
|
activity_name: '活动名称',
|
|
activity_name_required: '请填写活动名称',
|
|
activity_link: '活动链接',
|
|
upload_type: '支持png, jpeg, png图片格式',
|
|
upload_size: '图片最大不得超过5M',
|
|
picture_required: '请上传活动图片',
|
|
name_required: '请填写活动名称',
|
|
recharge_setting: '充值配置',
|
|
recharge_setting_required: '请选择充值配置',
|
|
placeholder_cycle_type: '请选择周期模式',
|
|
placeholder_cycle_data: '请选择周期配置数据',
|
|
cycle_type_help: '周期模式下,模式类型以及相关配置为必选项',
|
|
cycle_type: '周期类型',
|
|
cycle_data: '周期配置',
|
|
cycle_type_required: '请选择周期类型',
|
|
cycle_data_required: '请选择周期配置',
|
|
},
|
|
'Ma-my': {
|
|
rangTime: '请选择开放时间',
|
|
showTime: '开放时间',
|
|
submit: '提交',
|
|
reset: '重置',
|
|
activity_content: '活动内容',
|
|
activity_picture: '活动图片',
|
|
activity_type: '活动时间模式',
|
|
activity_cycle: '周期模式',
|
|
activity_custom: '自定义模式',
|
|
activity_cycle_data: '周期数据',
|
|
activity_picture_required: '请上传活动图片',
|
|
activity_name: '活动名称',
|
|
activity_name_required: '请填写活动名称',
|
|
activity_link: '活动链接',
|
|
upload_type: '支持png, jpeg, png图片格式',
|
|
upload_size: '图片最大不得超过5M',
|
|
picture_required: '请上传活动图片',
|
|
name_required: '请填写活动名称',
|
|
recharge_setting: '充值配置',
|
|
recharge_setting_required: '请选择充值配置',
|
|
placeholder_cycle_type: '请选择周期模式',
|
|
placeholder_cycle_data: '请选择周期配置数据',
|
|
cycle_type_help: '周期模式下,模式类型以及相关配置为必选项',
|
|
cycle_type: '周期类型',
|
|
cycle_data: '周期配置',
|
|
cycle_type_required: '请选择周期类型',
|
|
cycle_data_required: '请选择周期配置',
|
|
},
|
|
// 繁体中文
|
|
'cam_dia': {
|
|
rangTime: '请选择开放时间',
|
|
showTime: '开放时间',
|
|
submit: '提交',
|
|
reset: '重置',
|
|
activity_content: '活动内容',
|
|
activity_picture: '活动图片',
|
|
activity_type: '活动时间模式',
|
|
activity_cycle: '周期模式',
|
|
activity_custom: '自定义模式',
|
|
activity_cycle_data: '周期数据',
|
|
activity_picture_required: '请上传活动图片',
|
|
activity_name: '活动名称',
|
|
activity_name_required: '请填写活动名称',
|
|
activity_link: '活动链接',
|
|
upload_type: '支持png, jpeg, png图片格式',
|
|
upload_size: '图片最大不得超过5M',
|
|
picture_required: '请上传活动图片',
|
|
name_required: '请填写活动名称',
|
|
recharge_setting: '充值配置',
|
|
recharge_setting_required: '请选择充值配置',
|
|
placeholder_cycle_type: '请选择周期模式',
|
|
placeholder_cycle_data: '请选择周期配置数据',
|
|
cycle_type_help: '周期模式下,模式类型以及相关配置为必选项',
|
|
cycle_type: '周期类型',
|
|
cycle_data: '周期配置',
|
|
cycle_type_required: '请选择周期类型',
|
|
cycle_data_required: '请选择周期配置',
|
|
}
|
|
}
|
|
export default {
|
|
name: "socket.vue",
|
|
//可传参数
|
|
props: {
|
|
activityModel: {},
|
|
rechargeSetting: [],
|
|
langs: {},
|
|
showTime: String,
|
|
langLocale: String,
|
|
},
|
|
data() {
|
|
return {
|
|
cycleTypes: cycleType,
|
|
cycleDatas: cycleData[cycleType[1]],
|
|
activity: this.activityModel,
|
|
options: this.rechargeSetting,
|
|
activeKey: 'activeKey_content',
|
|
newTabIndex: '',
|
|
activeKey_lang_content: 0,
|
|
activeKey_lang_phase: 0,
|
|
rangeConfig: {
|
|
rules: [{
|
|
type: 'array',
|
|
required: true,
|
|
message: messages[this.langLocale]['rangTime'],
|
|
}],
|
|
},
|
|
RangePicker: Vue.reactive({
|
|
showTime: messages[this.langLocale]['showTime']
|
|
}),
|
|
labelCol: {
|
|
style: {
|
|
width: '150px',
|
|
},
|
|
},
|
|
wrapperCol: {
|
|
span: 24,
|
|
},
|
|
headers: {
|
|
authorization: localStorage.getItem("agent_ex-admin-token"),
|
|
},
|
|
Submit: messages[this.langLocale]['submit'],
|
|
reset: messages[this.langLocale]['reset'],
|
|
activity_content: messages[this.langLocale]['activity_content'],
|
|
activity_picture: messages[this.langLocale]['activity_picture'],
|
|
activity_type: messages[this.langLocale]['activity_type'],
|
|
activity_custom: messages[this.langLocale]['activity_custom'],
|
|
activity_cycle: messages[this.langLocale]['activity_cycle'],
|
|
activity_cycle_data: messages[this.langLocale]['activity_cycle_data'],
|
|
activity_name: messages[this.langLocale]['activity_name'],
|
|
activity_name_required: messages[this.langLocale]['activity_name_required'],
|
|
activity_link: messages[this.langLocale]['activity_link'],
|
|
activity_notice: messages[this.langLocale]['activity_notice'],
|
|
upload_type: messages[this.langLocale]['upload_type'],
|
|
upload_size: messages[this.langLocale]['upload_size'],
|
|
picture_required: messages[this.langLocale]['picture_required'],
|
|
name_required: messages[this.langLocale]['name_required'],
|
|
recharge_setting: messages[this.langLocale]['recharge_setting'],
|
|
recharge_setting_required: messages[this.langLocale]['recharge_setting_required'],
|
|
placeholder_cycle_type: messages[this.langLocale]['placeholder_cycle_type'],
|
|
placeholder_cycle_data: messages[this.langLocale]['placeholder_cycle_data'],
|
|
cycle_type_help: messages[this.langLocale]['cycle_type_help'],
|
|
cycle_type: messages[this.langLocale]['cycle_type'],
|
|
cycle_data: messages[this.langLocale]['cycle_data'],
|
|
cycle_type_required: messages[this.langLocale]['cycle_type_required'],
|
|
cycle_data_required: messages[this.langLocale]['cycle_data_required'],
|
|
selectedItems: Vue.ref([]),
|
|
};
|
|
},
|
|
//生命周期渲染完执行
|
|
created() {
|
|
this.newTabIndex = Vue.ref(0);
|
|
if (this.activity.id === null || this.activity.id === undefined || this.activity.id === '') {
|
|
this.activity = Vue.reactive({
|
|
id: '',
|
|
type: '2',
|
|
cycle_type: null,
|
|
cycle_data: null,
|
|
range_time: {
|
|
start_time: '',
|
|
end_time: '',
|
|
},
|
|
dateRange: ['', ''],
|
|
activity_content: {
|
|
'zh-CN': {
|
|
name: '',
|
|
lang: 'zh-CN',
|
|
picture: [],
|
|
id: '',
|
|
},
|
|
en: {
|
|
name: '',
|
|
lang: 'en',
|
|
picture: [],
|
|
id: '',
|
|
},
|
|
'Ma-my': {
|
|
name: '',
|
|
lang: 'Ma-my',
|
|
picture: [],
|
|
id: '',
|
|
},
|
|
'cam_dia': {
|
|
name: '',
|
|
lang: 'cam_dia',
|
|
picture: [],
|
|
id: '',
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
if (this.activity.type === '1') {
|
|
this.cycleDatas = cycleData[this.activity.cycle_type];
|
|
} else {
|
|
this.cycleTypes = cycleType;
|
|
this.cycleDatas = cycleData['Week'];
|
|
this.activity.cycle_type = null;
|
|
this.activity.cycle_data = null;
|
|
}
|
|
}
|
|
},
|
|
//定义函数方法
|
|
methods: {
|
|
beforeUpload(file) {
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
|
|
if (!isJpgOrPng) {
|
|
this.$message.error(this.upload_type);
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt2M) {
|
|
this.$message.error(this.upload_size);
|
|
}
|
|
return isJpgOrPng && isLt2M;
|
|
},
|
|
resetForm() {
|
|
this.$refs.formRef.resetFields();
|
|
},
|
|
onFinish(values) {
|
|
this.$request({
|
|
url: '/ex-admin/addons-webman-controller-ActivityController/activityOperate',
|
|
method: 'post',
|
|
data: values,
|
|
header: this.headers
|
|
}).then(res => {
|
|
if (res.code === 200) {
|
|
// location.reload();
|
|
}
|
|
})
|
|
},
|
|
onFinishFailed(errorInfo) {
|
|
let name = errorInfo.errorFields[0]['name'];
|
|
if (name.length > 0) {
|
|
switch (name[0]) {
|
|
case 'range_time':
|
|
this.activeKey = 'activeKey_content';
|
|
break;
|
|
case 'activity_content':
|
|
this.activeKey = 'activeKey_content';
|
|
if (name[1] !== 'undefined' && name[1] != null && name[1] !== '') {
|
|
let ac = 0;
|
|
for (let key in this.activity.activity_content) {
|
|
if (key === name[1]) {
|
|
this.activeKey_lang_content = ac;
|
|
}
|
|
ac++;
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
handleProvinceChange(value) {
|
|
this.cycleDatas = cycleData[value];
|
|
},
|
|
}
|
|
}
|
|
</script> |