zfire-newmall-admin/src/views/mallManagement/activity/special_set/index.vue

<template>
  <div class="app-container">
    <!-- 活动专区配置 -->
    <el-page-header @back="goBack" :content="activityName"></el-page-header>
    <el-divider></el-divider>

    <div class="form-container">
      <el-form ref="mainForm" :model="mainForm">
        <template v-if="type == 10 || type == 11 || type == 12">
          <el-form-item :label="'活动专区主标题:'" prop="title1">
            <el-input
              v-model="mainForm.title1"
              placeholder="请输入活动专区主标题"
              style="width: 300px"
              maxlength="6"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item :label="'活动专区副标题:'" prop="title2">
            <el-input
              v-model="mainForm.title2"
              placeholder="请输入活动专区副标题"
              style="width: 300px"
              maxlength="6"
              show-word-limit
            ></el-input>
          </el-form-item>
        </template>

        <el-upload
          class="avatar-uploader"
          :action="baseURL + 'common/upload'"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
          style="height: 0"
        >
        </el-upload>
        <el-form-item :label="'活动专区图片:'" prop="img1_url">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="img1_url" @mouseover="img1_hover = true" @mouseout="img1_hover = false">
                <el-image
                  ref="img1"
                  :src="$showImgUrl(img1_url)"
                  :preview-src-list="[$showImgUrl(img1_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="img1_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img1')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips">
            <span>尺寸比例为:{{ ratio }}</span>
          </div>
        </el-form-item>

        <el-form-item :label="'活动专区表头图片:'">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="img2_url" @mouseover="img2_hover = true" @mouseout="img2_hover = false">
                <el-image
                  ref="img2"
                  :src="$showImgUrl(img2_url)"
                  :preview-src-list="[$showImgUrl(img2_url)]"
                  style="width: 120px; height: 120px"
                  fit="contain"
                ></el-image>
                <div class="mask" v-show="img2_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
                  <i class="el-icon-delete" @click="deleteImage('img2')"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img2')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips">
            <span>尺寸比例为:750*800</span>
          </div>
        </el-form-item>
        <el-form-item :label="'活动专区背景颜色:'" prop="backGroundColor">
          <div style="display: flex">
            <el-color-picker v-model="mainForm.backGroundColor"> </el-color-picker>
            <el-button style="margin-left: 20px" @click="resetFn">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-group">
      <el-button size="small" type="primary" @click="addClassify">选择分类</el-button>
      <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
    </div>

    <div class="diy-table">
      <div class="table-head clearfix">
        <div class="item goods">商品名称</div>
        <div class="right">
          <div class="item name">规格</div>
          <div class="item input">划线价格</div>
          <div class="item input">销售价</div>
          <div class="item input">分销金额</div>
          <div class="item input">佣金比例</div>
          <div class="item input">内部分销金额</div>
          <div class="item input">内部佣金比例</div>
          <div class="item input">库存</div>
          <div class="item input">销量</div>
        </div>
        <div class="blank">操作</div>
      </div>
      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <div class="goods-info">
          <img :src="$showImgUrl(item.imgUrl)" alt="" />
          {{ item.goodsName }}
        </div>
        <div class="spec-list">
          <div class="spec-item" v-for="(it, idx) in item.goodsSpecs" :key="idx">
            <div class="col name">{{ it.name }}-{{ it.specValue }}</div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.orgPrice"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.price"></el-input></div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.shareAmount"></el-input>
            </div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input>
            </div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.innerShareAmount"></el-input>
            </div>
            <div class="col input">
              <el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input>
            </div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.stockNum"></el-input></div>
            <div class="col input"><el-input disabled type="number" size="small" v-model="it.soldNum"></el-input></div>
          </div>
        </div>
        <div class="operation">
          <el-button type="text" style="color: #f56c6c" @click="deleteGoods(item.goodsId, index)">删除</el-button>
        </div>
      </div>
      <div class="empty-text" v-if="goodsList.length < 1">暂无数据</div>
    </div>

    <div class="page-footer">
      <div class="footer" :class="classObj">
        <el-button type="primary" @click="submitMainForm" :loading="formLoading">{{
          formLoading ? '提交中 ...' : '提 交'
        }}</el-button>
        <el-button @click="goBack">关 闭</el-button>
      </div>
    </div>

    <!-- 选择商品 -->
    <el-dialog
      title="选择商品"
      :visible.sync="addGoodsVisible"
      :show-close="false"
      width="50%"
      :close-on-click-modal="false"
    >
      <div class="dialog-container clearfix">
        <div class="left fl">
          <div class="item" @click="changeClassify('')">全部分类</div>
          <div class="group" v-for="(item, index) in classifyList" :key="index">
            <div class="item" @click="toggleOpen(index)">
              <i :class="item.isOpen ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i> {{ item.name }}
            </div>
            <div class="child" v-if="item.isOpen">
              <div
                class="item"
                v-for="(childItem, childIndex) in item.children"
                :key="childIndex"
                @click="changeClassify(childItem.categoryId)"
              >
                {{ childItem.name }}
              </div>
            </div>
          </div>
        </div>

        <div class="right fl">
          <div class="search">
            <el-input
              placeholder="请输入商品名称进行搜索"
              v-model="keyword"
              class="input-with-select"
              clearable
              size="small"
              style="width: 250px"
            >
              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
            </el-input>
          </div>
          <div class="table" style="margin: 10px 0 20px">
            <el-table
              v-loading="table_listLoading"
              :data="table_dataList"
              element-loading-text="Loading"
              tooltip-effect="dark"
              style="width: 100%"
              max-height="270"
              @selection-change="handleChooseGoods"
            >
              <el-table-column
                align="center"
                type="selection"
                :selectable="checkboxSelect"
                width="45"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="goodsName"
                label="商品名称"
                min-width="200"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination
                @current-change="handleTableCurrentChange"
                :current-page="table_currentPage"
                :page-size="table_pageSize"
                background
                layout="prev, pager, next"
                :total="table_listTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
        <el-button @click="cancelAddGoods">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择分类 -->
    <el-dialog
      title="选择分类"
      :visible.sync="addClassifyVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="classify-list">
        <el-tree
          :data="classifyList"
          show-checkbox
          default-expand-all
          node-key="categoryId"
          ref="tree"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
        <el-button @click="cancelAddClassify">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import {
  getactivityGoodsDetail,
  addActiveGoods,
  editEnterpriseTemplate,
  getClassifyList,
  getGoodsList,
  getMoreGoodsList
} from '@/api/special'
export default {
  data() {
    return {
      companyWechatId: '',
      useTemplate: '',
      activityName: '', // 头部标题
      ratio: '',
      objectId: '', // 小程序模板id
      type: '', // 类型
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { 'x-token': getToken() },
      formLoading: false,
      mainForm: {
        title1: '',
        title2: '',
        backGroundColor: '#F4F2F2'
      },
      goodsList: [], // 列表数据

      addGoodsVisible: false,

      classifyList: [],
      classifyCurrent: '',
      keyword: '',
      table_dataList: null, // 列表数据
      table_listLoading: true, // 列表加载loading
      table_currentPage: 1, // 当前页码
      table_pageSize: 10, // 每页数量
      table_listTotal: 0, // 列表总数
      table_chooseGoods: [], // table中 当前选择商品

      addClassifyVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      uploadImageType: null,
      img1_url: '',
      img1_hover: false,
      img2_url: '',
      img2_hover: false
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened
      }
    }
  },
  created() {
    const { item } = this.$route.query
    this.activityName = item.activityName
    this.objectId = item.objectId
    this.type = item.type
    this.ratio = item.ratio

    this.companyWechatId = JSON.parse(localStorage.getItem('greemall_user')).companyWechatId
    this.useTemplate = JSON.parse(localStorage.getItem('greemall_user')).useTemplate

    this.getactivityGoodsDetail()

    if (item.type == 2) {
      this.img1_url = item.popupImage
      this.img2_url = item.popupHeadImage
      this.mainForm.backGroundColor = item.popupBackgroundColor
    } else if (item.type == 3) {
      this.img1_url = item.active1Image
      this.img2_url = item.active1HeadImage
      this.mainForm.backGroundColor = item.active1BackgroundColor
    } else if (item.type == 4) {
      this.img1_url = item.active2LeftImage
      this.img2_url = item.active2LeftHeadImage
      this.mainForm.backGroundColor = item.active2LeftBackgroundColor
    } else if (item.type == 5) {
      this.img1_url = item.active2RightImage
      this.img2_url = item.active2RightHeadImage
      this.mainForm.backGroundColor = item.active2RightBackgroundColor
    } else if (item.type == 6) {
      this.img1_url = item.only1Image
      this.img2_url = item.only1HeadImage
      this.mainForm.backGroundColor = item.only1BackgroundColor
    } else if (item.type == 7) {
      this.img1_url = item.only2Image
      this.img2_url = item.only2HeadImage
      this.mainForm.backGroundColor = item.only2BackgroundColor
    } else if (item.type == 8) {
      this.img1_url = item.only3Image
      this.img2_url = item.only3HeadImage
      this.mainForm.backGroundColor = item.only3BackgroundColor
    } else if (item.type == 9) {
      this.img1_url = item.only4Image
      this.img2_url = item.only4HeadImage
      this.mainForm.backGroundColor = item.only4BackgroundColor
    } else if (item.type == 10) {
      this.img1_url = item.topics1Image
      this.img2_url = item.topics1HeadImage
      this.mainForm.backGroundColor = item.topics1BackgroundColor
      this.mainForm.title1 = item.topics1Title
      this.mainForm.title2 = item.topics1Title2
    } else if (item.type == 11) {
      this.img1_url = item.topics2Image
      this.img2_url = item.topics2HeadImage
      this.mainForm.backGroundColor = item.topics2BackgroundColor
      this.mainForm.title1 = item.topics2Title
      this.mainForm.title2 = item.topics2Title2
    } else if (item.type == 12) {
      this.img1_url = item.topics3Image
      this.img2_url = item.topics3HeadImage
      this.mainForm.backGroundColor = item.topics3BackgroundColor
      this.mainForm.title1 = item.topics3Title
      this.mainForm.title2 = item.topics3Title2
    } else if (item.type == 13) {
      this.img1_url = item.bottomBannerImage
      this.img2_url = item.bottomBannerHeadImage
      this.mainForm.backGroundColor = item.bottomBannerBackgroundColor
    }
  },

  methods: {
    // 更改模板信息
    editEnterpriseTemplate(params) {
      editEnterpriseTemplate(params).then(res => {
        console.log('更改模板信息', res)
      })
    },

    // 添加活动商品
    addActiveGoods(params) {
      addActiveGoods(params).then(res => {
        if (res.code == 200) {
          this.$router.go(-1)
        }
      })
    },

    // 获取活动商品详情
    getactivityGoodsDetail() {
      const params = {
        objectId: this.objectId, // 小程序模板id
        type: this.type // 类型: 1=新维度分类，2=首页弹窗，3=活动专区1，4=活动专区2左侧，5=活动专区2右侧，6=专场专区1，7=专场专区2，8=专场专区3，9=专场专区4，10=专题精选1，11=专题精选2，12=专题精选3，13=底部广告图
      }
      getactivityGoodsDetail(params).then(res => {
        res.data.activeGoodsList.forEach(item => {
          item.imgUrl = item.goods.imgUrl
        })

        this.goodsList = res.data.activeGoodsList
      })
    },

    // 重置
    resetFn() {
      this.mainForm.backGroundColor = '#F4F2F2'
    },

    // 删除商品
    deleteGoods(item, index) {
      this.goodsList.splice(index, 1)
    },

    uploadImage(type) {
      this.uploadImageType = type
      document.querySelector('.avatar-uploader input').click()
    },

    // 上传图片
    uploadSuccess(res, file) {
      this[this.uploadImageType + '_url'] = res.data.url
    },

    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      const whiteList = ['jpg', 'jpeg', 'png', 'gif']
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png/gif文件!')
        return false
      }
    },

    // 预览图片
    previewImage(type) {
      this.$refs[type].showViewer = true
    },

    // 删除图片
    deleteImage(type) {
      this[type + '_url'] = ''
    },

    // 返回
    goBack() {
      this.$router.go(-1)
    },

    // 获取分类列表
    getClassifyList(state) {
      getClassifyList({ categoryLevel: 1, status: true }).then(res => {
        res.data.forEach(item => {
          item.isOpen = false
        })
        this.classifyList = res.data
        this.classifyCurrent = ''
        if (!state) {
          this.getGoodsList()
        }
      })
    },

    // 展开/收起 分类
    toggleOpen(index) {
      this.classifyList[index].isOpen = !this.classifyList[index].isOpen
    },

    // 切换分类
    changeClassify(cid) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分类')
      }
      this.classifyCurrent = cid
      this.table_currentPage = 1
      this.getGoodsList()
    },

    // 搜索
    getGoodsListByScreen() {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可搜索')
      }
      this.table_currentPage = 1
      this.getGoodsList()
    },

    // 获取商品列表
    getGoodsList() {
      getGoodsList({
        pageNum: this.table_currentPage,
        pageSize: this.table_pageSize,
        keyword: this.keyword,
        categoryId: this.classifyCurrent,
        status: true
      }).then(res => {
        let oldGoodsList = this.goodsList
        let newGoodsList = res.data.records
        for (let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for (let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if (newItem.goodsId === oldItem.goodsId) {
              newGoodsList[j].selected = true
              break
            }
          }
        }
        for (let j = 0; j < newGoodsList.length; j++) {
          let newItem = newGoodsList[j]
          if (newItem.promotionGroup === true) {
            newGoodsList[j].selected = true
          }
        }
        this.table_dataList = newGoodsList
        this.table_listTotal = res.data.total
        this.table_listLoading = false
      })
    },

    // 查询重复值并禁选
    checkboxSelect(row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      } else {
        return true // 不禁用
      }
    },

    // 更改列表当前页
    handleTableCurrentChange(val) {
      if (this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分页')
      }
      this.table_currentPage = val
      this.getGoodsList()
    },

    // table点击选择商品
    handleChooseGoods(val) {
      this.table_chooseGoods = val
    },

    // 打开 选择商品
    addGoods() {
      this.addGoodsVisible = true
      this.getClassifyList()
    },

    // 取消 选择商品
    cancelAddGoods() {
      this.addGoodsVisible = false
    },

    // 提交 选择商品
    submitAddGoods() {
      let oldGoodsList = this.goodsList
      let newGoodsList = this.table_chooseGoods
      this.goodsList = oldGoodsList.concat(newGoodsList)
      this.addGoodsVisible = false
    },

    // 打开 选择分类
    addClassify() {
      this.addClassifyVisible = true
      this.getClassifyList(true)
    },

    // 取消 选择分类
    cancelAddClassify() {
      this.addClassifyVisible = false
    },

    // 提交 选择分类
    submitAddClassify() {
      if (this.$refs.tree.getCheckedNodes().length <= 0) {
        return this.$errorMsg('请选择分类')
      }
      let checkeds = this.$refs.tree.getCheckedNodes()
      let ids = []
      checkeds.forEach(item => {
        if (item.level === 2) {
          ids.push(item.categoryId)
        }
      })
      getMoreGoodsList({ categoryIds: ids.join(','), status: true }).then(res => {
        let oldGoodsList = this.goodsList
        let newGoodsList = []
        res.data.forEach(item => {
          if (item.promotionGroup === false) {
            newGoodsList.push(item)
          }
        })
        let allGoodsList = oldGoodsList.concat(newGoodsList)
        let showGoodsList = []
        let obj = {}
        for (var i = 0; i < allGoodsList.length; i++) {
          if (!obj[allGoodsList[i].goodsId]) {
            showGoodsList.push(allGoodsList[i])
            obj[allGoodsList[i].goodsId] = true
          }
        }
        this.goodsList = showGoodsList
        this.addClassifyVisible = false
      })
    },

    // 提交
    submitMainForm() {
      this.$refs.mainForm.validate(valid => {
        if (valid) {
          const params = {
            goodsList: this.goodsList,
            objectId: this.objectId,
            type: this.type
          }
          this.addActiveGoods(params)

          let comParams = {
            companyWechatTemplateId: this.objectId,
            companyWechatId: this.companyWechatId,
            templateType: this.useTemplate
          }
          let params1 = {}

          if (this.type == 2) {
            params1 = {
              popupBackgroundColor: this.mainForm.backGroundColor,
              popupHeadImage: this.img2_url,
              popupImage: this.img1_url,
              ...comParams
            }
          } else if (this.type == 3) {
            params1 = {
              active1BackgroundColor: this.mainForm.backGroundColor,
              active1HeadImage: this.img2_url,
              active1Image: this.img1_url,
              ...comParams
            }
          } else if (this.type == 4) {
            params1 = {
              active2LeftBackgroundColor: this.mainForm.backGroundColor,
              active2LeftHeadImage: this.img2_url,
              active2LeftImage: this.img1_url,
              ...comParams
            }
          } else if (this.type == 5) {
            params1 = {
              active2RightBackgroundColor: this.mainForm.backGroundColor,
              active2RightHeadImage: this.img2_url,
              active2RightImage: this.img1_url,
              ...comParams
            }
          } else if (this.type == 6) {
            params1 = {
              only1BackgroundColor: this.mainForm.backGroundColor,
              only1HeadImage: this.img2_url,
              only1Image: this.img1_url,
              ...comParams
            }
          } else if (this.type == 7) {
            params1 = {
              only2BackgroundColor: this.mainForm.backGroundColor,
              only2HeadImage: this.img2_url,
              only2Image: this.img1_url,
              ...comParams
            }
          } else if (this.type == 8) {
            params1 = {
              only3BackgroundColor: this.mainForm.backGroundColor,
              only3HeadImage: this.img2_url,
              only3Image: this.img1_url,
              ...comParams
            }
          } else if (this.type == 9) {
            params1 = {
              only4BackgroundColor: this.mainForm.backGroundColor,
              only4HeadImage: this.img2_url,
              only4Image: this.img1_url,
              ...comParams
            }
          } else if (this.type == 10) {
            params1 = {
              topics1BackgroundColor: this.mainForm.backGroundColor,
              topics1HeadImage: this.img2_url,
              topics1Image: this.img1_url,
              topics1Title: this.mainForm.title1,
              topics1Title2: this.mainForm.title2,
              ...comParams
            }
          } else if (this.type == 11) {
            params1 = {
              topics2BackgroundColor: this.mainForm.backGroundColor,
              topics2HeadImage: this.img2_url,
              topics2Image: this.img1_url,
              topics2Title: this.mainForm.title1,
              topics2Title2: this.mainForm.title2,
              ...comParams
            }
          } else if (this.type == 12) {
            params1 = {
              topics3BackgroundColor: this.mainForm.backGroundColor,
              topics3HeadImage: this.img2_url,
              topics3Image: this.img1_url,
              topics3Title: this.mainForm.title1,
              topics3Title2: this.mainForm.title2,
              ...comParams
            }
          } else if (this.type == 13) {
            params1 = {
              bottomBannerBackgroundColor: this.mainForm.backGroundColor,
              bottomBannerHeadImage: this.img2_url,
              bottomBannerImage: this.img1_url,
              ...comParams
            }
          }
          this.editEnterpriseTemplate(params1)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  margin-top: 40px;
  // padding: 0 6%;
  .title {
    font-size: 16px;
    margin-bottom: 30px;
    padding-left: 10px;
    font-weight: bold;
  }
  .tips {
    margin-top: 10px;
    span {
      display: inline-block;
      width: 300px;
      text-align: center;
      line-height: 32px;
      background: #ffefef;
      font-size: 14px;
      color: #f66460;
    }
  }
  .tips2 {
    font-size: 12px;
    color: #999999;
    line-height: 30px;
  }
  .container {
    padding: 10px 20px 0;
    background: #f5f5f5;
    border-radius: 10px;
  }
  .addBtn {
    padding: 10px 0;
  }
}

.dialog-container {
  .left {
    width: 140px;
    height: 350px;
    overflow-y: scroll;
    .group {
      margin-top: 10px;
    }
    .child {
      margin-top: 5px;
      .item {
        padding-left: 18px;
      }
    }
    .item {
      cursor: pointer;
      line-height: 24px;
    }
  }
  .right {
    width: calc(100% - 140px);
    height: 350px;
    box-sizing: border-box;
    padding-left: 20px;
  }
}

.images {
  display: flex;
  flex-wrap: wrap;
  .main-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    margin-right: 20px;
    .img {
      border: 1px dashed #eaeaea;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      .el-image {
        display: block;
      }
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 120px;
        height: 120px;
        background: rgba($color: #000000, $alpha: 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          font-size: 20px;
          color: #ffffff;
          cursor: pointer;
          margin: 0 8px;
        }
      }
    }
    .text {
      font-size: 14px;
      color: #666666;
    }
  }
  .add {
    width: 120px;
    height: 120px;
    border: 1px dashed #eaeaea;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 30px;
      color: #999;
    }
  }
  .tmp-img {
    position: relative;
    .tmp {
      position: absolute;
      left: 0;
      top: 0;
      line-height: 20px;
      padding: 0 8px;
      background: #f66460;
      border-radius: 0 0 10px 0;
      font-size: 12px;
      color: #ffffff;
    }
  }
}

.classify-list {
  height: 50vh;
  overflow-y: scroll;
}

.diy-table {
  overflow-x: scroll;
  border-left: 1px solid #f5f5f5;
  margin-top: 20px;
  width: 100%;
  // margin-left: 77px;
  // min-width: 1185px;
  max-width: 100%;
  .table-head {
    display: flex;
    .item {
      height: 40px;
      line-height: 40px;
      float: left;
      font-weight: 500;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
    }
    .right {
      float: left;
      width: 94%;
      min-width: 1150px;
      flex-shrink: 0;
      height: 40px;
    }
    .goods {
      width: 20%;
      min-width: 250px;
    }
    .name {
      width: 11.1111%;
      min-width: 100px;
    }
    .input {
      width: 11.1111%;
      min-width: 100px;
    }
    .opera {
      width: 11.1111%;
      min-width: 80px;
      // text-align: right;
    }
    .blank {
      width: 6%;
      min-width: 90px;
      font-weight: 500;
      font-size: 14px;
      background: #f5f5f5;
      text-align: center;
      line-height: 40px;
    }
  }
  .goods-item {
    display: flex;
    align-content: center;
    .goods-info {
      flex-shrink: 0;
      width: 20%;
      min-width: 250px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
      font-size: 14px;
      &:last-child {
        border-bottom: none;
      }
      img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        flex-shrink: 0;
      }
    }
    .spec-list {
      width: 94%;
      min-width: 1150px;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
      &:last-child {
        border-bottom: none;
      }
      .spec-item {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        &:last-child {
          border-bottom: none;
        }
        .col {
          flex-shrink: 0;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 10px;
          border-right: 1px solid #f5f5f5;
          &:last-child {
            border-right: none;
          }
        }
        .name {
          width: 11.1111%;
          min-width: 100px;
          font-size: 14px;
          text-align: center;
        }
        .input {
          width: 11.1111%;
          min-width: 100px;
        }
        .btn {
          width: 11.1111%;
          min-width: 80px;
        }
      }
    }
    .operation {
      flex-shrink: 0;
      width: 6%;
      min-width: 90px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #f5f5f5;
      border-right: 1px solid #f5f5f5;
    }
  }
  .empty-text {
    line-height: 60px;
    text-align: center;
    color: #909399;
  }
}

.dialog-container {
  .left {
    width: 140px;
    height: 350px;
    overflow-y: scroll;
    .group {
      margin-top: 10px;
    }
    .child {
      margin-top: 5px;
      .item {
        padding-left: 18px;
      }
    }
    .item {
      cursor: pointer;
      line-height: 24px;
    }
  }
  .right {
    width: calc(100% - 140px);
    height: 350px;
    box-sizing: border-box;
    padding-left: 20px;
  }
}

::v-deep .el-form-item__label {
  margin-left: 0px !important;
}
</style>