|
|
@@ -0,0 +1,148 @@
|
|
|
+<!-- 页面排序 -->
|
|
|
+<template>
|
|
|
+ <div class="hello">
|
|
|
+ <Header> </Header>
|
|
|
+
|
|
|
+ <el-container class="container-narrow">
|
|
|
+
|
|
|
+ <el-dialog :title="$t('sort_pages')" :modal="is_modal" :visible.sync="dialogTableVisible" >
|
|
|
+ <div class="dialog-body">
|
|
|
+ <p class="tips" >{{$t('sort_pages_tips')}}</p>
|
|
|
+ <el-select :placeholder="$t('optional')" class="select-cat" v-model="cat_id">
|
|
|
+ <el-option v-if="belong_to_catalogs" v-for="cat in belong_to_catalogs " :key="cat.cat_name" :label="cat.cat_name" :value="cat.cat_id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <draggable v-model="pages" tag="div" group="page" @end="endMove">
|
|
|
+ <div class="page-box" v-for="page in pages">
|
|
|
+ <span class='page-name'>{{page.page_title}}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </el-container>
|
|
|
+ <Footer> </Footer>
|
|
|
+ <div class=""></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dialog-body{
|
|
|
+ min-height: 400px;
|
|
|
+ max-height: 90%;
|
|
|
+ overflow-x:hidden;
|
|
|
+ overflow-y:auto;
|
|
|
+}
|
|
|
+.page-box{
|
|
|
+ background-color:rgb(250, 250, 250);
|
|
|
+ width: 98%;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+.page-name{
|
|
|
+ line-height: 40px;
|
|
|
+ margin-left: 20px;
|
|
|
+ color: #262626;
|
|
|
+}
|
|
|
+.tips{
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #9ea1a6;
|
|
|
+ font-size: 11px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<script>
|
|
|
+import draggable from 'vuedraggable'
|
|
|
+export default {
|
|
|
+ props:{
|
|
|
+ callback:'',
|
|
|
+ page_id:'',
|
|
|
+ item_id:'',
|
|
|
+ is_modal:true,
|
|
|
+ belong_to_catalogs:[],
|
|
|
+ cat_id:''
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ currentDate: new Date(),
|
|
|
+ dialogTableVisible: false,
|
|
|
+ pages:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ draggable
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ show(){
|
|
|
+ this.dialogTableVisible = true ;
|
|
|
+ },
|
|
|
+ //获取某目录下的所有页面
|
|
|
+ get_pages(){
|
|
|
+ var that = this ;
|
|
|
+ var url = DocConfig.server+'/api/catalog/getPagesBycat';
|
|
|
+ var params = new URLSearchParams();
|
|
|
+ params.append('item_id', this.item_id);
|
|
|
+ params.append('cat_id', this.cat_id);
|
|
|
+ that.axios.post(url, params)
|
|
|
+ .then(function (response) {
|
|
|
+ if (response.data.error_code === 0 ) {
|
|
|
+ that.pages = response.data.data ;
|
|
|
+ }else{
|
|
|
+ that.$alert(response.data.error_message);
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ endMove(evt){
|
|
|
+ let data = {} ;
|
|
|
+ for (var i = 0; i < this.pages.length; i++) {
|
|
|
+ let key = this.pages[i]['page_id'] ;
|
|
|
+ data[key] = i + 1 ;
|
|
|
+ };
|
|
|
+ this.sort_page(data);
|
|
|
+ },
|
|
|
+ sort_page(data){
|
|
|
+ var that = this ;
|
|
|
+ var url = DocConfig.server+'/api/page/sort';
|
|
|
+ var params = new URLSearchParams();
|
|
|
+ params.append('pages', JSON.stringify(data));
|
|
|
+ params.append('item_id', this.item_id);
|
|
|
+ that.axios.post(url, params)
|
|
|
+ .then(function (response) {
|
|
|
+ if (response.data.error_code === 0 ) {
|
|
|
+ that.get_pages();
|
|
|
+ //window.location.reload();
|
|
|
+
|
|
|
+ }else{
|
|
|
+ that.$alert(response.data.error_message,'',{
|
|
|
+ callback:function(){
|
|
|
+ window.location.reload();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ cat_id:function(){
|
|
|
+ this.get_pages();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
star7th