ceres-admin-web-v2.0/src/views/renovation/commdityClass/Edit.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :type="type"
    :visible.sync="isVisible"
    center
    width="48%"
    top="50px"
    class="group-dialog"
  >
    <div class="add-dialog-component">
      <el-alert
        :style="{ backgroundColor: '#fff' }"
        title="保存后将生效在移动端的分类里"
        type="info"
        :closable="false"
      />
      <el-tree
        class="tree-box"
        :data="treeData"
        :props="{ children: 'childs' }"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <div
          slot-scope="{ node, data }"
          class="custom-tree-node"
        >
          <div class="content">
            <el-input

                v-model="data.classifyName_ZH"
                class="input"
                :disabled="isCheck"
                maxlength="60"
                size="mini"
                :placeholder="data.classifyLevel | placeholderTips"
              />
              <el-input

                v-model="data.classifyName_EN"
                class="input"
                :disabled="isCheck"
                maxlength="60"
                size="mini"
                :placeholder="data.classifyLevel | placeholderEnTips"
              />
              <el-upload
                class="upload-uploader"
                :on-success="handleImageSuccess"
                :multiple="false"
                :show-file-list="false"
                :action="action"
                :file-list="data.classifyImageArray"
              >
                <img
                  v-if="data.classifyImageArray.length && data.classifyImageArray[0].url"
                  width="80"
                  height="80"
                  :src="data.classifyImageArray.length && data.classifyImageArray[0].url"
                >
                <div  v-else>
                  <i class="el-icon-plus" /> <span style="display:none; font-size: 10px; color: #909399 !important;">建议尺寸:1252*356</span>
                  </div>

              </el-upload>
            <!-- <template v-if="data.classifyLevel < 3">

            </template>
            <template v-else>
              <div
                class="content"
                :class="isCheck ? 'disabled' : ''"
              >
                <el-input
                  v-model="data.classifyName"
                  class="input"
                  :disabled="isCheck"
                  size="mini"
                  maxlength="6"
                  placeholder="输入三级类别名称（最大6个字符）"
                />
                <el-upload
                  :headers="headers"
                  :data="dataObj"
                  :multiple="false"
                  :show-file-list="false"
                  :file-list="data.classifyImageArray"
                  :on-success="handleImageSuccess"
                  class="upload-uploader"
                  :action="action"
                >
                  <img
                    v-if="
                      data.classifyImageArray && data.classifyImageArray[0].url
                    "
                    width="80"
                    height="80"
                    :src="
                      data.classifyImageArray && data.classifyImageArray[0].url
                    "
                  >
                  <i
                    v-else
                    class="el-icon-plus"
                  />
                </el-upload>
              </div>
            </template> -->
          </div>
          <div
            v-if="!isCheck"
            class="setting-box"
          >
            <el-button
              v-if="data.classifyLevel != 3"
              type="text"
              size="mini"
              @click="() => append(data)">
              {{ data.classifyLevel | addTips }}
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >删除
            </el-button>
          </div>
        </div>
      </el-tree>
      <div class="add-btn-wrap">
        <template v-if="isCheck">
          <el-button
            class="add"
            type="primary"
            size="small"
            @click="close"
          >确定
          </el-button>
        </template>
        <template v-else>
          <el-button
            v-if="type === 'add'"
            class="add"
            type="primary"
            size="small"
            @click="addClassification"
          >添加一级类别名称
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
          >保存
          </el-button>
        </template>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { uploadUrl } from '@/utils/request'
import {
  getSelect,
  commdityClassAdd,
  commdityClassgetById,
  commdityClassUpdate
} from '@/api/renovation'

