1.效果

image.png
image.png

2.代码

• vue

<template>
  <div>
    <!-- search -->
    <el-form :model="query" label-width="120px">
      <el-row style="margin-left: -10px; margin-right: -10px;">
        <el-col :span="8">
          <el-button-group style="padding-left:10px">
            <el-button type="primary" size="small" @click="add()">新增</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="16">
          <el-button-group style="float: right">
            <el-button type="primary" icon="el-icon-search" size="small" title="查询" @click="searchCondition()" />
            <el-button type="warning" icon="el-icon-refresh" size="small" title="清空查询条件" @click="reset()" />
          </el-button-group>
          <el-col :span="10">
            <el-form-item label="品牌类型：" style="float:right; padding-right:10px" size="small">
              <el-select v-model="query.param.type" placeholder="请选择品牌类型">
                <el-option label="全部" value="" />
                <el-option label="主品牌" value="1" />
                <el-option label="子品牌" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="快速入口：" style="float:right; padding-right:10px" size="small">
              <el-select v-model="query.param.shortcut" placeholder="请选择快速入口">
                <el-option label="全部" value="" />
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>

    <!-- table -->
    <el-table :data="tableData" border stripe style="width: 100%" >
      <el-table-column prop="id" label="品牌ID" min-width="50" align="center"/>
      <el-table-column label="品牌类型" min-width="80" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == '1'">主品牌</span>
          <span v-if="scope.row.type == '2'">子品牌</span>
        </template>
      </el-table-column>
      <el-table-column prop="brandName" label="品牌名称" min-width="80" align="center"/>
      <el-table-column label="是否是快速入口" min-width="60" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.shortcut == '1'">是</span>
          <span v-if="scope.row.shortcut == '0'">否</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" min-width="100" prop="updateTime" :formatter="formatDate" align="center"/>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.row.id)">查看</el-button>
          <el-button type="text" size="small" @click="update(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div align="right" style="margin-top: 10px;">
      <el-pagination
        :page-sizes="[10,20,30]"
        :page-size.sync="query.pageSize"
        :current-page.sync="query.pageIndex"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="search"
        @current-change="search"
      />
    </div>

    <!--dialog-->
    <el-dialog :title="titles" :visible.sync="dialogFormVisible" :width="dialogWidth" :before-close="closeDiv">
      <el-form :model="form" :rules="ruleForm" ref="form" :disabled="formdisabled">
          <el-row >
            <el-col >
              <el-form-item label="品牌类型:" size="small" label-width="200px" prop="type">
                <el-select v-model="form.type" placeholder="请选择" @change="changeBandType">
                  <el-option label="主品牌" :value=1 ></el-option>
                  <el-option label="子品牌" :value=2 ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        <el-row >
          <el-col >
            <el-form-item label="主品牌列表:" size="small" label-width="200px" prop="mainBrandId" :hidden="changeBandTypeHidden">
              <el-select v-model="form.mainBrandId" placeholder="请选择"  style="width:211px">
                <el-option >请选择</el-option>
                <el-option
                v-for="item in mainBrandList"
                :key="item.id"
                :label="item.brandName"
                :value="item.id">
              </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="品牌名称:" size="small" label-width="200px" prop="brandName">
                <el-input v-model.trim="form.brandName" placeholder="请选择"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col >
              <el-form-item label="品牌logo：" size="small" label-width="200px" prop="brandLogoUrl">
                <span>上传矢量图，仅一张</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="padding-left: 200px;margin-top: -10px">
              <div class="demo-image__preview" :hidden="showLogoImage">
                <el-image style="width: 100px; height: 100px" :src="form.brandLogoUrl" :preview-src-list="srcList">
                </el-image>
              </div>
              <el-upload
                class="avatar-uploader"
                action="/tspeapi/om/brandManage/uploadImg"
                name="uploadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="errorUpload"
                :hidden="showUploadLogoImage">
                <img v-if="form.brandLogoUrl" :src="form.brandLogoUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col >
              <el-form-item label="穷举关键词:" size="small" label-width="200px" style="padding-top: 15px" prop="omBrandKeywords">
                <el-button type="primary" icon="el-icon-plus" class="button-new-tag" size="mini" @click="showInput">添加关键词</el-button>
                <span :hidden="spanHidden" style="color: red;font-size: 8px">单个关键词建议最多10个汉字</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="padding-left: 200px;margin-top: -10px">
                <el-tag
                  :key="tag"
                  v-for="tag in form.omBrandKeywords"
                  :closable="keytag"
                  :disable-transitions="false"
                  @close="handleClose(tag)" style="margin-top: 5px">
                  {{tag.word}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="mini"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="padding-top: 25px">
              <el-form-item label="是否快速入口:" size="small" label-width="200px" prop="shortcut">
                <el-select v-model="form.shortcut" placeholder="请选择" :disabled="isShortcut">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" :hidden="buttonShow">
        <el-button @click="closeDiv()">取 消</el-button>
        <el-button type="primary" @click="save()">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import { oEList } from '@/api/packetManage/oEList'
  export default {
    data() {
      return {
        query: {
          pageSize: 10,
          pageIndex: 1,
          param: {}
        },
        total: 0,
        tableData: [],
        dialogFormVisible: false,
        form:{
          id:'',
          mainBrandId:null,
          brandName:'',
          type: null,
          brandLogoUrl:'',
          omBrandKeywords:[],
          shortcut: null ,
        },
        //穷举
        omBrandQuery:{
          keywordId:'',
          brandId:'',
          word:''
        },
        formdisabled:false,
        keytag:true,
        buttonShow:false,
        inputValue: '',
        inputVisible: false,
        titles:'',
        //主品牌列表
        mainBrandList:[],
        changeBandTypeHidden:true,
        spanHidden:false,//提示语
        isShortcut:false,
        srcList:[],//查看图片时支持放大缩小
        showUploadLogoImage:false,//上传组件图片
        showLogoImage:true,//查看的图片
        ruleForm: {
          type: [{ required: true, message: '请选择品牌类型', trigger: 'change' }],
          brandName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' },
            { min: 2, max: 4, message: '仅支持2-4个字', trigger: 'blur' }
            ],
          brandLogoUrl: [{ required: true, message: '请上传logo', trigger: 'change' }],
          omBrandKeywords: [{ required: true, message: '请输入关键词', trigger: 'blur' }],
          shortcut: [{ required: true, message: '请选择是否是快速入口', trigger: 'change' }],
          mainBrandId: [{ required: true, message: '请选择主品牌', trigger: 'change' }]
        },
      }
    },
    computed: {
      userPermissions() {
        return this.$store.getters.permissions
      }
    },
    mounted() {
      this.search()
    },
    created() {
      this.setDialogWidth()
    },
    methods: {
      //请求主品牌列表
      getMainBrandList(){
        oEList.mainBrandList(this.query).then((res) => {
          this.mainBrandList = res
        })
      },
      reset() {
        this.query.param = {}
        this.query.pageIndex = 1
        this.query.pageSize = 10
        this.search()
      },
      //查询按钮
      searchCondition(){
        this.query.pageIndex = 1
        this.search()
      },
      search() {
        oEList.search(this.query).then((res) => {
          this.tableData = res.items
          this.query.pageIndex = res.pageIndex
          this.query.pageSize = res.pageSize
          this.total = res.totalCount
        })
      },
      //删除
      del(id) {
       let param = JSON.parse(JSON.stringify(this.form))
        param.id = id
        this.$confirm(`确定删除此配置?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              oEList.del(param).then((res) => {
              this.$message.success('删除成功')
              this.search()
            })
          }).catch(() => {
          })
      },
      //适配
      setDialogWidth() {
        var val = document.body.clientWidth
        const def = 800 // 默认宽度
        if (val < def) {
          this.dialogWidth = '80%'
        } else {
          this.dialogWidth = def + 'px'
        }
      },

    //穷举
      handleClose(tag) {
        this.form.omBrandKeywords.splice(this.form.omBrandKeywords.indexOf(tag), 1);
        //调用删除穷举接口传参：tag.id
        if(tag.id!=null && tag.id!=''){
          this.omBrandQuery.keywordId = tag.id
          oEList.delKeyword(this.omBrandQuery)
        }
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //添加标签
      handleInputConfirm() {
        let length = this.form.omBrandKeywords.length
        if(length == 100){
          this.$message.warning('穷举关键词最多100个')
          return false
        }
        const newtag = this.inputValue
        const obj = {
          word: newtag,
          brandId:this.form.id
        }
        if (newtag) {
          this.form.omBrandKeywords.push(obj);
          //编辑页面新增标签调用后台接口时时插入
          if(obj.brandId!=null && obj.brandId!=''){
            oEList.insertKeyword(obj)
          }
        }
        this.inputVisible = false;
        this.inputValue = '';
        this.$refs.form.validateField('omBrandKeywords', (Valid) => {})
      },
      //上传
      handleAvatarSuccess(res, file) {
        if(res.success == false){
          this.$message.error('上传失败')
        }else {
          this.form.brandLogoUrl = res.data
          this.imageUrl = URL.createObjectURL(file.raw);
          this.$refs.form.validateField('brandLogoUrl', (Valid) => {})
        }
      },
      // beforeAvatarUpload(file) {
      //   const isJPG = file.type === 'image/jpeg';
      //   const isLt2M = file.size / 1024 / 1024 < 2;
      //
      //   if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG 格式!');
      //   }
      //   if (!isLt2M) {
      //     this.$message.error('上传头像图片大小不能超过 2MB!');
      //   }
      //   return isJPG && isLt2M;
      // },
      errorUpload(err,file,fileList){

      },
      //新增
      add(){
        this.showUploadLogoImage = false
        this.showLogoImage=true
        this.dialogFormVisible = true;
        this.titles = '新建配置'
        this.getMainBrandList()
        console.log(JSON.stringify(this.form))
      },
      //保存
      save(){
        if(this.form.type == 2){//子品牌
          this.$refs.form.validate((valid) => {
            if (valid) {
              debugger
              oEList.addOrUpdate(this.form).then((res) => {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.closeDiv()
                this.search()
              })
            } else {
              return false
            }
          })
        }else{
          let callback = false
          this.$refs.form.validateField('type', (Valid) => { if (Valid) callback = true})
          this.$refs.form.validateField('brandName', (Valid) => { if (Valid) callback = true})
          this.$refs.form.validateField('brandLogoUrl', (Valid) => { if (Valid) callback = true})
          this.$refs.form.validateField('omBrandKeywords', (Valid) => { if (Valid) callback = true})
          this.$refs.form.validateField('shortcut', (Valid) => { if (Valid) callback = true})
          if(callback) return
          debugger
          oEList.addOrUpdate(this.form).then((res) => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.closeDiv()
            this.search()
          })
        }
      },
      //修改
      update(id){
        this.getMainBrandList()
        this.dialogFormVisible = true;
        this.showUploadLogoImage = false
        this.showLogoImage=true
        this.titles = '编辑配置'
        let param = JSON.parse(JSON.stringify(this.form))
        param.id = id
        oEList.searchById(param).then((res) => {
          this.form = res
          this.changeBandType()
        })
      },
      //查看
      detail(id){
        this.getMainBrandList()
        this.formdisabled = true;
        this.spanHidden = true;
        this.dialogFormVisible = true;
        this.buttonShow = true;
        this.keytag = false;
        this.titles = '查看配置'
        this.showUploadLogoImage = true
        this.showLogoImage=false
        let param = JSON.parse(JSON.stringify(this.form))
        param.id = id
        oEList.searchById(param).then((res) => {
          this.form = res
          this.changeBandType()
          this.srcList.push(this.form.brandLogoUrl)
          this.srcList.push(this.form.brandLogoUrl)
        })
      },
      closeDiv(){
        this.dialogFormVisible = false;
        this.keytag = true;
        this.$refs['form'].resetFields()
        this.form.id=null
        this.formdisabled = false
        this.buttonShow = false
        this.spanHidden = false
      },
      //时间转换
      formatDate(row, column){
        let date = row[column.property]
        console.log(date);
        let d = new Date(date);
        let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
        let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
        let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
        let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
        let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
        console.log(times);
        return times;
      },
      //子品牌时控制准品牌是否显示，入口默认为是否
      changeBandType(){
        if(this.form.type == 2){
          this.changeBandTypeHidden = false
          this.isShortcut = true
          this.form.shortcut = 0
        }else{
          this.changeBandTypeHidden = true
          this.form.mainBrandId = null
          this.isShortcut = false
          this.form.shortcut = null
        }
      }
    }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    text-align:center;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

• 接口

import request from '@/utils/request'

export const oEList = {
  addOrUpdate: (body) => request({ url: '/tspeapi/om/brandManage/addOrUpdateOmBrand', method: 'post', data: body }),//新增或修改列表
  search: (body) => request({ url: '/tspeapi/om/brandManage/querySystemLogPage', method: 'post', data: body }),//查询列表
  searchById: (body) => request({ url: '/tspeapi/om/brandManage/getOmBrandById', method: 'post', data: body }),//根据id查询列表详情
  del: (body) => request({ url: '/tspeapi/om/brandManage/delOmBrandById', method: 'post', data: body }),//删除配置
  insertKeyword: (body) => request({ url: '/tspeapi/om/brandManage/addOmBrandKeyword', method: 'post', data: body }),//新增穷举
  delKeyword: (body) => request({ url: '/tspeapi/om/brandManage/delOmBrandKeywordById', method: 'post', data: body }),//删除穷举
  mainBrandList: (body) => request({ url: '/tspeapi/om/brandManage/mainBrandList', method: 'post', data: body }), //获取主品牌列表
  uploadImg: (body) => request({ url: '/tspeapi/om/brandManage/uploadImg', method: 'post', data: body }), //上传logo
}