FE_IASF_server/src/pages/column/add/index.vue

<template>
  <div class="page" v-show="loaded">
    <p class="page-name mb">栏目</p>
    <el-form :model="form" :rules="rules" class="input-form model" label-width="120px">
      <div class="item-line">
        <el-form-item prop="columnName" label="栏目名称">
          <el-input
            placeholder="请输入栏目名称"
            v-model="form.columnName"
            clearable
            maxlength="40"
            @change="nameChange"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fatherId" label="设置上级">
          <el-cascader
            v-model="form.fatherId"
            :options="columns"
            :props="columnProps"
            clearable></el-cascader>
        </el-form-item>
      </div>
      <div class="item-line">
        <el-form-item prop="typeId" label="栏目类型">
          <el-select v-model="form.typeId" @change="typeChange">
            <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="pageSize" label="分页条数">
          <el-input-number v-model="form.pageSize" :min="0" class="auto"></el-input-number>
        </el-form-item>
        <el-form-item prop="menuVisible" label="导航菜单可见">
          <el-switch
            v-model="form.menuVisible"
            :active-value="0"
            :inactive-value="1">
          </el-switch>
        </el-form-item>
      </div>
      <div class="line"></div>
      <template v-if="form.typeId === 1 || form.typeId === 4">
        <el-form-item prop="columnBanner" label="栏目Banner">
          <el-upload
            class="avatar-uploader avatar-uploader-lg"
            accept=".jpg,.png,.jpeg,.gif"
            :on-change="changeFile"
            :show-file-list="false"
            :action="this.api.upload"
            :auto-upload="false"
          >
            <img v-if="form.columnBanner" :src="form.columnBanner" class="avatar-lg">
            <div class="uploader-default" v-else>
              <img class="plus" src="@/assets/images/plus.png" alt="">
              <p>点击上传</p>
            </div>
            <div slot="tip" class="el-upload__tip">
              <p>请上传1920x500PX，5M以内的jpg，bmp，png格式</p>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="subtitle" label="栏目副标题">
          <el-input
            type="textarea"
            placeholder="请输入栏目副标题"
            v-model="form.subtitle"
            @change="nameChange"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateId" label="栏目模板">
          <el-select v-model="form.templateId" @change="getStyle">
            <el-option
              v-for="item in templates"
              :key="item.id"
              :label="item.templateType"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="listStyleId" label="列表样式">
          <ul class="styles">
            <li v-for="(item, i) in listStyle" :key="i" @click="form.listStyleId = item.id">
              <div class="review">
                <!-- <img :src="require('@/assets/images/list' + item.id + '.png')" alt=""> -->
              </div>
              <el-radio v-model="form.listStyleId" :label="item.id">{{ item.style }}</el-radio>
            </li>
          </ul>
        </el-form-item>
        <el-form-item prop="detailStyleId" label="详情样式">
          <ul class="styles">
            <li v-for="(item, i) in detailStyleId" :key="i" @click="form.detailStyleId = item.id">
              <div class="review">
                <!-- <img :src="require('@/assets/images/article' + item.id + '.png')" alt=""> -->
              </div>
              <el-radio v-model="form.detailStyleId" :label="item.id">{{ item.style }}</el-radio>
            </li>
          </ul>
        </el-form-item>
      </template>
      <template v-if="form.typeId === 2">
        <el-form-item prop="connectionType" label="连接类型">
          <el-radio-group v-model="form.connectionType">
            <el-radio :label="1">站内链接</el-radio>
            <el-radio :label="2">站外链接</el-radio>
            <el-radio :label="3">其他站点链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.connectionType === 1">
          <el-form-item label="站内链接">
            <el-cascader
              v-model="links"
              :options="columns"
              :props="columnProps"
              clearable
              @change="getArticle"></el-cascader>
          </el-form-item>
          <el-form-item label="文章">
            <el-select v-model="article">
              <el-option
                v-for="item in articles"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item v-show="form.connectionType === 2" prop="linkAddress" label="站外链接">
          <el-input
            placeholder="请输入站外链接"
            v-model.trim="form.linkAddress"
            clearable
          ></el-input>
        </el-form-item>
        <template v-if="form.connectionType === 3">
          <el-form-item prop="siteSelection" label="站点选择">
            <el-select v-model="form.siteSelection" @change="getOtherColumn">
              <el-option
                v-for="item in sites"
                :key="item.id"
                :label="item.siteName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="栏目">
            <el-cascader
              v-model="otherLink"
              :options="otherColumns"
              :props="columnProps"
              clearable
              @change="getArticle"></el-cascader>
          </el-form-item>
          <el-form-item label="文章">
            <el-select v-model="otherArticle">
              <el-option
                v-for="item in articles"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item prop="isOpen" label="新窗口打开">
          <el-switch
            v-model="form.isOpen"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
      </template>
      <template v-if="form.typeId === 3">
        <el-form-item prop="templateId" label="栏目模板">
          <el-select v-model="form.templateId">
            <el-option
              label="长页模板"
              :value="9">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="listStyleId" label="列表样式">
          <ul class="styles">
            <li v-for="(item, i) in pageStyle" :key="i">
              <div class="review">
                <img :src="require('@/assets/images/page/' + item.path + '.png')" alt="">
              </div>
              <el-radio v-model="form.listStyleId" :label="item.id">{{ item.style }}</el-radio>
            </li>
          </ul>
        </el-form-item>
      </template>
      <el-form-item v-show="form.typeId === 4" prop="showWithDetails" label="只有一篇文章时，以详情方式展示" label-width="240px">
        <el-switch
          v-model="form.showWithDetails"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </el-form-item>
    </el-form>
    <div class="btns">
      <el-button type="primary" @click="submit(0)">确定</el-button>
      <el-button @click="$router.push('/column')">取消</el-button>
    </div>
    <!-- 剪裁组件弹窗 -->
    <el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
      <Cropper
        ref="cropper"
        :img-file.sync="file"
        :is-upload="isUpload"
        :fixed="true"
        @upload="customUpload" />
    </el-dialog>
  </div>
