|
|
@@ -187,7 +187,66 @@
|
|
|
</el-form>
|
|
|
</template>
|
|
|
<div v-if="stepIndex===1">
|
|
|
-
|
|
|
+ <div class="issue-channel">
|
|
|
+ <div class="issue-top">
|
|
|
+ <h4 class="issue-top-left">
|
|
|
+ 栏目
|
|
|
+ <span>共 {{issueChannel.channelNumber}} 个栏目 {{issueChannel.articleNumber}} 篇文章</span>
|
|
|
+ </h4>
|
|
|
+ <el-button type="primary" size="small">预览</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="channel-item" v-for="(item,index) in issueChannel.channelList" :key="index">
|
|
|
+ <div class="channel-top">
|
|
|
+ <i class="el-icon-caret-bottom" v-if="item.show" @click="item.show=!item.show"></i>
|
|
|
+ <i class="el-icon-caret-top" v-else @click="item.show=!item.show"></i>
|
|
|
+ <span @click="item.show=!item.show">{{item.channelName}}</span>
|
|
|
+ <el-button type="text" @click="handleArticle('','en')"><i class="el-icon-plus"></i>新增英文内容</el-button>
|
|
|
+ <el-button type="text" @click="handleArticle('','cn')"><i class="el-icon-plus"></i>新增中文内容</el-button>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <template v-if="item.show">
|
|
|
+ <draggable
|
|
|
+ v-model="item.articleList"
|
|
|
+ chosenClass="chosen"
|
|
|
+ forceFallback="true"
|
|
|
+ group="people"
|
|
|
+ animation="1000"
|
|
|
+ @start="onStart"
|
|
|
+ @end="onEnd"
|
|
|
+ class="article-list"
|
|
|
+ >
|
|
|
+ <li v-for="(itema,indexa) in item.articleList" :key="indexa">
|
|
|
+ <svg-icon icon-class="sort" draggable="true"></svg-icon>
|
|
|
+ <div class="items">
|
|
|
+ <h6>{{itema.title}}</h6>
|
|
|
+ <span>BY {{itema.author}}</span>
|
|
|
+ <span>创建人：{{itema.creator}}</span>
|
|
|
+ <span>{{itema.time}}</span>
|
|
|
+ </div>
|
|
|
+ <svg-icon icon-class="edit" class="edit-article" @click="handleArticle(itema.id,itema.type)"></svg-icon>
|
|
|
+ <span class="border"></span>
|
|
|
+ <i class="el-icon-delete" @click="handleDeleteArticle(item.articleList,indexa)"></i>
|
|
|
+ </li>
|
|
|
+ </draggable>
|
|
|
+ <!-- <ul class="article-list">
|
|
|
+ <li v-for="(itema,indexa) in item.articleList" :key="indexa">
|
|
|
+ <svg-icon icon-class="sort" draggable="true"></svg-icon>
|
|
|
+ <div class="items">
|
|
|
+ <h6>{{itema.title}}</h6>
|
|
|
+ <span>BY {{itema.author}}</span>
|
|
|
+ <span>创建人：{{itema.creator}}</span>
|
|
|
+ <span>{{itema.time}}</span>
|
|
|
+ </div>
|
|
|
+ <svg-icon icon-class="edit" class="edit-article" @click="handleArticle(itema.id,itema.type)"></svg-icon>
|
|
|
+ <span class="border"></span>
|
|
|
+ <i class="el-icon-delete" @click="handleDeleteArticle(item.articleList,indexa)"></i>
|
|
|
+ </li>
|
|
|
+ </ul> -->
|
|
|
+ </template>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-if="stepIndex===2">
|
|
|
<el-result icon="success" :subTitle="id?'报纸编辑成功':'报纸创建成功'">
|
|
|
@@ -212,10 +271,11 @@ import Breadcrumb from '../../../components/Breadcrumb.vue';
|
|
|
import Upload from "../../../components/Upload.vue"
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
import { mapState } from 'vuex';
|
|
|
+import draggable from "vuedraggable";
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: { Header, NavMenu, Breadcrumb, Upload },
|
|
|
+ components: { Header, NavMenu, Breadcrumb, Upload, draggable },
|
|
|
props: {},
|
|
|
data() {
|
|
|
const validateIssNo = (rule, value, callback) => {
|
|
|
@@ -365,7 +425,74 @@ export default {
|
|
|
vlList: [], // 课标词表
|
|
|
tplList: [], // 栏目列表
|
|
|
tabsList:['中英双语','少儿必读'],
|
|
|
- issueId: ''
|
|
|
+ issueId: '',
|
|
|
+ issueChannel:{
|
|
|
+ channelNumber: '12',
|
|
|
+ articleNumber: '4',
|
|
|
+ channelList:[
|
|
|
+ {
|
|
|
+ channelName: 'FRONT PAGE',
|
|
|
+ articleList: [
|
|
|
+ {
|
|
|
+ title: 'Silly science',
|
|
|
+ author: 'TEENS',
|
|
|
+ creator: '张老师',
|
|
|
+ time: '2012-12-12 12:23'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Silly science1',
|
|
|
+ author: 'TEENS',
|
|
|
+ creator: '张老师',
|
|
|
+ time: '2012-12-12 12:23'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Silly science2',
|
|
|
+ author: 'TEENS',
|
|
|
+ creator: '张老师',
|
|
|
+ time: '2012-12-12 12:23'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Silly science3',
|
|
|
+ author: 'TEENS',
|
|
|
+ creator: '张老师',
|
|
|
+ time: '2012-12-12 12:23'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channelName: 'STORY LAND',
|
|
|
+ articleList: [],
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channelName: 'STORY LAND',
|
|
|
+ articleList: [],
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channelName: 'STORY LAND',
|
|
|
+ articleList: [],
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channelName: 'STORY LAND',
|
|
|
+ articleList: [],
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channelName: 'STORY LAND',
|
|
|
+ articleList: [],
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ channelName: 'STORY LAND',
|
|
|
+ articleList: [],
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ drag: false,
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -442,6 +569,15 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ handleDeleteArticle(item,i){
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ item.splice(i, 1);
|
|
|
+ });
|
|
|
+ },
|
|
|
// 去掉前后空格
|
|
|
handleTrim(form,fild){
|
|
|
this[form][fild] = this[form][fild].trim()
|
|
|
@@ -573,7 +709,19 @@ export default {
|
|
|
})
|
|
|
.catch(() => {
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 跳转文章
|
|
|
+ handleArticle(id,type){
|
|
|
+
|
|
|
+ },
|
|
|
+ //开始拖拽事件
|
|
|
+ onStart() {
|
|
|
+ this.drag = true;
|
|
|
+ },
|
|
|
+ //拖拽结束事件
|
|
|
+ onEnd() {
|
|
|
+ this.drag = false;
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
async created() {
|
|
|
@@ -695,6 +843,113 @@ export default {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
+.issue-channel{
|
|
|
+ .issue-top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ &-left{
|
|
|
+ margin: 0;
|
|
|
+ color: #1D2129;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 28px;
|
|
|
+ span{
|
|
|
+ margin-left: 4px;
|
|
|
+ color: #86909C;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .channel-item{
|
|
|
+ border: 1px solid #E5E6EB;
|
|
|
+ margin: 12px 0;
|
|
|
+ .channel-top{
|
|
|
+ display: flex;
|
|
|
+ padding: 9px 12px;
|
|
|
+ align-items: center;
|
|
|
+ .el-icon-caret-bottom,.el-icon-caret-top{
|
|
|
+ color: #4E5969;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ margin-left: 6px;
|
|
|
+ flex: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ word-break: break-word;
|
|
|
+ color: #1D2129;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .el-button--text{
|
|
|
+ padding: 2px 12px;
|
|
|
+ color: #165DFF;
|
|
|
+ .el-icon-plus{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .article-list{
|
|
|
+ margin: 0;
|
|
|
+ padding: 8px;
|
|
|
+ list-style: none;
|
|
|
+ background: #F7F8FA;
|
|
|
+ min-height: 44px;
|
|
|
+ border-top: 1px solid #E5E6EB;
|
|
|
+ li{
|
|
|
+ padding: 13px 20px;
|
|
|
+ border-bottom: 1px solid #E5E6EB;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .svg-icon{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: move;
|
|
|
+ }
|
|
|
+ .edit-article{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .items{
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 16px;
|
|
|
+ h6{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #1D2129;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border{
|
|
|
+ height: 12px;
|
|
|
+ width: 1px;
|
|
|
+ display: block;
|
|
|
+ background: #E5E6EB;
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ .el-icon-delete{
|
|
|
+ font-weight: bold;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.newspaper-create{
|
natasha
