优化轮播图管理

liweilong

2020-12-02 9f32bd5b0217473d0b0eb819b7a49d64bbcd3db6

优化轮播图管理

 src/mixins/bannerOpts.js

New file
@@ -0,0 +1,35 @@
/**
 * 轮播图通用下拉框选项
 * -jumpTypeOpt 跳转类型选项
 * -envVersionOpt 小程序版本
 */

export default {
    data () {
        return {
            // 跳转类型选项
            jumpTypeOpt: [{
                label: '不跳转',
                value: 0
            },{
                label: '小程序页面',
                value: 1
            },{
                label: 'H5页面',
                value: 2
            },{
                label: '其他小程序',
                value: 3
            }],

            // 小程序版本
            envVersionOpt: [{
                label: '开发版（develop）', value: 'develop'
            },{
                label: '体验版（trial）', value: 'trial'
            },{
                label: '正式版（release）', value: 'release'
            }],
        }
    }
}

 src/pages/demo/form.vue

@@ -10,6 +10,7 @@
      <el-form-item label="省市区" prop="provinces">
        <el-cascader
          v-model="mData.provinces"
          class="com-edit-input"
          :options="areaOpts"
          placeholder="请选择省市区"
          style="width: 100%"

 src/pages/login/index.vue

@@ -3,7 +3,7 @@
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">

      <div class="title-container">
        <h3 class="title">”项目名称“</h3>
        <h3 class="title">袁曦藏酒</h3>
      </div>

      <el-form-item prop="username">
@@ -145,7 +145,6 @@
  methods: {
    init() {
      var loginData = localStorage.getItem('loginData')
      console.log(loginData)
      // 获取保存的账号密码
      if (loginData) this.loginForm = JSON.parse(loginData)

@@ -221,7 +220,7 @@
                name: '潘多拉的臭嘴', // 用户名称
                // arr: ['sys_admin_see'], // 权限列表
                arr: ['sys_admin_see', 'sys_admin_add', 'sys_admin_edit', 'sys_admin_del', 'sys_admin_role_see', 'sys_admin_role_add', 'sys_admin_role_edit', 'sys_admin_role_del', 'corp_user_schedule_see', 'corp_user_schedule_add', 'corp_user_schedule_edit', 'corp_user_schedule_del', 'user_mp_banner_see', 'user_mp_banner_add', 'user_mp_banner_edit', 'user_mp_banner_del', 'shop_see', 'shop_add', 'shop_edit', 'shop_del', 'shop_device', 'corp_user_see', 'corp_user_add', 'corp_user_edit', 'corp_user_del', 'change_assistant_see', 'ser_pro_material_see', 'service_project_see', 'service_project_add', 'service_project_edit', 'service_project_del', 'service_topic_see', 'service_topic_add', 'service_topic_edit', 'service_topic_del', 'service_project_order_see', 'service_project_order_edit', 'goods_type_see', 'goods_type_add', 'goods_type_edit', 'goods_type_del', 'goods_see', 'goods_add', 'goods_edit', 'goods_del', 'goods_inventory', 'goods_order_see', 'goods_order_edit', 'goods_index_banner_see', 'goods_index_banner_add', 'goods_index_banner_edit', 'goods_index_banner_del', 'user_see', 'user_edit', 'user_cash_see', 'user_cash_edit', 'distribute_relate', 'distribute_order', 'document_edit', 'operation_see',
                  'coupon_see', 'coupon_add', 'coupon_edit', 'coupon_del', 'activity_see', 'activity_add', 'activity_edit', 'activity_del'
                  'coupon_see', 'coupon_add', 'coupon_edit', 'coupon_del', 'activity_see', 'activity_add', 'activity_edit', 'activity_del', 'banner_see', 'banner_add', 'banner_edit', 'banner_del'
                ]
              }
            }

 src/pages/system/admin.vue

@@ -36,7 +36,7 @@

    <el-table :data="list">
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="姓名" prop="name" align="center" min-width="120" />
      <el-table-column label="名称" prop="name" align="center" min-width="120" />
      <el-table-column label="账号" prop="account" align="center" min-width="120" />
      <el-table-column label="角色" prop="roleName" align="center" min-width="120" />
      <!-- <el-table-column label="最近登录时间" prop="loginTime" align="center" min-width="180" /> -->
@@ -101,10 +101,18 @@
            v-model="adminDialogData.sysRoleId"
            clearable
            placeholder="角色"
            class="com-edit-input"
            style="width: 100%"
          >
            <el-option v-for="item in roleArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否启用" prop="sysRoleId">
          <el-switch
            v-model="adminDialogData.isUse"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

      </el-form>
@@ -294,7 +302,8 @@
        account: '',
        password: '',
        passwordSure: '',
        sysRoleId: ''
        sysRoleId: '',
        isUse: 1
      }
      this.adminDialogData = adminDialogData
      this.isShowadminDialog = true
@@ -308,7 +317,8 @@
        password: '',
        passwordSure: '',
        sysRoleId: item.roId,
        id: item.id
        id: item.id,
        isUse: item.isUse
      }
      this.adminDialogData = adminDialogData
      this.isShowadminDialog = true
@@ -327,7 +337,8 @@
            name: adminDialogData.name,
            account: adminDialogData.account,
            password: adminDialogData.password,
            sysAdRoleId: adminDialogData.sysRoleId
            sysAdRoleId: adminDialogData.sysRoleId,
            isUse: adminDialogData.isUse
          }
          var isAdd = adminDialogData.type === 'add'
          var url = isAdd ? 'admin/add' : 'admin/update'

 src/pages/system/banner.vue

@@ -54,11 +54,11 @@

    <!-- 新增&编辑 -->
    <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"
@@ -78,6 +78,35 @@
            <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>
@@ -95,10 +124,10 @@
<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: [], // 设备列表
@@ -118,7 +147,19 @@
          { 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' }
        ]
      },

@@ -144,7 +185,6 @@
  methods: {
    // 初始化
    init() {
      // this.id = this.$route.query.id || ''
      this.getList()
    },

@@ -166,7 +206,7 @@
    delUploadImg(file, fileList) {
      this.dialogData.uploadImgs = fileList
    },
    // 执行上传商品图
    // 执行上传图
    runUploadImg(suc_cb) {
      if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
        this.$refs.refUploadImg.submit()
@@ -174,7 +214,7 @@
        suc_cb && suc_cb()
      }
    },
    // 上传商品图
    // 上传图
    uploadImg(res) {
      console.log(res)
      const file = res.file
@@ -317,8 +357,14 @@
      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
      }

 src/styles/common.scss

@@ -15,9 +15,11 @@
// 表单输入框
.com-edit-input{
    max-width: 400px;
    width: 100%;
}
.el-select.com-edit-input{
    width: 400px;
    max-width: 400px;
    width: 100%;
}

// 列表图片