You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

592 lines
16 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户协议" name="userAgreement">
<el-form ref="form" :model="userAgreementFrom" label-width="80px">
<el-row>
<el-col :span="20">
<editor
id="editor1"
tableName="editor1"
v-model="userAgreementFrom.userAgreement"
:min-height="580"
/>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="隐私政策" name="privacyAgreement">
<el-form ref="form" :model="privacyAgreementFrom" label-width="80px">
<el-row>
<el-col :span="20">
<editor
id="editor2"
tableName="editor2"
v-model="privacyAgreementFrom.privacyAgreement"
:min-height="580"
/>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="积分规则" name="integralRule">
<el-form ref="form" :model="integralRuleFrom" label-width="80px">
<el-row>
<el-col :span="20">
<editor
id="editor3"
tableName="editor3"
v-model="integralRuleFrom.integralRule"
:min-height="580"
/>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="关于我们" name="aboutUs">
<el-form ref="form" :model="aboutUsFrom" label-width="80px">
<el-row>
<el-col :span="20">
<editor
id="editor4"
tableName="editor4"
v-model="aboutUsFrom.aboutUs"
:min-height="580"
/>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="蓝牙指引权限" name="bluetoothGuidancePermissions">
<el-form
ref="form"
:model="bluetoothGuidancePermissionsFrom"
label-width="80px"
>
<el-row>
<el-col :span="20">
<editor
id="editor5"
tableName="editor5"
v-model="
bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions
"
:min-height="580"
/>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="定位指引权限" name="locationGuidancePermissions">
<el-form
ref="form"
:model="locationGuidancePermissionsFrom"
label-width="80px"
>
<el-row>
<el-col :span="20">
<editor
id="editor6"
tableName="editor6"
v-model="
locationGuidancePermissionsFrom.locationGuidancePermissions
"
:min-height="580"
/>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="联系客服" name="contactWorker">
<div class="block" style="float: left; margin-left: 3%; margin-top: 3%">
<el-image
:src="contactWorkerFrom.contactWorkerSrc"
style="width: 330px; height: 461px"
>
<div slot="placeholder" class="image-slot">
<span class="dot"></span>
</div>
</el-image>
</div>
<div style="float: left; margin-left: 10%; margin-top: 10%">
<el-upload
ref="upload"
:limit="1"
accept=".jpg, .png, .jpeg, .mp4"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
请上传联系客服页面图片建议尺寸为330px*461px
</div>
</el-upload>
</div>
</el-tab-pane>
<el-tab-pane label="商城链接/版本管理" name="otherSetting">
<el-form
ref="form"
:model="otherForm"
:rules="rules"
label-width="150px"
style="margin-top: 1%"
>
<el-divider content-position="left">商城设置</el-divider>
<el-form-item label="跳转商城appid" prop="skipAppid">
<el-input
v-model="otherForm.skipAppid"
style="width: 70%"
></el-input>
</el-form-item>
<el-form-item label="跳转商城路径:" prop="skipPath">
<el-input
v-model="otherForm.skipPath"
style="width: 70%"
></el-input>
</el-form-item>
<el-divider content-position="left">版本管理设置</el-divider>
<el-form-item label="当前版本:" prop="sysVersion">
<el-input
v-model="otherForm.sysVersion"
style="width: 70%"
></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<div
style="margin-left: 76%; margin-top: 2%"
v-show="this.activeName != 'contactWorker'"
>
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</div>
</template>
<script>
import {
listSetting,
getSetting,
delSetting,
addSetting,
updateSetting,
} from '@/api/system/systemSetting'
import {
listOtherSetting,
addOtherSetting,
updateOtherSetting,
} from '@/api/system/otherSetting'
import { getToken } from '@/utils/auth'
export default {
name: 'Setting',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
// 平台参数设置表格数据
settingList: [],
// 弹出层标题
title: '',
activeName: 'userAgreement',
// 是否显示弹出层
open: false,
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/file/upload',
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
key: null,
value: null,
instructions: null,
status: null,
},
otherQueryParams: {
pageNum: 1,
pageSize: 10,
skipAppid: null,
skipPath: null,
sysVersion: null,
status: null,
},
// 表单参数
form: {},
otherForm: {},
userAgreementFrom: {
userAgreement: null,
userAgreementId: null,
},
privacyAgreementFrom: {
privacyAgreement: null,
privacyAgreementId: null,
},
integralRuleFrom: {
integralRule: null,
integralRuleId: null,
},
aboutUsFrom: {
aboutUs: null,
aboutUsId: null,
},
bluetoothGuidancePermissionsFrom: {
bluetoothGuidancePermissions: null,
bluetoothGuidancePermissionsId: null,
},
locationGuidancePermissionsFrom: {
locationGuidancePermissions: null,
locationGuidancePermissionsId: null,
},
contactWorkerFrom: {
contactWorkerSrc: null,
contactWorkerId: null,
},
// 表单校验
rules: {
skipAppid: [
{ required: true, message: '请输入商城apppid', trigger: 'blur' },
],
skipPath: [
{ required: true, message: '请输入商城路径', trigger: 'blur' },
],
sysVersion: [
{ required: true, message: '请输入当前版本', trigger: 'blur' },
],
},
}
},
created() {
this.getList()
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
/** 提交按钮 */
submitForm() {
if (this.activeName == 'userAgreement') {
if (this.userAgreementFrom.userAgreementId != null) {
this.form.id = this.userAgreementFrom.userAgreementId
}
this.form.key = 'USER_AGREEMENT'
if (!this.userAgreementFrom.userAgreement) {
this.$modal.msgError('用户协议内容不能为空')
return
}
this.form.value = this.userAgreementFrom.userAgreement
this.form.instructions = '用户协议'
}
if (this.activeName == 'privacyAgreement') {
if (this.privacyAgreementFrom.privacyAgreementId != null) {
this.form.id = this.privacyAgreementFrom.privacyAgreementId
}
this.form.key = 'PRIVACY_AGREEMENT'
if (!this.privacyAgreementFrom.privacyAgreement) {
this.$modal.msgError('隐私协议内容不能为空')
return
}
this.form.instructions = '隐私协议'
this.form.value = this.privacyAgreementFrom.privacyAgreement
}
if (this.activeName == 'integralRule') {
if (this.integralRuleFrom.integralRuleId != null) {
this.form.id = this.integralRuleFrom.integralRuleId
}
this.form.key = 'INTEGRAL_RULE'
if (!this.integralRuleFrom.integralRule) {
this.$modal.msgError('积分规则内容不能为空')
return
}
this.form.instructions = '积分规则'
this.form.value = this.integralRuleFrom.integralRule
}
if (this.activeName == 'aboutUs') {
if (this.aboutUsFrom.aboutUsId != null) {
this.form.id = this.aboutUsFrom.aboutUsId
}
this.form.key = 'ABOUT_US'
if (!this.aboutUsFrom.aboutUs) {
this.$modal.msgError('关于我们内容不能为空')
return
}
this.form.instructions = '关于我们'
this.form.value = this.aboutUsFrom.aboutUs
}
if (this.activeName == 'bluetoothGuidancePermissions') {
if (
this.bluetoothGuidancePermissionsFrom
.bluetoothGuidancePermissionsId != null
) {
this.form.id =
this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissionsId
}
this.form.key = 'BLUETOOTH_GUIDANCE_PERMISSIONS'
if (
!this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions
) {
this.$modal.msgError('蓝牙指引权限内容不能为空')
return
}
this.form.instructions = '蓝牙指引权限'
this.form.value =
this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions
}
if (this.activeName == 'locationGuidancePermissions') {
if (
this.locationGuidancePermissionsFrom.locationGuidancePermissionsId !=
null
) {
this.form.id =
this.locationGuidancePermissionsFrom.locationGuidancePermissionsId
}
this.form.key = 'LOCATION_GUIDANCE_PERMISSIONS'
if (!this.locationGuidancePermissionsFrom.locationGuidancePermissions) {
this.$modal.msgError('定位指引权限内容不能为空')
return
}
this.form.instructions = '定位指引权限'
this.form.value =
this.locationGuidancePermissionsFrom.locationGuidancePermissions
}
if (this.form.value) {
this.form.value = this.form.value.replace(/\\/g, '') // 兼容表格
console.log(" this.form.value", this.form.value)
}
if (this.activeName != 'otherSetting') {
if (this.form.id != null) {
updateSetting(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addSetting(this.form).then((response) => {
this.$modal.msgSuccess('保存成功')
this.open = false
this.getList()
})
}
this.form.id = null
this.form.value = null
} else {
this.$refs['form'].validate((valid) => {
if (valid) {
// 其他设置处理
if (this.otherForm.id != null) {
updateOtherSetting(this.otherForm).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addOtherSetting(this.otherForm).then((response) => {
this.$modal.msgSuccess('保存成功')
this.open = false
this.getList()
})
}
}
})
}
},
/** 查询平台参数设置列表 */
/** USER_AGREEMENT-用户协议 PRIVACY_AGREEMENT-隐私协议 INTEGRAL_RULE-积分规则 ABOUT_US-关于我们 BLUETOOTH_GUIDANCE_PERMISSIONS-蓝牙指引权限 LOCATION_GUIDANCE_PERMISSIONS - 定位指引权限 CONTACT_WORKER-联系客服 */
getList() {
this.loading = true
listSetting(this.queryParams).then((response) => {
this.settingList = JSON.parse(JSON.stringify(response.rows))
this.total = response.total
this.loading = false
// 处理回显逻辑
this.settingList.forEach((item) => {
if (item.key == 'USER_AGREEMENT') {
this.userAgreementFrom.userAgreement = item.value
this.userAgreementFrom.userAgreementId = item.id
}
if (item.key == 'PRIVACY_AGREEMENT') {
this.privacyAgreementFrom.privacyAgreement = item.value
this.privacyAgreementFrom.privacyAgreementId = item.id
}
if (item.key == 'INTEGRAL_RULE') {
this.integralRuleFrom.integralRule = item.value
this.integralRuleFrom.integralRuleId = item.id
}
if (item.key == 'ABOUT_US') {
this.aboutUsFrom.aboutUs = item.value
this.aboutUsFrom.aboutUsId = item.id
}
if (item.key == 'BLUETOOTH_GUIDANCE_PERMISSIONS') {
this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissions =
item.value
this.bluetoothGuidancePermissionsFrom.bluetoothGuidancePermissionsId =
item.id
}
if (item.key == 'LOCATION_GUIDANCE_PERMISSIONS') {
this.locationGuidancePermissionsFrom.locationGuidancePermissions =
item.value
this.locationGuidancePermissionsFrom.locationGuidancePermissionsId =
item.id
}
if (item.key == 'CONTACT_WORKER') {
this.contactWorkerFrom.contactWorkerSrc = item.pictureUrl
this.contactWorkerFrom.contactWorkerId = item.id
}
})
})
listOtherSetting(this.otherQueryParams).then((response) => {
this.otherForm = response.rows.length > 0 ? response.rows[0] : {}
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
key: null,
value: null,
instructions: null,
status: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加平台参数设置'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getSetting(id).then((response) => {
this.form = response.data
this.open = true
this.title = '修改平台参数设置'
})
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
// this.upload.isUploading = true;
console.log('上传处理中==>', JSON.stringify(event))
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
console.log('上传后的结果==>', JSON.stringify(response))
if (response.code == '200') {
this.contactWorkerFrom.contactWorkerSrc = response.data.url
this.form.key = 'CONTACT_WORKER'
this.form.instructions = '联系客服'
this.form.pictureUrl = this.contactWorkerFrom.contactWorkerSrc
if (this.contactWorkerFrom.contactWorkerId != null) {
this.form.id = this.contactWorkerFrom.contactWorkerId
}
// 处理保存处理接口
if (this.form.id != null) {
updateSetting(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addSetting(this.form).then((response) => {
this.$modal.msgSuccess('保存成功')
this.open = false
this.getList()
})
}
this.form.id = null
this.form.pictureUrl = null
}
// this.upload.open = false;
// this.upload.isUploading = false;
// this.$refs.upload.clearFiles();
// this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
// this.getList();
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal
.confirm('是否确认删除平台参数设置编号为"' + ids + '"的数据项?')
.then(function () {
return delSetting(ids)
})
.then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
})
.catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download(
'system/setting/export',
{
...this.queryParams,
},
`setting_${new Date().getTime()}.xlsx`
)
},
},
}
</script>