</template>
<script>
import util from "@/libs/util";
import ColumnConst from '@/const/column'
import { mapState } from 'vuex'
import Cropper from '@/components/img-upload/Cropper'
import Axios from 'axios'
import Modules from '@/const/modules'
export default {
    data() {
        return {
          loaded: false,
          userId: +this.$store.state.user.userId,
          site: this.$store.state.content.site,
          isEdit: this.$route.query.type === 'edit',
          nameRepeat: false,
          listStyle: [],
          detailStyleId: [],
          types: ColumnConst.types,
          templates: [],
          pageStyle: [],
          sites: [],
          columns: [],
          articles: [],
          columnProps: {
            checkStrictly: true,
            value: 'id',
            label: 'columnName'
          },
          links: [],
          article: '',
          otherColumns: [],
          otherLink: [],
          otherArticle: '',
          form: {
            siteId: this.$store.state.content.site.id,
            id: this.$route.query.id || '',
            founderId: this.$store.state.user.userId,
            editorId: this.$store.state.user.userId,
            fatherId: +this.$route.query.id || 0,
            level: this.$route.query.level || 1,
            columnName: '',
            typeId: 1,
            pageSize: 10,
            menuVisible: 0,
            columnBanner: '',
            subtitle: '',
            templateId: 1,
            listStyleId: 1,
            detailStyleId: 1,
            connectionType: 1,
            linkAddress	: '',
            showWithDetails: 0,
            siteSelection: 1,
            status: 1,
            sort: 1,
            isOpen: 1
          },
          rules: {
            columnName: [
              { required: true, message: '请输入栏目名称', trigger: 'blur' }
            ],
            typeId: [
              { required: true, message: '请选择栏目类型', trigger: 'change' }
            ],
            pageSize: [
              { required: true, message: '请输入分页条数', trigger: 'blur' }
            ],
            templateId: [
              { required: true, message: '请输入栏目名称', trigger: 'blur' }
            ],
            listStyleId: [
              { required: true, message: '请选择栏目模板', trigger: 'change' }
            ],
            detailStyleId: [
              { required: true, message: '请选择详情样式', trigger: 'change' }
            ],
            connectionType: [
              { required: true, message: '请选择连接类型', trigger: 'blur' }
            ],
          },
          originTypeId: 1,
          submiting: false, // 新增编辑防抖标识
          updateTime: 0,
          cropperModel: false,
          isUpload: false,
          file: {}, // 当前被选择的图片文件
          fileId: ''
        };
    },
    components: {
      Cropper
    },
    computed: {
      ...mapState('user', [
        'userName'
      ])
    },
    mounted() {
      this.$store.commit('user/setCrumbs', [
        {
          name: '站点管理',
          route: '/site'
        },
        {
          name: '内容管理'
        },
        {
          name: '栏目管理',
          route: '/column'
        },
        {
          name: this.$route.query.type === 'edit' ? '编辑' : '新增'
        }
      ])
      this.getList()
      this.getSite()
      this.getTemplate()
    },
    watch: {
      // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
      form: {
        handler(val){
          this.updateTime++
        },
        deep:true
      },
    },
    // 页面离开的时候如果没有保存则提示
    beforeRouteLeave(to, from, next) {
      if (this.submiting) {
        next()
      } else {
        const { id } = this.form
        const { updateTime } = this
        // 更改了信息才需要提示
        if ((!id && updateTime) || (id && updateTime > 1)) {
          this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', {
            type: 'warning'
          }).then(() => {
            this.submit(next)
          }).catch(() => {
            next()
          })
        } else {
          next()
        }
      }
    },
    methods: {
      // 获取当前站点的栏目列表
      getList() {
        this.$post(this.api.listWithTree, {
          siteId: this.site.id,
          columnName: '',
          templateId: '',
          typeId	: '',
          isSort: 1
        }).then(({ data }) => {
          this.columns = data
          if (this.isEdit) {
            this.getData()
            this.handleId(data)
          } else {
            this.getOtherColumn()
            this.loaded = true
          }
        }).catch(err => {})
      },
      // 给当前栏目加上disabled禁止选中
      handleId(list) {
        list.forEach(e => {
          if (this.isEdit && e.id == this.form.id) e.disabled = true 
          e.children.length ? this.handleId(e.children) : delete e.children
        })
      },
      // 文章列表
      getArticle() {
        // 站内链接/其他站点链接
        const inner = this.form.connectionType === 1
        const id = inner ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
        this[inner ? 'article' : 'otherArticle'] = ''
        this.$post(this.api.queryArticle, {
          siteId: inner ? this.site.id : this.form.siteSelection,
          columnIds: [id],
          pageNum: 1,
          pageSize: 1000,
          title: ''
        }).then(({ data }) => {
          this.articles = data.records.filter(e => e.isRelease) // 只显示已发布的文章
        }).catch(err => {})
      },
      // 获取详情
      getData() {
        this.$post(`${this.api.findColumn}?id=${this.form.id}`).then(({ data }) => {
          this.form = data
          if (data.typeId === 1 || data.typeId === 4) this.getStyle(0)
          this.originTypeId = data.typeId
          if (data.typeId === 2) {
            if (data.linkAddress) {
              const columnArticle = data.linkAddress.split('-')
              const column = columnArticle[0].split(',').map(e => +e)
              const article = columnArticle[1] || '' // 获取文章id（文章id是附在linkAddress最后面的-后面的数字）
              // 获取文章
              this.$post(this.api.queryArticle, {
                siteId: data.connectionType === 1 ? this.site.id : data.siteSelection,
                columnIds: [column[column.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id
                pageNum: 1,
                pageSize: 1000,
                title: ''
              }).then(res => {
                this.articles = res.data.records
                // 站内链接/其他站点链接
                if (data.connectionType === 1) {
                  this.links = column
                  this.form.linkAddress = ''
                  if (article) this.article = +article
                } else if (data.connectionType === 3) {
                  this.otherLink = column
                  this.form.linkAddress = ''
                  if (article) this.otherArticle = +article
                }
                this.$nextTick(() => {
                  this.updateTime = 1
                })
                this.loaded = true
              }).catch(err => {})
            }
          } else {
            this.loaded = true
          }
          this.getOtherColumn()
        }).catch(err => {})
      },
      // 栏目类型切换回调
      typeChange(val) {
        if (val === 1 || val === 4) {
          this.form.templateId = 1
          this.getStyle()
        } else if (val == 3) {
          this.form.templateId = 9
        }
      },
      // 获取栏目模板
      getTemplate() {
        this.$post(this.api.listOfColumnTemplates).then(({ data }) => {
          this.templates = data
          this.isEdit || this.getStyle()
        }).catch(err => {})
        
        this.$post(this.api.longPageListStyle).then(({ data }) => {
          this.pageStyle = data
        }).catch(err => {})
      },
      // 根据模板id获取样式
      getStyle(set = 1) {
        this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => {
          this.listStyle = data.listingTemplateTypes
          this.detailStyleId = data.detailsTypeOfTheTemplate
          if (set) {
            this.form.listStyleId = this.listStyle[0].id
            this.form.detailStyleId = this.detailStyleId[0].id
          }
        }).catch(err => {})
      },
      // 获取站点列表
      getSite() {
        this.$post(this.api.site, {
          page: 1,
          limit: 1000,
          siteName: ''
        }).then(({ data }) => {
          this.sites = data.records
        }).catch(e => {})
      },
      // 获取指定站点的栏目列表
      getOtherColumn() {
        this.$post(this.api.listWithTree, {
          siteId: this.form.siteSelection,
          columnName: '',
          templateId: '',
          typeId	: '',
          isSort: 1
        }).then(({ data }) => {
          this.otherColumns = data
        }).catch(err => {})
      },
      // 栏目名称判重
      nameChange(){
        const { columnName, level, id } = this.form
        if (columnName && columnName !== this.originalName) {
          this.$post(this.api.sameLevelJudgment, {
            siteId: this.site.id,
            columnName,
            level: +level,
            id: +id || ''
          }).then(res => {
            this.nameRepeat = false
          }).catch(res => {
            this.nameRepeat = true
          })
        }else{
          this.nameRepeat = false
        }
      },
      // 图片裁剪上传事件
      customUpload(data) {
        const blob = this.dataURItoBlob(data)
        const formData = new FormData()
        formData.append('file', blob, this.file.name)
        formData.append('quote', this.form.columnName)
        formData.append('site', this.site.siteName)
        formData.append('uploader', this.userName)
        this.imgUpload(formData)
      },
      // 压缩图片
      compress(img) {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        // let initSize = img.src.length;
        const width = img.width
        const height = img.height
        canvas.width = width
        canvas.height = height
        // 铺底色
        ctx.fillStyle = '#fff'
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(img, 0, 0, width, height)
        // 进行压缩
        const ndata = canvas.toDataURL('image/jpeg', 0.8)
        return ndata
      },
      // base64转成bolb对象
      dataURItoBlob(base64Data) {
        let byteString
        if (base64Data.split(',')[0].indexOf('base64') >= 0) {
          byteString = atob(base64Data.split(',')[1])
        } else {
          byteString = unescape(base64Data.split(',')[1])
        }
        const mimeString = base64Data
          .split(',')[0]
          .split(':')[1]
          .split(';')[0]
        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i)
        }
        return new Blob([ia], {
          type: mimeString
        })
      },
      // 图片上传到服务器
      imgUpload(formData) {
        this.isUpload = true
        Axios({
          method: 'post',
          url: this.api.upload,
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        }).then(({ data }) => {
          let url = this.form.columnBanner
          url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) // 删除替换掉的图片
          this.form.columnBanner = data.url
          this.fileId = data.id
        }).catch(res => {})
        this.$refs.cropper.isDisabled = false
        this.isUpload = false
        this.cropperModel = false
      },
      // 图片改变钩子
      changeFile(file) {
        const { size, name } = file
        const ext = name.substring(name.lastIndexOf('.') + 1)
        if (!util.isImg(ext)) {
          this.$message.error('请上传图片！')
          return false
        }
        if (size / 1024 / 1024 > 5) {
          this.$message.error('请上传5M以内的图片！')
          return false
        }
        this.file = file
        this.cropperModel = true
        this.$nextTick(() => {
          this.$refs.cropper.updateImg({
            url: window.URL.createObjectURL(file.raw),
            size: file.size
          })
        })
      },
      // 预览
      preview() {

      },
      // 提交
      submit(next) {
        if (this.submiting) return false
        const { form } = this
        if (!form.columnName) return util.errorMsg('请填写栏目名称')
        if (this.nameRepeat) return util.errorMsg('同级下已存在重复栏目!')
        if (!form.pageSize) return util.errorMsg('请填写分页条数')
        if (typeof form.fatherId	=== 'object') form.fatherId	= form.fatherId[form.fatherId.length - 1] // 选择了上级后结果会是数组，直接取最后一个id
        if (form.typeId === 2 && form.connectionType !== 2) {
          const { links, article, otherLink, otherArticle } = this
          if (form.connectionType === 1) {
            if (!links.length) return util.errorMsg('请选择站内链接')
            form.linkAddress = links.join()
            if (article) form.linkAddress += '-' + article
          }
          if (form.connectionType === 3) {
            if (!otherLink.length) return util.errorMsg('请选择栏目')
            form.linkAddress = otherLink.join()
            if (otherArticle) form.linkAddress += '-' + otherArticle
          }
        }
        // 更新附件的状态为发布
        this.fileId && this.$post(this.api.updateFile, {
          id: this.fileId,
          isRelease: 1,
          quote: this.form.columnName
        }).then(res => {
          this.fileId = ''
        }).catch(err => {})
        this.submiting = true
        if (this.isEdit) {
          delete form.children
          form.editorId = this.userId
          this.$post(this.api.updateColumn, form).then(res => {
            // 编辑前不是长页栏目，则需要重新保存长页模板
            // if (this.originTypeId !== 3 && form.typeId === 3) this.savePage(form.id)
            util.successMsg("修改成功")
            next ? next() : this.$router.back()
          }).catch(err => {
            this.submiting = false
          })
        } else {
          this.$post(this.api.saveColumn, form).then(({ data }) => {
            // 栏目类型选择了长页栏目，才需要保存长页
            form.typeId === 3 && this.savePage(data)
            util.successMsg("创建成功")
            next ? next() : this.$router.back()
          }).catch(err => {
            this.submiting = false
          })
        }
      },
      // 保存长页模板
      savePage(columnId) {
        const { listStyleId } = this.form
        this.$post(this.api[this.id ? 'updatePage' : 'savePage'], {
          columnId,
          state: 0,
          sort: 1,
          founderId: this.userId,
          editorId: this.userId,
          jsonBeforeEditing: Modules[this.pageStyle.find(e => e.id === listStyleId).path]
        }).then(res => {}).catch(err => {})
      }
    }
};
</script>

