修改剧本管理界面

src/router/index.js

@@ -36,7 +36,12 @@ import TrainingRuleList from '@/views/lesson/trainingRule/list';
 import TrainingRuleEdit from '@/views/lesson/trainingRule/detail/index';
 import Trainingmanage from '@/views/lesson/trainingmanage/index';
 import Lessoncategory from '@/views/lesson/lessoncategory/index';
-import Scriptmanage from '@/views/lesson/scriptmanage/list';
+// import Scriptmanage from '@/views/lesson/scriptmanage/list';
+
+import Scriptmanage from '@/views/scriptManage/index';
+import ScriptmanageHome from '@/views/scriptManage/home';
+
+import ScriptDetail from '@/views/scriptManage/detail/index';
 import Teach from '@/views/teach/index';
 import TeachHome from '@/views/teach/home';
 import TeachDetail from '@/views/teach/detail/index';
@@ -203,6 +208,10 @@ export const UrlConfig = {
 		authorDraft: '/orderauthor/author/draft',
 		transferDetail: '/orderauthor/transfer/detail',
 		trainferPackage: '/orderauthor/transfer/package'
+	},
+	script: {
+		prefix: '/script',
+		detail: '/script/detail'
 	}
 };
 
@@ -445,11 +454,26 @@ export const asyncRouter = [
 		},
 		children: [
 			{
-				path: 'scriptManage',
+				path: '',
+				redirect: '/script/home',
 				component: Scriptmanage,
 				meta: {
 					i18n: 'router.scriptManage'
-				}
+				},
+				children: [
+					{
+						path: 'home',
+						component: ScriptmanageHome,
+						meta: {
+							i18n: 'router.scriptManage'
+						}
+					},
+					{
+						path: 'detail/:scriptId',
+						component: ScriptDetail,
+						hidden: true
+					}
+				]
 			}
 		]
 	},

