产品课程联调

src/pages/article/add/product.vue

@@ -78,7 +78,7 @@
           </div>
         </div>
       </el-form-item>
-      <template v-if="form.articleTemplate === 78">
+      <template v-if="form.articleTemplate === 79">
         <div class="item-line">
           <el-form-item label="匹配课程" prop="matchedCourses">
             <el-input placeholder="请输入匹配课程" v-model="form.matchedCourses" maxlength="30"></el-input>
@@ -119,7 +119,56 @@
       <el-form-item label="简介" prop="introduction">
         <el-input style="width: 940px;" v-model="form.introduction" type="textarea" maxlength="200"></el-input>
       </el-form-item>
-      <el-form-item prop="detailedDescription" label="详情">
+
+      <!-- 模板选择了链接才显示这块 -->
+      <template v-if="form.articleTemplate === 24">
+        <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" clearable>
+              <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" clearable>
+              <el-option v-for="item in otherArticles" :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>
+
+      <el-form-item v-else prop="detailedDescription" label="详情">
         <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.detailedDescription"
           :init="editorConfig" />
       </el-form-item>
@@ -213,8 +262,8 @@ export default {
       categories: [],
       detailStyle: [
         {
-          id: 78,
-          style: '产品详情'
+          id: 79,
+          style: '产品、课程详情'
         },
         {
           id: 72,
@@ -224,11 +273,21 @@ export default {
           id: 24,
           style: '链接'
         },
-        {
-          id: 79,
-          style: '课程详情'
-        },
       ],
+      sites: [],
+      columns: [],
+      articles: [],
+      otherArticles: [],
+      columnProps: {
+        checkStrictly: true,
+        value: 'id',
+        label: 'columnName'
+      },
+      links: [],
+      article: '',
+      otherColumns: [],
+      otherLink: [],
+      otherArticle: '',
       subjectList: [], //专业学科
       form: {
         siteId: this.$store.state.content.site.id,
@@ -259,6 +318,10 @@ export default {
             majorId: 1,
           }
         ],
+        connectionType: 1,
+        linkAddress: '',
+        siteSelection: '',
+        isOpen: 1,
       },
       rules: {
         name: [
@@ -276,6 +339,9 @@ export default {
         detailedDescription: [
           { required: true, message: '请输入正文', trigger: 'blur' }
         ],
+        connectionType: [
+          { required: true, message: '请选择连接类型', trigger: 'blur' }
+        ],
       },
       columnInfo: {},
       editorConfig,
@@ -368,44 +434,121 @@ export default {
         name: this.$route.query.id ? '编辑' : '新增'
       }
     ])
-    this.form.id && this.getData()
+    this.form.id ? this.getData() : this.getColumnDetail()
     this.getSubject()
+    this.getSite()
+    this.getColumn()
     this.getClassification()
     this.getLabel()
   },
   methods: {
     // 获取文章详情
-    getData () {
-      this.$post(`${this.api.productDetailsFind}?id=${this.form.id}`).then(({ data }) => {
-        data.categoryId = data.categoryId ? data.categoryId.split(',').map(e => +e) : []
-        if (data.classificationTagId) data.classificationTagId = +data.classificationTagId
-        this.originalName = data.name
-        // let lableData = []
-        // data.categoryId.forEach(item => {
-        //   this.categories.forEach(options => {
-        //     if (item == options.id) {
-        //       lableData.push(item)
-        //     }
-        //   })
-        // })
-        // data.categoryId = lableData
-        this.getColumn()
-        data.subjectSpecialtyList && data.subjectSpecialtyList.map(e => {
-          e.subjectCategoryId !== 1 && this.getProfessionalClassData(e)
-          e.professionalCategoryId !== 1 && this.getProfessionalData(e)
+    async getData () {
+      const { data } = await this.$post(`${this.api.productDetailsFind}?id=${this.form.id}`)
+      data.categoryId = data.categoryId ? data.categoryId.split(',').map(e => +e) : []
+      if (data.classificationTagId) data.classificationTagId = +data.classificationTagId
+      this.originalName = data.name
+      this.getColumnDetail()
+      // 学科专业处理
+      data.subjectSpecialtyList && data.subjectSpecialtyList.map(e => {
+        e.subjectCategoryId !== 1 && this.getProfessionalClassData(e)
+        e.professionalCategoryId !== 1 && this.getProfessionalData(e)
+      })
+
+      this.form = data
+
+      // 链接回显
+      if (data.articleTemplate === 24 && data.connectionType !== 2 && data.linkAddress) {
+        const columnArticle = data.linkAddress.split('-')
+        const column = columnArticle[0].split(',').map(e => +e)
+
+        const article = columnArticle[1] || '' // 获取文章id（文章id是附在linkAddress最后面的-后面的数字）
+        const { connectionType } = data
+        // 获取文章
+        const res = await this.$post(this.api.queryArticle, {
+          siteId: connectionType === 1 ? this.site.id : data.siteSelection,
+          columnIds: [column[column.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id
+          pageNum: 1,
+          pageSize: 1000,
+          title: '',
+          isDisable: 0
         })
-        console.log("🚀 ~ this.$post ~ data:", data)
-        this.form = data
-      }).catch(err => { })
+        this[connectionType === 1 ? 'articles' : 'otherArticles'] = res.data.records
+        // 站内链接/其他站点链接
+        if (connectionType === 1) {
+          this.links = column
+          this.form.linkAddress = ''
+          if (article) this.article = +article
+        } else if (connectionType === 3) {
+          this.otherLink = column
+          this.form.linkAddress = ''
+          if (article) this.otherArticle = +article
+        }
+        data.siteSelection && this.getOtherColumn()
+      }
+
+    },
+    // 获取站点列表
+    async getSite () {
+      const { data } = await this.$post(this.api.site, {
+        page: 1,
+        limit: 1000,
+        siteName: ''
+      })
+      data.records.splice(data.records.findIndex(e => e.id == this.site.id), 1) // 不显示当前站点
+      this.sites = data.records
+    },
+    // 获取当前站点的栏目列表
+    async getColumn () {
+      const { data } = await this.$post(this.api.listWithTree, {
+        siteId: this.site.id,
+        columnName: '',
+        templateId: '',
+        typeId: '',
+        isSort: 1
+      })
+      this.columns = data
+    },
+    // 获取指定站点的栏目列表
+    async getOtherColumn (val) {
+      const { data } = await this.$post(this.api.listWithTree, {
+        siteId: this.form.siteSelection,
+        columnName: '',
+        templateId: '',
+        typeId: '',
+        isSort: 1
+      })
+      if (val) {
+        this.otherArticles = []
+        this.otherArticle = ''
+        this.otherLink = ''
+      }
+      this.otherColumns = data
+    },
+    // 文章列表
+    async 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'] = ''
+      const { data } = await this.$post(this.api.queryArticle, {
+        siteId: inner ? this.site.id : this.form.siteSelection,
+        columnIds: [id],
+        pageNum: 1,
+        pageSize: 1000,
+        title: '',
+        isDisable: 0
+      })
+      this[inner ? 'articles' : 'otherArticles'] = data.records.filter(e => e.isRelease) // 只显示已发布的文章
     },
     // 获取栏目详情
-    getColumn () {
+    getColumnDetail () {
       this.$post(`${this.api.findColumn}?id=${this.$route.query.columnId}`).then(({ data }) => {
         this.columnInfo = data
         const { form } = this
-        // 如果独立文章模板未启用，并且该栏目的类型为常规/子级优先，则把栏目所选的详情样式赋值到文章模板；如果栏目类型为长页或者链接，则文章模板默认为产品详情（78）
+        // 如果独立文章模板未启用，并且该栏目的类型为常规/子级优先，则把栏目所选的详情样式赋值到文章模板；如果栏目类型为长页或者链接，则文章模板默认为产品详情（79）
         if (!form.templateStatus) {
-          form.articleTemplate = (data.typeId === 1 || data.typeId === 4) ? data.detailStyleId : 78
+          form.articleTemplate = (data.typeId === 1 || data.typeId === 4) ? data.detailStyleId : 79
         }
 
         this.$nextTick(() => {
@@ -774,10 +917,26 @@ export default {
       // 如果是发布
       if (publishStatus) {
         if (!form.coverImageUrl) return Util.errorMsg('请上传封面')
-        if (!form.coverImageUrl) return Util.errorMsg('请上传封面')
+
+        const tId = form.articleTemplate
+        if (tId === 24 && form.connectionType !== 2) {
+          if (form.connectionType === 1) {
+            if (!this.links.length) return Util.errorMsg('请选择站内链接')
+          }
+          if (!this.otherLink.length && form.connectionType === 3) {
+            if (!this.otherLink.length) return Util.errorMsg('请选择栏目')
+          }
+        }
         if (!form.source) return Util.errorMsg('请输入来源')
       }
       if (this.uploading) return Util.errorMsg('文件正在上传，请上传完成后再发布')
+      if (form.connectionType === 1) {
+        form.linkAddress = this.links.join()
+        if (this.article) form.linkAddress += '-' + this.article
+      } else if (form.connectionType === 3) {
+        form.linkAddress = this.otherLink.join()
+        if (this.otherArticle) form.linkAddress += '-' + this.otherArticle
+      }
       const { coverImageUrl } = form
       const fileId = []
       // 获取几个附件的id，url后面的数字串即是附件id