jufubao-admin-library 1.0.0 → 1.1.2

package/library/pageComponents/JfbPage.js

@@ -0,0 +1,95 @@
+'use strict';
+import Loading from "./Loading";
+
+/**
+ * @description 获取权限值
+ * @param $vm
+ * @returns {{}}
+ */
+function getCurrentRouteRoles($vm){
+  let temp = {};
+  let parent = $vm.$route.matched.filter(item=>{
+    return item.parent === undefined
+  });
+
+  if(parent.length > 0) {
+    try {
+      temp = parent[0]['meta']['rolesList'];
+      if (temp === undefined) {
+        throw new Error('未找到')
+      }
+    }catch (e) {
+      console.warn(`未找到权限对象值：${JSON.stringify(parent[0]['meta'])}`)
+      return {}
+    }
+  }
+  return temp
+}
+
+export default ($vm, ele, options, $vue)=>{
+  return new Promise((resolve, reject)=>{
+    let vueOptions = {
+      el: document.createElement('div'),
+    };
+    ['mixins', 'watch', 'computed', 'methods', 'filters', 'store', 'router'].map(key=>{
+      if(options[key] !== undefined) {
+        vueOptions[key] = options[key];
+        delete options[key]
+      }
+    });
+
+    let JfbRoles = getCurrentRouteRoles($vm);
+    vueOptions.data = ()=>{
+      return {
+        ...options,
+        JfbParent : $vm,
+        JfbRoles,
+        $loading: Loading.service
+      }
+    };
+
+
+    //获取被使用插件库
+    let App = null;
+    let keys = [];
+    Object.keys(Loading).map(key=>{
+      if(options.name === key) App = Loading[key];
+      keys.push(key)
+    });
+
+    //未找到插件库
+    if(App === null){
+      let message = `当前组件名字：${options.name}, 所有组件键值：${JSON.stringify(keys)}`;
+      console.warn(message);
+      throw new Error(message)
+    }
+
+    vueOptions['destroyed'] = ()=>{
+      if($node) $node= null;
+    };
+
+    //初始化插件
+    const app = $vue.extend(App);
+    let $node = new app(vueOptions);
+
+    //挂在节点
+    $vm.$nextTick(()=>{
+      if(ele === 'body') {
+        document.body.appendChild($node.$el);
+      }
+      else{
+        let elx = document.getElementById(ele);
+        if(elx.hasChildNodes()) {
+          while (elx.firstChild) {
+            elx.removeChild(elx.firstChild)
+          }
+        }
+        elx.appendChild($node.$el);
+      }
+      $node.$nextTick(()=>{
+        resolve($node)
+      })
+    });
+  });
+}
+

package/library/pageComponents/Loading.js

@@ -0,0 +1,17 @@
+'use strict';
+
+// https://webpack.js.org/guides/dependency-management/#requirecontext
+const modulesFiles = require['context']('./modules', false, /\.vue$/);
+
+// you do not need `import app from './modules/app'`
+// it will auto require all vuex module from modules file
+const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
+  const value = modulesFiles(modulePath)
+  modules[moduleName] = value.default
+  return modules
+}, {});
+
+export default {...modules}
+

package/library/pageComponents/index.js

@@ -0,0 +1,20 @@
+'use strict';
+import JfbPage from "./JfbPage";
+
+// 定义 install 方法
+const install = function (Vue, opt) {
+  if (install.installed) return;
+  install.installed = true;
+
+  Vue.prototype.JfbPage = ($vm , ele, options) => {
+    return JfbPage($vm, ele, Object.assign({}, opt, options), Vue);
+  };
+};
+
+if (typeof window !== 'undefined' && window['Vue']) {
+  install(window['Vue'])
+}
+
+export default {
+  install
+}

package/library/pageComponents/modules/JfbChannelSearch.vue

@@ -0,0 +1,135 @@
+<template>
+	<div v-if="showOpen">
+		<div class="main-tab">
+			<el-tabs
+				type="card"
+				v-model="channelActiveName"
+				v-if="channelTabList.length > 0"
+				@tab-click="handleTabClick"
+			>
+				<el-tab-pane
+					v-for="item in channelTabList"
+					:label="item.label"
+					:name="item.value"
+					:key="item.value"
+				></el-tab-pane>
+			</el-tabs>
+		</div>
+	</div>
+</template>
+
+<script>
+  import {getOptions} from "@/utils/options";
+  import XdSearch from "@/components/XdSearch";
+  import {mapActions, mapState} from "vuex";
+  
+  export default {
+    name: "JfbChannelSearch",
+		components:{
+      XdSearch
+		},
+		data(){
+      return{
+        //tab
+        channelActiveName: '',
+        channelStatus: false,
+        channelTabList: [],
+        channelFirstInit:true, //是否为第一次加载渠道
+				
+				showOpen : false,
+			}
+		},
+		computed:{
+      ...mapState(['commonParams']),
+		},
+		async created(){
+      this.cookieKey = `${this.commonParams.xsiteid}.${this.commonParams.xnamespace}.${this.pagesType}.channel`;
+      this.showOpen = this.isOpen;
+      
+      if(this.showOpen) {
+        //supplier-partner/v1/supplier-channel/options
+        let channelTabList = await getOptions({
+          server: this.channelServer || 'supplier-partner',
+          fn: 'supplier-channel',
+          path: 'p1',
+          params: this.channelParams
+        });
+        let all = [{label: '全部', value: 'all'}];
+        this.channelTabList = all.concat(channelTabList.data.list);
+        this.channelActiveName = xdCookie.get(this.cookieKey) || this.channelTabList[0].value;
+        if (typeof this.JfbParent.getList === 'function') {
+          this.JfbParent.getList({
+            channel_code: this.channelActiveName
+          })
+        }
+			}
+      else {
+        this.JfbParent.getList({})
+			}
+			
+		},
+		methods:{
+      getParams(){
+        if(this.showOpen === false) return  {}
+        return { channel_code: this.channelActiveName }
+			},
+      handleTabClick() {
+        xdCookie.set(this.cookieKey, this.channelActiveName, {expires: 30 * 24});
+        if (typeof this.JfbParent.getList === 'function') {
+          this.JfbParent.getList(this.getParams())
+        }
+      },
+			
+			getChannelCode(){
+        if (typeof this.JfbParent.getList === 'function') {
+          this.JfbParent.getList(this.getParams())
+        }
+			},
+			
+			getChannelName(channel_code){
+        if(!channel_code) return '';
+        let item =  this.channelTabList.filter(item=>{
+          return channel_code === item.value;
+				});
+        if(item.length > 0) return item[0].label;
+        else return channel_code
+			},
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+ ::v-deep {
+	 .el-tabs--card > .el-tabs__header .el-tabs__item {
+		 background: #f8f8f8;
+		 border-bottom: 1px solid #dfe4ed!important;
+		 &.is-top.is-active {
+			 &:first-child {
+				 border-radius: 2px 0 0 0;
+			 }
+			
+			 &:last-child {
+				 border-radius: 0 2px 0 0;
+			 }
+			 background: $blue;
+			 border-bottom: 1px solid $blue !important;
+			 color: #fff!important;
+		 }
+	 }
+ }
+
+ @media screen and (max-width: 768px) {
+	 ::v-deep {
+		 & .el-tabs__item {
+			 height: 30px;
+			 line-height: 30px;
+		 }
+		
+		 & .el-tabs__nav-next, .el-tabs__nav-prev {
+			 line-height: 30px;
+		 }
+	 }
+ }
+
+</style>