src/views/scriptManage/category/tree.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-card v-loading="loading" class="map-list-main">
+        <div slot="header" class="clearfix">
+            <span>地图列表</span>
+        </div>
+        <el-select v-model="mapSelect" size="medium" class="mapSelect"  @change="mapSelectChange">
+            <el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+        <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px', width:'100%' }">
+            <el-tree
+                ref="tree"
+                :data="treeList"
+                node-key="id"
+                :props="defaultProps"
+                highlight-current
+                :span="22"
+                @node-click="clickEvent"
+                @node-contextmenu="showContextMenu"
+            >
+                <span slot-scope="{ node:tnode, data }">
+                <span
+                    class="el-icon-tickets"
+                    :style="{color: data.valid ? 'green':''}"
+                >&nbsp;{{ tnode.label }}</span>
+                </span>
+            </el-tree>
+        </el-scrollbar>
+    </el-card>
+</template>
+<script>
+// import { getPublishLessonTree, getPublishLessonDetail } from '@/api/jmap/lesson';
+// import { PermissionType } from '@/scripts/ConstDic';
+import { UrlConfig } from '@/router/index';
+import { getQuestPageList,createQuest,deleteQuest,updateQuest} from '@/api/quest';
+import { listPublishMap } from '@/api/jmap/map';
+import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
+
+export default {
+	name: 'ScriptTree',
+	// components: {
+	// 	FilterCity
+	// },
+	props: {
+		height: {
+			type: Number,
+			required: true
+		}
+    },
+    created() {
+        this.loadInitData();
+    },
+	data() {
+		return {
+            loading: true,
+            mapList:[],
+            mapSelect:"",
+            treeData: [],
+			treeList: [],
+            defaultProps: {
+				children: 'children',
+                label: 'name',
+			},
+        }
+    },
+    mounted(){
+
+    },
+    methods:{
+        loadInitData() {
+            this.mapList = [];
+            listPublishMap().then(response => {
+                this.loading = false;
+                this.mapList = response.data;
+                this.mapSelect=this.mapList[0].id;
+                this.getQuestPageList(this.mapSelect);
+            })
+        },
+        mapSelectChange(id){
+            this.getQuestPageList(id);
+        },
+        getQuestPageList(id){
+            let params={mapId:id,pageSize:100,pageNum:1};
+            getQuestPageList(params).then(response => {
+                this.treeList=response.data.list;
+            }).catch((err) => {
+            });
+        },
+        showContextMenu(e, obj, node, vueElem) {
+			if (obj) {
+				this.node = node;
+				this.selected = obj;
+			}
+        },
+        clickEvent(obj, data, ele) {
+            setSessionStorage('scriptId', obj.id);
+            this.$router.push({ path: `${UrlConfig.script.detail}/${obj.id}` });
+		},
+    }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .mapSelect {
+        width:100%;
+    }
+</style>

src/views/scriptManage/detail/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <el-card>
+        <div slot="header" style="text-align: center;">
+        <b>剧本名称： {{ script.name }}</b>
+        </div>
+    </el-card>
+</template>
+<script>
+import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+export default {
+    name :"",
+    data() {
+		return {
+            script:{
+                name:"",
+            }
+        }
+    },
+    mixins: [
+		WindowResizeHandler
+    ],
+    watch: {
+		$route(newVal) {
+			this.initLoadPage();
+		}
+    },
+    mounted() {
+        this.initLoadPage();
+    },
+    methods:{
+        loadInitPage(){
+            debugger;
+        }
+    }
+}
+</script>

src/views/scriptManage/home.vue

@@ -0,0 +1,124 @@
+<template>
+      <el-card :style="{height: height+'px'}">
+          <div class="home-box">
+              <data-form ref="dataform" :form="form" :formModel="formModel" :rules="rules"></data-form>
+          </div>
+          <!-- <span slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="doCreate">确 定</el-button>
+              <el-button @click="doClose">取 消</el-button>
+          </span> -->
+      </el-card>
+</template>
+
+<script>
+    import { listPublishMap } from '@/api/jmap/map'
+    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+    import { getQuestById} from '@/api/quest';
+
+    export default {
+        name: 'ScriptDraft',
+        mixins: [WindowResizeHandler],
+        data() {
+            return {
+                dialogVisible: false,
+                mapList: [],
+                taskStatusList: [],
+                disabled:null,
+                formModel: {
+                    name: '',
+                    mapId: '',
+                    description:''
+                },
+                isShow: false,
+                height: 0,
+            }
+        },
+        props: {
+            title: String,
+        },
+        computed: {
+            form() {
+                let isAdd = this.type === 'ADD'
+                let form = {
+                    labelWidth: '100px',
+                    items: [
+                        { prop: 'name', label: '剧本名称', type: 'text', required: true},
+                        { prop: 'mapId', label: '地图', type: 'select', required: true, options: this.mapList,disabled:this.disabled},
+                        { prop: 'description', label: '剧本描述', type: 'textarea', required: true},
+                    ]
+                }
+                return form
+            },
+            rules() {
+                let crules = {
+                    name: [
+                        { required: true, message: '请输入剧本', trigger: 'blur' },
+                    ],
+                    mapId: [
+                        { required: true, message: '请选择地图', trigger: 'change' },
+                    ],
+                    description:[
+                        { required: true, message: '请输入剧本描述', trigger: 'blur' },
+                    ]
+                }
+                return crules
+            },
+            // title() {
+            //     return '创建剧本'
+            // }
+        },
+        mounted() {
+            this.loadInitData();
+        },
+        methods: {
+            resizeHandler() {
+              this.height = this._clientHeight - 50;
+            },
+            loadInitData() {
+                this.mapList = [];
+                listPublishMap().then(response => {
+                    this.mapList = response.data.map(elem => { return { value: elem.id, label: elem.name } });
+                })
+            },
+            doShow(questid) {
+                if(questid)
+                {
+                    getQuestById(questid).then(resp=>{
+                        let data={'name':resp.data.name,'description':resp.data.description,'mapId':resp.data.mapId};
+                        this.formModel=data;
+                        this.formModel.id=questid;
+                        this.disabled="disabled";
+                        this.dialogVisible = true
+                    });
+                }
+                else
+                {
+                    this.disabled=null;
+                    this.dialogVisible = true
+                }
+                
+            },
+            doCreate() {
+                let self = this
+                this.$refs.dataform.validateForm(() => {
+                    self.$emit('create', Object.assign({}, this.formModel));
+                    self.doClose()
+                })
+            },
+            doClose() {
+                this.$refs.dataform.resetForm();
+                this.isShow = false;
+                this.dialogVisible = false
+            }
+        }
+    }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+    .home-box {
+        padding: 15px 100px;
+        float: left;
+        width: 100%;
+        font-family: 'Microsoft YaHei';
+    }
+</style>

src/views/scriptManage/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="app-wrapper">
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <div v-show="treeShow" class="list" :style="{width: widthLeft+'px'}">
+        <script-tree ref="tree" :height="height" />
+      </div>
+      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
+      <transition>
+        <router-view />
+      </transition>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+    import ScriptTree from './category/tree';
+    import drapLeft from '@/views/components/drapLeft/index';
+    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
+    export default {
+        name: 'Script',
+        components: {
+            ScriptTree,
+            drapLeft
+        },
+        mixins: [WindowResizeHandler],
+        data() {
+            return {
+                height: 0,
+                treeShow: true,
+                widthLeft: 450
+            };
+        },
+        methods: {
+            resizeHandler() {
+                this.height = this._clientHeight - 50;
+            },
+            drapWidth(width) {
+                this.widthLeft = Number(width);
+            },
+            // refresh(filterSelect) {
+            //     this.$refs && this.$refs.tree && this.$refs.tree.refresh(filterSelect);
+            // }
+        }
+    }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .list {
+    float: left;
+  }
+</style>