let idx = 1000
export default {
  filters: {
    addTips (classifyLevel) {
      classifyLevel = classifyLevel + ''
      const tipsMp = {
        1: '添加二级类别名称',
        2: '添加三级类别名称',
        3: ''
      }
      return tipsMp[classifyLevel]
    },
    placeholderTips (classifyLevel) {
      classifyLevel = classifyLevel + ''
      const tipsMp = {
        1: '输入一级类别中文名称（最大6个字符）',
        2: '输入二级类别中文名称（最大6个字符）',
        3: '输入三级类别中文名称（最大6个字符）'
      }
      return tipsMp[classifyLevel]
    },

    placeholderEnTips (classifyLevel) {
      classifyLevel = classifyLevel + ''
      const tipsMp = {
        1: '输入一级类别英文名称（最大60个字符）',
        2: '输入二级类别英文名称（最大60个字符）',
        3: '输入三级类别英文名称（最大60个字符）'
      }
      return tipsMp[classifyLevel]
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data () {
    return {
      params: {
        classifyName: ''
      },
      file: this.image ? this.image : '',
      imgList: [],
      customParams: {
        current: 1,
        map: {},
        model: {
          config: '',
          isCustom: true,
          isDelete: 0,
          name: ''
        },
        order: 'descending',
        size: 100,
        sort: 'id'
      },
      treeData: [],
      headers: {
        Authorization: ''
      },
      action: uploadUrl,
      dataObj: {
        folderId: 1
      },
      deleteArr: []
    }
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible
      },
      set () {
        this.close()
        this.reset()
      }
    },
    title () {
      const stateMap = {
        add: '新建类别',
        edit: '修改类别',
        check: '查看类别'
      }
      return stateMap[this.type]
    },
    isCheck () {
      return this.type === 'check'
    }
  },
  async created () {
    /*
    const res = await getSelect({
      dictName: '商品类别链接'
    })
    console.log(res)
    this.dictList = res.data
    */
  },
  methods: {
    async queryOneCategory (oneClassifyId) {
      console.log(oneClassifyId)
      if (oneClassifyId === undefined) {
        this.treeData = []
        return
      }
      const res = await commdityClassgetById({
        oneClassifyId
      })
      const resData = res.data
      console.log("resData--->", resData)

      this.initLangInfo(resData)
      this.initImageArray(resData)
      if (resData) {
        this.treeData = [resData]
      } else {
        this.treeData = []
      }
      // console.log("treeData--->", this.treeData)
    },

    initLangInfo(resData){
      // console.log("resData.langInfoMap['zh']--->", resData.langInfoMap['zh'])
      // console.log("resData.langInfoMap['en']--->", resData.langInfoMap['en'])
      if(resData && resData.langInfoMap && resData.langInfoMap['zh']){
        resData.classifyName_ZH = resData.langInfoMap['zh'].classifyName;
      }else{
        resData.classifyName_ZH = "";
      }
      if(resData && resData.langInfoMap && resData.langInfoMap['en']){
        resData.classifyName_EN = resData.langInfoMap['en'].classifyName;
      }else{
        resData.classifyName_EN = "";
      }
      if(resData.childs && resData.childs.length){
        for (const index in resData.childs) {
          this.initLangInfo(resData.childs[index])
        }
      }
    },

    initImageArray(treeData){
      if(treeData){
        treeData.classifyImageArray = [
          {
            url: treeData.classifyImage
          }
        ]
        treeData.idx = idx++
        if(treeData.childs && treeData.childs.length){
          for (const index in treeData.childs) {
            this.initImageArray(treeData.childs[index])
          }
        }else{
          treeData.childs = []
        }
      }
    },
    handleImageSuccess (response, file, fileList) {
      console.log(response)
      const url = response.data.url
      fileList[0].url = url
    },
    close () {
      this.$emit('close')
    },
    reset () {
      this.treeData = []
    },
    addClassification () {
      this.treeData.push({
        idx: idx++,
        classifyId: 0,
        classifyPid: 0,
        classifyName_ZH: '',
        classifyName_EN: '',
        classifyImage: '',
        classifyLevel: 1,
        link: '',
        classifyImageArray: [
          {
            url: ''
          }
        ],
        childs: []
      })
    },
    append (data) {
      const classifyLevel = data.classifyLevel + 1
      console.log(data)
      let newChild
      if (!data.childs) {
        this.$set(data, 'childs', [])
      }
      console.log(data)
      newChild = {
        idx: idx++,
        classifyId: 0,
        classifyPid: 0,
        classifyName_ZH: '',
        classifyName_EN: '',
        classifyImage: '',
        classifyLevel: classifyLevel,
        link: '',
        classifyImageArray: [
          {
            url: ''
          }
        ],
        childs: []
      }
      data.childs.push(newChild)
      console.log(data)
    },
    remove (node, data) {
      const parent = node.parent
      const children = parent.data.childs || parent.data
      const index = children.findIndex(d => d.idx === data.idx)
      if (index !== -1) {
        children.splice(index, 1)
        if (data.classifyId && data.classifyId > 0) {
          this.deleteArr.push(data.classifyId)
        }
      } else {
        this.$message.warning('数据错误，请重试')
      }
    },
    onSubmit () {
      if (this.type === 'add') {
        this.addGroup()
      } else {
        this.updateGroup()
      }
    },
    resetImage(treeData){
      console.log(treeData)
      if(treeData){
        treeData.classifyImage = ''
        if(treeData.classifyImageArray && treeData.classifyImageArray.length){
          treeData.classifyImage = treeData.classifyImageArray[0].url
        }
        if (!treeData.classifyImage) {
          this.$message.error('分类\"' + treeData.classifyName + '\"请上传分类图片')
          throw new Error('未上传分类图片')
        }
        if(treeData.childs && treeData.childs.length){
          for (const index in treeData.childs) {
            this.resetImage(treeData.childs[index])
          }
        }
      }
    },
    async addGroup () {
      const params = this.treeData


      if (params.length === 0) {
        this.$message.error('请添加分类')
        return
      }
      for (const index in params) {
        this.resetLangInfo(params[index])
      }
      this.resetImage(this.treeData[0])
      const obj = {
        classifies: params
      }
      const res = await commdityClassAdd(obj)
      if (res.code === '') {
        this.isVisible = false
        this.$message({
          message: this.$t('common.addsuccessful'),
          type: 'success'
        })
        this.$emit('success')
        this.deleteArr = []
      }
    },
    async updateGroup () {
      const params = this.treeData

      if (params.length === 0) {
        this.$message.error('请选择分类')
        return
      }
      for (const index in params) {
        this.resetLangInfo(params[index])
      }
      this.resetImage(this.treeData[0])
      const obj = {
        classifies: params,
        deleteIds: this.deleteArr
      }
      const res = await commdityClassUpdate(obj)
      if (res.code === '') {
        this.isVisible = false
        this.$message({
          message: '成功',
          type: 'success'
        })
        this.$emit('success')
        this.deleteArr = []
      }
    },

    resetLangInfo(itemParams){
      itemParams.classifyName = itemParams.classifyName_ZH;
      itemParams.langInfoMap = {}
      itemParams.langInfoMap["zh"] = {};
      itemParams.langInfoMap["zh"].classifyName = itemParams.classifyName_ZH;
      itemParams.langInfoMap["zh"].languageType = "zh";
      itemParams.langInfoMap["en"] = {};
      itemParams.langInfoMap["en"].classifyName = itemParams.classifyName_EN;
      itemParams.langInfoMap["en"].languageType = "en";
      if(itemParams.childs && itemParams.childs.length){
        for (const index in itemParams.childs) {
          this.resetLangInfo(itemParams.childs[index])
        }
      }
    },

    setParams ({ id }) {
      console.log(id)
      this.queryOneCategory(id)
    }
  }
}
</script>
<style lang="scss">
.add-dialog-component {
  .tree-box {
    .el-tree-node__content {
      margin-bottom: 15px;
      height: auto;
    }
  }
}
</style>
<style
  lang="scss"
  scoped
>
@import url("../../../styles/elDialog.scss");

.group-dialog {
  .el-dialog {
    min-width: 500px;
    max-width: 600px;
  }
}

.add-dialog-component {
  padding: 15px 20px;
  max-height: 60vh;
  overflow: auto;

  .el-tree-node__content {
    &:hover {
      background-color: #fff;
    }
  }

  .tree-box {
    margin: 15px 0;

    .custom-tree-node {
      display: flex;
      width: 100%;
      text-align: left;

      .content {
        flex: 1;
        display: flex;
        align-items: center;

        .input {
          width: 60%;
          margin-right: 20px;
        }

        .textarea-input {
          width: 100%;
          margin-left: 15px;

          textarea {
            height: 80px;
          }
        }
      }

      .level-3-wrap {
        display: flex;
        width: 300px;

        .upload-wrap {
          position: relative;

          &.disabled::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 999;
            background-color: #f5f7fa;
            opacity: 0.5;
          }

          .el-upload {
            border: 1px dashed #d9d9d9;
          }

          i {
          }

          img {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }

  .add-btn-wrap {
    text-align: center;
  }
}

.upload-uploader {
  margin-left: 30px;
}
</style>