|
@ -4,9 +4,9 @@ |
|
|
:close-on-click-modal="false" |
|
|
:close-on-click-modal="false" |
|
|
:before-close="handleClose" |
|
|
:before-close="handleClose" |
|
|
:close-on-press-escape="false" |
|
|
:close-on-press-escape="false" |
|
|
:width="60+'%'" |
|
|
:width="diaWidth+'%'" |
|
|
:top="'30px'"> |
|
|
:top="diaTop"> |
|
|
<el-form :inline="false" |
|
|
<el-form :inline="showForm==='customize'" |
|
|
:model="dataForm" |
|
|
:model="dataForm" |
|
|
:rules="dataRule" |
|
|
:rules="dataRule" |
|
|
ref="dataForm" |
|
|
ref="dataForm" |
|
@ -78,14 +78,13 @@ |
|
|
|
|
|
|
|
|
<el-form-item v-if="showForm==='customize'" |
|
|
<el-form-item v-if="showForm==='customize'" |
|
|
label="默认图标"> |
|
|
label="默认图标"> |
|
|
|
|
|
<div class="item_width_1"> |
|
|
<img :src="dataForm.defaultIconPath" |
|
|
<img :src="dataForm.defaultIconPath" |
|
|
style="width:70px;height:70px" |
|
|
style="width:60px;height:60px" |
|
|
class="function-icon"> |
|
|
class="function-icon"> |
|
|
|
|
|
</div> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item prop="iconPath" |
|
|
<el-form-item label="图标"> |
|
|
label="图标"> |
|
|
|
|
|
<el-upload class="item_width_1 avatar-uploader" |
|
|
<el-upload class="item_width_1 avatar-uploader" |
|
|
:action="uploadUlr" |
|
|
:action="uploadUlr" |
|
|
:show-file-list="false" |
|
|
:show-file-list="false" |
|
@ -93,22 +92,27 @@ |
|
|
:before-upload="beforeImgUpload"> |
|
|
:before-upload="beforeImgUpload"> |
|
|
<img v-if="dataForm.iconPath" |
|
|
<img v-if="dataForm.iconPath" |
|
|
:src="dataForm.iconPath" |
|
|
:src="dataForm.iconPath" |
|
|
style="width:70px;height:70px" |
|
|
style="width:60px;height:60px" |
|
|
class="function-icon"> |
|
|
class="function-icon"> |
|
|
<i v-else |
|
|
<i v-else |
|
|
class="el-icon-plus avatar-uploader-icon"></i> |
|
|
class="el-icon-plus avatar-uploader-icon"></i> |
|
|
</el-upload> |
|
|
</el-upload> |
|
|
|
|
|
<el-button v-if="showForm==='customize'" |
|
|
|
|
|
class="btn_reset" |
|
|
|
|
|
type="primary" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
@click="resetIcon">恢复默认</el-button> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item v-if="showForm==='customize'" |
|
|
<el-form-item v-if="showForm==='customize'" |
|
|
label="默认选中图标"> |
|
|
label="默认选中图标"> |
|
|
|
|
|
<div class="item_width_1"> |
|
|
<img :src="dataForm.defaultSelectedIconPath" |
|
|
<img :src="dataForm.defaultSelectedIconPath" |
|
|
style="width:70px;height:70px" |
|
|
style="width:60px;height:60px" |
|
|
class="function-icon"> |
|
|
class="function-icon"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item prop="selectedIconPath" |
|
|
<el-form-item label="选中图标"> |
|
|
label="选中图标"> |
|
|
|
|
|
<el-upload class="item_width_1 avatar-uploader" |
|
|
<el-upload class="item_width_1 avatar-uploader" |
|
|
:action="uploadUlr" |
|
|
:action="uploadUlr" |
|
|
:show-file-list="false" |
|
|
:show-file-list="false" |
|
@ -116,11 +120,16 @@ |
|
|
:before-upload="beforeImgUpload"> |
|
|
:before-upload="beforeImgUpload"> |
|
|
<img v-if="dataForm.selectedIconPath" |
|
|
<img v-if="dataForm.selectedIconPath" |
|
|
:src="dataForm.selectedIconPath" |
|
|
:src="dataForm.selectedIconPath" |
|
|
style="width:70px;height:70px" |
|
|
style="width:60px;height:60px" |
|
|
class="function-icon"> |
|
|
class="function-icon"> |
|
|
<i v-else |
|
|
<i v-else |
|
|
class="el-icon-plus avatar-uploader-icon"></i> |
|
|
class="el-icon-plus avatar-uploader-icon"></i> |
|
|
</el-upload> |
|
|
</el-upload> |
|
|
|
|
|
<el-button v-if="showForm==='customize'" |
|
|
|
|
|
class="btn_reset" |
|
|
|
|
|
type="primary" |
|
|
|
|
|
size="mini" |
|
|
|
|
|
@click="resetSelectIcon">恢复默认</el-button> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
</el-form> |
|
|
</el-form> |
|
@ -133,6 +142,7 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import { mapGetters } from 'vuex' |
|
|
import { Loading } from 'element-ui' // 引入Loading服务 |
|
|
import { Loading } from 'element-ui' // 引入Loading服务 |
|
|
|
|
|
|
|
|
let loading// 加载动画 |
|
|
let loading// 加载动画 |
|
@ -140,6 +150,7 @@ export default { |
|
|
data () { |
|
|
data () { |
|
|
return { |
|
|
return { |
|
|
visible: false, |
|
|
visible: false, |
|
|
|
|
|
title: '新增Footbar', |
|
|
type: '', // 操作类型A/U |
|
|
type: '', // 操作类型A/U |
|
|
id: '', // 父组件传来功能id |
|
|
id: '', // 父组件传来功能id |
|
|
showForm: 'default',//来自默认配置default、自定义配置customize |
|
|
showForm: 'default',//来自默认配置default、自定义配置customize |
|
@ -189,16 +200,25 @@ export default { |
|
|
pageTitle: [ |
|
|
pageTitle: [ |
|
|
{ required: true, message: '页面标题不能为空', trigger: 'blur' }, |
|
|
{ required: true, message: '页面标题不能为空', trigger: 'blur' }, |
|
|
{ min: 2, max: 10, message: '页面标题长度在 2 到 10 个字符', trigger: 'blur' } |
|
|
{ min: 2, max: 10, message: '页面标题长度在 2 到 10 个字符', trigger: 'blur' } |
|
|
], |
|
|
|
|
|
iconPath: [ |
|
|
|
|
|
{ required: true, message: '图标不能为空', trigger: 'blur' } |
|
|
|
|
|
], |
|
|
|
|
|
selectedIconPath: [ |
|
|
|
|
|
{ required: true, message: '选中图标不能为空', trigger: 'blur' } |
|
|
|
|
|
] |
|
|
] |
|
|
} |
|
|
// iconPath: [ |
|
|
|
|
|
// { required: true, message: '图标不能为空', trigger: 'blur' } |
|
|
|
|
|
// ], |
|
|
|
|
|
// selectedIconPath: [ |
|
|
|
|
|
// { required: true, message: '选中图标不能为空', trigger: 'blur' } |
|
|
|
|
|
// ] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
diaWidth () { |
|
|
|
|
|
|
|
|
|
|
|
return this.resolution === 'small' ? 60 : 50 |
|
|
|
|
|
}, |
|
|
|
|
|
diaTop () { |
|
|
|
|
|
|
|
|
|
|
|
return this.resolution === 'small' ? '30px' : '100px' |
|
|
|
|
|
}, |
|
|
|
|
|
...mapGetters(['clientHeight', 'resolution']), |
|
|
|
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
init (id, type, appType, showForm) { |
|
|
init (id, type, appType, showForm) { |
|
|
this.type = type |
|
|
this.type = type |
|
@ -208,6 +228,7 @@ export default { |
|
|
this.id = id |
|
|
this.id = id |
|
|
|
|
|
|
|
|
if (type === 'A') { |
|
|
if (type === 'A') { |
|
|
|
|
|
this.title = '新增Footbar' |
|
|
this.dataForm = { |
|
|
this.dataForm = { |
|
|
customerId: '', |
|
|
customerId: '', |
|
|
barName: '', |
|
|
barName: '', |
|
@ -223,6 +244,7 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} else { |
|
|
} else { |
|
|
|
|
|
this.title = '修改Footbar' |
|
|
this.loadFormData() |
|
|
this.loadFormData() |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@ -245,7 +267,14 @@ export default { |
|
|
this.$message.error(rspMsg) |
|
|
this.$message.error(rspMsg) |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
// 重置图标 |
|
|
|
|
|
resetIcon () { |
|
|
|
|
|
this.dataForm.iconPath = this.dataForm.defaultIconPath |
|
|
|
|
|
}, |
|
|
|
|
|
// 重置选中图标 |
|
|
|
|
|
resetSelectIcon () { |
|
|
|
|
|
this.dataForm.selectedIconPath = this.dataForm.defaultSelectedIconPath |
|
|
|
|
|
}, |
|
|
// 上传大图标成功 |
|
|
// 上传大图标成功 |
|
|
handleImgSuccess (res, file, type) { |
|
|
handleImgSuccess (res, file, type) { |
|
|
if (res.code === 0 && res.msg === 'success') { |
|
|
if (res.code === 0 && res.msg === 'success') { |
|
@ -288,6 +317,7 @@ export default { |
|
|
// url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/createfootbar' |
|
|
// url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/createfootbar' |
|
|
url = '/oper/customize/customerfootbar/createfootbar' |
|
|
url = '/oper/customize/customerfootbar/createfootbar' |
|
|
this.dataForm.id = '' |
|
|
this.dataForm.id = '' |
|
|
|
|
|
this.dataForm.customerId = 'default' |
|
|
} |
|
|
} |
|
|
window.app.ajax.post(url, this.dataForm, |
|
|
window.app.ajax.post(url, this.dataForm, |
|
|
(data, rspMsg) => { |
|
|
(data, rspMsg) => { |
|
@ -334,7 +364,7 @@ export default { |
|
|
width: 28px; |
|
|
width: 28px; |
|
|
} |
|
|
} |
|
|
.item_width_1 { |
|
|
.item_width_1 { |
|
|
width: 300px; |
|
|
width: 200px; |
|
|
} |
|
|
} |
|
|
.item_width_2 { |
|
|
.item_width_2 { |
|
|
width: 500px; |
|
|
width: 500px; |
|
@ -348,4 +378,8 @@ export default { |
|
|
margin-left: 10px; |
|
|
margin-left: 10px; |
|
|
vertical-align: bottom; |
|
|
vertical-align: bottom; |
|
|
} |
|
|
} |
|
|
|
|
|
.btn_reset { |
|
|
|
|
|
vertical-align: bottom; |
|
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|