|
|
@@ -0,0 +1,171 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card style="margin: 15px">
|
|
|
+ <el-form ref="editform" :rules="rules" label-width="120px" :model="formmodel" style="margin: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.type')" prop="type">
|
|
|
+ <el-select v-model="formmodel.type"
|
|
|
+ :placeholder="this.$t('deviceMenuDetailManage.chooseType')"
|
|
|
+ filterable clearable>
|
|
|
+ <el-option v-for="(item,index) in deviceMenuDetialTypeTransfer" :key="index" :label="item.key" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.title')" prop="title" maxlength="50">
|
|
|
+ <el-input v-model="formmodel.title" :placeholder="this.$t('deviceMenuDetailManage.inputTitle')" :maxlength="50" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.summary')" prop="summary" type="textarea" maxlength="200">
|
|
|
+ <el-input v-model="formmodel.summary" :placeholder="this.$t('deviceMenuDetailManage.inputSummary')" :maxlength="200" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.titleIcon')">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="`${titleIconUploadUrl}?scene=avatar`"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="titleIconUploaded"
|
|
|
+ :before-upload="handleTitleIconBefore"
|
|
|
+ >
|
|
|
+ <img v-if="titleIconUrl" :src="titleIconUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item :label="this.$t('deviceMenuDetailManage.titleBg')">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="`${titleBgUploadUrl}?scene=avatar`"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="titleBgUploaded"
|
|
|
+ :before-upload="handleTitleBgBefore"
|
|
|
+ >
|
|
|
+ <img v-if="titleBgUrl" :src="titleBgUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {DEVICE_MENU_DETAIL_TYPE} from "@/utils/enum/DeviceMenuDetailTypeEnum";
|
|
|
+
|
|
|
+const serverUrl = domain.serverUrl
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rules: {
|
|
|
+ },
|
|
|
+ formmodel: {
|
|
|
+ },
|
|
|
+
|
|
|
+ titleIconUploadUrl: serverUrl + '/ncs/upload/uploadFile',
|
|
|
+ titleIconUrl: '',
|
|
|
+ titleBgUploadUrl: serverUrl + '/ncs/upload/uploadFile',
|
|
|
+ titleBgUrl: '',
|
|
|
+ deviceMenuDetialTypeTransfer: DEVICE_MENU_DETAIL_TYPE.getKeyValueList(),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ /** 上传成功后的钩子 更换图片 置空存储数组*/
|
|
|
+ titleIconUploaded(res) {
|
|
|
+ this.titleIconUrl = serverUrl + '/' + res
|
|
|
+ this.formmodel.title_icon = this.titleIconUrl
|
|
|
+ },
|
|
|
+ titleBgUploaded(res) {
|
|
|
+ this.titleBgUrl = serverUrl + '/' + res
|
|
|
+ this.formmodel.title_bg = this.titleBgUrl
|
|
|
+ },
|
|
|
+ /** 图片上传之前的校验 */
|
|
|
+ handleTitleIconBefore(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+
|
|
|
+ if (!isImg) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImg2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error(this.$t('action.uploaderSize2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (event) => {
|
|
|
+ const image = new Image()
|
|
|
+ image.onload = () => {
|
|
|
+ const width = image.width
|
|
|
+ const height = image.height
|
|
|
+ if (width > 500 || width < 100) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImgMsg'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (width !== height) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImgMsg2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (height > 500 || height < 100) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImgMsg3'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ image.src = event.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 图片上传之前的校验 */
|
|
|
+ handleTitleBgBefore(file) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 10
|
|
|
+
|
|
|
+ if (!isImg) {
|
|
|
+ this.$message.error(this.$t('action.uploaderImg2'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error(this.$t('action.uploaderSize3'))
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (event) => {
|
|
|
+ const image = new Image()
|
|
|
+ image.onload = () => {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ image.src = event.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
vothin