Jackwang
4 years ago
2 changed files with 262 additions and 1 deletions
@ -0,0 +1,220 @@ |
|||
<template> |
|||
<el-dialog |
|||
append-to-body |
|||
:visible.sync="visible" |
|||
title="模块样式" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
> |
|||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="setModuleStyle()" label-width="120px"> |
|||
<el-form-item label="模块样式：" prop="moduleStyle"> |
|||
<el-radio-group v-model="dataForm.moduleStyle"> |
|||
<el-radio v-for="item in moduleStyleList" |
|||
:key="item.dictValue" |
|||
:label="item.dictValue" style="margin-left: 30px;margin-top: 30px" @change="setModuleStyle(item.dictName,item.dictValue)"> |
|||
{{ `${item.dictName}` }} |
|||
<div> |
|||
<el-image |
|||
style="width: 100px;height: 100px;" |
|||
:key="item.remark" |
|||
:src="item.remark" |
|||
:preview-src-list="previewImgList" |
|||
@click="clickImg(item.remark)"> |
|||
</el-image> |
|||
</div> |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import 'element-ui/lib/theme-chalk/image.css' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
moduleStyle: '' |
|||
}, |
|||
moduleStyleList: [], |
|||
previewImgList: [], |
|||
data: { |
|||
moduleStyle: '', |
|||
moduleStyleName: '' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
moduleStyle: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
created () { |
|||
this.getModuleStyleList() |
|||
}, |
|||
methods: { |
|||
clickImg (url) { |
|||
this.previewImgList = [] |
|||
this.previewImgList.push(url) |
|||
}, |
|||
getModuleStyleList () { |
|||
this.$http.get(`/sys/dict/listSimple/module_type_gui_style`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.moduleStyleList = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
setModuleStyle (name, value) { |
|||
this.data.moduleStyle = value |
|||
this.data.moduleStyleName = name |
|||
}, |
|||
dataFormSubmitHandle () { |
|||
if (this.data.moduleStyle === '' || this.data.moduleStyle === undefined || this.data.moduleStyleName === '' || this.data.moduleStyleName === undefined) { |
|||
return this.$message.error('请选择模块样式') |
|||
} |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
this.$emit('setModuleStyle', this.data) |
|||
this.visible = false |
|||
}) |
|||
}, |
|||
init () { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.project-handle { |
|||
.el-timeline { |
|||
padding-left: 9px; |
|||
font-size: 13px; |
|||
} |
|||
} |
|||
.el-form-item__label { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss" scoped> |
|||
.project-handle { |
|||
width: 100%; |
|||
height: calc(100vh - 120px); |
|||
background: #ffffff; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
.project-detail { |
|||
width: 79%; |
|||
height: 80%; |
|||
border: 2px solid #ccc; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
padding-top: 20px; |
|||
float:left; |
|||
margin-bottom: 1%; |
|||
position:relative; |
|||
.project-detail-tip { |
|||
position: absolute; |
|||
top: 0; |
|||
left:0; |
|||
width: 80px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
color: #ffffff; |
|||
background: #4ac38b; |
|||
text-align:center; |
|||
} |
|||
.el-form { |
|||
width: 58%; |
|||
height: 100%; |
|||
float:left; |
|||
overflow-y:auto; |
|||
&::-webkit-scrollbar { |
|||
width: 5px; |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
border-radius: 5px; |
|||
background: #fff; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
border-radius: 10px; |
|||
background: #fff; |
|||
} |
|||
} |
|||
.container { |
|||
width: 40%; |
|||
height: 100%; |
|||
float: right; |
|||
.location { |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
#map { |
|||
width: 100%; |
|||
height: calc(100% - 30px); |
|||
} |
|||
} |
|||
} |
|||
.project-progress { |
|||
width: 20%; |
|||
height: 80%; |
|||
float: right; |
|||
border: 2px solid #ccc; |
|||
box-sizing: border-box; |
|||
margin-left: 1%; |
|||
padding-top: 20px; |
|||
overflow-y:auto; |
|||
position: relative; |
|||
padding-top: 40px; |
|||
.project-progress-tip { |
|||
position: absolute; |
|||
top: 0; |
|||
left:0; |
|||
width: 80px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
color: #ffffff; |
|||
background: #0098ff; |
|||
text-align:center; |
|||
} |
|||
&::-webkit-scrollbar { |
|||
width: 5px; |
|||
height: 1px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
border-radius: 5px; |
|||
background: #aaa; |
|||
} |
|||
&::-webkit-scrollbar-track { |
|||
border-radius: 10px; |
|||
background: #ccc; |
|||
} |
|||
} |
|||
.handle-operation { |
|||
width: 79%; |
|||
height: 49%; |
|||
box-sizing: border-box; |
|||
border: 2px solid #ccc; |
|||
float:left; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue