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" :rules="mainFormRules">
        <el-upload
          class="avatar-uploader"
          :action="baseURL + 'common/upload'"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload">
        </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="img1_url" :preview-src-list="[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="img2_url" :preview-src-list="[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="'活动分享图片:'">
          <div class="images">
            <div class="main-img">
              <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
                <div class="mask" v-show="img3_hover">
                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
                  <i class="el-icon-delete" @click="deleteImage('img3')"></i>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img3')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips">
            <span>尺寸比例为:750*750</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="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: {
        backGroundColor: "#F4F2F2",
      },
      mainFormRules: {
        // img1_url: [
        //   { required: true, message: "请上传活动专区图片", trigger: "blur" },
        // ],
      },
      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,
      img3_url: '',
      img3_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("jsmmall_user")).companyWechatId;
    this.useTemplate = JSON.parse(localStorage.getItem("jsmmall_user")).useTemplate;
   
    this.getactivityGoodsDetail();

    if(item.type == 2){
      this.img1_url=item.popupImage
      this.img2_url=item.popupHeadImage
      this.img3_url=item.popupQrcode
      this.mainForm.backGroundColor=item.popupBackgroundColor
    } else if(item.type==3){
      this.img1_url=item.active1Image
      this.img2_url=item.active1HeadImage
      this.img3_url=item.active1Qrcode
      this.mainForm.backGroundColor=item.active1BackgroundColor
    }
    else if(item.type==4){
      this.img1_url=item.active2LeftImage
      this.img2_url=item.active2LeftHeadImage
      this.img3_url=item.active2LeftQrcode
      this.mainForm.backGroundColor=item.active2LeftBackgroundColor
    }else if(item.type==5){
      this.img1_url=item.active2RightImage
      this.img2_url=item.active2RightHeadImage
      this.img3_url=item.active2RightQrcode
      this.mainForm.backGroundColor=item.active2RightBackgroundColor
    }else if(item.type==6){
      this.img1_url=item.only1Image
      this.img2_url=item.only1HeadImage
      this.img3_url=item.only1Qrcode
      this.mainForm.backGroundColor=item.only1BackgroundColor
    } else if(item.type==7){
      this.img1_url=item.only2Image
      this.img2_url=item.only2HeadImage
      this.img3_url=item.only2Qrcode
      this.mainForm.backGroundColor=item.only2BackgroundColor
    } else if(item.type==8){
      this.img1_url=item.only3Image
      this.img2_url=item.only3HeadImage
      this.img3_url=item.only3Qrcode
      this.mainForm.backGroundColor=item.only3BackgroundColor
    }else  {
      this.img1_url=item.only4Image
      this.img2_url=item.only4HeadImage
      this.img3_url=item.only4Qrcode
      this.mainForm.backGroundColor=item.only4BackgroundColor
    }
  },

  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
      };
      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'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
        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,
      }).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(',')}).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,
              popupQrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 3){
            params1 = {
              active1BackgroundColor: this.mainForm.backGroundColor,
              active1HeadImage: this.img2_url,
              active1Image: this.img1_url,
              active1Qrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 4){
            params1 = {
              active2LeftBackgroundColor: this.mainForm.backGroundColor,
              active2LeftHeadImage: this.img2_url,
              active2LeftImage: this.img1_url,
              active2LeftQrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 5){
            params1 = {
              active2RightBackgroundColor: this.mainForm.backGroundColor,
              active2RightHeadImage: this.img2_url,
              active2RightImage: this.img1_url,
              active2RightQrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 6){
            params1 = {
              only1BackgroundColor: this.mainForm.backGroundColor,
              only1HeadImage: this.img2_url,
              only1Image: this.img1_url,
              only1Qrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 7){
            params1 = {
              only2BackgroundColor: this.mainForm.backGroundColor,
              only2HeadImage: this.img2_url,
              only2Image: this.img1_url,
              only2Qrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 8){
            params1 = {
              only3BackgroundColor: this.mainForm.backGroundColor,
              only3HeadImage: this.img2_url,
              only3Image: this.img1_url,
              only3Qrcode: this.img3_url,
              ...comParams
            }
          } else if(this.type == 9){
            params1 = {
              only4BackgroundColor: this.mainForm.backGroundColor,
              only4HeadImage: this.img2_url,
              only4Image: this.img1_url,
              only4Qrcode: this.img3_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;
  }
}

.page-footer {
  height: 70px;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
  padding: 15px 40px;
  box-sizing: border-box;
  transition: all 0.28s;
  text-align: right;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
  &.hideSidebar {
    margin-left: 54px;
    width: calc(100vw - 54px);
  }
  &.openSidebar {
    margin-left: 210px;
    width: calc(100vw - 210px);
  }
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield;
}
::v-deep .el-form-item__label {
  margin-left: 0px !important;
}
</style>