<template>
|
<a-card :bordered="false">
|
<h3>系统配置</h3>
|
<a-form-model :model="queryForm" ref="ruleForm" :rules="rules">
|
<a-form-model-item
|
ref="systemName"
|
prop="systemName"
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="系统名称"
|
>
|
<a-input
|
v-model="queryForm.systemName"
|
:maxLength="10"
|
placeholder="请输入系统名称,最多输入10个字"
|
allowClear
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
ref="operationViewName"
|
prop="operationViewName"
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="运营大屏名称"
|
>
|
<a-input
|
v-model="queryForm.operationViewName"
|
:maxLength="10"
|
placeholder="请输入运营大屏名称,最多输入10个字"
|
allowClear
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
ref="taskViewName"
|
prop="taskViewName"
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="告警大屏名称"
|
>
|
<a-input
|
v-model="queryForm.taskViewName"
|
:maxLength="10"
|
placeholder="请输入告警大屏名称,最多输入10个字"
|
allowClear
|
/>
|
</a-form-model-item>
|
<a-form-model-item
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="logo"
|
prop="logoPath"
|
>
|
<a-upload
|
name="avatar"
|
list-type="picture-card"
|
class="avatar-uploader"
|
:show-upload-list="false"
|
:before-upload="beforeUpload"
|
:customRequest="uploadLogoFiles"
|
style="position: relative"
|
>
|
<img class="upload-img" v-if="queryForm.logoPath" :src="staticUrl + queryForm.logoPath" alt="avatar" />
|
<div v-else>
|
<a-icon :type="logoLoading ? 'loading' : 'plus'" />
|
</div>
|
<a-icon
|
v-if="queryForm.logoPath"
|
@click.stop="delLogo"
|
style="position: absolute; left: 120px; top: -5px; color: red; z-index: 999"
|
type="close"
|
/>
|
</a-upload>
|
</a-form-model-item>
|
<a-form-model-item
|
:label-col="formItemLayout.labelCol"
|
:wrapper-col="formItemLayout.wrapperCol"
|
label="大屏图片"
|
prop="bigDataPath"
|
>
|
<a-upload
|
name="avatar"
|
list-type="picture-card"
|
class="avatar-uploader"
|
:show-upload-list="false"
|
:before-upload="beforeUpload"
|
:customRequest="uploadBgFiles"
|
style="position: relative"
|
>
|
<img class="upload-img" v-if="queryForm.bigDataPath" :src="staticUrl + queryForm.bigDataPath" alt="avatar" />
|
<div v-else>
|
<a-icon :type="bgLoading ? 'loading' : 'plus'" />
|
</div>
|
<a-icon
|
v-if="queryForm.bigDataPath"
|
@click.stop="delBigDataPath"
|
style="position: absolute; left: 120px; top: -5px; color: red; z-index: 999"
|
type="close"
|
/>
|
</a-upload>
|
</a-form-model-item>
|
<a-form-model-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
|
<a-button type="primary" @click="onSubmit"> 保存</a-button>
|
</a-form-model-item>
|
</a-form-model>
|
</a-card>
|
</template>
|
|
<script>
|
import { clearEmptyPro } from '@/utils/util'
|
import { uploadAction, putAction, getAction } from '@tievd/cube-block/lib/api/manage'
|
|
const formItemLayout = {
|
labelCol: { span: 2 },
|
wrapperCol: { span: 6 },
|
}
|
const formTailLayout = {
|
labelCol: { span: 4 },
|
wrapperCol: { span: 8, offset: 4 },
|
}
|
|
export default {
|
created() {
|
this.init()
|
},
|
data() {
|
return {
|
staticUrl: window._CONFIG['staticDomainURL'],
|
formItemLayout,
|
formTailLayout,
|
logoLoading: false,
|
bgLoading: false,
|
queryForm: {},
|
rules: {
|
systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
|
taskViewName: [{ required: true, message: '请输入告警大屏名称', trigger: 'blur' }],
|
operationViewName: [{ required: true, message: '请输入运营大屏名称', trigger: 'blur' }],
|
},
|
url: {
|
query: '/jyz/sysInfo/localInfo',
|
upload: '/jyz/sysInfo/uploadLogo',
|
edit: '/jyz/sysInfo/edit',
|
},
|
}
|
},
|
methods: {
|
delLogo() {
|
this.queryForm.logoPath = ''
|
},
|
delBigDataPath() {
|
this.queryForm.bigDataPath = ''
|
},
|
//初始化 查询系统信息
|
init() {
|
getAction(this.url.query, {}).then((res) => {
|
if (res.code === 200) {
|
this.queryForm = res.result
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
onSubmit() {
|
this.$refs.ruleForm.validate((valid) => {
|
if (valid) {
|
// 深拷贝一份数据
|
let params = JSON.parse(JSON.stringify(this.queryForm))
|
putAction(this.url.edit, clearEmptyPro(params)).then((res) => {
|
if (res.code == 200) {
|
this.$message.success('操作成功，重新登录后生效')
|
this.init()
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
} else {
|
this.$message.error('请完善信息')
|
return false
|
}
|
})
|
},
|
uploadLogoFiles(info) {
|
this.logoLoading = true
|
let formData = new FormData()
|
formData.append('file', info.file)
|
formData.append('type', 1)
|
uploadAction(this.url.upload, formData).then((res) => {
|
if (res.code === 200) {
|
this.logoLoading = false
|
this.queryForm.logoPath = res.result
|
} else {
|
this.logoLoading = false
|
this.$message.error(res.message)
|
}
|
})
|
},
|
uploadBgFiles(info) {
|
this.bgLoading = true
|
let formData = new FormData()
|
formData.append('file', info.file)
|
formData.append('type', 3)
|
uploadAction(this.url.upload, formData).then((res) => {
|
if (res.code === 200) {
|
this.bgLoading = false
|
this.queryForm.bigDataPath = res.result
|
} else {
|
this.bgLoading = false
|
this.$message.error(res.message)
|
}
|
})
|
},
|
beforeUpload(file) {
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
if (!isJpgOrPng) {
|
this.$message.error('You can only upload JPG file!')
|
}
|
const isLt2M = file.size / 1024 / 1024 < 2
|
if (!isLt2M) {
|
this.$message.error('Image must smaller than 2MB!')
|
}
|
return isJpgOrPng && isLt2M
|
},
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.upload-img {
|
width: 102px;
|
height: 102px;
|
object-fit: cover;
|
}
|
.ant-card {
|
margin-right: 20px;
|
background: linear-gradient(40deg, rgba(38, 43, 53, 0.6), rgba(31, 35, 43, 0.6));
|
}
|
</style>
|