<style lang="scss" scoped>
$upload-width: 220px;
$upload-height: 102px;
$upload-lg-height: 102px;
/deep/ .avatar-uploader {
  .el-upload {
    position: relative;
    width: $upload-width;
    height: $upload-height;
    border: 1px solid #DCDEE0;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
    .uploader-default {
      display: flex;
      height: $upload-height;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: #FAFAFA;
      p {
        margin-top: 10px;
        font-size: 14px;
        color: #333;
        line-height: 20px;
      }
    }
  }
  &.avatar-uploader-lg {
    .el-upload {
      width: 100%;
      max-width: 820px;
      height: $upload-lg-height;

      .uploader-default {
        height: $upload-lg-height;
      }
    }
  }
  .avatar {
    display: block;
    width: $upload-width;
    height: $upload-height;
  }
  .avatar-lg {
    display: block;
    width: 100%;
    height: $upload-lg-height;
  }
  .el-upload__tip {
    margin-top: 0;
    p {
      font-size: 12px;
      color: #333;
    }
  }
}
.style-wrap {
  display: flex;
  margin-top: 10px;
  .label {
    margin-right: 30px;
  }
}
.styles {
  display: inline-flex;
  flex-wrap: wrap;
  li {
    width: 170px;
    margin-right: 20px;
    text-align: center;
    cursor: pointer;
    &:hover .review {
      border-color: #2962FF;
    }
  }
  .review {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 112px;
    margin-bottom: 10px;
    border: 1px solid #DCDEE0;
    border-radius: 2px;
    img {
      width: 50px;
    }
  }
    .el-radio {
      white-space: normal;
    }
}
/deep/.input-form .auto .el-input {
  width: 119px;
}
</style>