| | |
| | | // 设备管理 |
| | | // 轮播图管理 |
| | | <template> |
| | | <div class="app-container"> |
| | | <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ --> |
| | |
| | | <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="orderNum" label="排序号" align="center" min-width="120" /> |
| | | <el-table-column prop="createTime" label="创建时间" align="center" /> |
| | | <el-table-column prop="jumpType" label="跳转类型" align="center" min-width="120"> |
| | | <template slot-scope="scope"> |
| | | {{ ['不跳转','小程序页面','H5页面','其他小程序'][scope.row.jumpType] }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="orderNum" label="排序号" align="center" /> |
| | | <el-table-column prop="createTime" label="创建时间" align="center" min-width="120" /> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | |
| | | |
| | | <!-- 新增&编辑 --> |
| | | <el-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog"> |
| | | <el-form :ref="formName" :model="dialogData" label-width="100px" :rules="rules" size="small"> |
| | | <el-form-item label="排序号" prop="orderNum"> |
| | | <el-form :ref="formName" :model="dialogData" label-width="120px" :rules="rules" size="small"> |
| | | <el-form-item label="排序号:" prop="orderNum"> |
| | | <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" /> |
| | | </el-form-item> |
| | | <el-form-item ref="uploadFormItem" label="轮播图" prop="uploadImgs"> |
| | | <el-form-item ref="uploadFormItem" label="轮播图:" prop="uploadImgs"> |
| | | <!-- 上传图片组件(单图) --> |
| | | <el-upload |
| | | ref="refUploadImg" |
| | |
| | | <i class="el-icon-plus" /> |
| | | </el-upload> |
| | | </el-form-item> |
| | | <el-form-item label="跳转类型:" prop="jumpType"> |
| | | <el-select |
| | | v-model="dialogData.jumpType" |
| | | clearable |
| | | placeholder="请选择跳转类型" |
| | | class="com-edit-input" |
| | | > |
| | | <el-option v-for="item in jumpTypeOpt" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item v-if="dialogData.jumpType" label="跳转链接:" prop="jumpUrl"> |
| | | <el-input v-model="dialogData.jumpUrl" placeholder="请输入跳转链接" class="com-edit-input" /> |
| | | </el-form-item> |
| | | <el-form-item v-if="dialogData.jumpType===3" label="appId:" prop="jumpMpId"> |
| | | <el-input v-model="dialogData.jumpMpId" placeholder="请输入小程序appId" class="com-edit-input" /> |
| | | </el-form-item> |
| | | <el-form-item v-if="dialogData.jumpType===3" label="小程序版本:" prop="envVersion"> |
| | | <el-select |
| | | v-model="dialogData.envVersion" |
| | | clearable |
| | | placeholder="请选择小程序版本" |
| | | class="com-edit-input" |
| | | > |
| | | <el-option v-for="item in envVersionOpt" :key="item.value" :label="item.label" :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item v-if="dialogData.jumpType===3" label="额外数据:" prop="extraData"> |
| | | <el-input v-model="dialogData.extraData" placeholder="请输入小程序额外数据" class="com-edit-input" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="hideDialog">取消</el-button> |
| | |
| | | <script> |
| | | |
| | | import mixin_Upload from '@/mixins/upload.js' |
| | | |
| | | import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项 |
| | | export default { |
| | | name: 'Equipment', |
| | | mixins: [mixin_Upload], |
| | | mixins: [mixin_Upload, mixin_bannerOpts], |
| | | data() { |
| | | return { |
| | | list: [], // 设备列表 |
| | |
| | | { required: true, message: '排序号不能为空', trigger: 'change' } |
| | | ], |
| | | uploadImgs: [ |
| | | { required: true, message: '请选择轮播图片', trigger: 'change' } |
| | | { required: true, message: '轮播图片不能为空', trigger: 'change' } |
| | | ], |
| | | jumpType: [ |
| | | { required: true, message: '跳转类型不能为空', trigger: 'change' } |
| | | ], |
| | | jumpUrl: [ |
| | | { required: true, message: '跳转链接不能为空', trigger: 'change' } |
| | | ], |
| | | jumpMpId: [ |
| | | { required: true, message: '跳转小程序appId不能为空', trigger: 'change' } |
| | | ], |
| | | envVersion: [ |
| | | { required: true, message: '跳转小程序版本不能为空', trigger: 'change' } |
| | | ] |
| | | }, |
| | | |
| | |
| | | methods: { |
| | | // 初始化 |
| | | init() { |
| | | // this.id = this.$route.query.id || '' |
| | | this.getList() |
| | | }, |
| | | |
| | |
| | | delUploadImg(file, fileList) { |
| | | this.dialogData.uploadImgs = fileList |
| | | }, |
| | | // 执行上传商品图 |
| | | // 执行上传图 |
| | | runUploadImg(suc_cb) { |
| | | if (this.checkNeedUpload(this.dialogData.uploadImgs)) { |
| | | this.$refs.refUploadImg.submit() |
| | |
| | | suc_cb && suc_cb() |
| | | } |
| | | }, |
| | | // 上传商品图 |
| | | // 上传图 |
| | | uploadImg(res) { |
| | | console.log(res) |
| | | const file = res.file |
| | |
| | | const dialogData = this.dialogData |
| | | const params = { |
| | | orderNum: dialogData.orderNum, |
| | | imgUrl: dialogData.imgUrl |
| | | imgUrl: dialogData.imgUrl, |
| | | jumpType: dialogData.jumpType |
| | | } |
| | | if (dialogData.jumpUrl) params.jumpUrl = dialogData.jumpUrl |
| | | if (dialogData.jumpMpId) params.jumpMpId = dialogData.jumpMpId |
| | | if (dialogData.envVersion) params.envVersion = dialogData.envVersion |
| | | if (dialogData.extraData) params.extraData = dialogData.extraData |
| | | |
| | | if (dialogData.type === 'edit') { |
| | | params.id = dialogData.id |
| | | } |