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.trim="form.columnName"
            clearable
            maxlength="15"
            @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">
            <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"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-error="uploadError"
            :on-success="uploadSuccess"
            :show-file-list="false"
            :action="this.api.upload"
            :data="{
              quote: form.columnName,
              site: site.siteName,
              uploader: userName
            }"
          >
            <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，1M以内的jpg，bmp，png格式</p>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="subtitle" label="栏目副标题">
          <el-input
            type="textarea"
            placeholder="请输入栏目副标题"
            v-model.trim="form.subtitle"
            @change="nameChange"
          ></el-input>
        </el-form-item>
        <el-form-item prop="templateId" label="栏目模板">
          <el-select v-model="form.templateId">
            <el-option
              v-for="item in templates"
              :key="item.id"
              :label="item.name"
              :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.name }}</el-radio>
            </li>
          </ul>
        </el-form-item>
        <el-form-item prop="detailStyle" label="详情样式">
          <ul class="styles">
            <li v-for="(item, i) in detailStyle" :key="i" @click="form.detailStyle = item.id">
              <div class="review">
                <img :src="require('@/assets/images/article' + item.id + '.png')" alt="">
              </div>
              <el-radio v-model="form.detailStyle" :label="item.id">{{ item.name }}</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">
              <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="columns"
              :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="1">
            </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.name }}</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 append-to-body :visible.sync="cropperModel" width="1100px">
      <Cropper
        ref="vueCropper"
        :is-upload="isUpload"
        :img-file="file"
        :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'
export default {
    data() {
        return {
          loaded: false,
          site: this.$store.state.content.site,
          isEdit: this.$route.query.type === 'edit',
          nameRepeat: false,
          listStyle: ColumnConst.listStyle,
          detailStyle: ColumnConst.detailStyle,
          types: ColumnConst.types,
          templates: ColumnConst.templates,
          pageStyle: ColumnConst.pageStyle,
          sites: [],
          columns: [],
          articles: [],
          columnProps: {
            checkStrictly: true,
            value: 'id',
            label: 'columnName'
          },
          links: [],
          article: '',
          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,
            detailStyle: 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' }
            ],
            detailStyle: [
              { required: true, message: '请选择详情样式', trigger: 'change' }
            ],
            connectionType: [
              { required: true, message: '请选择连接类型', trigger: 'blur' }
            ],
          },
          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()
    },
    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: 0
        }).then(({ data }) => {
          this.columns = data
          if (this.isEdit) {
            this.getData()
            this.handleId(data)
          } else {
            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 id = this.form.connectionType === 1 ? this.links[this.links.length - 1] : this.otherLink[this.otherLink.length - 1]
        this.$post(this.api.queryArticle, {
          siteId: this.site.id,
          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 === 2) {
            if (data.linkAddress) {
              const columnArticle = data.linkAddress.split('-')
              const column = columnArticle[0].split(',').map(e => +e)
              const article = columnArticle[1] || '' // 获取文章id（文章id是附在linkAddress最后面的id）
              // 获取文章
              this.$post(this.api.queryArticle, {
                siteId: this.site.id,
                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
          }
        }).catch(err => {})
      },
      // 获取站点列表
      getSite() {
        this.$post(this.api.site, {
          page: 1,
          limit: 1000,
          siteName: ''
        }).then(({ data }) => {
          this.sites = data.records
        }).catch(e => {})
      },
      // 栏目名称判重
      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) {
        // 自定义upload事件
        // console.log(data);
        // let _data = this.compress(img);
        const blob = this.dataURItoBlob(data)
        const formData = new FormData()
        formData.append('file', blob, this.file.name) // 有的后台需要传文件名，不然会报错
        this.imgUpload(formData)
      },
      imgUpload(formData) {
        this.isUpload = true
        Axios({
          method: 'post',
          url: this.api.upload,
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        }).then(({ data }) => {
          
        }).catch(res => {})
        // this.$api[this.uploadMethodName]({
        //   data: formData,
        //   showLoading: false
        // }).then(res => {
        //   // 上传成功将照片传回父组件
        //   console.log(this.uploadList)
        //   this.uploadList = this.isSingle ? res : this.uploadList.concat(res)
        //   this.uploadList.forEach(item => {
        //     item.name = item.fileId
        //     item.url = `/common-service/file/downloadFileFromOSS?key=${item.fileId}`
        //   })
        // }).catch(() => {})
        this.isUpload = false
        this.cropperModel = false
      },
      // 导入前的钩子
      beforeUpload(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 > 1) {
          this.$message.error('请上传1M以内的图片！')
          return false
        }
      },
      uploadError(err, file, fileList) {
        this.$message({
          message: "上传出错，请重试！",
          type: "error",
          center: true
        })
      },
      handleRemove(file, fileList) {
        this.form.columnBanner = ''
      },
      uploadSuccess(res) {
        let url = this.form.columnBanner
        url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
        this.form.columnBanner = res.url
        this.fileId = res.id
      },
      // 预览
      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.$store.state.user.userId
          this.$post(this.api.updateColumn, form).then(res => {
            util.successMsg("修改成功")
            next ? next() : this.$router.back()
          }).catch(err => {
            this.submiting = false
          })
        } else {
          this.$post(this.api.saveColumn, form).then(res => {
            util.successMsg("创建成功")
            next ? next() : this.$router.back()
          }).catch(err => {
            this.submiting = false
          })
        }
      }
    }
};
</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;
  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>