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

<template>
  <div class="page">
    <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/img/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="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">
              <div class="review">
                <img :src="require('@/assets/img/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">
              <div class="review">
                <img :src="require('@/assets/img/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
                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>
              <div class="review">
                <img src="@/assets/img/list1.png" alt="">
              </div>
              <el-radio v-model="form.listStyleId" :label="1">图片列表</el-radio>
            </li>
            <li>
              <div class="review">
                <img src="@/assets/img/list2.png" alt="">
              </div>
              <el-radio v-model="form.listStyleId" :label="2">新闻列表</el-radio>
            </li>
            <li>
              <div class="review">
                <img src="@/assets/img/list2.png" alt="">
              </div>
              <el-radio v-model="form.listStyleId" :label="3">出版物列表</el-radio>
            </li>
          </ul>
        </el-form-item>
      </template>
      <el-form-item v-show="form.typeId === 4" prop="showWithDetails" label="只有一篇文章时，以详情方式展示">
        <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">确定</el-button>
      <el-button @click="$router.back()">取消</el-button>
    </div>
  </div>
</template>
<script>
import util from "@/libs/util";
import ColumnConst from '@/const/column'
import { mapState } from 'vuex'
export default {
    data() {
        return {
          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,
          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: '',
            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
        };
    },
    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
      },
    },
    methods: {
      // 栏目列表
      getList() {
        this.$post(this.api.listWithTree, {
          siteId: this.site.id,
          columnName: '',
          templateId: '',
          typeId	: '',
        }).then(({ data }) => {
          this.columns = data
          this.isEdit && this.getData()
        }).catch(err => {})
      },
      // 文章列表
      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
        }).catch(err => {})
      },
      // 获取详情
      getData() {
        this.$post(`${this.api.findColumn}?id=${this.form.id}`).then(({ data }) => {
          this.form = data
          if (data.typeId === 2) {
            let link = data.linkAddress
            if (link) {
              link = link.split(',').map(e => +e)
              const article = +link.splice(link.length - 1, 1) // 获取文章id（文章id是附在linkAddress最后面的id）
              // 获取文章
              this.$post(this.api.queryArticle, {
                siteId: this.site.id,
                columnIds: [link[link.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id
                pageNum: 1,
                pageSize: 1000,
                title: ''
              }).then(res => {
                this.articles = res.data.records
                // 站内链接/其他站点链接
                if (data.connectionType === 1) {
                  this.links = link
                  this.form.linkAddress = ''
                  this.article = article
                } else if (data.connectionType === 3) {
                  this.otherLink = link
                  this.form.linkAddress = ''
                  this.otherArticle = article
                }
              }).catch(err => {})
            }
          }
        }).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
        }
      },
      // 导入前的钩子
      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
      },
      // 预览
      preview() {

      },
      // 提交
      submit() {
        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]
        if (form.typeId === 2 && form.connectionType !== 2) {
          const { links, article, otherLink, otherArticle } = this
          if (form.connectionType === 1) {
            if (!links.length) return util.errorMsg('请选择站内链接')
            if (!article) return util.errorMsg('请选择文章')
            form.linkAddress = links.join() + ',' + article
          }
          if (form.connectionType === 3) {
            if (!otherLink.length) return util.errorMsg('请选择栏目')
            if (!otherArticle) return util.errorMsg('请选择文章')
            form.linkAddress = otherLink.join() + ',' + otherArticle
          }
        }
        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("修改成功")
            this.$router.back()
          }).catch(err => {
            this.submiting = false
          })
        } else {
          this.$post(this.api.saveColumn, form).then(res => {
            util.successMsg("创建成功")
            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 {
    margin-right: 20px;
    text-align: center;
    &: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;
  }
}
/deep/.input-form .auto .el-input {
  width: 119px;
}
</style>