|
|
@@ -0,0 +1,158 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible = true">新增</el-button>
|
|
|
+ <el-button size="mini" @click="close">返回</el-button>
|
|
|
+ <!-- 模块 -->
|
|
|
+ <el-form class="form" v-for="(item, index) in list" :key="item.id" label-width="auto">
|
|
|
+ <el-form-item class="sort" :label="(index + 1).toString()">
|
|
|
+ <el-link icon="el-icon-close" :underline="false" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'date' in item" label="时间：">
|
|
|
+ <el-date-picker v-model="item.date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'title' in item" label="标题：">
|
|
|
+ <el-input v-model="item.title" placeholder="请输入标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'model' in item" label="模式：">
|
|
|
+ <el-select v-model="item.model" placeholder="请选择模式" @change="getModel(item)">
|
|
|
+ <!-- <el-option v-for="item in contentOptions" :key="item.value" :label="item.label" :value="Number(item.value)" /> -->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'description' in item" label="简介：">
|
|
|
+ <el-input v-model="item.description" type="textarea" rows="4" placeholder="请输入简介" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'contentName' in item" label="内容：">
|
|
|
+ <el-input v-model="item.contentName" prefix-icon="el-icon-search" placeholder="选择内容" @focus="getDialog(index)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'forwardType' in item" label="跳转方式：">
|
|
|
+ <el-select v-model="item.forwardType" placeholder="请选择跳转方式" @change="getForwardType(item)">
|
|
|
+ <!-- <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="Number(item.value)" /> -->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'forwardUrl' in item" label="跳转地址：">
|
|
|
+ <el-input v-model="item.forwardUrl" placeholder="请输入跳转地址" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'isCustom' in item" label="封面模式：">
|
|
|
+ <el-select v-model="item.isCustom" placeholder="选择封面模式">
|
|
|
+ <!-- <el-option v-for="item in coverOptions" :key="item.value" :label="item.label" :value="Number(item.value)" /> -->
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'pic' in item" label="图片：">
|
|
|
+ <Upload listType="picture-card" :url="item.pic" @upload="getUpload($event, index)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="'sort' in item" label="排序：">
|
|
|
+ <el-input-number v-model="item.sort" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button>清空</el-button>
|
|
|
+ <el-button type="primary">提交</el-button>
|
|
|
+ <el-button type="primary" plain>上架</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="新增" width="500px">
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-form-item label="模块选择：">
|
|
|
+ <el-select v-model="mouldList" multiple placeholder="请选择所需模块">
|
|
|
+ <el-option v-for="item in mouldOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ <el-button type="primary" @click="getPush">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 模块
|
|
|
+ list: [],
|
|
|
+ // 弹窗
|
|
|
+ dialogVisible: false,
|
|
|
+ // 弹窗参数
|
|
|
+ mouldList: [],
|
|
|
+ // 模块选择
|
|
|
+ mouldOptions: [{
|
|
|
+ value: 'date',
|
|
|
+ label: '时间'
|
|
|
+ }, {
|
|
|
+ value: 'title',
|
|
|
+ label: '标题'
|
|
|
+ }, {
|
|
|
+ value: 'model',
|
|
|
+ label: '模式'
|
|
|
+ }, {
|
|
|
+ value: 'description',
|
|
|
+ label: '简介'
|
|
|
+ }, {
|
|
|
+ value: 'contentName',
|
|
|
+ label: '内容'
|
|
|
+ }, {
|
|
|
+ value: 'forwardType',
|
|
|
+ label: '跳转方式'
|
|
|
+ }, {
|
|
|
+ value: 'forwardUrl',
|
|
|
+ label: '跳转地址'
|
|
|
+ }, {
|
|
|
+ value: 'isCustom',
|
|
|
+ label: '封面模式'
|
|
|
+ }, {
|
|
|
+ value: 'pic',
|
|
|
+ label: '图片'
|
|
|
+ }, {
|
|
|
+ value: 'sort',
|
|
|
+ label: '排序'
|
|
|
+ }, {
|
|
|
+ value: 11,
|
|
|
+ label: '列表'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 新增模块
|
|
|
+ getPush() {
|
|
|
+ let index = this.list.length
|
|
|
+ this.list[index] = {}
|
|
|
+ this.mouldList.map(i => {
|
|
|
+ this.list[index][i] = null
|
|
|
+ })
|
|
|
+ this.dialogVisible = false
|
|
|
+ },
|
|
|
+
|
|
|
+ // 返回
|
|
|
+ close() {
|
|
|
+ this.$tab.closeOpenPage("/operation/recommend");
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.form {
|
|
|
+ width: 500px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ box-shadow: 5px 5px 5px 0px #dcdfe6;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .sort {
|
|
|
+ ::v-deep .el-form-item__label-wrap {
|
|
|
+ margin: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-link {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
